Vishesh 'ironeagle' Bangotra
9808a1f39b
- Stripe-style theme: single indigo (#635BFF) brand, 6px radius, Inter scale; rewritten themePrimitives + MUI customizations (solid primary, near-black secondary, severity-aware Alert) - Sticky Header (brand-left nav, theme toggle, mobile drawer), inline Footer, route fade-in, per-route document.title - Home hero + feature cards (dead /dashboard,/reports links replaced) - Split-panel AuthPage with validation and password visibility - Data pages: PageHeader/EmptyState, breadcrumbed Fetch Request pages, admin table polish (numeric alignment, row-hover actions, skeletons, empty states), single-accent admin SideMenu - Global ToastProvider wired into app shell - New /expenses page: month-grouped feed, single-open accordion with inline detail (account, tags, amount, timestamps)
114 lines
3.0 KiB
TypeScript
114 lines
3.0 KiB
TypeScript
import { alpha, Theme, Components } from '@mui/material/styles';
|
|
import { gray } from '../themePrimitives';
|
|
|
|
/* eslint-disable import/prefer-default-export */
|
|
export const surfacesCustomizations: Components<Theme> = {
|
|
MuiAccordion: {
|
|
defaultProps: {
|
|
elevation: 0,
|
|
disableGutters: true,
|
|
},
|
|
styleOverrides: {
|
|
root: ({ theme }) => ({
|
|
padding: 4,
|
|
overflow: 'clip',
|
|
backgroundColor: (theme.vars || theme).palette.background.default,
|
|
border: '1px solid',
|
|
borderColor: (theme.vars || theme).palette.divider,
|
|
':before': {
|
|
backgroundColor: 'transparent',
|
|
},
|
|
'&:not(:last-of-type)': {
|
|
borderBottom: 'none',
|
|
},
|
|
'&:first-of-type': {
|
|
borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
|
|
borderTopRightRadius: (theme.vars || theme).shape.borderRadius,
|
|
},
|
|
'&:last-of-type': {
|
|
borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius,
|
|
borderBottomRightRadius: (theme.vars || theme).shape.borderRadius,
|
|
},
|
|
}),
|
|
},
|
|
},
|
|
MuiAccordionSummary: {
|
|
styleOverrides: {
|
|
root: ({ theme }) => ({
|
|
border: 'none',
|
|
borderRadius: (theme.vars || theme).shape.borderRadius,
|
|
'&:hover': { backgroundColor: gray[50] },
|
|
'&:focus-visible': { backgroundColor: 'transparent' },
|
|
...theme.applyStyles('dark', {
|
|
'&:hover': { backgroundColor: alpha(theme.palette.common.white, 0.06) },
|
|
}),
|
|
}),
|
|
},
|
|
},
|
|
MuiAccordionDetails: {
|
|
styleOverrides: {
|
|
root: { mb: 20, border: 'none' },
|
|
},
|
|
},
|
|
MuiPaper: {
|
|
defaultProps: {
|
|
elevation: 0,
|
|
},
|
|
},
|
|
MuiCard: {
|
|
styleOverrides: {
|
|
root: ({ theme }) => {
|
|
return {
|
|
padding: 16,
|
|
gap: 16,
|
|
transition: 'all 100ms ease',
|
|
backgroundColor: gray[50],
|
|
borderRadius: (theme.vars || theme).shape.borderRadius,
|
|
border: `1px solid ${(theme.vars || theme).palette.divider}`,
|
|
boxShadow: 'none',
|
|
...theme.applyStyles('dark', {
|
|
backgroundColor: (theme.vars || theme).palette.background.paper,
|
|
}),
|
|
variants: [
|
|
{
|
|
props: {
|
|
variant: 'outlined',
|
|
},
|
|
style: {
|
|
border: `1px solid ${(theme.vars || theme).palette.divider}`,
|
|
boxShadow: 'none',
|
|
background: 'hsl(0, 0%, 100%)',
|
|
...theme.applyStyles('dark', {
|
|
background: alpha((theme.vars || theme).palette.background.paper, 0.6),
|
|
}),
|
|
},
|
|
},
|
|
],
|
|
};
|
|
},
|
|
},
|
|
},
|
|
MuiCardContent: {
|
|
styleOverrides: {
|
|
root: {
|
|
padding: 0,
|
|
'&:last-child': { paddingBottom: 0 },
|
|
},
|
|
},
|
|
},
|
|
MuiCardHeader: {
|
|
styleOverrides: {
|
|
root: {
|
|
padding: 0,
|
|
},
|
|
},
|
|
},
|
|
MuiCardActions: {
|
|
styleOverrides: {
|
|
root: {
|
|
padding: 0,
|
|
},
|
|
},
|
|
},
|
|
};
|