Hover styling on export button

Author: atvanek

app/src/components/right/ExportButton.tsx

@@ -15,9 +15,7 @@ export default function ExportButton() {
   const [modal, setModal] = useState(null);
   const state = useSelector((store: RootState) => store.appState);
 
-  const genOptions: string[] = [
-    'Export components'
-  ];
+  const genOptions: string[] = ['Export components'];
 
   // Closes out the open modal
   const closeModal = () => setModal('');
@@ -27,6 +25,7 @@ export default function ExportButton() {
       <List className="export-preference">
         {genOptions.map((option: string, i: number) => (
           <ListItem
+            id="export-modal"
             key={i}
             onClick={() => chooseGenOptions()}
             style={{
@@ -60,7 +59,7 @@ export default function ExportButton() {
     );
   };
 
-  const exportKeyBind = useCallback(e => {
+  const exportKeyBind = useCallback((e) => {
     //Export Project
     (e.key === 'e' && e.metaKey) || (e.key === 'e' && e.ctrlKey)
       ? showGenerateAppModal()
@@ -75,10 +74,18 @@ export default function ExportButton() {
   }, []);
   return (
     <div>
-      <button onClick={showGenerateAppModal}>Export Project
-        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-download" viewBox="0 0 16 16">
-          <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
-          <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
+      <button onClick={showGenerateAppModal}>
+        Export Project
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          className="bi bi-download"
+          viewBox="0 0 16 16"
+        >
+          <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z" />
+          <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z" />
         </svg>
       </button>
       {modal}
@@ -90,7 +97,6 @@ export default function ExportButton() {
 //The below code is exclusive to ReacType's Electron App
 //If you would like to deploy the app, please comment out the exportButton function above and uncomment the code below
 
-
 // export default function ExportButton() {
 //   const [modal, setModal] = useState(null);
 //   const state = useSelector(store => store.appState)

app/src/public/styles/style.css

@@ -121,6 +121,11 @@ LEFT COLUMN
   align-self: center;
 }
 
+span.material-symbols-outlined {
+  padding: 1px;
+  font-size: 18px;
+}
+
 .left {
   padding: 0px;
   display: flex;
@@ -328,15 +333,20 @@ h1 {
 }
 
 .export-preference div span {
-  transition: color 1s, background-color 1.5s, transform 2s;
+  transition: .5s
 }
 
-.export-preference div:hover {
+#export-modal {
+  transition: .5s
+}
+
+#export-modal:hover {
   background-color: #303f9f;
+  cursor: pointer;
 }
 
-.export-preference div:hover span {
-  color: white;
+#export-modal:hover span {
+  color: white
 }
 
 .info {