Merge pull request #464 from sudhanshutech/toggle/ui

Add Some theme components and add styles in existing ones

Author: nebula-aac

packages/components/src/theme/components.ts

@@ -14,6 +14,7 @@ import { MuiOutlinedInput } from './components/outlinedinput.modifier';
 import { MuiPagination } from './components/pagination.modifier';
 import { MuiSvgIcon } from './components/svgicon.modifier';
 import { MuiTab } from './components/tab.modifier.ts';
+import { MuiToggleButton } from './components/toggle.modifier';
 
 export const components: Components<Theme> = {
   MuiAppBar,
@@ -30,5 +31,6 @@ export const components: Components<Theme> = {
   MuiOutlinedInput,
   MuiPagination,
   MuiSvgIcon,
-  MuiTab
+  MuiTab,
+  MuiToggleButton
 };

packages/components/src/theme/components/button.modifier.ts

@@ -1,7 +1,28 @@
 import { Components, Theme } from '@mui/material';
+import { CARIBBEAN_GREEN, KEPPEL, WHITE, buttonDisabled } from '../colors';
 
 export const MuiButton: Components<Theme>['MuiButton'] = {
   styleOverrides: {
-    root: {}
+    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
+      }
+    }
   }
 };

packages/components/src/theme/components/toggle.modifier.ts

@@ -0,0 +1,24 @@
+import { Components, Theme } from '@mui/material';
+import { CARIBBEAN_GREEN, CHARCOAL } from '../colors';
+
+export const MuiToggleButton: Components<Theme>['MuiToggleButton'] = {
+  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
+      }
+    }
+  }
+};