From 62fb17f64c80d3e923ae5288bc244bed3d01ae0f Mon Sep 17 00:00:00 2001
From: gorkem-bwl <gorkem.cetin@bluewavelabs.ca>
Date: Thu, 3 Sep 2026 01:00:23 -0400
Subject: [PATCH] fix(client): match header button icons and toggle weight to
 the rest of the UI

Two mismatches in the monitor detail header:

- The action button icons rendered at the shared Icon default of 20px,
  while the sidebar clamps the same lucide icons to 16px in CSS. The
  buttons were therefore 25% larger than every other icon in the app,
  and taller than the cap height of the 13px label beside them. Now 16px
  at all eight call sites. Left at full opacity - the sidebar dims to
  0.81 because nav is recessive, but these are active controls.

- ToggleButton went to fontWeight 500 when selected while Button is a
  flat 400, so the time range group sat heavier than the button row
  above it. Weight now stays at 400 and the tinted fill plus text.primary
  ink carry the selected state; that is a 2.9x difference in ink against
  the unselected label, so selection is still obvious. It also stops the
  label reflowing as you switch range.

Claude-Session: https://claude.ai/code/session_01AbYLvwpEaZFXktHVcqrFRd
---
 client/src/Components/inputs/ToggleButton.tsx |  5 +-
 .../monitors/HeaderMonitorControls.tsx        | 56 +++++++++++++++++--
 2 files changed, 54 insertions(+), 7 deletions(-)

diff --git a/client/src/Components/inputs/ToggleButton.tsx b/client/src/Components/inputs/ToggleButton.tsx
index a2b392357..467c232b6 100644
--- a/client/src/Components/inputs/ToggleButton.tsx
+++ b/client/src/Components/inputs/ToggleButton.tsx
@@ -33,8 +33,11 @@ export const ToggleButtonInput = ({ sx, ...props }: ToggleButtonProps) => {
 				},
 				"&.Mui-selected": {
 					backgroundColor: selectedBg,
+					// Weight stays at 400 so the group sits level with Button,
+					// which it is routinely placed beside. The fill and the
+					// darker ink carry the selected state instead - a weight
+					// change also reflows the label width as you switch.
 					color: theme.palette.text.primary,
-					fontWeight: 500,
 					"&:hover": {
 						backgroundColor: selectedHoverBg,
 					},
diff --git a/client/src/Components/monitors/HeaderMonitorControls.tsx b/client/src/Components/monitors/HeaderMonitorControls.tsx
index 7f6968f0b..a32a33298 100644
--- a/client/src/Components/monitors/HeaderMonitorControls.tsx
+++ b/client/src/Components/monitors/HeaderMonitorControls.tsx
@@ -64,7 +64,12 @@ export const HeaderMonitorControls = ({
 					variant="contained"
 					color="secondary"
 					loading={isPosting}
-					startIcon={<Icon icon={Mail} />}
+					startIcon={
+						<Icon
+							icon={Mail}
+							size={16}
+						/>
+					}
 					onClick={async () => {
 						await post(`/notifications/test/all`, { monitorId: monitor.id });
 					}}
@@ -77,7 +82,12 @@ export const HeaderMonitorControls = ({
 				<Button
 					variant="contained"
 					color="secondary"
-					startIcon={<Icon icon={Bug} />}
+					startIcon={
+						<Icon
+							icon={Bug}
+							size={16}
+						/>
+					}
 					onClick={() => {
 						navigate(`/incidents/${monitor?.id}`);
 					}}
@@ -89,7 +99,19 @@ export const HeaderMonitorControls = ({
 						variant="contained"
 						color="secondary"
 						loading={isPosting}
-						startIcon={monitor?.isActive ? <Icon icon={Pause} /> : <Icon icon={Play} />}
+						startIcon={
+							monitor?.isActive ? (
+								<Icon
+									icon={Pause}
+									size={16}
+								/>
+							) : (
+								<Icon
+									icon={Play}
+									size={16}
+								/>
+							)
+						}
 						onClick={async () => {
 							await post(`/monitors/pause/${monitor.id}`, {});
 							await refetch();
@@ -102,7 +124,12 @@ export const HeaderMonitorControls = ({
 					<Button
 						variant="contained"
 						color="secondary"
-						startIcon={<Icon icon={Settings} />}
+						startIcon={
+							<Icon
+								icon={Settings}
+								size={16}
+							/>
+						}
 						onClick={() => navigate(`/${path}/configure/${monitor.id}`)}
 					>
 						{t("common.buttons.configure")}
@@ -149,7 +176,19 @@ export const HeaderDeleteControls = ({
 						variant="contained"
 						color="secondary"
 						loading={isPosting}
-						startIcon={monitor?.isActive ? <Icon icon={Pause} /> : <Icon icon={Play} />}
+						startIcon={
+							monitor?.isActive ? (
+								<Icon
+									icon={Pause}
+									size={16}
+								/>
+							) : (
+								<Icon
+									icon={Play}
+									size={16}
+								/>
+							)
+						}
 						onClick={async () => {
 							await post(`/monitors/pause/${monitor.id}`, {});
 							await refetch();
@@ -162,7 +201,12 @@ export const HeaderDeleteControls = ({
 					<Button
 						variant="contained"
 						color="error"
-						startIcon={<Icon icon={Trash} />}
+						startIcon={
+							<Icon
+								icon={Trash}
+								size={16}
+							/>
+						}
 						onClick={() => {
 							onDelete?.();
 						}}