commit deabd2876cfcc7bc63eb26fe30f17508d6179d95
author idillon-sfl <io.daza-dillon@savoirfairelinux.com> Thu Aug 25 22:50:03 2022 -0400
committer idillon <io.daza-dillon@savoirfairelinux.com> Fri Sep 16 17:14:07 2022 -0400
tree 5214430603eb3936faa5bc2318564e9e114b3696
parent 837ea0b5ebfc11ea0aed5d76e2f426a08844fb98

use palette for colors

Change-Id: Id46f298fde643dba4ebadedcee2816d0141cae10

client/src/components/buttons.js

diff --git a/client/src/components/buttons.js b/client/src/components/buttons.js
index 620d0aa..1233369 100644
--- a/client/src/components/buttons.js
+++ b/client/src/components/buttons.js
@@ -8,18 +8,18 @@
             <Icon fontSize="inherit"/>
         </IconButton>
     )
-)(() => ({
-    border: "1px solid #005699",
-    color: "#005699",
+)(({theme}) => ({
+    border: `1px solid ${theme.palette.primary.dark}`,
+    color: theme.palette.primary.dark,
     height: "53px",
     width: "53px",
     fontSize: "15px",
     "&:hover": {
-        background: "#0056991A",
+        background: theme.palette.primary.light,
     },
     "&:active": {
         color: "#FFF",
-        background: "#005699",
+        background: theme.palette.primary.dark,
     },
 }));
 

client/src/themes/default.js

diff --git a/client/src/themes/default.js b/client/src/themes/default.js
index 11c3193..4de4f94 100644
--- a/client/src/themes/default.js
+++ b/client/src/themes/default.js
@@ -1,6 +1,22 @@
 import { createTheme } from "@mui/material";
 
-export default createTheme({
+const theme = createTheme({
+  palette: {
+    primary: {
+      light: "#E5EEF5", // same as "#0056991A"
+      main: "#0071C9",
+      dark: "#005699",
+    },
+    error: {
+      main: "#CC0022",
+    },
+    success: {
+      main: "#009980",
+    },
+  },
+})
+
+export default createTheme(theme, {
   typography: {
     fontFamily: "Ubuntu",
     h1: {
@@ -58,32 +74,29 @@
           height: "36px",
         },
         contained: {
-          background: "#005699",
+          background: theme.palette.primary.dark,
           "&:hover": {
-            background: "#0071C9",
+            background: theme.palette.primary.main,
           },
         },
         outlined: {
           background: "#FFF",
           borderColor: "#0056995C",
-          color: "#005699",
+          color: theme.palette.primary.dark,
           "&:hover": {
-            background: "#0056991A",
-            borderColor: "#005699",
+            background: theme.palette.primary.light,
+            borderColor: theme.palette.primary.dark,
           },
         },
         text: {
           background: "#fff",
-          color: "#005699",
+          color: theme.palette.primary.dark,
           "&:hover": {
-            background: "#0056991A",
+            background: theme.palette.primary.light,
           },
         },
       },
     },
-    MuiTextField: {
-
-    },
     MuiSwitch: {
       defaultProps: {
         disableRipple: true,
@@ -103,7 +116,7 @@
         thumb: {
           width: "28px",
           height: "28px",
-          border: "1px solid #005699",
+          border: `1px solid ${theme.palette.primary.dark}`,
           ".Mui-checked.Mui-checked &": {
             width: "30px",
             height: "30px",
@@ -111,18 +124,18 @@
           }
         },
         track: {
-          backgroundColor: "#0056991A",
+          backgroundColor: theme.palette.primary.light,
           borderRadius: "30px",
           opacity: 1,
           ".Mui-checked.Mui-checked + &": {
-            backgroundColor: "#0056991A",
+            backgroundColor: theme.palette.primary.light,
             opacity: 1,
           }
         },
         colorPrimary: {
           color: "#fff",
           "&.Mui-checked": {
-            color: "#005699",
+            color: theme.palette.primary.dark,
           },
         },
       },
@@ -186,4 +199,4 @@
       `,
     },
   },
-});
+})