From cc7e6509d2e358fcf90b85a491b7a65a5a401b20 Mon Sep 17 00:00:00 2001 From: Vishesh 'ironeagle' Bangotra Date: Sat, 25 Apr 2026 13:47:42 +0530 Subject: [PATCH] theme changes --- src/components/Dashboard/Dashboard.models.ts | 18 +++++--- src/components/Dashboard/Dashboard.view.tsx | 29 ++++++++++++- .../HistoryChart/HistoryChart.view.tsx | 34 +++++++++------ .../ProgressCard/ProgressCard.view.tsx | 43 ++++++++++++------- src/dashboard-config.ts | 28 ++++++++---- 5 files changed, 106 insertions(+), 46 deletions(-) diff --git a/src/components/Dashboard/Dashboard.models.ts b/src/components/Dashboard/Dashboard.models.ts index 6cbaa6c..7bc3996 100644 --- a/src/components/Dashboard/Dashboard.models.ts +++ b/src/components/Dashboard/Dashboard.models.ts @@ -23,15 +23,21 @@ export interface DashboardSection { }; } +export interface ColorDefinition { + primary: string; + background?: string; + text?: string; +} + +export interface ThemeAwarePalette { + light: ColorDefinition; + dark: ColorDefinition; +} + export interface DashboardConfig { sections: DashboardSection[]; style?: { - palette: Record; + palette?: Record; }; } diff --git a/src/components/Dashboard/Dashboard.view.tsx b/src/components/Dashboard/Dashboard.view.tsx index ca95e08..f0d9ed2 100644 --- a/src/components/Dashboard/Dashboard.view.tsx +++ b/src/components/Dashboard/Dashboard.view.tsx @@ -7,6 +7,7 @@ import { ToggleButton, ToggleButtonGroup } from "@mui/material"; +import { useTheme, alpha } from "@mui/material/styles"; import { DashboardProps, DashboardState } from "./Dashboard.models"; interface ViewProps extends DashboardProps { @@ -22,8 +23,31 @@ export default function DashboardView({ setState, onModeChange }: ViewProps) { + const theme = useTheme(); + const themeMode = theme.palette.mode; const { mode, period, comparison } = state; - const colors = config.style?.palette[mode] || { primary: '#000', light: '#fff' }; + + // Resolve colors with fallbacks + const colors = React.useMemo(() => { + const palette = config.style?.palette?.[mode]; + const modeColors = palette ? palette[themeMode] : null; + + if (modeColors) { + return { + primary: modeColors.primary, + light: modeColors.background || alpha(modeColors.primary, 0.1), + text: modeColors.text || (themeMode === 'light' ? theme.palette.text.primary : '#fff') + }; + } + + // Fallback to standard theme colors + const themeColor = mode === 'expense' ? theme.palette.error : theme.palette.success; + return { + primary: themeColor.main, + light: alpha(themeColor.main, themeMode === 'light' ? 0.08 : 0.15), + text: themeColor.main + }; + }, [config.style?.palette, mode, themeMode, theme.palette]); const handleModeChange = (_: any, newMode: any) => { if (newMode && onModeChange) { @@ -39,7 +63,8 @@ export default function DashboardView({ mb: 4, background: `linear-gradient(180deg, ${colors.light} 0%, transparent 100%)`, borderRadius: 4, - p: 2 + p: 2, + transition: 'background 0.3s ease' }} > diff --git a/src/components/HistoryChart/HistoryChart.view.tsx b/src/components/HistoryChart/HistoryChart.view.tsx index 35d325f..d6b9333 100644 --- a/src/components/HistoryChart/HistoryChart.view.tsx +++ b/src/components/HistoryChart/HistoryChart.view.tsx @@ -6,6 +6,7 @@ import { ToggleButton, Paper } from "@mui/material"; +import { useTheme, alpha } from "@mui/material/styles"; import IconButton from "@mui/material/IconButton"; import ChevronLeftIcon from "@mui/icons-material/ChevronLeft"; import ChevronRightIcon from "@mui/icons-material/ChevronRight"; @@ -48,6 +49,9 @@ export default function HistoryChartView(props: ViewProps) { activeDataKey, } = props; + const theme = useTheme(); + const isDark = theme.palette.mode === "dark"; + const handleTabChange = (_: React.MouseEvent, newTab: string | null) => { if (newTab !== null) setActiveTab(newTab); }; @@ -66,16 +70,17 @@ export default function HistoryChartView(props: ViewProps) { return ( - + {header} @@ -157,7 +162,7 @@ export default function HistoryChartView(props: ViewProps) { return ( - + {formatDisplay(point, activeTab.toLowerCase(), comparison)} {comparison && ( - + )} - - - - + + {formatLabel(point.id, activeDataKey)} @@ -198,7 +204,7 @@ export default function HistoryChartView(props: ViewProps) { variant="caption" sx={{ fontSize: "0.65rem", - color: "grey.400", + color: "text.disabled", visibility: comparison && point.compare && activeDataKey !== "daily" ? "visible" : "hidden" }} > diff --git a/src/components/ProgressCard/ProgressCard.view.tsx b/src/components/ProgressCard/ProgressCard.view.tsx index 101a2cc..7f784fe 100644 --- a/src/components/ProgressCard/ProgressCard.view.tsx +++ b/src/components/ProgressCard/ProgressCard.view.tsx @@ -7,6 +7,7 @@ import { Divider, linearProgressClasses } from "@mui/material"; +import { useTheme, alpha } from "@mui/material/styles"; import { ProgressCardProps } from "./ProgressCard.models"; interface ViewProps extends ProgressCardProps { @@ -23,6 +24,9 @@ export default function ProgressCardView({ formattedTotal, compact = false, }: ViewProps) { + const theme = useTheme(); + const isDark = theme.palette.mode === "dark"; + return ( - colorTheme === "info" - ? "linear-gradient(135deg, #0284c7 0%, #06b6d4 100%)" - : `linear-gradient(135deg, ${theme.palette[colorTheme].main} 0%, ${theme.palette[colorTheme].light} 100%)`, + background: (theme) => { + const baseColor = theme.palette[colorTheme]?.main || theme.palette.primary.main; + const lightColor = theme.palette[colorTheme]?.light || theme.palette.primary.light; + return isDark + ? `linear-gradient(135deg, ${alpha(baseColor, 0.9)} 0%, ${alpha(baseColor, 0.3)} 100%)` + : `linear-gradient(135deg, ${baseColor} 0%, ${lightColor} 100%)`; + }, color: "#fff", display: "flex", flexDirection: "column", @@ -41,11 +48,12 @@ export default function ProgressCardView({ justifyContent: "center", position: "relative", overflow: "hidden", + border: isDark ? "1px solid rgba(255,255,255,0.1)" : "none", boxShadow: (theme) => `0 ${compact ? 6 : 12}px ${compact ? 12 : 24}px -10px ${ - theme.palette.mode === "dark" - ? "#000" - : theme.palette[colorTheme].main + isDark + ? "rgba(0,0,0,0.5)" + : theme.palette[colorTheme]?.main || theme.palette.primary.main }`, }} > @@ -53,13 +61,14 @@ export default function ProgressCardView({ variant={compact ? "body2" : "subtitle1"} fontWeight={700} sx={{ - opacity: 0.9, + opacity: 0.95, mb: compact ? 1.5 : 2, width: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', - letterSpacing: 0.5 + letterSpacing: 0.5, + textShadow: isDark ? '0 1px 2px rgba(0,0,0,0.3)' : 'none' }} > {header} @@ -69,7 +78,7 @@ export default function ProgressCardView({ {formattedProgress} @@ -77,7 +86,7 @@ export default function ProgressCardView({ @@ -85,12 +94,13 @@ export default function ProgressCardView({ - {formattedTotal} + of {formattedTotal} @@ -102,11 +112,12 @@ export default function ProgressCardView({ height: compact ? 6 : 10, borderRadius: 5, [`&.${linearProgressClasses.colorPrimary}`]: { - backgroundColor: "rgba(0, 0, 0, 0.2)", + backgroundColor: "rgba(0, 0, 0, 0.25)", }, [`& .${linearProgressClasses.bar}`]: { borderRadius: 5, backgroundColor: "#fff", + boxShadow: '0 0 8px rgba(255,255,255,0.4)' }, }} /> diff --git a/src/dashboard-config.ts b/src/dashboard-config.ts index 2799ee4..a369b5b 100644 --- a/src/dashboard-config.ts +++ b/src/dashboard-config.ts @@ -44,16 +44,28 @@ export const configuration: DashboardConfig = { style: { palette: { expense: { - primary: "#d32f2f", - light: "#fdecea", - dark: "#9a0007", - text: "#b71c1c" + light: { + primary: "#d32f2f", + background: "#fdecea", + text: "#b71c1c" + }, + dark: { + primary: "#f44336", + background: "rgba(244, 67, 54, 0.15)", + text: "#ffcdd2" + } }, income: { - primary: "#2e7d32", - light: "#e8f5e9", - dark: "#1b5e20", - text: "#1b5e20" + light: { + primary: "#2e7d32", + background: "#e8f5e9", + text: "#1b5e20" + }, + dark: { + primary: "#4caf50", + background: "rgba(76, 175, 80, 0.15)", + text: "#c8e6c9" + } } } }