updated the ui
This commit is contained in:
@@ -12,6 +12,37 @@ import Typography from './typography';
|
||||
import CustomShadows from './shadows';
|
||||
import componentsOverride from './overrides';
|
||||
|
||||
// Refined enterprise elevation ramp — soft, layered, low-contrast shadows
|
||||
// (Stripe/Linear feel) instead of MUI's default hard grey drop-shadows.
|
||||
// MUI requires exactly 25 entries (index 0 = 'none').
|
||||
const softShadows = [
|
||||
'none',
|
||||
'0 1px 2px rgba(15, 23, 42, 0.04)',
|
||||
'0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04)',
|
||||
'0 2px 6px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04)',
|
||||
'0 4px 10px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.05)',
|
||||
'0 6px 14px rgba(15, 23, 42, 0.07), 0 2px 4px rgba(15, 23, 42, 0.05)',
|
||||
'0 8px 18px rgba(15, 23, 42, 0.08), 0 2px 5px rgba(15, 23, 42, 0.05)',
|
||||
'0 10px 22px rgba(15, 23, 42, 0.08), 0 3px 6px rgba(15, 23, 42, 0.05)',
|
||||
'0 12px 26px rgba(15, 23, 42, 0.09), 0 4px 8px rgba(15, 23, 42, 0.06)',
|
||||
'0 14px 30px rgba(15, 23, 42, 0.10), 0 4px 9px rgba(15, 23, 42, 0.06)',
|
||||
'0 16px 34px rgba(15, 23, 42, 0.10), 0 5px 10px rgba(15, 23, 42, 0.06)',
|
||||
'0 18px 38px rgba(15, 23, 42, 0.11), 0 6px 11px rgba(15, 23, 42, 0.07)',
|
||||
'0 20px 42px rgba(15, 23, 42, 0.11), 0 6px 12px rgba(15, 23, 42, 0.07)',
|
||||
'0 22px 46px rgba(15, 23, 42, 0.12), 0 7px 13px rgba(15, 23, 42, 0.07)',
|
||||
'0 24px 50px rgba(15, 23, 42, 0.12), 0 8px 14px rgba(15, 23, 42, 0.08)',
|
||||
'0 26px 54px rgba(15, 23, 42, 0.13), 0 8px 15px rgba(15, 23, 42, 0.08)',
|
||||
'0 28px 58px rgba(15, 23, 42, 0.13), 0 9px 16px rgba(15, 23, 42, 0.08)',
|
||||
'0 30px 62px rgba(15, 23, 42, 0.14), 0 10px 17px rgba(15, 23, 42, 0.09)',
|
||||
'0 32px 66px rgba(15, 23, 42, 0.14), 0 10px 18px rgba(15, 23, 42, 0.09)',
|
||||
'0 34px 70px rgba(15, 23, 42, 0.15), 0 11px 19px rgba(15, 23, 42, 0.09)',
|
||||
'0 36px 74px rgba(15, 23, 42, 0.15), 0 12px 20px rgba(15, 23, 42, 0.10)',
|
||||
'0 38px 78px rgba(15, 23, 42, 0.16), 0 12px 21px rgba(15, 23, 42, 0.10)',
|
||||
'0 40px 82px rgba(15, 23, 42, 0.16), 0 13px 22px rgba(15, 23, 42, 0.10)',
|
||||
'0 42px 86px rgba(15, 23, 42, 0.17), 0 14px 23px rgba(15, 23, 42, 0.11)',
|
||||
'0 44px 90px rgba(15, 23, 42, 0.18), 0 14px 24px rgba(15, 23, 42, 0.11)'
|
||||
];
|
||||
|
||||
// ==============================|| DEFAULT THEME - MAIN ||============================== //
|
||||
|
||||
export default function ThemeCustomization({ children }) {
|
||||
@@ -52,6 +83,9 @@ export default function ThemeCustomization({ children }) {
|
||||
}
|
||||
},
|
||||
direction: themeDirection,
|
||||
shape: {
|
||||
borderRadius: 8
|
||||
},
|
||||
mixins: {
|
||||
toolbar: {
|
||||
minHeight: 60,
|
||||
@@ -61,7 +95,8 @@ export default function ThemeCustomization({ children }) {
|
||||
},
|
||||
palette: theme.palette,
|
||||
customShadows: themeCustomShadows,
|
||||
typography: themeTypography
|
||||
typography: themeTypography,
|
||||
shadows: softShadows
|
||||
}),
|
||||
[themeDirection, theme, themeTypography, themeCustomShadows]
|
||||
);
|
||||
@@ -75,38 +110,37 @@ export default function ThemeCustomization({ children }) {
|
||||
<CssBaseline />
|
||||
<GlobalStyles
|
||||
styles={{
|
||||
// '*': { // this * access even the internal scroll bar,
|
||||
// // scrollbarWidth: '100px', // works in Firefox only
|
||||
// scrollbarColor: `${theme.palette.primary.main} ${theme.palette.secondary.lighter}`
|
||||
// },
|
||||
// '*::-webkit-scrollbar': {
|
||||
// width: '22px', // vertical
|
||||
// height: '22px' // horizontal
|
||||
// },
|
||||
// '*::-webkit-scrollbar-thumb': {
|
||||
// backgroundColor: '#65387A'
|
||||
// // borderRadius: '5px'
|
||||
// },
|
||||
// '*::-webkit-scrollbar-track': {
|
||||
// backgroundColor: `${theme.palette.secondary.lighter}`
|
||||
// }
|
||||
overflow: 'auto',
|
||||
'&::-webkit-scrollbar': {
|
||||
width: '14px', // scroll bar width
|
||||
cursor: 'pointer'
|
||||
// Crisp font rendering across the app (enterprise polish).
|
||||
body: {
|
||||
WebkitFontSmoothing: 'antialiased',
|
||||
MozOsxFontSmoothing: 'grayscale',
|
||||
textRendering: 'optimizeLegibility'
|
||||
},
|
||||
'&::-webkit-scrollbar-thumb': {
|
||||
backgroundColor: theme.palette.primary.main, // thumb color
|
||||
// borderRadius: '8px',
|
||||
cursor: 'pointer'
|
||||
// Thin, unobtrusive scrollbars (Stripe/Linear style) instead of the
|
||||
// chunky 14px solid-purple bar. Track is transparent; the thumb is a
|
||||
// soft slate that tints toward brand purple on hover.
|
||||
'*': {
|
||||
scrollbarWidth: 'thin', // Firefox
|
||||
scrollbarColor: 'rgba(102, 37, 130, 0.28) transparent'
|
||||
},
|
||||
'&::-webkit-scrollbar-thumb:hover': {
|
||||
backgroundColor: theme.palette.primary.dark, // hover color
|
||||
cursor: 'pointer'
|
||||
'*::-webkit-scrollbar': {
|
||||
width: '10px',
|
||||
height: '10px'
|
||||
},
|
||||
'&::-webkit-scrollbar-track': {
|
||||
backgroundColor: theme.palette.primary.lighter,
|
||||
cursor: 'pointer'
|
||||
'*::-webkit-scrollbar-track': {
|
||||
backgroundColor: 'transparent'
|
||||
},
|
||||
'*::-webkit-scrollbar-thumb': {
|
||||
backgroundColor: 'rgba(102, 37, 130, 0.26)',
|
||||
borderRadius: '8px',
|
||||
border: '2px solid transparent',
|
||||
backgroundClip: 'padding-box'
|
||||
},
|
||||
'*::-webkit-scrollbar-thumb:hover': {
|
||||
backgroundColor: 'rgba(102, 37, 130, 0.45)'
|
||||
},
|
||||
'*::-webkit-scrollbar-corner': {
|
||||
backgroundColor: 'transparent'
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user