Refactored styles to theme.jsx

bluewave-labs · Dec 24, 2024 · a1c165e · a1c165e
1 parent 370bf11
commit a1c165e
Show file tree

Hide file tree

Showing 9 changed files with 71 additions and 108 deletions.
diff --git a/frontend/dist/index.html b/frontend/dist/index.html
@@ -5,8 +5,8 @@
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>Bluewave Onboarding</title>
-      <script type="module" crossorigin src="/assets/index-CSUaIvQz.js"></script>
-      <link rel="stylesheet" crossorigin href="/assets/index-EhLntcaF.css">
+      <script type="module" crossorigin src="/assets/index-D5CQAkNt.js"></script>
+      <link rel="stylesheet" crossorigin href="/assets/index-CAHgKvIG.css">
     </head>
 
     <body>

diff --git a/frontend/src/assets/theme.jsx b/frontend/src/assets/theme.jsx
@@ -29,6 +29,24 @@ export const lightTheme = createTheme({
         },
       },
     },
+    MuiTabPanel: {
+      styleOverrides: {
+        root: {
+          padding: 0,
+        },
+      },
+    },
+    MuiMenuItem: {
+      styleOverrides: {
+        root: {
+          margin: "0px 5px !important",
+          "&.Mui-selected": {
+            backgroundColor: "#F9FAFB !important",
+            borderRadius: "8px !important",
+          },
+        },
+      },
+    },
     MuiDrawer: {
       styleOverrides: {
         paper: {
@@ -38,6 +56,19 @@ export const lightTheme = createTheme({
         },
       },
     },
+    MuiOutlinedInput: {
+      styleOverrides: {
+        root: {
+          borderRadius: "8px",
+          "&:hover .MuiOutlinedInput-notchedOutline": {
+            borderColor: "var(--main-purple)",
+          },
+          "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+            borderColor: "var(--main-purple)",
+          },
+        },
+      },
+    },
     MuiButtonBase: {
       defaultProps: {
         disableRipple: true,
@@ -69,6 +100,33 @@ export const darkTheme = createTheme({
         },
       },
     },
+    MuiTab: {
+      styleOverrides: {
+        root: {
+          textTransform: "none",
+          fontSize: "14px",
+          padding: "3px 9px",
+        },
+      },
+    },
+    MuiTabPanel: {
+      styleOverrides: {
+        root: {
+          padding: 0,
+        },
+      },
+    },
+    MuiMenuItem: {
+      styleOverrides: {
+        root: {
+          margin: "0px 5px !important",
+          "&.Mui-selected": {
+            backgroundColor: "#F9FAFB !important",
+            borderRadius: "8px !important",
+          },
+        },
+      },
+    },
     MuiDrawer: {
       styleOverrides: {
         paper: {
@@ -78,12 +136,16 @@ export const darkTheme = createTheme({
         },
       },
     },
-    MuiTab: {
+    MuiOutlinedInput: {
       styleOverrides: {
         root: {
-          textTransform: "none",
-          fontSize: "14px",
-          padding: "3px 9px",
+          borderRadius: "8px",
+          "&:hover .MuiOutlinedInput-notchedOutline": {
+            borderColor: "var(--main-purple)",
+          },
+          "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+            borderColor: "var(--main-purple)",
+          },
         },
       },
     },

diff --git a/frontend/src/components/ColorTextField/ColorTextField.module.scss b/frontend/src/components/ColorTextField/ColorTextField.module.scss
@@ -2,22 +2,6 @@
 
 .colorTextField {
 
-    :global {
-        .MuiOutlinedInput-root {
-            &:hover fieldset {
-                border-color: var(--main-purple);
-            }
-
-            &.Mui-focused fieldset {
-                border-color: var(--main-purple);
-            }
-
-        }
-        .MuiOutlinedInput-root {
-            border-radius: 8px;
-        }
-    }
-
     input {
         font-size: var(--font-regular);
         height: 34px;

diff --git a/frontend/src/components/DropdownList/DropdownList.css b/frontend/src/components/DropdownList/DropdownList.css
@@ -13,11 +13,3 @@
     font-size: var(--font-regular) !important;
 }
 
-.MuiMenuItem-root.Mui-selected {
-    background-color: #F9FAFB !important;
-    border-radius: 8px !important;
-}
-
-.MuiMenuItem-root {
-    margin: 0px 5px !important;
-}
diff --git a/frontend/src/components/HeadingTabs/HeadingTabs.jsx b/frontend/src/components/HeadingTabs/HeadingTabs.jsx
diff --git a/frontend/src/components/HeadingTabs/TabStyles.css b/frontend/src/components/HeadingTabs/TabStyles.css
diff --git a/frontend/src/components/TextFieldComponents/CustomTextField/CustomTextFieldStyles.css b/frontend/src/components/TextFieldComponents/CustomTextField/CustomTextFieldStyles.css
@@ -24,14 +24,4 @@
   }
   border-radius: 8px !important;
 
-}
-
-.textField .MuiButton-root {
-  font-size: var(--font-regular);
-  color: var(--second-text-color);
-}
-
-.MuiBox-root .MuiInputLabel-root {
-  font-size: var(--font-regular);
-  color: var(--second-text-color);
-}
+}
diff --git a/frontend/src/scenes/settings/TeamTab/TeamTab.module.css b/frontend/src/scenes/settings/TeamTab/TeamTab.module.css
@@ -39,10 +39,6 @@ h6 {
     font-weight: 600;
 }
 
-.MuiTabPanel-root {
-    padding: 0
-}
-
 .pencil {
     cursor: pointer;
 }

diff --git a/frontend/src/utils/constants.js b/frontend/src/utils/constants.js
@@ -1,9 +1,9 @@
 // API constants
 //local environment
-// export const API_BASE_URL = 'http://localhost:3000/api/';
+export const API_BASE_URL = 'http://localhost:3000/api/';
 
 //staging environment
-export const API_BASE_URL = 'https://onboarding-demo.bluewavelabs.ca/api/';
+// export const API_BASE_URL = 'https://onboarding-demo.bluewavelabs.ca/api/';
 // Other constants
 export const APP_TITLE = 'Bluewave Onboarding';
 export const SUPPORT_EMAIL = '[email protected]';