Style updates.

Author: hunterjam

frontend/src/pages/chat/Chat.module.css

@@ -21,9 +21,9 @@
   flex-direction: column;
   align-items: center;
   background: radial-gradient(108.78% 108.78% at 50.02% 19.78%, #ffffff 57.29%, #eef6fe 100%);
-  box-shadow:
+  /* box-shadow:
     0px 2px 4px rgba(0, 0, 0, 0.14),
-    0px 0px 2px rgba(0, 0, 0, 0.12);
+    0px 0px 2px rgba(0, 0, 0, 0.12); */
   border-radius: 8px;
   overflow-y: auto;
   max-height: calc(100vh - 100px);

frontend/src/pages/draft/Draft.module.css

@@ -6,4 +6,16 @@
     background-color: #FAF9F8;
     padding: 2rem 2rem;
     overflow-y: auto;
-}
+}
+
+.exportDocumentIcon {
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;
+    width: 180px;
+    height: 40px;
+    color: #ffffff;
+    border-radius: 4px;
+    z-index: 1;
+    align-self: center;
+  }

frontend/src/pages/draft/Draft.tsx

@@ -3,16 +3,15 @@ import styles from './Draft.module.css'
 import { useLocation } from 'react-router-dom';
 import TitleCard from '../../components/DraftCards/TitleCard'
 import SectionCard from '../../components/DraftCards/SectionCard'
-import { DraftedDocument } from '../../api'
 import { Document, Packer, Paragraph, TextRun } from 'docx';
 import { saveAs } from 'file-saver';
 import { AppStateContext } from "../../state/AppProvider";
+import { CommandBarButton, Stack } from '@fluentui/react';
 
 
 const Draft = (): JSX.Element => {
   const appStateContext = useContext(AppStateContext)
   const location = useLocation();
-  const { generateContentOnLoad } = location.state as { generateContentOnLoad: Boolean };
   const [title, setTitle] = useState('');
 
   // get draftedDocument from context
@@ -65,23 +64,51 @@ const Draft = (): JSX.Element => {
     });
 
     Packer.toBlob(doc).then(blob => {
-      saveAs(blob, `DraftTemplate-${title}.docx`);
+      saveAs(blob, `DraftTemplate-${sanitizeTitle(title)}.docx`);
     });
   };
 
   const handleTitleChange = (newTitle: string) => {
     setTitle(newTitle);
   };
 
+  function sanitizeTitle(title: string): string {
+    return title.replace(/[^a-zA-Z0-9]/g, '');
+  }
+
   return (
     <div className={styles.container}>
       <div style={{ display: 'flex', justifyContent: 'start', alignItems: 'center' }}>
         <h4>Draft Document</h4>
-        <button onClick={exportToWord} style={{ marginLeft: 'auto' }}>Export to Word</button>
       </div>
 
       <TitleCard onTitleChange={handleTitleChange} />
       {(sections ?? []).map((_, index) => (<SectionCard key={index} sectionIdx={index} />))}
+      <Stack>
+        <CommandBarButton
+                  role="button"
+                  styles={{
+                    icon: {
+                      color: '#FFFFFF'
+                    },
+                    iconDisabled: {
+                      color: '#BDBDBD !important'
+                    },
+                    root: {
+                      color: '#FFFFFF',
+                      background: '#1367CF'
+                    },
+                    rootDisabled: {
+                      background: '#F0F0F0'
+                    }
+                  }}
+                  className={styles.exportDocumentIcon}
+                  iconProps={{ iconName: 'WordDocument' }}
+                  onClick={exportToWord} //Update for Document Generation
+                  aria-label="export document"
+                  text="Export Document"
+                />
+      </Stack>
     </div>
   )
 }