Merge pull request layer5io#470 from sudhanshutech/add/refactor/comp

refactor: Add and Refactor theme components
sudhanshutech · Feb 1, 2024 · 48d4eae · 48d4eae
2 parents eb7b8fd + aa7613d
commit 48d4eae
Show file tree

Hide file tree

Showing 8 changed files with 170 additions and 29 deletions.
diff --git a/src/theme/components.ts b/src/theme/components.ts
@@ -1,5 +1,6 @@
 import { Components, Theme } from '@mui/material';
 import { MuiAppBar } from './components/appbar.modifiter';
+import { MuiButton } from './components/button.modifier';
 import { MuiCard } from './components/card.modifier';
 import { MuiCheckbox } from './components/checkbox.modifier';
 import { MuiCollapse } from './components/collapse.modifier';
@@ -8,13 +9,14 @@ import { MuiDrawer } from './components/drawer.modifier';
 import { MuiFormLabel } from './components/formlabel.modifier';
 import { MuiIconButton } from './components/iconbutton.modifier';
 import { MuiLink } from './components/link.modifier';
+import { MuiListItem } from './components/listitem.modifier';
 import { MuiMenu } from './components/menu.modifier';
 import { MuiMenuItem } from './components/menuitem.modifier';
 import { MuiOutlinedInput } from './components/outlinedinput.modifier';
 import { MuiPagination } from './components/pagination.modifier';
 import { MuiSvgIcon } from './components/svgicon.modifier';
+import { MuiSwitch } from './components/switch.modifier';
 import { MuiTab } from './components/tab.modifier.ts';
-import { MuiToggleButton } from './components/toggle.modifier';
 
 export const components: Components<Theme> = {
   MuiAppBar,
@@ -32,5 +34,7 @@ export const components: Components<Theme> = {
   MuiPagination,
   MuiSvgIcon,
   MuiTab,
-  MuiToggleButton
+  MuiSwitch,
+  MuiButton,
+  MuiListItem
 };
diff --git a/src/theme/components/button.modifier.ts b/src/theme/components/button.modifier.ts
@@ -1,28 +1,34 @@
 import { Components, Theme } from '@mui/material';
-import { CARIBBEAN_GREEN, KEPPEL, WHITE, buttonDisabled } from '../colors';
+import { CARIBBEAN_GREEN, WHITE, buttonDisabled } from '../colors';
 
 export const MuiButton: Components<Theme>['MuiButton'] = {
   styleOverrides: {
-    root: {
-      borderRadius: '3px',
-      textTransform: 'none',
-      '&.Mui-disabled': {
-        backgroundColor: buttonDisabled.main,
-        color: WHITE
-      }
-    },
-    contained: {
-      backgroundColor: KEPPEL,
-      '&:hover': {
-        backgroundColor: CARIBBEAN_GREEN,
-        color: WHITE
-      }
-    },
-    outlined: {
-      '&:hover': {
-        backgroundColor: CARIBBEAN_GREEN,
-        color: WHITE
-      }
+    root: ({ theme }) => {
+      const {
+        palette: {
+          secondary: { main }
+        }
+      } = theme;
+      return {
+        '&.MuiButton-contained': {
+          color: WHITE,
+          backgroundColor: main,
+          '&:hover': {
+            backgroundColor: CARIBBEAN_GREEN
+          }
+        },
+        '&.MuiButton-outlined': {
+          border: `1px solid ${main}`,
+          '&:hover': {
+            backgroundColor: CARIBBEAN_GREEN,
+            color: WHITE
+          }
+        },
+        '&.MuiButton-contained.Mui-disabled': {
+          color: buttonDisabled.main,
+          backgroundColor: buttonDisabled.main
+        }
+      };
     }
   }
 };
diff --git a/src/theme/components/input.modifier.ts b/src/theme/components/input.modifier.ts
@@ -0,0 +1,18 @@
+import { Components, Theme } from '@mui/material/styles';
+import { CARIBBEAN_GREEN } from '../colors';
+
+export const MuiInput: Components<Theme>['MuiInput'] = {
+  styleOverrides: {
+    root: {
+      '&:before': {
+        borderBottom: '2px solid rgba(0, 0, 0, 0.5)'
+      },
+      '&.Mui-focused:after': {
+        borderBottom: ` 2px solid ${CARIBBEAN_GREEN}`
+      },
+      '&:hover:not(.Mui-disabled):before': {
+        borderBottom: `2px solid ${CARIBBEAN_GREEN}`
+      }
+    }
+  }
+};
diff --git a/src/theme/components/listitem.modifier.ts b/src/theme/components/listitem.modifier.ts
@@ -0,0 +1,64 @@
+import { Components, ListItemProps, Theme } from '@mui/material';
+import { DARK_SLATE_GRAY, PATTERNS_BLUE } from '../colors';
+
+export const MuiListItem: Components<Theme>['MuiListItem'] = {
+  variants: [
+    {
+      props: { variant: 'menu' } as ListItemProps,
+      style: {
+        textTransform: 'none',
+        margin: '.5rem 0rem .5rem .5rem',
+        padding: '0rem',
+        color: DARK_SLATE_GRAY,
+        fontSize: '.9rem',
+        fill: DARK_SLATE_GRAY,
+        '&.Mui-selected': {
+          fontWeight: 'bold',
+          color: DARK_SLATE_GRAY,
+          fill: DARK_SLATE_GRAY,
+          '&:hover': {
+            color: DARK_SLATE_GRAY,
+            '& svg': {
+              fill: DARK_SLATE_GRAY
+            }
+          }
+        },
+        '&:li:has(> .MuiMenuItem)': {
+          backgroundColor: 'green'
+        },
+        '& svg': {
+          marginRight: '.75rem',
+          paddingLeft: '0rem',
+          marginLeft: '0rem'
+        }
+      }
+    },
+    {
+      props: { variant: 'submenu' } as ListItemProps,
+      style: {
+        textTransform: 'none',
+        margin: '.0rem 0rem 0rem .5rem',
+        justifyContent: 'center',
+        alignItems: 'center',
+        color: DARK_SLATE_GRAY,
+        fontSize: '.9rem',
+        fill: DARK_SLATE_GRAY,
+        '&.Mui-selected': {
+          fontWeight: 'bold',
+          backgroundColor: PATTERNS_BLUE,
+          color: DARK_SLATE_GRAY,
+          fill: DARK_SLATE_GRAY,
+          '&:hover': {
+            color: DARK_SLATE_GRAY,
+            '& svg': {
+              fill: DARK_SLATE_GRAY
+            }
+          }
+        },
+        '& svg': {
+          marginRight: '.5rem'
+        }
+      }
+    }
+  ]
+};
diff --git a/src/theme/components/outlinedinput.modifier.ts b/src/theme/components/outlinedinput.modifier.ts
@@ -1,14 +1,24 @@
 import { Components, Theme } from '@mui/material';
-import { defaultPalette } from '../colors';
+import { outlinedInputClasses } from '@mui/material/OutlinedInput';
+import { CARIBBEAN_GREEN, KEPPEL } from '../colors';
 
 export const MuiOutlinedInput: Components<Theme>['MuiOutlinedInput'] = {
   styleOverrides: {
+    notchedOutline: {
+      borderColor: 'rgba(0, 0, 0, 0.5)'
+    },
     root: {
-      '&:hover $notchedOutline': {
-        borderColor: defaultPalette.keppel[3]
+      [`&:hover .${outlinedInputClasses.notchedOutline}`]: {
+        borderColor: CARIBBEAN_GREEN
       },
-      '&$focused $notchedOutline': {
-        borderColor: defaultPalette.keppel[3]
+      [`&.Mui-focused .${outlinedInputClasses.notchedOutline}`]: {
+        borderColor: CARIBBEAN_GREEN
+      },
+      '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+        borderColor: KEPPEL
+      },
+      '&:hover .MuiOutlinedInput-notchedOutline': {
+        borderColor: KEPPEL
       }
     }
   }

diff --git a/src/theme/components/switch.modifier.ts b/src/theme/components/switch.modifier.ts
@@ -0,0 +1,24 @@
+import { Components, Theme } from '@mui/material';
+import { CARIBBEAN_GREEN, CHARCOAL } from '../colors';
+
+export const MuiSwitch: Components<Theme>['MuiSwitch'] = {
+  styleOverrides: {
+    root: {
+      '& .MuiSwitch-switchBase': {
+        color: CHARCOAL,
+        '&:hover': {
+          backgroundColor: 'rgba(60, 73, 79, 0.06)'
+        }
+      },
+      '& .MuiSwitch-switchBase.Mui-checked': {
+        color: CARIBBEAN_GREEN,
+        '&:hover': {
+          backgroundColor: 'rgba(0, 211, 169, 0.06)'
+        }
+      },
+      '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
+        backgroundColor: CARIBBEAN_GREEN
+      }
+    }
+  }
+};
diff --git a/src/theme/components/textfield.modifier.ts b/src/theme/components/textfield.modifier.ts
@@ -0,0 +1,15 @@
+import { Components, Theme } from '@mui/material';
+import { CARIBBEAN_GREEN } from '../colors';
+
+export const MuiTextField: Components<Theme>['MuiTextField'] = {
+  styleOverrides: {
+    root: {
+      '--TextField-brandBorderColor': 'rgba(0, 0, 0, 0.5)',
+      '--TextField-brandBorderHoverColor': CARIBBEAN_GREEN,
+      '--TextField-brandBorderFocusedColor': CARIBBEAN_GREEN,
+      '& label.Mui-focused': {
+        color: 'var(--TextField-brandBorderFocusedColor)'
+      }
+    }
+  }
+};
diff --git a/src/theme/components/toggle.modifier.ts b/src/theme/components/toggle.modifier.ts
@@ -1,7 +1,7 @@
 import { Components, Theme } from '@mui/material';
 import { CARIBBEAN_GREEN, CHARCOAL } from '../colors';
 
-export const MuiToggleButton: Components<Theme>['MuiToggleButton'] = {
+export const MuiSwitch: Components<Theme>['MuiSwitch'] = {
   styleOverrides: {
     root: {
       '& .MuiSwitch-switchBase': {