feat(ui): style moved to modifier

Signed-off-by: Ankita Sahu <[email protected]>

src/base/Tabs/Tabs.tsx

@@ -1,33 +1,41 @@
+// import { Tabs as MuiTabs, type TabsProps as MuiTabsProps } from '@mui/material';
+
+// export function Tabs(props: MuiTabsProps): JSX.Element {
+//   return (
+//     <MuiTabs
+//       {...props}
+//       sx={(theme) => ({
+//         width: '100%',
+//         marginLeft: 0,
+//         '& .MuiTabs-indicator': {
+//           backgroundColor:
+//             theme.palette.mode === 'dark'
+//               ? theme.palette.background?.default
+//               : theme.palette.background?.brand?.hover
+//         },
+//         '& .MuiTab-root': {
+//           backgroundColor: 'transparent',
+//           color:
+//             theme.palette.mode === 'dark' ? theme.palette.text.default : theme.palette.text.default,
+//           '&.Mui-selected': {
+//             backgroundColor: 'transparent',
+//             color:
+//               theme.palette.mode === 'dark'
+//                 ? theme.palette.background?.brand
+//                 : theme.palette.background?.brand?.default
+//           }
+//         }
+//       })}
+//     />
+//   );
+// }
+
+// export default Tabs;
+
 import { Tabs as MuiTabs, type TabsProps as MuiTabsProps } from '@mui/material';
 
 export function Tabs(props: MuiTabsProps): JSX.Element {
-  return (
-    <MuiTabs
-      {...props}
-      sx={(theme) => ({
-        width: '100%',
-        marginLeft: 0,
-        '& .MuiTabs-indicator': {
-          backgroundColor:
-            theme.palette.mode === 'dark'
-              ? theme.palette.background?.default
-              : theme.palette.background?.brand?.hover
-        },
-        '& .MuiTab-root': {
-          backgroundColor: 'transparent',
-          color:
-            theme.palette.mode === 'dark' ? theme.palette.text.default : theme.palette.text.default,
-          '&.Mui-selected': {
-            backgroundColor: 'transparent',
-            color:
-              theme.palette.mode === 'dark'
-                ? theme.palette.background?.brand
-                : theme.palette.background?.brand?.default
-          }
-        }
-      })}
-    />
-  );
+  return <MuiTabs {...props} />;
 }
 
 export default Tabs;

src/theme/components.ts

@@ -17,7 +17,8 @@ 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 { MuiTab } from './components/tab.modifier';
+import { MuiTabs } from './components/tabs.modifier';
 
 export const components: Components<Theme> = {
   MuiAppBar,
@@ -38,5 +39,6 @@ export const components: Components<Theme> = {
   MuiSwitch,
   MuiButtonGroup,
   MuiButton,
-  MuiListItem
+  MuiListItem,
+  MuiTabs
 };

src/theme/components/tab.modifier.ts

@@ -0,0 +1,18 @@
+import { Components, Theme } from '@mui/material';
+import { GRAY } from '../colors';
+
+export const MuiTab: Components<Theme>['MuiTab'] = {
+  styleOverrides: {
+    root: ({ theme }) => ({
+      backgroundColor: 'transparent',
+      color: theme.palette.text.primary,
+      '&.Mui-selected': {
+        backgroundColor: 'transparent',
+        color: theme.palette.mode === 'dark' ? GRAY : GRAY
+      },
+      '&:hover': {
+        backgroundColor: 'rgba(0, 0, 0, 0.04)'
+      }
+    })
+  }
+};

src/theme/components/tabs.modifier.ts

@@ -0,0 +1,14 @@
+import { Components, Theme } from '@mui/material';
+import { GRAY } from '../colors';
+
+export const MuiTabs: Components<Theme>['MuiTabs'] = {
+  styleOverrides: {
+    root: {
+      width: '100%',
+      marginLeft: 0
+    },
+    indicator: ({ theme }) => ({
+      backgroundColor: theme.palette.mode === 'dark' ? GRAY : GRAY
+    })
+  }
+};