From acbf26b03d7a70dab9ef21a782c5fd53ce733994 Mon Sep 17 00:00:00 2001
From: gorkem-bwl <gorkem.cetin@bluewavelabs.ca>
Date: Thu, 3 Sep 2026 01:22:12 -0400
Subject: [PATCH] fix(client): solid red offline banner, and lighter incident
 icons

The offline banner used error.main, which in dark mode is light enough
that MUI derives near-black contrastText - a pale salmon bar with dark
text on the one surface where urgency is the point. It now uses
error.dark with explicit white text: 11.12:1 in light mode, 5.04:1 in
dark, and a solid red bar in both.

Darkening error.main itself was the other option, but roughly 30 places
use it as text or a chart mark on a dark ground, where the lighter value
is correct - it would have cost all of them to fix one banner.

The incident summary icons rendered at the shared Icon default of 20px
in lucide's currentColor, so they sat larger and darker than the 13px
label beside them. Now 16px, matching the sidebar and the uptime header
buttons, and coloured from SummaryItem so the icon is a supporting mark
rather than competing with its own label. The 32px status icon on the
active-incidents card keeps its size and semantic colour; it is a focal
indicator, not a label decoration.

Claude-Session: https://claude.ai/code/session_01AbYLvwpEaZFXktHVcqrFRd
---
 .../design-elements/OfflineBanner.tsx         | 10 ++++--
 .../Incidents/Components/CardSummary.tsx      | 31 ++++++++++++++++---
 2 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/client/src/Components/design-elements/OfflineBanner.tsx b/client/src/Components/design-elements/OfflineBanner.tsx
index 062b1ca0d..33b26ae53 100644
--- a/client/src/Components/design-elements/OfflineBanner.tsx
+++ b/client/src/Components/design-elements/OfflineBanner.tsx
@@ -37,8 +37,14 @@ export const OfflineBanner = ({ visible }: OfflineBannerProps) => {
 				left: 0,
 				right: 0,
 				zIndex: theme.zIndex.snackbar,
-				backgroundColor: theme.palette.error.main,
-				color: theme.palette.error.contrastText,
+				// `error.dark` rather than `main`: in dark mode `main` is light
+				// enough that MUI derives near-black contrastText, which reads as
+				// a warning rather than an outage on the one surface where
+				// urgency matters. `dark` keeps a solid red bar with white text
+				// in both modes, and leaves `main` alone for the ~30 places that
+				// use it as text or a chart mark on a dark ground.
+				backgroundColor: theme.palette.error.dark,
+				color: "#FFFFFF",
 				px: theme.spacing(8),
 				py: theme.spacing(4),
 				transition: "top 1s ease-in-out",
diff --git a/client/src/Pages/Incidents/Components/CardSummary.tsx b/client/src/Pages/Incidents/Components/CardSummary.tsx
index 60dadaa74..fa4db83e6 100644
--- a/client/src/Pages/Incidents/Components/CardSummary.tsx
+++ b/client/src/Pages/Incidents/Components/CardSummary.tsx
@@ -30,6 +30,10 @@ const SummaryItem = ({ icon, label, value }: SummaryItemProps) => {
 				direction="row"
 				alignItems="center"
 				gap={theme.spacing(2)}
+				// The icons are supporting marks beside the label, not content,
+				// so they take secondary ink rather than lucide's currentColor
+				// default, which renders them heavier than the text.
+				sx={{ "& svg": { color: theme.palette.text.secondary } }}
 			>
 				{icon}
 				<Typography variant="body1">{label}</Typography>
@@ -143,7 +147,11 @@ const SummaryIncidentItem = ({ incident }: { incident: IncidentSummaryItem }) =>
 					gap: theme.spacing(2),
 				}}
 			>
-				<Icon icon={Globe} />
+				<Icon
+					icon={Globe}
+					size={16}
+					color={theme.palette.text.secondary}
+				/>
 				<Typography
 					variant="body1"
 					fontWeight={500}
@@ -213,17 +221,32 @@ export const SummaryCardStats = ({ summary }: SummaryCardStatsProps) => {
 	return (
 		<SummaryCard title={t("pages.incidents.summaryCard.incidentStats.title")}>
 			<SummaryItem
-				icon={<Icon icon={Bell} />}
+				icon={
+					<Icon
+						icon={Bell}
+						size={16}
+					/>
+				}
 				label={t("pages.incidents.summaryCard.incidentStats.totalIncidents")}
 				value={summary?.total || 0}
 			/>
 			<SummaryItem
-				icon={<Icon icon={TriangleAlert} />}
+				icon={
+					<Icon
+						icon={TriangleAlert}
+						size={16}
+					/>
+				}
 				label={t("pages.incidents.summaryCard.incidentStats.mostAffectedMonitor")}
 				value={mostAffected}
 			/>
 			<SummaryItem
-				icon={<Icon icon={Wrench} />}
+				icon={
+					<Icon
+						icon={Wrench}
+						size={16}
+					/>
+				}
 				label={t("pages.incidents.summaryCard.incidentStats.avgResolutionTime")}
 				value={
 					summary.total > 0