# Dashboard State Lift + Theme System Refactor ## Summary Refactored dashboard state ownership, centralized theme semantics, and simplified component styling across the application. ## Changes ### Dashboard State Refactor * Moved dashboard state management from `Dashboard.view` into `Dashboard.tsx` * Added centralized `DashboardState` initialization in parent container * Introduced memoized dashboard state setter callbacks: * `toggleFlow` * `setFlow` * `togglePeriodType` * `toggleComparison` * `setSelectedPeriodId` * `setSelectedGroupKey` * Added `DashboardStateSetters` memoized object for prop-driven state management * Removed `onFlowChange` callback pattern * Converted dashboard component into stateless view layer * Renamed component export flow: * `Dashboard.tsx` → removed * `Dashboard.view.tsx` → primary implementation ### Dashboard Models Cleanup * Removed legacy palette configuration interfaces: * `ColorDefinition` * `ThemeAwarePalette` * Removed config-level style palette support from `DashboardConfig` * Renamed `DashboardProps` → `DashboardViewProps` * Added reusable `ColorScheme` interface * Simplified component color contract: * `primary` * `surface` * `text` ### Theme Architecture Refactor * Moved `AppTheme.tsx` into `shared-theme` * Added centralized semantic theme system * Introduced `themeConfig.ts` with semantic tokens: * surface * border * text * Added `semantic` extension to MUI theme typing * Added `flows` palette extension: * outflows * inflows * Centralized flow colors inside theme primitives * Added CSS semantic variables: * `--bg-page` * `--bg-card` * `--bg-elevated` * `--border-default` * `--border-subtle` * `--text-primary` * `--text-secondary` * `--text-muted` ### Theme Mode Improvements * Added explicit `ColorMode` type * Expanded `ColorModeContext`: * `mode` * `setMode` * `toggleColorMode` * Added `CssBaseline` * Added configurable `defaultMode` * Simplified dark theme palette handling * Standardized dark surfaces and shadows * Reduced excessive dark-mode glow/shadow intensity ### Dashboard UI Styling Improvements * Replaced hardcoded dashboard palette config with theme palette usage * Updated dashboard background gradients to use alpha-based semantic colors * Replaced `colorScheme.light` usage with `colorScheme.surface` * Standardized border usage with theme divider tokens * Removed manual dark-mode conditional styling where redundant * Simplified card and progress styling logic ### Shared Theme Customization Cleanup Updated customization layers for improved consistency: * `inputs` * `navigation` * `feedback` * `surfaces` Key improvements: * Reduced dark-mode contrast harshness * Unified divider usage * Replaced hardcoded grayscale backgrounds with semantic surfaces * Simplified hover and active state styling * Reduced shadow intensity across components * Improved dark-mode readability and layering ### Home Page Styling Cleanup * Replaced manual RGBA handling with `alpha()` utility * Improved dark-mode glassmorphism consistency * Updated CTA hover shadow to use theme primary color ### Miscellaneous Cleanup * Updated imports to new theme structure * Removed unused legacy color mode components: * `ColorModeIconDropdown.tsx` * `ColorModeSelect.tsx` * Removed dashboard config style palette definitions * Simplified flow-based color derivation logic ## Result * Cleaner separation of stateful vs presentational dashboard logic * Centralized semantic theming system * Consistent dark/light mode behavior * Reduced styling duplication * Improved maintainability and extensibility of theme architecture * Simplified dashboard component contracts * Better UI consistency across surfaces and controls Reviewed-on: #6 Co-authored-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com> Co-committed-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>
47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
import { Theme, alpha, Components } from '@mui/material/styles';
|
|
import { gray, orange } from '../themePrimitives';
|
|
|
|
/* eslint-disable import/prefer-default-export */
|
|
export const feedbackCustomizations: Components<Theme> = {
|
|
MuiAlert: {
|
|
styleOverrides: {
|
|
root: ({ theme }) => ({
|
|
borderRadius: 10,
|
|
backgroundColor: orange[100],
|
|
color: (theme.vars || theme).palette.text.primary,
|
|
border: `1px solid ${alpha(orange[300], 0.5)}`,
|
|
'& .MuiAlert-icon': {
|
|
color: orange[500],
|
|
},
|
|
...theme.applyStyles('dark', {
|
|
backgroundColor: alpha(orange[900], 0.35),
|
|
border: `1px solid ${alpha(orange[800], 0.3)}`,
|
|
}),
|
|
}),
|
|
},
|
|
},
|
|
MuiDialog: {
|
|
styleOverrides: {
|
|
root: ({ theme }) => ({
|
|
'& .MuiDialog-paper': {
|
|
borderRadius: '10px',
|
|
border: '1px solid',
|
|
borderColor: (theme.vars || theme).palette.divider,
|
|
},
|
|
}),
|
|
},
|
|
},
|
|
MuiLinearProgress: {
|
|
styleOverrides: {
|
|
root: ({ theme }) => ({
|
|
height: 8,
|
|
borderRadius: 8,
|
|
backgroundColor: gray[200],
|
|
...theme.applyStyles('dark', {
|
|
backgroundColor: gray[800],
|
|
}),
|
|
}),
|
|
},
|
|
},
|
|
};
|