doormile_hub_console/src/theme/componentsOverride.js

import customShadows from './shadows';

// ==============================|| DOORMILE THEME - COMPONENT OVERRIDES ||============================== //
// Clean, corporate Material Design tuning for the whole console.

export default function componentsOverride(theme) {
  const { palette } = theme;

  return {
    MuiCssBaseline: {
      styleOverrides: {
        html: { WebkitFontSmoothing: 'antialiased', MozOsxFontSmoothing: 'grayscale', textRendering: 'optimizeLegibility' },
        body: { backgroundColor: palette.background.default },
        '*::-webkit-scrollbar': { width: 8, height: 8 },
        '*::-webkit-scrollbar-thumb': { background: palette.grey[300], borderRadius: 8 },
        '*::-webkit-scrollbar-thumb:hover': { background: palette.grey[400] }
      }
    },
    MuiButton: {
      defaultProps: { disableElevation: true, disableRipple: false },
      styleOverrides: {
        root: {
          borderRadius: 8,
          fontWeight: 600,
          padding: '8px 18px',
          transition: 'background-color .2s ease, box-shadow .2s ease, transform .12s ease, border-color .2s ease',
          '&:active': { transform: 'translateY(0.5px)' },
          '&.Mui-focusVisible': { boxShadow: `0 0 0 3px ${palette.primary.lighter}` }
        },
        containedPrimary: {
          boxShadow: customShadows.primaryGlow,
          '&:hover': { boxShadow: customShadows.primaryGlowHover, backgroundColor: palette.primary.dark }
        },
        outlined: {
          borderColor: palette.grey[300],
          '&:hover': { borderColor: palette.grey[400], backgroundColor: palette.grey[50] }
        },
        text: { '&:hover': { backgroundColor: palette.grey[100] } },
        sizeLarge: { padding: '11px 24px', fontSize: '0.9375rem' },
        sizeSmall: { padding: '5px 14px' },
        // Give every button clear breathing room between its icon and label
        startIcon: { marginRight: 10 },
        endIcon: { marginLeft: 10 }
      }
    },
    MuiIconButton: {
      styleOverrides: { root: { borderRadius: 8 } }
    },
    MuiCard: {
      styleOverrides: {
        root: {
          borderRadius: 14,
          border: `1px solid ${palette.grey[200]}`,
          boxShadow: customShadows.card,
          backgroundImage: 'none',
          transition: 'box-shadow .22s ease, border-color .22s ease, transform .22s ease'
        }
      }
    },
    MuiCardHeader: {
      defaultProps: { titleTypographyProps: { variant: 'h5' }, subheaderTypographyProps: { variant: 'caption' } },
      styleOverrides: { root: { padding: 20 } }
    },
    MuiCardContent: {
      styleOverrides: { root: { padding: 20, '&:last-child': { paddingBottom: 20 } } }
    },
    MuiPaper: {
      defaultProps: { elevation: 0 },
      styleOverrides: { rounded: { borderRadius: 14 } }
    },
    MuiToggleButtonGroup: {
      styleOverrides: {
        root: { backgroundColor: palette.grey[100], borderRadius: 10, padding: 4, gap: 4 },
        grouped: {
          border: 0,
          borderRadius: '8px !important',
          margin: 0
        }
      }
    },
    MuiToggleButton: {
      styleOverrides: {
        root: {
          border: 0,
          borderRadius: 8,
          padding: '6px 12px',
          color: palette.grey[600],
          transition: 'all .18s ease',
          '&:hover': { backgroundColor: palette.grey[200] },
          '&.Mui-selected': {
            backgroundColor: palette.background.paper,
            color: palette.primary.main,
            boxShadow: customShadows.card,
            '&:hover': { backgroundColor: palette.background.paper }
          }
        }
      }
    },
    MuiChip: {
      styleOverrides: {
        root: { borderRadius: 6, fontWeight: 600, fontSize: '0.75rem' },
        sizeSmall: { height: 22 },
        label: { paddingLeft: 8, paddingRight: 8 }
      }
    },
    MuiTableCell: {
      styleOverrides: {
        root: { borderColor: palette.grey[200], padding: '12px 16px', fontSize: '0.8125rem' },
        head: {
          fontWeight: 600,
          color: palette.grey[600],
          backgroundColor: palette.grey[50],
          textTransform: 'none',
          whiteSpace: 'nowrap'
        }
      }
    },
    MuiTableRow: {
      styleOverrides: {
        root: { transition: 'background-color .15s ease', '&:hover': { backgroundColor: palette.grey[50] } }
      }
    },
    MuiOutlinedInput: {
      styleOverrides: {
        root: {
          borderRadius: 8,
          backgroundColor: palette.background.paper,
          transition: 'box-shadow .2s ease, border-color .2s ease',
          '& .MuiOutlinedInput-notchedOutline': { borderColor: palette.grey[300], transition: 'border-color .2s ease' },
          '&:hover .MuiOutlinedInput-notchedOutline': { borderColor: palette.grey[400] },
          '&.Mui-focused': { boxShadow: `0 0 0 3px ${palette.primary.lighter}` },
          '&.Mui-focused .MuiOutlinedInput-notchedOutline': { borderColor: palette.primary.main, borderWidth: 1 }
        },
        input: { padding: '11px 14px' }
      }
    },
    MuiSelect: {
      styleOverrides: {
        select: {
          paddingTop: '11px',
          paddingBottom: '11px',
          paddingLeft: '14px',
          display: 'flex',
          alignItems: 'center'
        }
      }
    },
    MuiInputLabel: {
      styleOverrides: { root: { color: palette.grey[600], fontSize: '0.875rem' } }
    },
    MuiTab: {
      styleOverrides: {
        root: { textTransform: 'none', fontWeight: 600, minHeight: 46, fontSize: '0.875rem' }
      }
    },
    MuiTabs: {
      styleOverrides: { indicator: { height: 3, borderRadius: 3 } }
    },
    MuiTooltip: {
      styleOverrides: {
        tooltip: { backgroundColor: palette.grey[800], borderRadius: 6, fontSize: '0.75rem', padding: '6px 10px' }
      }
    },
    MuiDialog: {
      styleOverrides: { paper: { borderRadius: 16 } }
    },
    MuiAvatar: {
      styleOverrides: { root: { fontWeight: 600, fontSize: '0.875rem' } }
    },
    MuiListItemButton: {
      styleOverrides: { root: { borderRadius: 8 } }
    },
    MuiLinearProgress: {
      styleOverrides: { root: { borderRadius: 8, height: 6, backgroundColor: palette.grey[200] } }
    },
    MuiMenu: {
      styleOverrides: { paper: { borderRadius: 12, boxShadow: customShadows.dropdown, marginTop: 6, border: `1px solid ${palette.grey[200]}` } }
    },
    MuiMenuItem: {
      styleOverrides: {
        root: {
          borderRadius: 8,
          margin: '2px 6px',
          padding: '8px 10px',
          fontSize: '0.875rem',
          '&:hover': { backgroundColor: palette.grey[100] }
        }
      }
    }
  };
}