#44 added new vars and header switch styling

MetaCell · Nov 4, 2022 · 9538724 · 9538724
1 parent 1762cf6
commit 9538724
Show file tree

Hide file tree

Showing 2 changed files with 90 additions and 32 deletions.
diff --git a/src/assets/styles/variables.js b/src/assets/styles/variables.js
@@ -49,8 +49,8 @@ const vars = {
   chipPrimaryTextColor: 'rgba(255, 255, 255, 0.8)',
   chipPrimaryBgColor: 'rgba(0, 122, 255, 0.6)',
 
-  breadcrumbLinkColor: '#A2A2A2',
-  breadcrumbTextColor: '#292929',
+  breadcrumbLinkColor: '#8F8F8F',
+  breadcrumbTextColor: '#1A1A1A',
 
   buttonPrimaryBgColor: '4353FF',
   buttonPrimaryBgHoverColor: '#3443E1',
@@ -61,9 +61,11 @@ const vars = {
   listBoxShadow: '0 0.1875rem 0.5rem rgba(0, 0, 0, 0.12), 0 0.1875rem 0.0625rem rgba(0, 0, 0, 0.04)',
   listBorderColor: 'rgba(0, 0, 0, 0.04)',
 
+  headerBorderColor: '#E7E7E7',
   dividerColor: 'rgba(118, 120, 125, 0.12)',
 
   dropdownBg: 'rgba(246, 246, 248, 0.8)',
+  dropdownSecBg: 'rgba(255, 255, 255, 1)',
   dropdownTextColor: 'rgba(60, 60, 67, 0.6)',
 
   overlayColor: 'rgba(0, 0, 0, 0.4)',

diff --git a/src/theme.js b/src/theme.js
@@ -1,12 +1,12 @@
 import { createTheme } from '@mui/material/styles';
 import vars from './assets/styles/variables';
-import nodeBlue from "./assets/svg/node/blue.svg";
-import nodeGray from "./assets/svg/node/gray.svg";
+import nodeBlue from './assets/svg/node/blue.svg';
+import nodeGray from './assets/svg/node/gray.svg';
 import nodeRed from './assets/svg/node/red.svg';
-import nodeGreen from "./assets/svg/node/green.svg"
-import nodeGreenIntegrator from "./assets/svg/node/green-puzzle.svg";
-import nodeGreenLearning from "./assets/svg/node/green-book.svg";
-import nodeComposition from "./assets/svg/node/composition.svg";
+import nodeGreen from './assets/svg/node/green.svg';
+import nodeGreenIntegrator from './assets/svg/node/green-puzzle.svg';
+import nodeGreenLearning from './assets/svg/node/green-book.svg';
+import nodeComposition from './assets/svg/node/composition.svg';
 
 const {
   primaryBg,
@@ -88,7 +88,7 @@ const theme = {
       styleOverrides: {
         root: {
           '& .MuiTypography-root': {
-            fontWeight: '400',
+            fontWeight: '500',
             fontSize: '0.875rem',
             lineHeight: '1.25rem',
             letterSpacing: '-0.001em',
@@ -98,7 +98,7 @@ const theme = {
 
             '& img': {
               display: 'block',
-              marginRight: '0.75rem'
+              marginRight: '0.75rem',
             },
           },
 
@@ -126,15 +126,15 @@ const theme = {
           padding: '0.625rem 1rem',
           borderRadius: '0.5rem',
           '&:not(:last-child)': {
-            marginRight: '0.5rem'
+            marginRight: '0.5rem',
           },
           '& img': {
             display: 'block',
-            marginRight: '0.375rem'
+            marginRight: '0.375rem',
           },
 
           '& .MuiChip-root': {
-            marginLeft: '0.375rem'
+            marginLeft: '0.375rem',
           },
         },
 
@@ -146,9 +146,9 @@ const theme = {
           backgroundColor: buttonPrimaryBgColor,
           '&.Mui-disabled': {
             background: buttonPrimaryDisabledBgColor,
-            color: textWhite
+            color: textWhite,
           },
-          "&:hover": {
+          '&:hover': {
             backgroundColor: buttonPrimaryBgHoverColor,
           },
         },
@@ -166,8 +166,8 @@ const theme = {
             '& .MuiListItem-root': {
               padding: '0.875rem 2.8125rem 0.875rem 0',
               '&:not(:last-child)': {
-                borderBottom: `0.03125rem solid ${listBorderColorSecondary}`
-              }
+                borderBottom: `0.03125rem solid ${listBorderColorSecondary}`,
+              },
             },
 
             '& .MuiListItemText-root': {
@@ -189,12 +189,10 @@ const theme = {
               lineHeight: '1.25rem',
               letterSpacing: '-0.015rem',
               color: chipBorderColor,
-
-
             },
 
             '&:not(:last-child)': {
-              marginBottom: '1rem'
+              marginBottom: '1rem',
             },
             '& .MuiListItemIcon-root': {
               minWidth: '2.625rem',
@@ -269,26 +267,84 @@ const theme = {
                 border: `0.03125rem solid ${listBorderColor}`,
 
                 '& .MuiTypography-root': {
-                  color: listSelectedTextColor
+                  color: listSelectedTextColor,
                 },
               },
             },
 
             '& .MuiChip-root': {
-              marginLeft: '0.25rem'
+              marginLeft: '0.25rem',
             },
 
             '& .MuiTypography-root': {
               fontWeight: 500,
               fontSize: '0.8125rem',
               lineHeight: '1.25rem',
               letterSpacing: '-0.005rem',
-              color: chipBgColor,
-              margin: 0
+              color: listSelectedTextColor,
+              margin: 0,
             },
           },
-        }
-      }
+          '&.headerSwitch': {
+            padding: '0.125rem',
+            display: 'flex',
+
+            '& .MuiListItemButton-root': {
+              padding: 0,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+
+              '&: hover': {
+                background: 'none',
+
+                '& .MuiTypography-root': {
+                  color: breadcrumbTextColor,
+                },
+              },
+
+              '&:not(:last-child)': {
+                marginRight: '0.75rem',
+                marginBottom: '0',
+              },
+
+              '&.Mui-disabled': {
+                opacity: 1,
+              },
+
+              '&.Mui-selected': {
+                background: textWhite,
+                '& .MuiTypography-root': {
+                  color: breadcrumbTextColor,
+                },
+
+                '& :before': {
+                  content: '""',
+                  position: 'absolute',
+                  bottom: '-1.063rem',
+                  backgroundColor: breadcrumbTextColor,
+                  Color: breadcrumbTextColor,
+                  height: `1px`,
+                  width: '100%',
+                },
+              },
+            },
+
+            '& .MuiChip-root': {
+              marginLeft: '0.25rem',
+            },
+
+            '& .MuiTypography-root': {
+              fontWeight: 500,
+              fontSize: '0.8125rem',
+              lineHeight: '1.25rem',
+              letterSpacing: '-0.005rem',
+              color: breadcrumbLinkColor,
+              margin: 0,
+            },
+          },
+        },
+      },
     },
 
     MuiSwitch: {
@@ -304,7 +360,7 @@ const theme = {
           padding: 0,
           background: textWhite,
           top: '0.125rem',
-           transform: 'translateX(0.125rem)',
+          transform: 'translateX(0.125rem)',
 
           '&.Mui-checked': {
             transform: 'translateX(0.875rem)',
@@ -326,7 +382,7 @@ const theme = {
         track: {
           borderRadius: '3.125rem',
           opacity: 1,
-          backgroundColor: primaryBg
+          backgroundColor: primaryBg,
         },
       },
     },
@@ -337,12 +393,12 @@ const theme = {
           height: '0.375rem',
           borderRadius: '0.6875rem',
           background: progressBg,
-          boxShadow: progressShadow
+          boxShadow: progressShadow,
         },
 
         bar: {
           background: progressBar,
-          borderRadius: '0.6875rem'
+          borderRadius: '0.6875rem',
         },
       },
     },
@@ -501,8 +557,8 @@ const theme = {
           },
         },
       },
-    }
+    },
   },
 };
 
-export default createTheme(theme);
+export default createTheme(theme);