122 lines
3.9 KiB
JavaScript
122 lines
3.9 KiB
JavaScript
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: {
|
|
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 },
|
|
styleOverrides: {
|
|
root: { borderRadius: 6, fontWeight: 600, padding: '7px 18px' },
|
|
containedPrimary: {
|
|
boxShadow: customShadows.primaryGlow,
|
|
'&:hover': { boxShadow: customShadows.primaryGlowHover, backgroundColor: palette.primary.dark }
|
|
},
|
|
outlined: { borderColor: palette.grey[300] },
|
|
sizeLarge: { padding: '10px 22px', fontSize: '0.9375rem' }
|
|
}
|
|
},
|
|
MuiIconButton: {
|
|
styleOverrides: { root: { borderRadius: 8 } }
|
|
},
|
|
MuiCard: {
|
|
styleOverrides: {
|
|
root: {
|
|
borderRadius: 10,
|
|
border: `1px solid ${palette.grey[200]}`,
|
|
boxShadow: customShadows.card,
|
|
backgroundImage: 'none'
|
|
}
|
|
}
|
|
},
|
|
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: 10 } }
|
|
},
|
|
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: { '&:hover': { backgroundColor: palette.primary.lighter + '66' } }
|
|
}
|
|
},
|
|
MuiOutlinedInput: {
|
|
styleOverrides: {
|
|
root: {
|
|
borderRadius: 8,
|
|
backgroundColor: palette.background.paper,
|
|
'& .MuiOutlinedInput-notchedOutline': { borderColor: palette.grey[300] },
|
|
'&:hover .MuiOutlinedInput-notchedOutline': { borderColor: palette.grey[400] }
|
|
},
|
|
input: { padding: '11px 14px' }
|
|
}
|
|
},
|
|
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: 12 } }
|
|
},
|
|
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: 10, boxShadow: customShadows.dropdown, marginTop: 4 } }
|
|
}
|
|
};
|
|
}
|