created button variant for error with white text (#1952)

hackforla · Nov 14, 2024 · 2bbd4cc · 2bbd4cc
1 parent 97473b4
commit 2bbd4cc
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 17 deletions.
diff --git a/client/src/components/Button/Button.jsx b/client/src/components/Button/Button.jsx
@@ -61,6 +61,18 @@ const useStyles = createUseStyles(theme => ({
       backgroundColor: theme.colors.warning, // Solid red background on hover
       boxShadow: "rgba(0, 46, 109, 0.4) 2px 4px 6px" // Heavier box shadow on hover
     }
+  },
+  error: {
+    backgroundColor: theme.colorError,
+    color: "white",
+    borderColor: "rgba(0, 0, 0, .05)", //lightest grey
+    boxShadow: "rgba(0, 46, 109, 0.3) 1px 2px 3px",
+    "&[disabled]:hover": {
+      boxShadow: "rgba(0, 46, 109, 0.3) 1px 2px 3px"
+    },
+    "&:hover": {
+      boxShadow: "rgba(0, 46, 109, 0.6) 2px 4px 6px" // Heavier box shadow on hover
+    }
   }
 }));
 

diff --git a/client/src/components/Faq/DeleteFaqModal.jsx b/client/src/components/Faq/DeleteFaqModal.jsx
@@ -46,7 +46,7 @@ const DeleteFaqModal = ({ isModalOpen, closeModal, handleDelete, isFaq }) => {
         <Button onClick={closeModal} variant="outlined" id="cancelButton">
           Cancel
         </Button>
-        <Button onClick={handleDelete} variant="contained" color={"colorError"}>
+        <Button onClick={handleDelete} variant="error">
           Delete
         </Button>
       </div>

diff --git a/client/src/components/ProjectWizard/NavConfirmDialog.jsx b/client/src/components/ProjectWizard/NavConfirmDialog.jsx
@@ -54,7 +54,7 @@ const NavConfirmDialog = ({ blocker }) => {
           Cancel
         </Button>
         <Button
-          color="colorError"
+          variant="error"
           id="modalProceed"
           data-testid="transitionProceed"
           onClick={() => blocker.proceed()}

diff --git a/client/src/components/Projects/CsvModal.jsx b/client/src/components/Projects/CsvModal.jsx
@@ -165,11 +165,7 @@ const CsvModal = ({
           </Button>
 
           {(project || projectCollection) && !loading && !csvData && (
-            <Button
-              onClick={handleGenerateButton}
-              variant="contained"
-              color={"colorError"}
-            >
+            <Button onClick={handleGenerateButton} variant="error">
               Generate File
             </Button>
           )}

diff --git a/client/src/components/Projects/DeleteProjectModal.jsx b/client/src/components/Projects/DeleteProjectModal.jsx
@@ -72,19 +72,11 @@ const DeleteProjectModal = ({ mounted, onClose, project }) => {
           Cancel
         </Button>
         {project.dateTrashed ? (
-          <Button
-            onClick={() => onClose("ok")}
-            variant="contained"
-            color={"colorError"}
-          >
+          <Button onClick={() => onClose("ok")} variant="error">
             Restore
           </Button>
         ) : (
-          <Button
-            onClick={() => onClose("ok")}
-            variant="contained"
-            color={"colorError"}
-          >
+          <Button onClick={() => onClose("ok")} variant="error">
             Delete
           </Button>
         )}