Address PR feedback

patternfly · Aug 22, 2024 · 15c6828 · 15c6828
1 parent 09c1b3e
commit 15c6828
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 25 deletions.
diff --git a/packages/module/src/AttachmentEdit/AttachmentEdit.scss b/packages/module/src/AttachmentEdit/AttachmentEdit.scss
@@ -1,14 +1,11 @@
 .pf-chatbot__attachment-language {
-  color: var(--pf-t--color--gray--50);
-  font-size: var(--pf-t--global--font--size--100);
+  color: var(--pf-t--global--text--color--subtle);
+  font-size: var(--pf-t--global--icon--size--font--xs);
 }
 
 .pf-chatbot__attachment-icon {
-  background-color: var(--pf-t--color--teal--50);
+  background-color: var(--pf-t--global--icon--color--status--custom--default);
   border-radius: var(--pf-t--global--border--radius--tiny);
-  display: flex;
-  align-items: center;
-  justify-content: center;
   width: 24px;
   height: 24px;
 }
diff --git a/packages/module/src/AttachmentEdit/AttachmentEdit.tsx b/packages/module/src/AttachmentEdit/AttachmentEdit.tsx
@@ -6,17 +6,31 @@ import path from 'path';
 
 // Import PatternFly components
 import { CodeEditor, Language } from '@patternfly/react-code-editor';
-import { Button, Flex, FlexItem, Icon, Modal, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core';
+import {
+  Button,
+  Flex,
+  Icon,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  Stack,
+  StackItem
+} from '@patternfly/react-core';
 import { CodeIcon } from '@patternfly/react-icons';
 
 export interface AttachmentEditProps {
   /** Text shown in code editor */
   code: string;
   /** Filename, including extension, of file shown in editor */
   fileName: string;
+  /** Function that runs when cancel button is clicked  */
   onCancel: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
+  /** Function that runs when save button is clicked  */
   onSave: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
+  /** Function that opens and closes modal */
   handleModalToggle: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
+  /** Whether modal is open */
   isModalOpen: boolean;
   /** Title of modal */
   title?: string;
@@ -59,25 +73,28 @@ export const AttachmentEdit: React.FunctionComponent<AttachmentEditProps> = ({
     >
       <ModalHeader title={title} labelId="edit-attachment-title" />
       <ModalBody id="edit-attachment-body">
-        <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsMd' }}>
-          <FlexItem>
-            <Flex spaceItems={{ default: 'spaceItemsMd' }}>
-              <Flex alignSelf={{ default: 'alignSelfCenter' }}>
-                <FlexItem className="pf-chatbot__attachment-icon">
-                  <Icon>
-                    <CodeIcon color="white" />
-                  </Icon>
-                </FlexItem>
+        <Stack hasGutter>
+          <StackItem>
+            <Flex>
+              <Flex
+                className="pf-chatbot__attachment-icon"
+                justifyContent={{ default: 'justifyContentCenter' }}
+                alignItems={{ default: 'alignItemsCenter' }}
+                alignSelf={{ default: 'alignSelfCenter' }}
+              >
+                <Icon>
+                  <CodeIcon color="white" />
+                </Icon>
               </Flex>
-              <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsNone' }}>
-                <FlexItem>{path.parse(fileName).name}</FlexItem>
-                <FlexItem className="pf-chatbot__attachment-language">
+              <Stack>
+                <StackItem>{path.parse(fileName).name}</StackItem>
+                <StackItem className="pf-chatbot__attachment-language">
                   {Language[path.extname(fileName).slice(1)].toUpperCase()}
-                </FlexItem>
-              </Flex>
+                </StackItem>
+              </Stack>
             </Flex>
-          </FlexItem>
-          <FlexItem>
+          </StackItem>
+          <StackItem>
             <CodeEditor
               isDarkTheme
               isLineNumbersVisible
@@ -88,8 +105,8 @@ export const AttachmentEdit: React.FunctionComponent<AttachmentEditProps> = ({
               height="400px"
               {...props}
             />
-          </FlexItem>
-        </Flex>
+          </StackItem>
+        </Stack>
       </ModalBody>
       <ModalFooter>
         <Button isBlock key="confirm" variant="primary" onClick={handleSave}>