From bf3bd5062434f6f97fc86ce862b4ff25854ece38 Mon Sep 17 00:00:00 2001
From: gorkem-bwl <gorkem.cetin@bluewavelabs.ca>
Date: Sun, 26 Apr 2026 01:56:22 -0400
Subject: [PATCH] feat(client): unify card titles to the eyebrow style across
 uptime details

- StatBox titles now use the eyebrow variant (matches /uptime summary cards)
- BaseChart drops its leading icon block and renders the title via eyebrow so all chart cards share one header style
- Inside the average-response gauge, the qualitative label uses eyebrow with the status colour and the metric uses h1; the gauge track is a neutral disabled-action background so the active arc reads in light and dark
---
 .../Components/design-elements/BaseChart.tsx  | 35 ++++---------------
 .../Components/design-elements/StatBox.tsx    |  7 +++-
 .../monitors/charts/RadialAvgResponse.tsx     |  7 ++--
 3 files changed, 16 insertions(+), 33 deletions(-)

diff --git a/client/src/Components/design-elements/BaseChart.tsx b/client/src/Components/design-elements/BaseChart.tsx
index de87395eb..c6d8298a7 100644
--- a/client/src/Components/design-elements/BaseChart.tsx
+++ b/client/src/Components/design-elements/BaseChart.tsx
@@ -8,7 +8,7 @@ import type { ResponsiveStyleValue } from "@mui/system";
 import { useTheme } from "@mui/material/styles";
 
 type BaseChartProps = React.PropsWithChildren<{
-	icon: React.ReactNode;
+	icon?: React.ReactNode;
 	title: string;
 	width?: number | string;
 	maxWidth?: number | string;
@@ -17,7 +17,6 @@ type BaseChartProps = React.PropsWithChildren<{
 
 export const BaseChart = ({
 	children,
-	icon,
 	title,
 	width = "100%",
 	maxWidth = "100%",
@@ -38,34 +37,12 @@ export const BaseChart = ({
 				gap={theme.spacing(LAYOUT.MD)}
 				flex={1}
 			>
-				<Stack
-					direction="row"
-					alignItems={"center"}
-					gap={theme.spacing(LAYOUT.XS)}
+				<Typography
+					variant="eyebrow"
+					color="text.secondary"
 				>
-					{icon && (
-						<BaseBox
-							sx={{
-								display: "flex",
-								alignItems: "center",
-								justifyContent: "center",
-								width: 34,
-								height: 34,
-								backgroundColor: theme.palette.action.hover,
-								"& svg": {
-									width: 20,
-									height: 20,
-									"& path": {
-										stroke: theme.palette.text.secondary,
-									},
-								},
-							}}
-						>
-							{icon}
-						</BaseBox>
-					)}
-					<Typography variant="h2">{title}</Typography>
-				</Stack>
+					{title}
+				</Typography>
 				<Box flex={1}>{children}</Box>
 			</Stack>
 		</BaseBox>
diff --git a/client/src/Components/design-elements/StatBox.tsx b/client/src/Components/design-elements/StatBox.tsx
index 01a8e9835..954120fe5 100644
--- a/client/src/Components/design-elements/StatBox.tsx
+++ b/client/src/Components/design-elements/StatBox.tsx
@@ -69,7 +69,12 @@ export const StatBox = ({
 		>
 			<Stack onClick={onClick}>
 				<Box sx={{ display: "flex", alignItems: "center", gap: theme.spacing(2) }}>
-					<Typography color={textColor}>{title}</Typography>
+					<Typography
+						variant="eyebrow"
+						color={palette ? textColor : "text.secondary"}
+					>
+						{title}
+					</Typography>
 					{tooltip && (
 						<TooltipWithInfo
 							title={tooltip}
diff --git a/client/src/Components/monitors/charts/RadialAvgResponse.tsx b/client/src/Components/monitors/charts/RadialAvgResponse.tsx
index fcfaa426b..9a88fb42c 100644
--- a/client/src/Components/monitors/charts/RadialAvgResponse.tsx
+++ b/client/src/Components/monitors/charts/RadialAvgResponse.tsx
@@ -52,7 +52,7 @@ export const RadialAvgResponse = ({ avg, max }: { avg: number; max: number }) =>
 					>
 						<RadialBar
 							dataKey="value"
-							background={{ fill: theme.palette[palette].light }}
+							background={{ fill: theme.palette.action.disabledBackground }}
 						>
 							<Cell visibility={"hidden"} />
 							<Cell fill={theme.palette[palette].main} />
@@ -75,13 +75,14 @@ export const RadialAvgResponse = ({ avg, max }: { avg: number; max: number }) =>
 					}}
 				>
 					<Typography
-						variant="h6"
+						variant="eyebrow"
+						color={theme.palette[palette].main}
 						textAlign={"center"}
 					>
 						{msg[palette]}
 					</Typography>
 					<Typography
-						variant="h6"
+						variant="h1"
 						textAlign={"center"}
 					>{`${avg?.toFixed()}ms`}</Typography>
 				</Stack>