@campxdev/shared 1.10.30 → 1.10.31

package/src/theme/muiTheme.ts

@@ -1,597 +1,597 @@
-import { alpha, darken, lighten } from '@mui/material'
-import { ThemeOptions, createTheme } from '@mui/material/styles'
-import { customCssBaseline } from './customCssBaseline'
-
-const borderRadius = {
-  small: '5px',
-  large: '10px',
-}
-
-const PRIMARY_FONT = 'Avenir'
-const SECONDARY_FONT = 'Poppins'
-
-export const SCROLLBAR_DARK = {
-  '&::-webkit-scrollbar': {
-    width: '0.5em',
-    height: '0.5em',
-  },
-
-  '&::-webkit-scrollbar-thumb': {
-    backgroundColor: 'rgba(0, 0, 0, 0.15)',
-    borderRadius: '3px',
-
-    '&:hover': {
-      background: 'rgba(0, 0, 0, 0.2)',
-    },
-  },
-}
-
-export const SCROLLBAR_LIGHT = {
-  '&::-webkit-scrollbar': {
-    width: '0.5em',
-    height: '0.5em',
-  },
-
-  '&::-webkit-scrollbar-thumb': {
-    backgroundColor: 'rgba(255, 255, 255, 0.15)',
-    borderRadius: '3px',
-
-    '&:hover': {
-      background: 'rgba(255, 255, 255, 0.2)',
-    },
-  },
-}
-
-const themeColors = {
-  primary: '#1E19F5',
-  secondary: '#121212',
-  secondaryLight: '#1212121A',
-  success: '#57CA22',
-  warning: '#FFA319',
-  error: '#BC2C3D',
-  info: '#33C2FF',
-  black: '#223354',
-  white: '#ffffff',
-  primaryAlt: '#000C57',
-  yellow: '#FFAF20',
-  green: '#99C15B',
-  grayLight: '#F2F2F2',
-  pureBlack: '#000000',
-  pureWhite: '#ffffff',
-  secondaryDark: '#EFEFEF',
-  offsetBlue: '#149ECD',
-}
-
-const colors = {
-  primary: {
-    main: themeColors.primary,
-    light: alpha(themeColors.primary, 0.5),
-    lighter: alpha(themeColors.primary, 0.1),
-  },
-  secondary: {
-    main: themeColors.secondary,
-    light: themeColors.grayLight,
-    lighter: themeColors.secondaryLight,
-    dark: themeColors.secondaryDark,
-  },
-  common: {
-    green: themeColors.green,
-    yellow: themeColors.yellow,
-    black: themeColors.pureBlack,
-    white: themeColors.pureWhite,
-    blue: themeColors.offsetBlue,
-  },
-  error: {
-    lighter: alpha(themeColors.error, 0.1),
-    light: lighten(themeColors.error, 0.3),
-    main: themeColors.error,
-    dark: darken(themeColors.error, 0.2),
-  },
-}
-
-const borders = {
-  primary: `1px solid ${themeColors.primary}`,
-  grayLight: `1px solid ${themeColors.secondaryLight}`,
-}
-
-const themeOptions = {
-  typography: {
-    fontFamily: ['Poppins', 'Avenir', 'sans-serif'].join(','),
-  },
-  borders: {
-    ...borders,
-  },
-  palette: {
-    primary: {
-      dark: '#1E19F5',
-      main: colors.primary.main,
-      light: colors.primary.light,
-      lighter: colors.primary.lighter,
-    },
-    secondary: {
-      main: '#121212',
-      light: colors.secondary.light,
-      dark: themeColors.secondaryDark,
-      lighter: themeColors.secondaryLight,
-    },
-    common: {
-      green: themeColors.green,
-      yellow: themeColors.yellow,
-      blue: themeColors.offsetBlue,
-    },
-    error: {
-      main: '#BC2C3D',
-    },
-    text: {
-      primary: '#121212',
-      secondary: '#959595',
-      disabled: '#12121280',
-    },
-  },
-  components: {
-    MuiTypography: {
-      styleOverrides: {
-        root: {
-          color: '#121212',
-          fontSize: '14px',
-          fontWeight: 500,
-          fontFamily: PRIMARY_FONT,
-        },
-        h1: {
-          fontSize: '18px',
-          fontWeight: 600,
-          fontFamily: SECONDARY_FONT,
-        },
-        h3: {
-          fontSize: '16px',
-          fontWeight: 600,
-          fontFamily: SECONDARY_FONT,
-        },
-        h5: {
-          fontSize: '14px',
-          fontWeight: 500,
-          fontFamily: SECONDARY_FONT,
-        },
-        h6: {
-          fontSize: '15px',
-          fontWeight: 600,
-          fontFamily: SECONDARY_FONT,
-        },
-        paragraph: {
-          fontSize: '16px',
-          marginBottom: 0,
-        },
-        body2: {
-          fontWeight: 600,
-        },
-        subtitle1: {
-          fontSize: '14px',
-          fontWeight: 500,
-          color: '#121212b3',
-        },
-        subtitle2: {
-          fontSize: '13px',
-          fontWeight: 500,
-          color: '#959595',
-        },
-      },
-    },
-    MuiButton: {
-      defaultProps: {
-        variant: 'contained',
-        disableRipple: true,
-        disableElevation: true,
-        disableFocusRipple: true,
-        disableTouchRipple: true,
-      },
-      styleOverrides: {
-        root: {
-          fontFamily: SECONDARY_FONT,
-          height: '40px',
-          fontSize: '14px',
-          padding: '10px 40px',
-          textTransform: 'capitalize',
-          fontWeight: 600,
-          borderRadius: borderRadius.small,
-          '&.MuiButton-sizeSmall': {
-            padding: '6px 8px',
-            height: '40px',
-            fontSize: '14px',
-          },
-        },
-      },
-    },
-    MuiButtonBase: {
-      defaultProps: {
-        disableRipple: true,
-        disableTouchRipple: true,
-      },
-      styleOverrides: {
-        root: {
-          fontFamily: SECONDARY_FONT,
-          fontSize: '14px',
-          fontWeight: 600,
-        },
-      },
-    },
-    MuiInputBase: {
-      styleOverrides: {
-        root: {
-          fontFamily: PRIMARY_FONT,
-          fontWeight: 500,
-          minHeight: '50px',
-          borderRadius: '10px',
-          '& input': {
-            fontSize: '15px',
-            boxSizing: 'border-box',
-            minHeight: '50px',
-          },
-          '&.MuiInputBase-sizeSmall': {
-            borderRadius: '6px',
-            minHeight: '40px',
-            '& input': { minHeight: '40px' },
-            '& fieldset': { minHeight: '40px' },
-          },
-        },
-      },
-    },
-    MuiOutlinedInput: {
-      styleOverrides: {
-        root: {
-          borderRadius: borderRadius.large,
-          '& .MuiInputAdornment-positionEnd.MuiInputAdornment-outlined': {
-            paddingRight: '14px',
-          },
-          '& .MuiInputAdornment-positionStart.MuiInputAdornment-outlined': {
-            paddingLeft: '14px',
-          },
-          '& .MuiOutlinedInput-notchedOutline': {
-            top: 1,
-            minHeight: '50px',
-            border: borders.grayLight,
-            '& legend': {
-              '& > span': {
-                paddingRight: 2,
-              },
-            },
-          },
-          '&:hover .MuiOutlinedInput-notchedOutline': {
-            borderColor: alpha(colors.common.black, 0.2),
-          },
-          '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
-            borderColor: colors.primary.main,
-            borderWidth: '0.5px',
-            '& :hover': {
-              borderColor: colors.primary.main,
-              borderWidth: '0.5px',
-            },
-          },
-        },
-      },
-    },
-    MuiCheckbox: {
-      defaultProps: {
-        disableRipple: true,
-      },
-      styleOverrides: {
-        root: {
-          '& .MuiSvgIcon-root': {
-            width: '18px',
-            height: '18px',
-          },
-        },
-      },
-    },
-    MuiFormControl: {
-      styleOverrides: {
-        root: {
-          position: 'relative',
-          '&.MuiTextField-root > .MuiInputBase-root': {
-            padding: 0,
-          },
-          '& .MuiInputBase-inputMultiline': {
-            padding: '14px',
-          },
-          '& .MuiSelect-select': {
-            padding: '14px',
-            '&.MuiInputBase-inputSizeSmall': {
-              padding: '10px 14px',
-            },
-          },
-          '& .MuiAutocomplete-inputRoot.MuiInputBase-root': {
-            padding: '5px',
-            '& > .MuiInputBase-input': {
-              marginLeft: '5px',
-              minHeight: '40px',
-              padding: 0,
-            },
-          },
-          '& .MuiFormHelperText-root': {
-            fontStyle: 'oblique',
-            position: 'absolute',
-            fontSize: '13px',
-            fontWeight: 600,
-            textAlign: 'right',
-            right: 0,
-            bottom: -26,
-          },
-        },
-      },
-    },
-    MuiAutocomplete: {
-      styleOverrides: {
-        tag: { margin: 1 },
-        root: {
-          '.MuiAutocomplete-inputRoot.MuiOutlinedInput-root .MuiAutocomplete-endAdornment':
-            { right: 14 },
-        },
-        clearIndicator: {
-          background: colors.error.lighter,
-          borderRadius: '5px',
-          color: colors.error.main,
-          marginRight: 8,
-          '&:hover': {
-            background: colors.error.lighter,
-            color: colors.error.dark,
-          },
-        },
-        popupIndicator: {
-          color: alpha(colors.common.black, 0.5),
-          '&:hover': {
-            background: colors.primary.lighter,
-            color: colors.primary.main,
-          },
-        },
-      },
-    },
-    MuiSwitch: {
-      styleOverrides: {
-        root: {
-          height: '20px',
-          padding: 0,
-          '& .MuiSwitch-switchBase': {
-            padding: 0,
-            transitionDuration: '300ms',
-            '&.Mui-checked': {
-              color: colors.common.green,
-              '& .MuiSwitch-thumb': {
-                marginLeft: '0px',
-              },
-              '& + .MuiSwitch-track': {
-                opacity: '1',
-                border: `0.5px solid ${colors.common.green}`,
-                background: '#EDEDED 0% 0% no-repeat padding-box',
-              },
-              '&.Mui-disabled + .MuiSwitch-track': {
-                opacity: 0.5,
-              },
-            },
-            '&.Mui-disabled .MuiSwitch-thumb': {
-              color: colors.common.green,
-              opacity: '0.5',
-            },
-          },
-          '& .MuiSwitch-thumb': {
-            width: '18px',
-            height: '16px',
-            borderRadius: '5px',
-            marginTop: '2px',
-            boxShadow: 'none',
-            marginLeft: '2px',
-          },
-          '& .MuiSwitch-track': {
-            borderRadius: '5px',
-            width: '40px',
-            height: '20px',
-            backgroundColor: '#EDEDED',
-            paddingLeft: '12px',
-            opacity: '1',
-          },
-        },
-      },
-    },
-    MuiMenu: {
-      styleOverrides: {
-        paper: {
-          '&::-webkit-scrollbar': {
-            width: '0.5em',
-            height: '0.5em',
-          },
-
-          '&::-webkit-scrollbar-thumb': {
-            backgroundColor: 'rgba(0, 0, 0, 0.15)',
-            borderRadius: '3px',
-
-            '&:hover': {
-              background: 'rgba(0, 0, 0, 0.2)',
-            },
-          },
-        },
-      },
-    },
-    MuiIconButton: {
-      defaultProps: {
-        disableRipple: true,
-        disableFocusRipple: true,
-        disableTouchRipple: true,
-        size: 'small',
-      },
-      styleOverrides: {
-        root: {
-          borderRadius: '10px',
-        },
-      },
-    },
-    MuiFormLabel: {
-      styleOverrides: {
-        root: {
-          fontSize: '14px',
-          color: '#959595',
-        },
-      },
-    },
-    MuiTextField: {
-      defaultProps: {
-        variant: 'outlined',
-        color: 'primary',
-        fullWidth: true,
-      },
-    },
-    MuiTable: {
-      styleOverrides: {
-        root: {
-          border: borders.grayLight,
-          fontFamily: PRIMARY_FONT,
-          fontSize: '14px',
-          fontWeight: 500,
-        },
-      },
-    },
-    MuiTableHead: {
-      styleOverrides: {
-        root: {
-          backgroundColor: themeColors.grayLight,
-          '& th': {
-            lineHeight: '20px',
-            fontSize: '14px',
-            fontWeight: 600,
-            fontFamily: SECONDARY_FONT,
-          },
-        },
-      },
-    },
-    MuiTableCell: {
-      styleOverrides: {
-        root: {
-          lineHeight: '20px',
-          padding: '15px',
-          fontWeight: 500,
-          fontFamily: PRIMARY_FONT,
-          fontSize: '14px',
-          '& .MuiCheckbox-root': {
-            padding: 0,
-          },
-        },
-      },
-    },
-    MuiCard: {
-      styleOverrides: {
-        root: {
-          border: borders.grayLight,
-          boxShadow: 'none',
-          borderRadius: '10px',
-          '&.MuiPaper-root': {
-            height: 'fit-content',
-          },
-        },
-      },
-    },
-    MuiMenuItem: {
-      styleOverrides: {
-        root: {
-          fontWeight: 500,
-          fontFamily: SECONDARY_FONT,
-          fontSize: '14px',
-        },
-      },
-    },
-    MuiListItemText: {
-      styleOverrides: {
-        root: {
-          '& .MuiTypography-root': {
-            fontWeight: 500,
-            fontFamily: SECONDARY_FONT,
-            fontSize: '14px',
-          },
-        },
-      },
-    },
-    MuiCardHeader: {
-      styleOverrides: {
-        root: {
-          padding: '20px',
-          '& .MuiCardHeader-title': {
-            fontSize: '15px',
-            fontFamily: SECONDARY_FONT,
-            fontWeight: 500,
-          },
-          '& .MuiTypography-root.MuiCardHeader-subheader': {
-            marginTop: '3px',
-            fontSize: '13px',
-            fontFamily: PRIMARY_FONT,
-            fontWeight: 400,
-          },
-        },
-      },
-    },
-    MuiCardContent: {
-      styleOverrides: {
-        root: {
-          padding: '20px',
-          paddingTop: 0,
-        },
-      },
-    },
-    MuiCardActions: {
-      styleOverrides: {
-        root: {
-          padding: 0,
-        },
-      },
-    },
-    MuiFormHelperText: {
-      styleOverrides: {
-        root: {
-          fontFamily: PRIMARY_FONT,
-          fontSize: '12px',
-          color: themeColors.error,
-          marginLeft: '2px',
-          marginRight: '2px',
-        },
-      },
-    },
-    MuiDialogTitle: {
-      styleOverrides: {
-        root: {
-          fontFamily: SECONDARY_FONT,
-          fontWeight: 500,
-          fontSize: '16px',
-          padding: 0,
-        },
-      },
-    },
-    MuiChip: {
-      styleOverrides: {
-        root: {
-          fontFamily: PRIMARY_FONT,
-          fontWeight: 500,
-          fontSize: '14px',
-        },
-      },
-    },
-    MuiListItemButton: {
-      styleOverrides: {
-        root: {
-          fontFamily: SECONDARY_FONT,
-          fontSize: '14px',
-          '& .MuiListItemText-primary.MuiTypography-root': {
-            fontFamily: SECONDARY_FONT,
-          },
-        },
-      },
-    },
-    MuiRadio: {
-      defaultProps: {
-        disableRipple: true,
-      },
-    },
-    MuiCssBaseline: {
-      styleOverrides: customCssBaseline,
-    },
-  },
-}
-
-// A custom theme for this app
-const muiTheme = createTheme({ ...themeOptions })
-
-export default muiTheme
+import { alpha, darken, lighten } from '@mui/material'
+import { ThemeOptions, createTheme } from '@mui/material/styles'
+import { customCssBaseline } from './customCssBaseline'
+
+const borderRadius = {
+  small: '5px',
+  large: '10px',
+}
+
+const PRIMARY_FONT = 'Avenir'
+const SECONDARY_FONT = 'Poppins'
+
+export const SCROLLBAR_DARK = {
+  '&::-webkit-scrollbar': {
+    width: '0.5em',
+    height: '0.5em',
+  },
+
+  '&::-webkit-scrollbar-thumb': {
+    backgroundColor: 'rgba(0, 0, 0, 0.15)',
+    borderRadius: '3px',
+
+    '&:hover': {
+      background: 'rgba(0, 0, 0, 0.2)',
+    },
+  },
+}
+
+export const SCROLLBAR_LIGHT = {
+  '&::-webkit-scrollbar': {
+    width: '0.5em',
+    height: '0.5em',
+  },
+
+  '&::-webkit-scrollbar-thumb': {
+    backgroundColor: 'rgba(255, 255, 255, 0.15)',
+    borderRadius: '3px',
+
+    '&:hover': {
+      background: 'rgba(255, 255, 255, 0.2)',
+    },
+  },
+}
+
+const themeColors = {
+  primary: '#1E19F5',
+  secondary: '#121212',
+  secondaryLight: '#1212121A',
+  success: '#57CA22',
+  warning: '#FFA319',
+  error: '#BC2C3D',
+  info: '#33C2FF',
+  black: '#223354',
+  white: '#ffffff',
+  primaryAlt: '#000C57',
+  yellow: '#FFAF20',
+  green: '#99C15B',
+  grayLight: '#F2F2F2',
+  pureBlack: '#000000',
+  pureWhite: '#ffffff',
+  secondaryDark: '#EFEFEF',
+  offsetBlue: '#149ECD',
+}
+
+const colors = {
+  primary: {
+    main: themeColors.primary,
+    light: alpha(themeColors.primary, 0.5),
+    lighter: alpha(themeColors.primary, 0.1),
+  },
+  secondary: {
+    main: themeColors.secondary,
+    light: themeColors.grayLight,
+    lighter: themeColors.secondaryLight,
+    dark: themeColors.secondaryDark,
+  },
+  common: {
+    green: themeColors.green,
+    yellow: themeColors.yellow,
+    black: themeColors.pureBlack,
+    white: themeColors.pureWhite,
+    blue: themeColors.offsetBlue,
+  },
+  error: {
+    lighter: alpha(themeColors.error, 0.1),
+    light: lighten(themeColors.error, 0.3),
+    main: themeColors.error,
+    dark: darken(themeColors.error, 0.2),
+  },
+}
+
+const borders = {
+  primary: `1px solid ${themeColors.primary}`,
+  grayLight: `1px solid ${themeColors.secondaryLight}`,
+}
+
+const themeOptions = {
+  typography: {
+    fontFamily: ['Poppins', 'Avenir', 'sans-serif'].join(','),
+  },
+  borders: {
+    ...borders,
+  },
+  palette: {
+    primary: {
+      dark: '#1E19F5',
+      main: colors.primary.main,
+      light: colors.primary.light,
+      lighter: colors.primary.lighter,
+    },
+    secondary: {
+      main: '#121212',
+      light: colors.secondary.light,
+      dark: themeColors.secondaryDark,
+      lighter: themeColors.secondaryLight,
+    },
+    common: {
+      green: themeColors.green,
+      yellow: themeColors.yellow,
+      blue: themeColors.offsetBlue,
+    },
+    error: {
+      main: '#BC2C3D',
+    },
+    text: {
+      primary: '#121212',
+      secondary: '#959595',
+      disabled: '#12121280',
+    },
+  },
+  components: {
+    MuiTypography: {
+      styleOverrides: {
+        root: {
+          color: '#121212',
+          fontSize: '14px',
+          fontWeight: 500,
+          fontFamily: PRIMARY_FONT,
+        },
+        h1: {
+          fontSize: '18px',
+          fontWeight: 600,
+          fontFamily: SECONDARY_FONT,
+        },
+        h3: {
+          fontSize: '16px',
+          fontWeight: 600,
+          fontFamily: SECONDARY_FONT,
+        },
+        h5: {
+          fontSize: '14px',
+          fontWeight: 500,
+          fontFamily: SECONDARY_FONT,
+        },
+        h6: {
+          fontSize: '15px',
+          fontWeight: 600,
+          fontFamily: SECONDARY_FONT,
+        },
+        paragraph: {
+          fontSize: '16px',
+          marginBottom: 0,
+        },
+        body2: {
+          fontWeight: 600,
+        },
+        subtitle1: {
+          fontSize: '14px',
+          fontWeight: 500,
+          color: '#121212b3',
+        },
+        subtitle2: {
+          fontSize: '13px',
+          fontWeight: 500,
+          color: '#959595',
+        },
+      },
+    },
+    MuiButton: {
+      defaultProps: {
+        variant: 'contained',
+        disableRipple: true,
+        disableElevation: true,
+        disableFocusRipple: true,
+        disableTouchRipple: true,
+      },
+      styleOverrides: {
+        root: {
+          fontFamily: SECONDARY_FONT,
+          height: '40px',
+          fontSize: '14px',
+          padding: '10px 40px',
+          textTransform: 'capitalize',
+          fontWeight: 600,
+          borderRadius: borderRadius.small,
+          '&.MuiButton-sizeSmall': {
+            padding: '6px 8px',
+            height: '40px',
+            fontSize: '14px',
+          },
+        },
+      },
+    },
+    MuiButtonBase: {
+      defaultProps: {
+        disableRipple: true,
+        disableTouchRipple: true,
+      },
+      styleOverrides: {
+        root: {
+          fontFamily: SECONDARY_FONT,
+          fontSize: '14px',
+          fontWeight: 600,
+        },
+      },
+    },
+    MuiInputBase: {
+      styleOverrides: {
+        root: {
+          fontFamily: PRIMARY_FONT,
+          fontWeight: 500,
+          minHeight: '50px',
+          borderRadius: '10px',
+          '& input': {
+            fontSize: '15px',
+            boxSizing: 'border-box',
+            minHeight: '50px',
+          },
+          '&.MuiInputBase-sizeSmall': {
+            borderRadius: '6px',
+            minHeight: '40px',
+            '& input': { minHeight: '40px' },
+            '& fieldset': { minHeight: '40px' },
+          },
+        },
+      },
+    },
+    MuiOutlinedInput: {
+      styleOverrides: {
+        root: {
+          borderRadius: borderRadius.large,
+          '& .MuiInputAdornment-positionEnd.MuiInputAdornment-outlined': {
+            paddingRight: '14px',
+          },
+          '& .MuiInputAdornment-positionStart.MuiInputAdornment-outlined': {
+            paddingLeft: '14px',
+          },
+          '& .MuiOutlinedInput-notchedOutline': {
+            top: 1,
+            minHeight: '50px',
+            border: borders.grayLight,
+            '& legend': {
+              '& > span': {
+                paddingRight: 2,
+              },
+            },
+          },
+          '&:hover .MuiOutlinedInput-notchedOutline': {
+            borderColor: alpha(colors.common.black, 0.2),
+          },
+          '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+            borderColor: colors.primary.main,
+            borderWidth: '0.5px',
+            '& :hover': {
+              borderColor: colors.primary.main,
+              borderWidth: '0.5px',
+            },
+          },
+        },
+      },
+    },
+    MuiCheckbox: {
+      defaultProps: {
+        disableRipple: true,
+      },
+      styleOverrides: {
+        root: {
+          '& .MuiSvgIcon-root': {
+            width: '18px',
+            height: '18px',
+          },
+        },
+      },
+    },
+    MuiFormControl: {
+      styleOverrides: {
+        root: {
+          position: 'relative',
+          '&.MuiTextField-root > .MuiInputBase-root': {
+            padding: 0,
+          },
+          '& .MuiInputBase-inputMultiline': {
+            padding: '14px',
+          },
+          '& .MuiSelect-select': {
+            padding: '14px',
+            '&.MuiInputBase-inputSizeSmall': {
+              padding: '10px 14px',
+            },
+          },
+          '& .MuiAutocomplete-inputRoot.MuiInputBase-root': {
+            padding: '5px',
+            '& > .MuiInputBase-input': {
+              marginLeft: '5px',
+              minHeight: '40px',
+              padding: 0,
+            },
+          },
+          '& .MuiFormHelperText-root': {
+            fontStyle: 'oblique',
+            position: 'absolute',
+            fontSize: '13px',
+            fontWeight: 600,
+            textAlign: 'right',
+            right: 0,
+            bottom: -26,
+          },
+        },
+      },
+    },
+    MuiAutocomplete: {
+      styleOverrides: {
+        tag: { margin: 1 },
+        root: {
+          '.MuiAutocomplete-inputRoot.MuiOutlinedInput-root .MuiAutocomplete-endAdornment':
+            { right: 14 },
+        },
+        clearIndicator: {
+          background: colors.error.lighter,
+          borderRadius: '5px',
+          color: colors.error.main,
+          marginRight: 8,
+          '&:hover': {
+            background: colors.error.lighter,
+            color: colors.error.dark,
+          },
+        },
+        popupIndicator: {
+          color: alpha(colors.common.black, 0.5),
+          '&:hover': {
+            background: colors.primary.lighter,
+            color: colors.primary.main,
+          },
+        },
+      },
+    },
+    MuiSwitch: {
+      styleOverrides: {
+        root: {
+          height: '20px',
+          padding: 0,
+          '& .MuiSwitch-switchBase': {
+            padding: 0,
+            transitionDuration: '300ms',
+            '&.Mui-checked': {
+              color: colors.common.green,
+              '& .MuiSwitch-thumb': {
+                marginLeft: '0px',
+              },
+              '& + .MuiSwitch-track': {
+                opacity: '1',
+                border: `0.5px solid ${colors.common.green}`,
+                background: '#EDEDED 0% 0% no-repeat padding-box',
+              },
+              '&.Mui-disabled + .MuiSwitch-track': {
+                opacity: 0.5,
+              },
+            },
+            '&.Mui-disabled .MuiSwitch-thumb': {
+              color: colors.common.green,
+              opacity: '0.5',
+            },
+          },
+          '& .MuiSwitch-thumb': {
+            width: '18px',
+            height: '16px',
+            borderRadius: '5px',
+            marginTop: '2px',
+            boxShadow: 'none',
+            marginLeft: '2px',
+          },
+          '& .MuiSwitch-track': {
+            borderRadius: '5px',
+            width: '40px',
+            height: '20px',
+            backgroundColor: '#EDEDED',
+            paddingLeft: '12px',
+            opacity: '1',
+          },
+        },
+      },
+    },
+    MuiMenu: {
+      styleOverrides: {
+        paper: {
+          '&::-webkit-scrollbar': {
+            width: '0.5em',
+            height: '0.5em',
+          },
+
+          '&::-webkit-scrollbar-thumb': {
+            backgroundColor: 'rgba(0, 0, 0, 0.15)',
+            borderRadius: '3px',
+
+            '&:hover': {
+              background: 'rgba(0, 0, 0, 0.2)',
+            },
+          },
+        },
+      },
+    },
+    MuiIconButton: {
+      defaultProps: {
+        disableRipple: true,
+        disableFocusRipple: true,
+        disableTouchRipple: true,
+        size: 'small',
+      },
+      styleOverrides: {
+        root: {
+          borderRadius: '10px',
+        },
+      },
+    },
+    MuiFormLabel: {
+      styleOverrides: {
+        root: {
+          fontSize: '14px',
+          color: '#959595',
+        },
+      },
+    },
+    MuiTextField: {
+      defaultProps: {
+        variant: 'outlined',
+        color: 'primary',
+        fullWidth: true,
+      },
+    },
+    MuiTable: {
+      styleOverrides: {
+        root: {
+          border: borders.grayLight,
+          fontFamily: PRIMARY_FONT,
+          fontSize: '14px',
+          fontWeight: 500,
+        },
+      },
+    },
+    MuiTableHead: {
+      styleOverrides: {
+        root: {
+          backgroundColor: themeColors.grayLight,
+          '& th': {
+            lineHeight: '20px',
+            fontSize: '14px',
+            fontWeight: 600,
+            fontFamily: SECONDARY_FONT,
+          },
+        },
+      },
+    },
+    MuiTableCell: {
+      styleOverrides: {
+        root: {
+          lineHeight: '20px',
+          padding: '15px',
+          fontWeight: 500,
+          fontFamily: PRIMARY_FONT,
+          fontSize: '14px',
+          '& .MuiCheckbox-root': {
+            padding: 0,
+          },
+        },
+      },
+    },
+    MuiCard: {
+      styleOverrides: {
+        root: {
+          border: borders.grayLight,
+          boxShadow: 'none',
+          borderRadius: '10px',
+          '&.MuiPaper-root': {
+            height: 'fit-content',
+          },
+        },
+      },
+    },
+    MuiMenuItem: {
+      styleOverrides: {
+        root: {
+          fontWeight: 500,
+          fontFamily: SECONDARY_FONT,
+          fontSize: '14px',
+        },
+      },
+    },
+    MuiListItemText: {
+      styleOverrides: {
+        root: {
+          '& .MuiTypography-root': {
+            fontWeight: 500,
+            fontFamily: SECONDARY_FONT,
+            fontSize: '14px',
+          },
+        },
+      },
+    },
+    MuiCardHeader: {
+      styleOverrides: {
+        root: {
+          padding: '20px',
+          '& .MuiCardHeader-title': {
+            fontSize: '15px',
+            fontFamily: SECONDARY_FONT,
+            fontWeight: 500,
+          },
+          '& .MuiTypography-root.MuiCardHeader-subheader': {
+            marginTop: '3px',
+            fontSize: '13px',
+            fontFamily: PRIMARY_FONT,
+            fontWeight: 400,
+          },
+        },
+      },
+    },
+    MuiCardContent: {
+      styleOverrides: {
+        root: {
+          padding: '20px',
+          paddingTop: 0,
+        },
+      },
+    },
+    MuiCardActions: {
+      styleOverrides: {
+        root: {
+          padding: 0,
+        },
+      },
+    },
+    MuiFormHelperText: {
+      styleOverrides: {
+        root: {
+          fontFamily: PRIMARY_FONT,
+          fontSize: '12px',
+          color: themeColors.error,
+          marginLeft: '2px',
+          marginRight: '2px',
+        },
+      },
+    },
+    MuiDialogTitle: {
+      styleOverrides: {
+        root: {
+          fontFamily: SECONDARY_FONT,
+          fontWeight: 500,
+          fontSize: '16px',
+          padding: 0,
+        },
+      },
+    },
+    MuiChip: {
+      styleOverrides: {
+        root: {
+          fontFamily: PRIMARY_FONT,
+          fontWeight: 500,
+          fontSize: '14px',
+        },
+      },
+    },
+    MuiListItemButton: {
+      styleOverrides: {
+        root: {
+          fontFamily: SECONDARY_FONT,
+          fontSize: '14px',
+          '& .MuiListItemText-primary.MuiTypography-root': {
+            fontFamily: SECONDARY_FONT,
+          },
+        },
+      },
+    },
+    MuiRadio: {
+      defaultProps: {
+        disableRipple: true,
+      },
+    },
+    MuiCssBaseline: {
+      styleOverrides: customCssBaseline,
+    },
+  },
+}
+
+// A custom theme for this app
+const muiTheme = createTheme({ ...themeOptions })
+
+export default muiTheme