style(tabs): add styling to 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,15 @@
+import { Components, Theme } from '@mui/material';
+import { GRAY, WHITE } from '../colors';
+
+export const MuiTab: Components<Theme>['MuiTab'] = {
+  styleOverrides: {
+    root: ({ theme }) => ({
+      backgroundColor: 'none',
+      color: theme.palette.mode === 'dark' ? WHITE : GRAY,
+      '&.Mui-selected': {
+        backgroundColor: 'none',
+        color: theme.palette.mode === 'dark' ? GRAY : GRAY
+      }
+    })
+  }
+};

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
+    })
+  }
+};