common themeConfig.ts

src/components/Dashboard/Dashboard.models.ts

@@ -32,22 +32,8 @@ export interface DashboardSection {
   settings?: Record<string, any>;
 }
 
-export interface ColorDefinition {
-  primary: string;
-  background: string;
-  text: string;
-}
-
-export interface ThemeAwarePalette {
-  light: ColorDefinition;
-  dark: ColorDefinition;
-}
-
 export interface DashboardConfig {
   sections: DashboardSection[];
-  style: {
-    palette: Record<DashboardFlow, ThemeAwarePalette>;
-  };
 }
 
 export interface DashboardViewProps {
@@ -58,6 +44,11 @@ export interface DashboardViewProps {
   isFetching: boolean;
 }
 
+export interface ColorScheme {
+  primary: string;
+  surface: string;
+  text: string;
+}
 
 export interface ComponentProps extends DashboardSection {
   reportData: ReportData;
@@ -66,9 +57,5 @@ export interface ComponentProps extends DashboardSection {
   stateSetters: DashboardStateSetters;
   isFetching: boolean;
 
-  colorScheme: {
-    primary: string;
-    light: string;
-    text: string;
-  };
+  colorScheme: ColorScheme;
 }

src/components/Dashboard/Dashboard.view.tsx

@@ -18,51 +18,20 @@ export default function DashboardView({
   isFetching,
 }: DashboardViewProps) {
   const theme = useTheme();
-  const themeMode = theme.palette.mode;
 
   const {
     flow,
     selectedGroupKey,
   } = state;
 
-  const colors = React.useMemo(() => {
-    const palette = config.style.palette[flow];
-    const modeColors = palette[themeMode];
-
-    return {
-      primary: modeColors.primary,
-      light: modeColors.background || alpha(modeColors.primary, 0.1),
-      text:
-        modeColors.text ||
-        (themeMode === "light" ? theme.palette.text.primary : "#fff"),
-    };
-
-    // if (modeColors) {
-    //   return {
-    //     primary: modeColors.primary,
-    //     light: modeColors.background || alpha(modeColors.primary, 0.1),
-    //     text:
-    //       modeColors.text ||
-    //       (themeMode === "light" ? theme.palette.text.primary : "#fff"),
-    //   };
-    // }
-    //
-    // const themeColor =
-    //   flow === "outflows" ? 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, flow, themeMode, theme.palette]);
+  const colorScheme = flow === "outflows" ? theme.palette.flows.outflows : theme.palette.flows.inflows;
 
   return (
     <Container
       sx={{
         mt: 4,
         mb: 4,
-        background: `linear-gradient(180deg, ${colors.light} 0%, transparent 100%)`,
+        background: `linear-gradient(180deg, ${alpha(colorScheme.primary, theme.palette.mode === "dark" ? 0.06 : 0.04)} 0%, transparent 100%)`,
         borderRadius: 4,
         p: 2,
         transition: "background 0.3s ease",
@@ -89,9 +58,9 @@ export default function DashboardView({
               color: "text.secondary",
             },
             "&.Mui-selected": {
-              bgcolor: colors.primary,
+              bgcolor: colorScheme.primary,
               color: "white",
-              borderColor: colors.primary,
+              borderColor: colorScheme.primary,
             },
           }}
         >
@@ -125,7 +94,7 @@ export default function DashboardView({
                 stateSetters={stateSetters}
                 isFetching={isFetching}
 
-                colorScheme={colors}
+                colorScheme={colorScheme}
               />
             </Grid>
           );

src/components/HistoryChart/HistoryChart.view.tsx

@@ -76,7 +76,7 @@ export default function HistoryChartView({
         boxShadow: "none",
         border: "1px solid",
         borderColor: "divider",
-        bgcolor: isDark ? "background.paper" : colorScheme.light,
+        bgcolor: isDark ? "background.paper" : colorScheme.surface,
         opacity: isFetching ? 0.6 : 1,
         transition: "opacity 0.3s ease",
         pointerEvents: isFetching ? "none" : "auto",

src/components/LatestItems/LatestItems.view.tsx

@@ -9,6 +9,7 @@ import {
   Box,
   IconButton,
 } from "@mui/material";
+import { alpha } from "@mui/material/styles";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import { LatestItemsViewProps } from "./LatestItems.props";
 
@@ -46,7 +47,7 @@ export default function LatestItemsView({
               <Avatar
                 variant="rounded"
                 sx={{
-                  bgcolor: `${accentColor}22`,
+                  bgcolor: alpha(accentColor, 0.13),
                   width: 48,
                   height: 48,
                   borderRadius: 3,

src/components/ProgressCard/ProgressCard.view.tsx

@@ -25,7 +25,6 @@ export default function ProgressCardView({
   onClick,
 }: ProgressCardViewProps) {
   const theme = useTheme();
-  const isDark = theme.palette.mode === "dark";
 
   const percentage = getPercentage(progressAmount, totalAmount);
   const formattedProgress = formatCurrency(progressAmount);
@@ -41,7 +40,7 @@ export default function ProgressCardView({
         borderRadius: settings.compact ? 3 : 4,
         transform: selected ? "scale(1.02)" : "scale(1)",
         transition: "transform 0.2s ease, box-shadow 0.2s ease",
-        bgcolor: colorScheme.light,
+        bgcolor: colorScheme.surface,
         color: colorScheme.text,
         display: "flex",
         flexDirection: "column",
@@ -51,9 +50,8 @@ export default function ProgressCardView({
         overflow: "hidden",
         border: selected
           ? `2px solid ${colorScheme.primary}`
-          : isDark
-          ? "1px solid rgba(255,255,255,0.1)"
-          : "1px solid rgba(0,0,0,0.06)",
+          : "1px solid",
+        borderColor: selected ? colorScheme.primary : "divider",
         boxShadow: "none",
         opacity: isFetching ? 0.6 : 1,
         pointerEvents: isFetching ? "none" : "auto",
@@ -70,7 +68,6 @@ export default function ProgressCardView({
           textOverflow: "ellipsis",
           whiteSpace: "nowrap",
           letterSpacing: 0.5,
-          textShadow: isDark ? "0 1px 2px rgba(0,0,0,0.3)" : "none",
         }}
       >
         {title}
@@ -83,7 +80,6 @@ export default function ProgressCardView({
           sx={{
             mb: 0.5,
             lineHeight: 1.2,
-            textShadow: isDark ? "0 2px 4px rgba(0,0,0,0.3)" : "none",
           }}
         >
           {formattedProgress}
@@ -92,7 +88,7 @@ export default function ProgressCardView({
         <Divider
           sx={{
             my: 1,
-            borderColor: isDark ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.1)",
+            borderColor: "divider",
             width: "100%",
           }}
         />
@@ -118,7 +114,7 @@ export default function ProgressCardView({
             height: settings.compact ? 6 : 10,
             borderRadius: 5,
             [`&.${linearProgressClasses.colorPrimary}`]: {
-              backgroundColor: isDark ? "rgba(255, 255, 255, 0.12)" : "rgba(0, 0, 0, 0.08)",
+              backgroundColor: alpha(theme.palette.divider, 0.5),
             },
             [`& .${linearProgressClasses.bar}`]: {
               borderRadius: 5,