Doormile/doormile_console_expresscopy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated the ui

Browse Source
This commit is contained in:
Thiru-tenext
2026-06-11 18:09:10 +05:30
parent 251be9afd2
commit f50b4b010c
33 changed files with 1527 additions and 2302 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
src/themes/index.js
View File

@@ -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'
}
}}
/>

21
src/themes/overrides/Autocomplete.js
View File

@@ -9,6 +9,27 @@ export default function Autocomplete() {
padding: '3px 9px'
}
},
// Soft, rounded popup with comfortable option rows — matches the
// SoftPaper used by the redesigned pages.
paper: {
borderRadius: 12,
boxShadow: '0 18px 50px rgba(15, 23, 42, 0.18)',
border: '1px solid #e2e8f0',
overflow: 'hidden'
},
listbox: {
padding: 6,
'& .MuiAutocomplete-option': {
borderRadius: 8,
margin: '1px 0',
'&[aria-selected="true"]': {
backgroundColor: 'rgba(102, 37, 130, 0.08)'
},
'&.Mui-focused': {
backgroundColor: 'rgba(102, 37, 130, 0.06)'
}
}
},
popupIndicator: {
width: 'auto',
height: 'auto'

41
src/themes/overrides/Button.js
View File

@@ -14,24 +14,21 @@ function getColorStyle({ variant, color, theme }) {
const buttonShadow = `${color}Button`;
const shadows = getShadow(theme, buttonShadow);
// Clean keyboard-focus ring (soft brand-tinted halo) — replaces the old
// flashy expanding ::after glow that read as "template / AI default".
const commonShadow = {
'&::after': {
boxShadow: `0 0 5px 5px ${alpha(main, 0.9)}`
},
'&:active::after': {
boxShadow: `0 0 0 0 ${alpha(main, 0.9)}`
},
'&:focus-visible': {
outline: `2px solid ${dark}`,
outlineOffset: 2
boxShadow: `0 0 0 3px ${alpha(main, 0.32)}`
}
};
switch (variant) {
case 'contained':
return {
boxShadow: 'none',
'&:hover': {
backgroundColor: dark
backgroundColor: dark,
boxShadow: 'none'
},
...commonShadow
};
@@ -103,28 +100,10 @@ export default function Button(theme) {
},
styleOverrides: {
root: {
fontWeight: 400,
'&::after': {
content: '""',
display: 'block',
position: 'absolute',
left: 0,
top: 0,
width: '100%',
height: '100%',
borderRadius: 4,
opacity: 0,
transition: 'all 0.5s'
},
'&:active::after': {
position: 'absolute',
borderRadius: 4,
left: 0,
top: 0,
opacity: 1,
transition: '0s'
}
fontWeight: 600,
borderRadius: 8,
textTransform: 'none',
transition: 'background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease'
},
contained: {
...disabledStyle

3
src/themes/overrides/Chip.js
View File

@@ -40,7 +40,8 @@ export default function Chip(theme) {
MuiChip: {
styleOverrides: {
root: {
borderRadius: 4,
borderRadius: 8,
fontWeight: 600,
'&:active': {
boxShadow: 'none'
},

8
src/themes/overrides/Dialog.js
View File

@@ -8,9 +8,15 @@ export default function Dialog() {
MuiDialog: {
styleOverrides: {
root: {
// Lighter, slightly blurred scrim — less heavy than a near-opaque black.
'& .MuiBackdrop-root': {
backgroundColor: alpha('#000', 0.7)
backgroundColor: alpha('#0f172a', 0.45),
backdropFilter: 'blur(2px)'
}
},
paper: {
borderRadius: 16,
boxShadow: '0 24px 60px rgba(15, 23, 42, 0.22), 0 8px 18px rgba(15, 23, 42, 0.12)'
}
}
}

5
src/themes/overrides/DialogTitle.js
View File

@@ -5,8 +5,9 @@ export default function DialogTitle() {
MuiDialogTitle: {
styleOverrides: {
root: {
fontSize: '1rem',
fontWeight: 500
fontSize: '1.0625rem',
fontWeight: 600,
letterSpacing: '-0.01em'
}
}
}

4
src/themes/overrides/Tab.js
View File

@@ -7,13 +7,13 @@ export default function Tab(theme) {
root: {
minHeight: 46,
color: theme.palette.text.primary,
borderRadius: 4,
borderRadius: 8,
'&:hover': {
backgroundColor: theme.palette.primary.lighter + 60,
color: theme.palette.primary.main
},
'&:focus-visible': {
borderRadius: 4,
borderRadius: 8,
outline: `2px solid ${theme.palette.secondary.dark}`,
outlineOffset: -3
}

29
src/themes/overrides/TableCell.js
View File

@@ -1,42 +1,31 @@
// ==============================|| OVERRIDES - TABLE CELL ||============================== //
export default function TableCell(theme) {
const commonCell = {
'&:not(:last-of-type)': {
position: 'relative',
'&:after': {
position: 'absolute',
content: '""',
backgroundColor: theme.palette.divider,
width: 1,
height: 'calc(100% - 30px)',
right: 0,
top: 16
}
}
};
return {
MuiTableCell: {
styleOverrides: {
root: {
fontSize: '0.875rem',
padding: 12,
padding: '14px 12px',
borderColor: theme.palette.divider
},
sizeSmall: {
padding: 8
padding: '10px 8px'
},
// Clean enterprise header: small, muted, well-tracked uppercase labels.
// The old vertical divider rules between header cells were removed —
// modern data tables (Stripe/Linear) keep headers borderless and quiet.
head: {
fontSize: '0.75rem',
fontSize: '0.6875rem',
fontWeight: 700,
letterSpacing: '0.06em',
textTransform: 'uppercase',
...commonCell
color: theme.palette.text.secondary
},
footer: {
fontSize: '0.75rem',
textTransform: 'uppercase',
...commonCell
color: theme.palette.text.secondary
}
}
}

9
src/themes/overrides/TableHead.js
View File

@@ -1,4 +1,4 @@
// ==============================|| OVERRIDES - TABLE CELL ||============================== //
// ==============================|| OVERRIDES - TABLE HEAD ||============================== //
export default function TableHead(theme) {
return {
@@ -6,8 +6,11 @@ export default function TableHead(theme) {
styleOverrides: {
root: {
backgroundColor: theme.palette.grey[50],
borderTop: `1px solid ${theme.palette.divider}`,
borderBottom: `2px solid ${theme.palette.divider}`
borderTop: 'none',
borderBottom: `1px solid ${theme.palette.divider}`,
'& .MuiTableCell-root': {
borderBottom: `1px solid ${theme.palette.divider}`
}
}
}
}

2
src/themes/shadows.js
View File

@@ -13,7 +13,7 @@ const CustomShadows = (theme) => ({
z1:
theme.palette.mode === ThemeMode.DARK
? `0px 1px 1px rgb(0 0 0 / 14%), 0px 2px 1px rgb(0 0 0 / 12%), 0px 1px 3px rgb(0 0 0 / 20%)`
: `0px 1px 4px ${alpha(theme.palette.grey[900], 0.08)}`,
: `0 1px 3px rgba(15, 23, 42, 0.06), 0 6px 16px rgba(15, 23, 42, 0.06)`,
primary: `0 0 0 2px ${alpha(theme.palette.primary.main, 0.2)}`,
secondary: `0 0 0 2px ${alpha(theme.palette.secondary.main, 0.2)}`,
error: `0 0 0 2px ${alpha(theme.palette.error.main, 0.2)}`,

52
src/themes/typography.js
View File

@@ -1,5 +1,9 @@
// ==============================|| DEFAULT THEME - TYPOGRAPHY ||============================== //
// Refined enterprise type scale (Stripe / Linear feel):
// - Tight negative tracking on display headings so large text reads crisp, not loose.
// - Buttons are medium-weight and case-preserving (no shouty UPPERCASE / Capitalize).
// - Slightly looser tracking on the small uppercase eyebrow/overline labels for legibility.
const Typography = (fontFamily) => ({
htmlFontSize: 16,
fontFamily,
@@ -8,52 +12,62 @@ const Typography = (fontFamily) => ({
fontWeightMedium: 500,
fontWeightBold: 600,
h1: {
fontWeight: 600,
fontSize: '2.375rem',
lineHeight: 1.21
fontWeight: 700,
fontSize: '2.25rem',
lineHeight: 1.2,
letterSpacing: '-0.025em'
},
h2: {
fontWeight: 600,
fontWeight: 700,
fontSize: '1.875rem',
lineHeight: 1.27
lineHeight: 1.25,
letterSpacing: '-0.02em'
},
h3: {
fontWeight: 600,
fontSize: '1.5rem',
lineHeight: 1.33
lineHeight: 1.33,
letterSpacing: '-0.018em'
},
h4: {
fontWeight: 600,
fontSize: '1.25rem',
lineHeight: 1.4
lineHeight: 1.4,
letterSpacing: '-0.014em'
},
h5: {
fontWeight: 600,
fontSize: '1rem',
lineHeight: 1.5
lineHeight: 1.5,
letterSpacing: '-0.01em'
},
h6: {
fontWeight: 400,
fontWeight: 500,
fontSize: '0.875rem',
lineHeight: 1.57
lineHeight: 1.57,
letterSpacing: '-0.006em'
},
caption: {
fontWeight: 400,
fontSize: '0.75rem',
lineHeight: 1.66
lineHeight: 1.66,
letterSpacing: '0'
},
body1: {
fontSize: '0.875rem',
lineHeight: 1.57
lineHeight: 1.57,
letterSpacing: '-0.006em'
},
body2: {
fontSize: '0.75rem',
lineHeight: 1.66
lineHeight: 1.66,
letterSpacing: '0'
},
subtitle1: {
fontSize: '0.875rem',
fontWeight: 600,
lineHeight: 1.57
lineHeight: 1.57,
letterSpacing: '-0.006em'
},
subtitle2: {
fontSize: '0.75rem',
@@ -61,10 +75,16 @@ const Typography = (fontFamily) => ({
lineHeight: 1.66
},
overline: {
lineHeight: 1.66
fontWeight: 600,
fontSize: '0.6875rem',
lineHeight: 1.66,
letterSpacing: '0.06em',
textTransform: 'uppercase'
},
button: {
textTransform: 'capitalize'
fontWeight: 600,
letterSpacing: '-0.004em',
textTransform: 'none'
}
});