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

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",

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