From 1372e66749cd955e33e36364d3474e3d7c69535a Mon Sep 17 00:00:00 2001 From: gorkem-bwl Date: Thu, 3 Sep 2026 00:52:41 -0400 Subject: [PATCH] fix(client): calm the stat box grid and firm up borders Three fixes, all fallout from giving `divider` a real value: - The graph-paper texture behind the status counts is drawn with `divider`. That used to be rgba(0,0,0,.12) and near-invisible; now it is opaque, so the grid jumped forward and read as the loudest thing on the page. It is texture, not a rule, so it now takes divider at 40%. - GradientBox called lighten() on background.paper to build its gradient. paper is white in light mode and lightening white is a no-op, so the gradient collapsed flat. Darkens slightly toward the page ground instead. - Borders were too faint at #D9E1DD (1.33:1 against paper). Now #C7D2CC (1.55:1), and dark mode #2C3532 -> #3A4642 (1.73:1), so tables and cards have a visible edge without turning into hard rules. Claude-Session: https://claude.ai/code/session_01AbYLvwpEaZFXktHVcqrFRd --- client/src/Components/design-elements/StatBox.tsx | 6 ++++-- client/src/Components/design-elements/StatusBox.tsx | 9 ++++++--- client/src/Utils/Theme/Palette.ts | 4 ++-- 3 files changed, 12 insertions(+), 7 deletions(-) diff --git a/client/src/Components/design-elements/StatBox.tsx b/client/src/Components/design-elements/StatBox.tsx index 1543766fc..addbc7ee9 100644 --- a/client/src/Components/design-elements/StatBox.tsx +++ b/client/src/Components/design-elements/StatBox.tsx @@ -2,7 +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 } from "@mui/material/styles"; +import { darken, lighten } from "@mui/material/styles"; import useMediaQuery from "@mui/material/useMediaQuery"; import type { PaletteKey } from "@/Utils/Theme/Theme"; import { BaseBox, TooltipWithInfo } from "@/Components/design-elements"; @@ -19,7 +19,9 @@ export const GradientBox = ({ children, palette, sx, interactive }: GradientBox) 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); + // In light mode `paper` is white, and lightening white is a no-op - the + // gradient collapses flat. Darken slightly towards the page ground instead. + const paperStart = isLight ? darken(paper, 0.02) : lighten(paper, 0.08); const paperEnd = paper; const bg = palette ? `linear-gradient(135deg, ${theme.palette[palette].light} 0%, ${theme.palette[palette].main} 100%)` diff --git a/client/src/Components/design-elements/StatusBox.tsx b/client/src/Components/design-elements/StatusBox.tsx index 017873eb9..191ed21d6 100644 --- a/client/src/Components/design-elements/StatusBox.tsx +++ b/client/src/Components/design-elements/StatusBox.tsx @@ -5,7 +5,7 @@ import { BaseBox } from "@/Components/design-elements"; import { useTranslation } from "react-i18next"; import type { SxProps } from "@mui/material"; -import { useTheme } from "@mui/material/styles"; +import { alpha, useTheme } from "@mui/material/styles"; type StatusBoxProps = React.PropsWithChildren<{ children: React.ReactNode; @@ -33,9 +33,12 @@ export const BGBox = ({ children, sx }: StatusBoxProps) => { bottom={0} sx={{ pointerEvents: "none", + // Deliberately far fainter than `divider` - this is texture + // behind the number, not a rule, and it must never compete + // with the box's own border. backgroundImage: ` - linear-gradient(${theme.palette.divider} 1px, transparent 1px), - linear-gradient(90deg, ${theme.palette.divider} 1px, transparent 1px) + linear-gradient(${alpha(theme.palette.divider, 0.4)} 1px, transparent 1px), + linear-gradient(90deg, ${alpha(theme.palette.divider, 0.4)} 1px, transparent 1px) `, backgroundSize: "24px 24px", maskImage: diff --git a/client/src/Utils/Theme/Palette.ts b/client/src/Utils/Theme/Palette.ts index bfb9dda5d..a7f4b9a27 100644 --- a/client/src/Utils/Theme/Palette.ts +++ b/client/src/Utils/Theme/Palette.ts @@ -24,14 +24,14 @@ export const colors = { ink600: "#55635C", ink400: "#7C8983", surface50: "#F6F8F7", - rule200: "#D9E1DD", + rule200: "#C7D2CC", // Semantic colours derived from the brand rather than Material's defaults successMain: "#0D6049", errorMain: "#A02B24", warningMain: "#8C5806", inkDark900: "#ECEFED", inkDark600: "#A3ADA8", - ruleDark: "#2C3532", + ruleDark: "#3A4642", successDark: "#4BC49E", errorDark: "#E8837A", warningDark: "#E0A458",