coloring fixes

src/components/ProgressCard/ProgressCard.view.tsx

@@ -41,8 +41,8 @@ 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: isDark ? "background.paper" : colorScheme.light,
-        color: "#fff",
+        bgcolor: colorScheme.light,
+        color: colorScheme.text,
         display: "flex",
         flexDirection: "column",
         alignItems: settings.compact ? "flex-start" : "center",
@@ -50,10 +50,10 @@ export default function ProgressCardView({
         position: "relative",
         overflow: "hidden",
         border: selected
-          ? `2px solid #fff`
+          ? `2px solid ${colorScheme.primary}`
           : isDark
           ? "1px solid rgba(255,255,255,0.1)"
-          : "none",
+          : "1px solid rgba(0,0,0,0.06)",
         boxShadow: "none",
         opacity: isFetching ? 0.6 : 1,
         pointerEvents: isFetching ? "none" : "auto",
@@ -92,7 +92,7 @@ export default function ProgressCardView({
         <Divider
           sx={{
             my: 1,
-            borderColor: "rgba(255,255,255,0.25)",
+            borderColor: isDark ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.1)",
             width: "100%",
           }}
         />
@@ -103,7 +103,7 @@ export default function ProgressCardView({
             opacity: 0.85,
             fontWeight: 500,
             display: "block",
-            color: "rgba(255,255,255,0.9)",
+            color: alpha(colorScheme.text, 0.85),
           }}
         >
           of {formattedTotal}
@@ -118,12 +118,12 @@ export default function ProgressCardView({
             height: settings.compact ? 6 : 10,
             borderRadius: 5,
             [`&.${linearProgressClasses.colorPrimary}`]: {
-              backgroundColor: "rgba(0, 0, 0, 0.25)",
+              backgroundColor: isDark ? "rgba(255, 255, 255, 0.12)" : "rgba(0, 0, 0, 0.08)",
             },
             [`& .${linearProgressClasses.bar}`]: {
               borderRadius: 5,
-              backgroundColor: "#fff",
-              boxShadow: "0 0 8px rgba(255,255,255,0.4)",
+              backgroundColor: colorScheme.primary,
+              boxShadow: `0 0 8px ${alpha(colorScheme.primary, 0.4)}`,
             },
           }}
         />