theme changes

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 (
     <Paper
       elevation={compact ? 2 : 4}
@@ -30,10 +34,13 @@ export default function ProgressCardView({
         width: "100%",
         p: compact ? { xs: 2.5, md: 3 } : { xs: 3, md: 4 },
         borderRadius: compact ? 3 : 4,
-        background: (theme) =>
-          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({
         <Typography
           variant={compact ? "h5" : "h3"}
           fontWeight={900}
-          sx={{ mb: 0.5, lineHeight: 1.2 }}
+          sx={{ mb: 0.5, lineHeight: 1.2, textShadow: isDark ? '0 2px 4px rgba(0,0,0,0.3)' : 'none' }}
         >
           {formattedProgress}
         </Typography>
@@ -77,7 +86,7 @@ export default function ProgressCardView({
         <Divider
           sx={{
             my: 1,
-            borderColor: "rgba(255,255,255,0.4)",
+            borderColor: "rgba(255,255,255,0.25)",
             width: "100%",
           }}
         />
@@ -85,12 +94,13 @@ export default function ProgressCardView({
         <Typography
           variant={compact ? "caption" : "body2"}
           sx={{
-            opacity: 0.8,
-            fontWeight: 400,
-            display: "block"
+            opacity: 0.85,
+            fontWeight: 500,
+            display: "block",
+            color: "rgba(255,255,255,0.9)"
           }}
         >
-          {formattedTotal}
+          of {formattedTotal}
         </Typography>
       </Box>
 
@@ -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)'
             },
           }}
         />