From 4525f8035b13e7ebc203258fd0816c9b0ab49ef8 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Mon, 8 Dec 2025 21:25:33 +0000
Subject: [PATCH] status box update and res card update

---
 client/src/components/design-elements/ResolutionCard.tsx | 9 ++++++++-
 client/src/components/design-elements/StatBox.tsx        | 8 ++++++--
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/client/src/components/design-elements/ResolutionCard.tsx b/client/src/components/design-elements/ResolutionCard.tsx
index 08f0fb694..494c10519 100644
--- a/client/src/components/design-elements/ResolutionCard.tsx
+++ b/client/src/components/design-elements/ResolutionCard.tsx
@@ -26,7 +26,14 @@ export const ResolutionCard = ({
 
   return (
     <BaseBox sx={{ width: "100%", maxWidth: 420 }}>
-      <Box sx={{ bgcolor: bg, p: 6 }}>
+      <Box
+        sx={{
+          bgcolor: bg,
+          p: 6,
+          borderTopLeftRadius: theme.shape.borderRadius,
+          borderTopRightRadius: theme.shape.borderRadius,
+        }}
+      >
         <Typography variant="h6" color="textPrimary">
           Resolution
         </Typography>
diff --git a/client/src/components/design-elements/StatBox.tsx b/client/src/components/design-elements/StatBox.tsx
index 7fa42d19c..a83215ac9 100644
--- a/client/src/components/design-elements/StatBox.tsx
+++ b/client/src/components/design-elements/StatBox.tsx
@@ -2,6 +2,7 @@ import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
 import Box from "@mui/material/Box";
 import { useTheme } from "@mui/material/styles";
+import { lighten, darken } from "@mui/material/styles";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import type { PaletteKey } from "@/theme/theme";
 import { BaseBox, TooltipWithInfo } from "@/components/design-elements";
@@ -19,16 +20,19 @@ export const GradientBox: React.FC<GradientBox> = ({
 }) => {
   const theme = useTheme();
   const isSmall = useMediaQuery(theme.breakpoints.down("md"));
+  const isLight = theme.palette.mode === "light";
+  const paper = theme.palette.background.paper;
+  const paperStart = lighten(paper, isLight ? 0.06 : 0.08);
+  const paperEnd = paper;
   const bg = palette
     ? `linear-gradient(135deg, ${theme.palette[palette].light} 0%, ${theme.palette[palette].main} 100%)`
-    : theme.palette.background.paper;
+    : `linear-gradient(135deg, ${paperStart} 0%, ${paperEnd} 100%)`;
 
   return (
     <BaseBox
       sx={{
         padding: `${theme.spacing(4)} ${theme.spacing(8)}`,
         width: isSmall ? `100%` : `calc(25% - (3 * ${theme.spacing(8)} / 4))`,
-
         background: bg,
         ...sx,
       }}