diff --git a/src/theme/components/TableBody.ts b/src/theme/components/TableBody.ts index 881d88e..e61d9f5 100644 --- a/src/theme/components/TableBody.ts +++ b/src/theme/components/TableBody.ts @@ -6,7 +6,7 @@ import { Theme } from '@mui/material'; export default function TableBody(theme: Theme) { const hoverStyle = { '&:hover': { - backgroundColor: theme.palette.secondary.lighter + backgroundColor: theme.palette.secondary[theme.palette.mode === 'dark' ? '950' : 'lighter'] } }; @@ -16,7 +16,7 @@ export default function TableBody(theme: Theme) { root: { '&.striped .MuiTableRow-root': { '&:nth-of-type(even)': { - backgroundColor: theme.palette.secondary.lighter + backgroundColor: theme.palette.secondary[theme.palette.mode === 'dark' ? '950' : 'lighter'], }, ...hoverStyle }, diff --git a/src/theme/components/TableHead.ts b/src/theme/components/TableHead.ts index 67de068..d93d5ba 100644 --- a/src/theme/components/TableHead.ts +++ b/src/theme/components/TableHead.ts @@ -8,7 +8,7 @@ export default function TableHead(theme: Theme) { MuiTableHead: { styleOverrides: { root: { - backgroundColor: theme.palette.secondary.lighter, + backgroundColor: theme.palette.secondary[theme.palette.mode === 'dark' ? '950' : 'lighter'], borderTop: `1px solid ${theme.palette.divider}`, borderBottom: `2px solid ${theme.palette.divider}` } diff --git a/src/theme/components/TableRow.ts b/src/theme/components/TableRow.ts index 498bf97..cc709d7 100644 --- a/src/theme/components/TableRow.ts +++ b/src/theme/components/TableRow.ts @@ -1,6 +1,8 @@ // ==============================|| OVERRIDES - TABLE ROW ||============================== // -export default function TableRow() { +import { Theme } from "@mui/material"; + +export default function TableRow(theme: Theme) { return { MuiTableRow: { styleOverrides: { @@ -11,6 +13,10 @@ export default function TableRow() { } }, '& .MuiTableCell-root': { + '&:hover': { + backgroundColor: theme.palette.action.hover, + cursor: 'pointer' + }, '&:last-of-type': { paddingRight: 24 }, diff --git a/src/theme/palette.ts b/src/theme/palette.ts index 4d78ed9..d26ba32 100644 --- a/src/theme/palette.ts +++ b/src/theme/palette.ts @@ -46,6 +46,7 @@ const Palette = (mode: ThemeMode) => { 800: "#5c6077", darker: "#5c6077", 900: "#4e5161", + "950": "#121212", }, error: { lighter: "#ffe3e1", @@ -113,7 +114,7 @@ const Palette = (mode: ThemeMode) => { '600': '#358438', '700': '#2d6830', '800': '#275429', - '900': '#224525' + '900': '#224525', }, }; @@ -126,17 +127,18 @@ const Palette = (mode: ThemeMode) => { }, ...paletteColor, text: { - primary: mode === ThemeMode.DARK ? alpha(paletteColor.secondary.darker!, 0.87) : paletteColor.secondary[800], - secondary: mode === ThemeMode.DARK ? alpha(paletteColor.secondary.darker!, 0.45) : paletteColor.secondary.main, - disabled: mode === ThemeMode.DARK ? alpha(paletteColor.secondary.darker!, 0.1) : paletteColor.secondary[400] + primary: mode === ThemeMode.DARK ? alpha(paletteColor.secondary.lighter!, 0.87) : paletteColor.secondary[800], + secondary: mode === ThemeMode.DARK ? alpha(paletteColor.secondary.lighter!, 0.45) : paletteColor.secondary.main, + disabled: mode === ThemeMode.DARK ? alpha(paletteColor.secondary.lighter!, 0.1) : paletteColor.secondary[400] }, action: { - disabled: paletteColor.secondary.light + disabled: paletteColor.secondary.light, + hover: mode === ThemeMode.DARK ? alpha(paletteColor.secondary.darker!, 1) : alpha(paletteColor.secondary.light!, 0.48), }, - divider: mode === ThemeMode.DARK ? alpha(paletteColor.secondary.darker!, 0.05) : alpha(paletteColor.secondary.light!, 0.65), + divider: mode === ThemeMode.DARK ? alpha(paletteColor.secondary.lighter!, 0.09) : alpha(paletteColor.secondary.light!, 0.65), background: { - paper: mode === ThemeMode.DARK ? paletteColor.secondary[100] : '#fff', - default: mode !== ThemeMode.DARK ? '#fff' : paletteColor.secondary[900] + paper: mode === ThemeMode.DARK ? paletteColor.secondary[950] : '#fff', + default: mode !== ThemeMode.DARK ? '#fff' : paletteColor.secondary[950] } } }); diff --git a/src/theme/shadows.ts b/src/theme/shadows.ts index b597fe1..312b7d2 100644 --- a/src/theme/shadows.ts +++ b/src/theme/shadows.ts @@ -13,11 +13,11 @@ const CustomShadows = (theme: Theme): CustomShadowProps => ({ text: `0 -1px 0 rgb(0 0 0 / 12%)`, z1: theme.palette.mode === ThemeMode.DARK - ? `0px 8px 24px ${alpha(theme.palette.secondary[200]!, 0.3)}` + ? `0px 4px 20px ${alpha(theme.palette.secondary[800]!, 0.3)}` : `0px 8px 24px ${alpha(theme.palette.secondary.dark, 0.15)}`, z2: theme.palette.mode === ThemeMode.DARK - ? `0px 2px 8px ${alpha(theme.palette.secondary[200]!, 0.3)}` + ? `0px 2px 8px ${alpha(theme.palette.secondary[800]!, 0.3)}` : `0px 2px 8px ${alpha(theme.palette.secondary.dark, 0.08)}`, primary: `0 0 0 2px ${alpha(theme.palette.primary.main, 0.1)}`, secondary: `0 0 0 2px ${alpha(theme.palette.secondary.main, 0.2)}`, diff --git a/src/types/overrides/createPalette.d.ts b/src/types/overrides/createPalette.d.ts index 0040553..ac939a1 100644 --- a/src/types/overrides/createPalette.d.ts +++ b/src/types/overrides/createPalette.d.ts @@ -1,7 +1,7 @@ // eslint-disable-next-line import * as createPalette from '@mui/material'; -declare module '@mui/material/styles' { +declare module '@mui/material' { interface SimplePaletteColorOptions { lighter?: string; darker?: string; @@ -16,6 +16,7 @@ declare module '@mui/material/styles' { 700?: string; 800?: string; 900?: string; + 950?: string; } interface PaletteColor { @@ -32,5 +33,6 @@ declare module '@mui/material/styles' { 700?: string; 800?: string; 900?: string; + 950?: string } }