From 9c21d71c4491474f5e14b388104612249eeed3c9 Mon Sep 17 00:00:00 2001
From: gorkem-bwl <gorkem.cetin@bluewavelabs.ca>
Date: Tue, 28 Apr 2026 23:54:39 -0400
Subject: [PATCH 1/7] refactor(inputs): softer button hover, sx-forwarding
 TextInput, themed FieldLabel

- Button.tsx: contained variant's hover now uses HOVER.DARKEN=0.06
  instead of MUI's default 16%, which was visibly heavy on the green
  primary buttons across the app. Also fixes a subtle bug where the
  earlier hover sx merge order silently dropped the boxShadow:'none'
  reset. Added a HOVER token group to constants.ts so the darken value
  has a single source of truth.
- TextInput.tsx: forward the caller's sx to the wrapper Stack when a
  fieldLabel is present (previously it was applied to the inner
  TextField, so flex:1 etc. didn't propagate to the visible width).
  Inner sx now also explicitly width:100% so wrapped inputs don't
  collapse to content width when their parent is a flex row.
- FieldLabel.tsx: drop the hardcoded fontSize:'14px' and use
  variant=body1 (=13px from theme) to match the rest of the app's
  body typography.
---
 client/src/Components/inputs/Button.tsx     | 40 ++++++++++---
 client/src/Components/inputs/FieldLabel.tsx |  2 +-
 client/src/Components/inputs/TextInput.tsx  | 62 +++++++++++----------
 client/src/Utils/Theme/constants.ts         |  4 ++
 4 files changed, 70 insertions(+), 38 deletions(-)

diff --git a/client/src/Components/inputs/Button.tsx b/client/src/Components/inputs/Button.tsx
index 54f776075..4eae654b2 100644
--- a/client/src/Components/inputs/Button.tsx
+++ b/client/src/Components/inputs/Button.tsx
@@ -1,19 +1,43 @@
 import Button from "@mui/material/Button";
 import type { ButtonProps } from "@mui/material/Button";
-import { useTheme } from "@mui/material/styles";
+import { useTheme, darken } from "@mui/material/styles";
+import { HOVER } from "@/Utils/Theme/constants";
+
+const PALETTE_COLORS = [
+	"primary",
+	"secondary",
+	"error",
+	"warning",
+	"info",
+	"success",
+] as const;
+type PaletteColor = (typeof PALETTE_COLORS)[number];
 
 export const ButtonInput = ({ sx, ...props }: ButtonProps) => {
 	const theme = useTheme();
-	const outlinedSx =
+
+	const hoverOverrides: Record<string, unknown> = { boxShadow: "none" };
+
+	if (props.variant === "outlined") {
+		hoverOverrides.borderColor = theme.palette.text.secondary;
+	}
+
+	if (props.variant === "contained") {
+		const colorKey = (props.color ?? "primary") as PaletteColor;
+		const palette = theme.palette[colorKey];
+		if (palette && typeof palette === "object" && "main" in palette) {
+			hoverOverrides.backgroundColor = darken(palette.main, HOVER.DARKEN);
+		}
+	}
+
+	const variantSx =
 		props.variant === "outlined"
 			? {
 					color: theme.palette.text.primary,
 					borderColor: theme.palette.divider,
-					"&:hover": {
-						borderColor: theme.palette.text.secondary,
-					},
 				}
 			: {};
+
 	return (
 		<Button
 			{...props}
@@ -26,10 +50,8 @@ export const ButtonInput = ({ sx, ...props }: ButtonProps) => {
 				textOverflow: "ellipsis",
 				overflow: "hidden",
 				boxShadow: "none",
-				"&:hover": {
-					boxShadow: "none",
-				},
-				...outlinedSx,
+				"&:hover": hoverOverrides,
+				...variantSx,
 				...sx,
 			}}
 		/>
diff --git a/client/src/Components/inputs/FieldLabel.tsx b/client/src/Components/inputs/FieldLabel.tsx
index 448545a19..1c1bc0a8c 100644
--- a/client/src/Components/inputs/FieldLabel.tsx
+++ b/client/src/Components/inputs/FieldLabel.tsx
@@ -15,9 +15,9 @@ export const FieldLabel = ({ children, required = false, htmlFor }: FieldLabelPr
 	return (
 		<Typography
 			component="label"
+			variant="body1"
 			htmlFor={htmlFor}
 			sx={{
-				fontSize: "14px",
 				fontWeight: 500,
 				color: theme.palette.text.secondary,
 				marginBottom: theme.spacing(2),
diff --git a/client/src/Components/inputs/TextInput.tsx b/client/src/Components/inputs/TextInput.tsx
index bfcbfa181..8b7092d0b 100644
--- a/client/src/Components/inputs/TextInput.tsx
+++ b/client/src/Components/inputs/TextInput.tsx
@@ -12,47 +12,53 @@ interface TextInputProps extends Omit<TextFieldProps, "label"> {
 }
 
 export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(function TextInput(
-	{ fieldLabel, required, ...props },
+	{ fieldLabel, required, sx, ...props },
 	ref
 ) {
 	const theme = useTheme();
 
+	const innerSx = {
+		width: "100%",
+		"& .MuiOutlinedInput-root": {
+			borderRadius: theme.shape.borderRadius,
+			height: 34,
+			fontSize: typographyLevels.base,
+			overflow: "hidden",
+		},
+		"& .MuiOutlinedInput-notchedOutline": {
+			borderColor: theme.palette.divider,
+		},
+		"&:hover .MuiOutlinedInput-notchedOutline": {
+			borderColor: theme.palette.divider,
+		},
+		"& .MuiFormHelperText-root": {
+			marginLeft: 0,
+			marginRight: 0,
+			marginTop: theme.spacing(1),
+		},
+		"& input:-webkit-autofill, & input:-webkit-autofill:hover, & input:-webkit-autofill:focus, & input:-webkit-autofill:active":
+			{
+				WebkitBoxShadow: `0 0 0 100px ${theme.palette.background.default} inset !important`,
+				WebkitTextFillColor: `${theme.palette.text.primary} !important`,
+				caretColor: theme.palette.text.primary,
+				transition: "background-color 5000s ease-in-out 0s",
+			},
+	};
+
 	const input = (
 		<TextField
 			{...props}
 			inputRef={ref}
-			sx={{
-				"& .MuiOutlinedInput-root": {
-					borderRadius: theme.shape.borderRadius,
-					height: 34,
-					fontSize: typographyLevels.base,
-					overflow: "hidden",
-				},
-				"& .MuiOutlinedInput-notchedOutline": {
-					borderColor: theme.palette.divider,
-				},
-				"&:hover .MuiOutlinedInput-notchedOutline": {
-					borderColor: theme.palette.divider,
-				},
-				"& .MuiFormHelperText-root": {
-					marginLeft: 0,
-					marginRight: 0,
-					marginTop: theme.spacing(1),
-				},
-				"& input:-webkit-autofill, & input:-webkit-autofill:hover, & input:-webkit-autofill:focus, & input:-webkit-autofill:active":
-					{
-						WebkitBoxShadow: `0 0 0 100px ${theme.palette.background.default} inset !important`,
-						WebkitTextFillColor: `${theme.palette.text.primary} !important`,
-						caretColor: theme.palette.text.primary,
-						transition: "background-color 5000s ease-in-out 0s",
-					},
-			}}
+			sx={fieldLabel ? innerSx : { ...innerSx, ...sx }}
 		/>
 	);
 
 	if (fieldLabel) {
 		return (
-			<Stack spacing={theme.spacing(2)}>
+			<Stack
+				spacing={theme.spacing(2)}
+				sx={sx}
+			>
 				<FieldLabel required={required}>{fieldLabel}</FieldLabel>
 				{input}
 			</Stack>
diff --git a/client/src/Utils/Theme/constants.ts b/client/src/Utils/Theme/constants.ts
index 8b045f9f6..c173ff673 100644
--- a/client/src/Utils/Theme/constants.ts
+++ b/client/src/Utils/Theme/constants.ts
@@ -15,3 +15,7 @@ export const LAYOUT = {
 	XL: 12,
 	XXL: 16,
 } as const;
+
+export const HOVER = {
+	DARKEN: 0.06,
+} as const;

From 93505f006c6862c0929304492e0d37bf29406c00 Mon Sep 17 00:00:00 2001
From: gorkem-bwl <gorkem.cetin@bluewavelabs.ca>
Date: Tue, 28 Apr 2026 23:55:27 -0400
Subject: [PATCH 2/7] feat(account): side-by-side name and password fields in
 Add Member modal

- AddTeamMemberDialog: First name / Last name now share a row, and
  Password / Confirm password share a row. Each field uses sx={flex:1}
  so the row totals match the width of the email/role rows below.
- InviteTeamMemberDialog: drop the redundant mt={theme.spacing(...)}
  workaround on the form Stack (the new Dialog component provides this
  spacing).
- Constants conformance: spacing literals replaced with LAYOUT.XS.
---
 .../components/AddTeamMemberDialog.tsx        | 132 ++++++++++--------
 .../components/InviteTeamMemberDialog.tsx     |   6 +-
 2 files changed, 72 insertions(+), 66 deletions(-)

diff --git a/client/src/Pages/Account/components/AddTeamMemberDialog.tsx b/client/src/Pages/Account/components/AddTeamMemberDialog.tsx
index e584d3235..aff0c3cf2 100644
--- a/client/src/Pages/Account/components/AddTeamMemberDialog.tsx
+++ b/client/src/Pages/Account/components/AddTeamMemberDialog.tsx
@@ -9,6 +9,7 @@ import { useAddTeamMemberForm } from "@/Hooks/useAddTeamMemberForm";
 import type { AddTeamMemberFormData } from "@/Validation/addTeamMember";
 import type { UserRole, User } from "@/Types/User";
 import { usePost } from "@/Hooks/UseApi";
+import { LAYOUT } from "@/Utils/Theme/constants";
 
 interface AddTeamMemberDialogProps {
 	open: boolean;
@@ -82,38 +83,40 @@ export const AddTeamMemberDialog = ({
 			maxWidth="sm"
 			fullWidth
 		>
-			<Stack
-				gap={theme.spacing(4)}
-				mt={theme.spacing(4)}
-			>
-				<Controller
-					name="firstName"
-					control={control}
-					render={({ field, fieldState }) => (
-						<TextField
-							{...field}
-							fieldLabel={t("common.form.name.option.firstName.label")}
-							placeholder={t("common.form.name.option.firstName.placeholder")}
-							error={!!fieldState.error}
-							helperText={fieldState.error?.message ?? ""}
-							fullWidth
-						/>
-					)}
-				/>
-				<Controller
-					name="lastName"
-					control={control}
-					render={({ field, fieldState }) => (
-						<TextField
-							{...field}
-							fieldLabel={t("common.form.name.option.lastName.label")}
-							placeholder={t("common.form.name.option.lastName.placeholder")}
-							error={!!fieldState.error}
-							helperText={fieldState.error?.message ?? ""}
-							fullWidth
-						/>
-					)}
-				/>
+			<Stack gap={theme.spacing(LAYOUT.XS)}>
+				<Stack
+					direction="row"
+					gap={theme.spacing(LAYOUT.XS)}
+				>
+					<Controller
+						name="firstName"
+						control={control}
+						render={({ field, fieldState }) => (
+							<TextField
+								{...field}
+								fieldLabel={t("common.form.name.option.firstName.label")}
+								placeholder={t("common.form.name.option.firstName.placeholder")}
+								error={!!fieldState.error}
+								helperText={fieldState.error?.message ?? ""}
+								sx={{ flex: 1 }}
+							/>
+						)}
+					/>
+					<Controller
+						name="lastName"
+						control={control}
+						render={({ field, fieldState }) => (
+							<TextField
+								{...field}
+								fieldLabel={t("common.form.name.option.lastName.label")}
+								placeholder={t("common.form.name.option.lastName.placeholder")}
+								error={!!fieldState.error}
+								helperText={fieldState.error?.message ?? ""}
+								sx={{ flex: 1 }}
+							/>
+						)}
+					/>
+				</Stack>
 				<Controller
 					name="email"
 					control={control}
@@ -151,36 +154,41 @@ export const AddTeamMemberDialog = ({
 						</Select>
 					)}
 				/>
-				<Controller
-					name="password"
-					control={control}
-					render={({ field, fieldState }) => (
-						<TextField
-							{...field}
-							fieldLabel={t("pages.auth.common.form.option.password.label")}
-							placeholder={t("pages.auth.common.form.option.password.placeholder")}
-							type="password"
-							error={!!fieldState.error}
-							helperText={fieldState.error?.message ?? ""}
-							fullWidth
-						/>
-					)}
-				/>
-				<Controller
-					name="confirm"
-					control={control}
-					render={({ field, fieldState }) => (
-						<TextField
-							{...field}
-							fieldLabel={t("pages.auth.common.form.option.confirmPassword.label")}
-							placeholder={t("pages.auth.common.form.option.password.placeholder")}
-							type="password"
-							error={!!fieldState.error}
-							helperText={fieldState.error?.message ?? ""}
-							fullWidth
-						/>
-					)}
-				/>
+				<Stack
+					direction="row"
+					gap={theme.spacing(LAYOUT.XS)}
+				>
+					<Controller
+						name="password"
+						control={control}
+						render={({ field, fieldState }) => (
+							<TextField
+								{...field}
+								fieldLabel={t("pages.auth.common.form.option.password.label")}
+								placeholder={t("pages.auth.common.form.option.password.placeholder")}
+								type="password"
+								error={!!fieldState.error}
+								helperText={fieldState.error?.message ?? ""}
+								sx={{ flex: 1 }}
+							/>
+						)}
+					/>
+					<Controller
+						name="confirm"
+						control={control}
+						render={({ field, fieldState }) => (
+							<TextField
+								{...field}
+								fieldLabel={t("pages.auth.common.form.option.confirmPassword.label")}
+								placeholder={t("pages.auth.common.form.option.password.placeholder")}
+								type="password"
+								error={!!fieldState.error}
+								helperText={fieldState.error?.message ?? ""}
+								sx={{ flex: 1 }}
+							/>
+						)}
+					/>
+				</Stack>
 			</Stack>
 		</Dialog>
 	);
diff --git a/client/src/Pages/Account/components/InviteTeamMemberDialog.tsx b/client/src/Pages/Account/components/InviteTeamMemberDialog.tsx
index cf72e3d24..e23f24e53 100644
--- a/client/src/Pages/Account/components/InviteTeamMemberDialog.tsx
+++ b/client/src/Pages/Account/components/InviteTeamMemberDialog.tsx
@@ -9,6 +9,7 @@ import type { UserRole } from "@/Types/User";
 import { useInviteForm } from "@/Hooks/useInviteForm";
 import type { InviteFormData } from "@/Validation/invite";
 import { usePost } from "@/Hooks/UseApi";
+import { LAYOUT } from "@/Utils/Theme/constants";
 
 const CLIENT_HOST = import.meta.env.VITE_APP_CLIENT_HOST;
 
@@ -95,10 +96,7 @@ export const InviteTeamMemberDialog = ({
 				</Button>
 			}
 		>
-			<Stack
-				gap={theme.spacing(4)}
-				mt={theme.spacing(4)}
-			>
+			<Stack gap={theme.spacing(LAYOUT.XS)}>
 				<Controller
 					name="email"
 					control={control}

From 5d5d1dbb233b0cb5b031bdaff95d35eb7cecf70e Mon Sep 17 00:00:00 2001
From: gorkem-bwl <gorkem.cetin@bluewavelabs.ca>
Date: Tue, 28 Apr 2026 23:56:10 -0400
Subject: [PATCH 3/7] feat(incidents): consistent typography, icons, and layout
 across the page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- All uppercase headers (Active Incidents, Latest Incidents, Incident
  Statistics, Resolved Incidents, summary card titles, details card
  sections) now use the existing 'eyebrow' typography variant. That's
  the same style used on the Logs page and lives in Theme.ts so future
  tweaks land in one place.
- Latest Incidents and Incident Statistics rows now share a minHeight
  so both cards line up vertically; Latest Incidents items dropped
  their extra dividers and Box wrappers.
- Body text in the summary cards (and the details dialog) uses
  variant=body1 (13px) consistently — previously a mix of body1/body2
  and unspecified Typography.
- All lucide icons in CardSummary go through the design-system <Icon>
  wrapper so they share the project's strokeWidth=1.5 default rather
  than lucide's default 2.
- ControlsIncidentFilter: replaced the missing
  pages.incidents.filters.clearFilters key (which was rendering as
  raw text) with the existing common.buttons.clearFilters.
- CardDetails: extracted local SectionHeading and Cell helpers; switched
  the cards' bare <Typography> cells to variant=body1 + variant=eyebrow
  for headings; dropped redundant title-dividers (eyebrow style already
  separates visually).
---
 .../Incidents/Components/CardDetails.tsx      | 100 +++++++++---------
 .../Incidents/Components/CardSummary.tsx      |  63 +++++------
 .../Components/ControlsIncidentFilter.tsx     |   2 +-
 client/src/Pages/Incidents/index.tsx          |  11 +-
 4 files changed, 85 insertions(+), 91 deletions(-)

diff --git a/client/src/Pages/Incidents/Components/CardDetails.tsx b/client/src/Pages/Incidents/Components/CardDetails.tsx
index 448ba2e69..c4ae3a83d 100644
--- a/client/src/Pages/Incidents/Components/CardDetails.tsx
+++ b/client/src/Pages/Incidents/Components/CardDetails.tsx
@@ -20,6 +20,20 @@ interface CardDetailsProps {
 	sx?: object;
 }
 
+const SectionHeading = ({ children }: { children: React.ReactNode }) => (
+	<Typography
+		component="h2"
+		variant="eyebrow"
+		color="text.secondary"
+	>
+		{children}
+	</Typography>
+);
+
+const Cell = ({ children }: { children: React.ReactNode }) => (
+	<Typography variant="body1">{children}</Typography>
+);
+
 export const CardDetails = ({ incident, monitor, sx }: CardDetailsProps) => {
 	const { t } = useTranslation();
 	const theme = useTheme();
@@ -33,22 +47,18 @@ export const CardDetails = ({ incident, monitor, sx }: CardDetailsProps) => {
 			gap={theme.spacing(LAYOUT.MD)}
 			sx={sx}
 		>
-			<Typography textTransform={"uppercase"}>
-				{t("pages.incidents.dialog.details.title")}
-			</Typography>
+			<SectionHeading>{t("pages.incidents.dialog.details.title")}</SectionHeading>
 			<BaseBox padding={LAYOUT.MD}>
 				<Stack gap={theme.spacing(LAYOUT.MD)}>
-					<Typography textTransform={"uppercase"}>
-						{t("pages.incidents.dialog.details.overview")}
-					</Typography>
-					<Divider />
-
+					<SectionHeading>{t("pages.incidents.dialog.details.overview")}</SectionHeading>
 					<Grid
 						container
 						spacing={theme.spacing(LAYOUT.MD)}
 						alignItems="center"
 					>
-						<Grid size={2}>{t("pages.incidents.dialog.details.status")}</Grid>
+						<Grid size={2}>
+							<Cell>{t("pages.incidents.dialog.details.status")}</Cell>
+						</Grid>
 						<Grid size={10}>
 							<ValueLabel
 								value={incident.status ? "negative" : "positive"}
@@ -61,15 +71,17 @@ export const CardDetails = ({ incident, monitor, sx }: CardDetailsProps) => {
 						</Grid>
 						{monitor && (
 							<>
-								<Grid size={2}>{t("pages.incidents.dialog.details.monitor")}</Grid>
+								<Grid size={2}>
+									<Cell>{t("pages.incidents.dialog.details.monitor")}</Cell>
+								</Grid>
 								<Grid size={10}>
-									<Typography>{monitor.name ?? "N/A"}</Typography>
+									<Cell>{monitor.name ?? "N/A"}</Cell>
 								</Grid>
 								<Grid size={2}>
-									<Typography>{t("pages.incidents.dialog.details.url")}</Typography>
+									<Cell>{t("pages.incidents.dialog.details.url")}</Cell>
 								</Grid>
 								<Grid size={10}>
-									<Typography>{monitor.url ?? "N/A"}</Typography>
+									<Cell>{monitor.url ?? "N/A"}</Cell>
 								</Grid>
 							</>
 						)}
@@ -78,51 +90,48 @@ export const CardDetails = ({ incident, monitor, sx }: CardDetailsProps) => {
 			</BaseBox>
 			<BaseBox padding={LAYOUT.MD}>
 				<Stack gap={theme.spacing(LAYOUT.MD)}>
-					<Typography textTransform={"uppercase"}>
-						{t("pages.incidents.dialog.details.analysis")}
-					</Typography>
-					<Divider />
+					<SectionHeading>{t("pages.incidents.dialog.details.analysis")}</SectionHeading>
 					<Grid
 						container
 						spacing={theme.spacing(LAYOUT.MD)}
 					>
 						<Grid size={6}>
-							<Typography>{t("pages.incidents.dialog.details.timeline")}</Typography>
+							<Cell>{t("pages.incidents.dialog.details.timeline")}</Cell>
 						</Grid>
 						<Grid size={6}>
-							<Typography>{t("pages.incidents.dialog.details.detailsLabel")}</Typography>
+							<Cell>{t("pages.incidents.dialog.details.detailsLabel")}</Cell>
 						</Grid>
 						<Grid size={6}>
-							<Divider></Divider>
+							<Divider />
 						</Grid>
 						<Grid size={6}>
-							<Divider></Divider>
+							<Divider />
 						</Grid>
 						<Grid size={2}>
-							<Typography>{t("pages.incidents.dialog.details.startedAt")}</Typography>
+							<Cell>{t("pages.incidents.dialog.details.startedAt")}</Cell>
 						</Grid>
 						<Grid size={4}>
-							<Typography>
+							<Cell>
 								{formatDateWithTz(incident.startTime, "D MMM YYYY, h:mm A", uiTimezone)}
-							</Typography>
+							</Cell>
 						</Grid>
 						<Grid size={2}>
-							<Typography>{t("pages.incidents.dialog.details.statusCode")}</Typography>
+							<Cell>{t("pages.incidents.dialog.details.statusCode")}</Cell>
 						</Grid>
 						<Grid size={4}>
-							<Typography>{incident.statusCode ?? "N/A"}</Typography>
+							<Cell>{incident.statusCode ?? "N/A"}</Cell>
 						</Grid>
 						<Grid size={2}>
-							<Typography>{t("pages.incidents.dialog.details.downtime")}</Typography>
+							<Cell>{t("pages.incidents.dialog.details.downtime")}</Cell>
 						</Grid>
 						<Grid size={4}>
-							<Typography>{getIncidentsDuration(incident)}</Typography>
+							<Cell>{getIncidentsDuration(incident)}</Cell>
 						</Grid>
 						<Grid size={2}>
-							<Typography>{t("pages.incidents.dialog.details.message")}</Typography>
+							<Cell>{t("pages.incidents.dialog.details.message")}</Cell>
 						</Grid>
 						<Grid size={4}>
-							<Typography>{incident.message ?? "N/A"}</Typography>
+							<Cell>{incident.message ?? "N/A"}</Cell>
 						</Grid>
 					</Grid>
 				</Stack>
@@ -130,60 +139,53 @@ export const CardDetails = ({ incident, monitor, sx }: CardDetailsProps) => {
 			{!incident.status && (
 				<BaseBox padding={LAYOUT.MD}>
 					<Stack gap={theme.spacing(LAYOUT.XS)}>
-						<Typography textTransform={"uppercase"}>
+						<SectionHeading>
 							{t("pages.incidents.dialog.details.resolutionDetails")}
-						</Typography>
-						<Divider />
+						</SectionHeading>
 						<Grid
 							container
 							spacing={theme.spacing(LAYOUT.MD)}
 							alignItems="center"
 						>
 							<Grid size={2}>
-								<Typography>{t("pages.incidents.dialog.details.resolvedAt")}</Typography>
+								<Cell>{t("pages.incidents.dialog.details.resolvedAt")}</Cell>
 							</Grid>
 							<Grid size={10}>
-								<Typography>
+								<Cell>
 									{incident.endTime
 										? formatDateWithTz(incident.endTime, "D MMM YYYY, h:mm A", uiTimezone)
 										: "N/A"}
-								</Typography>
+								</Cell>
 							</Grid>
 							<Grid size={2}>
-								<Typography>
-									{t("pages.incidents.dialog.details.resolutionType")}
-								</Typography>
+								<Cell>{t("pages.incidents.dialog.details.resolutionType")}</Cell>
 							</Grid>
 							<Grid size={10}>
-								<Typography>
+								<Cell>
 									{incident.resolutionType
 										? t(
 												`pages.incidents.dialog.details.resolutionTypes.${incident.resolutionType}`
 											)
 										: "N/A"}
-								</Typography>
+								</Cell>
 							</Grid>
 							{incident.resolvedBy && (
 								<>
 									<Grid size={2}>
-										<Typography>
-											{t("pages.incidents.dialog.details.resolvedBy")}
-										</Typography>
+										<Cell>{t("pages.incidents.dialog.details.resolvedBy")}</Cell>
 									</Grid>
 									<Grid size={10}>
-										<Typography>
-											{incident.resolvedByEmail ?? incident.resolvedBy}
-										</Typography>
+										<Cell>{incident.resolvedByEmail ?? incident.resolvedBy}</Cell>
 									</Grid>
 								</>
 							)}
 							{incident.comment && (
 								<>
 									<Grid size={2}>
-										<Typography>{t("pages.incidents.dialog.details.comment")}</Typography>
+										<Cell>{t("pages.incidents.dialog.details.comment")}</Cell>
 									</Grid>
 									<Grid size={10}>
-										<Typography>{incident.comment}</Typography>
+										<Cell>{incident.comment}</Cell>
 									</Grid>
 								</>
 							)}
diff --git a/client/src/Pages/Incidents/Components/CardSummary.tsx b/client/src/Pages/Incidents/Components/CardSummary.tsx
index 938455808..ae75f5f37 100644
--- a/client/src/Pages/Incidents/Components/CardSummary.tsx
+++ b/client/src/Pages/Incidents/Components/CardSummary.tsx
@@ -1,8 +1,7 @@
 import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
-import Divider from "@mui/material/Divider";
 import Grid from "@mui/material/Grid";
-import { BaseBox, ValueLabel } from "@/Components/design-elements";
+import { BaseBox, Icon, ValueLabel } from "@/Components/design-elements";
 import { CircleCheck, TriangleAlert, Bell, Wrench, Globe } from "lucide-react";
 import Box from "@mui/material/Box";
 
@@ -25,6 +24,7 @@ const SummaryItem = ({ icon, label, value }: SummaryItemProps) => {
 			alignItems="center"
 			justifyContent="space-between"
 			gap={theme.spacing(2)}
+			minHeight={32}
 		>
 			<Stack
 				direction="row"
@@ -32,10 +32,10 @@ const SummaryItem = ({ icon, label, value }: SummaryItemProps) => {
 				gap={theme.spacing(2)}
 			>
 				{icon}
-				<Typography variant="body2">{label}</Typography>
+				<Typography variant="body1">{label}</Typography>
 			</Stack>
 			<Typography
-				variant="body2"
+				variant="body1"
 				fontWeight={600}
 			>
 				{value}
@@ -67,15 +67,11 @@ export const SummaryCard = ({
 			>
 				<Typography
 					component="h2"
-					sx={{
-						textTransform: "uppercase",
-						fontWeight: 500,
-						fontSize: 13,
-					}}
+					variant="eyebrow"
+					color="text.secondary"
 				>
 					{title}
 				</Typography>
-				<Divider />
 				{children}
 			</Stack>
 		</BaseBox>
@@ -97,10 +93,13 @@ export const SummaryCardActiveIncidents = ({
 	const activeCount = summary.totalActive;
 	const hasActive = activeCount > 0;
 	const color = hasActive ? theme.palette.error.main : theme.palette.success.main;
-	const icon = hasActive ? (
-		<TriangleAlert color={color} />
-	) : (
-		<CircleCheck color={color} />
+	const icon = (
+		<Box sx={{ color, display: "inline-flex" }}>
+			<Icon
+				icon={hasActive ? TriangleAlert : CircleCheck}
+				size={32}
+			/>
+		</Box>
 	);
 	const msg = t("pages.incidents.summaryCard.activeIncidents.active", {
 		count: activeCount,
@@ -133,10 +132,7 @@ const SummaryIncidentItem = ({ incident }: { incident: IncidentSummaryItem }) =>
 			container
 			alignItems="center"
 			spacing={2}
-			sx={{
-				width: "100%",
-				py: theme.spacing(0.5),
-			}}
+			sx={{ width: "100%", minHeight: 32 }}
 		>
 			<Grid
 				size={{ xs: 12, lg: 5 }}
@@ -147,7 +143,7 @@ const SummaryIncidentItem = ({ incident }: { incident: IncidentSummaryItem }) =>
 					gap: theme.spacing(2),
 				}}
 			>
-				<Globe />
+				<Icon icon={Globe} />
 				<Typography
 					variant="body1"
 					fontWeight={500}
@@ -159,9 +155,7 @@ const SummaryIncidentItem = ({ incident }: { incident: IncidentSummaryItem }) =>
 
 			<Grid
 				size={{ xs: 12, md: 6, lg: 3 }}
-				sx={{
-					display: "flex",
-				}}
+				sx={{ display: "flex" }}
 			>
 				<ValueLabel
 					value={incident.status ? "negative" : "positive"}
@@ -173,7 +167,7 @@ const SummaryIncidentItem = ({ incident }: { incident: IncidentSummaryItem }) =>
 				size={{ xs: 12, md: 6, lg: 4 }}
 				sx={{
 					textAlign: { xs: "left", md: "right" },
-					fontWeight: 500,
+					fontWeight: 600,
 				}}
 			>
 				<Typography variant="body1">{duration}</Typography>
@@ -190,22 +184,17 @@ export const SummaryCardLatestIncidents = ({
 	summary,
 }: SummaryCardLatestIncidentsProps) => {
 	const { t } = useTranslation();
-	const theme = useTheme();
 
 	const latestIncidents = summary?.latestIncidents ?? [];
 
 	return (
 		<SummaryCard title={t("pages.incidents.summaryCard.latestIncidents.title")}>
-			<Stack gap={theme.spacing(4)}>
-				{latestIncidents.slice(0, 3).map((incident, index) => (
-					<Box key={incident.id}>
-						<SummaryIncidentItem incident={incident} />
-						{index < latestIncidents.length - 1 && (
-							<Divider sx={{ mt: theme.spacing(2) }} />
-						)}
-					</Box>
-				))}
-			</Stack>
+			{latestIncidents.slice(0, 3).map((incident) => (
+				<SummaryIncidentItem
+					key={incident.id}
+					incident={incident}
+				/>
+			))}
 		</SummaryCard>
 	);
 };
@@ -224,17 +213,17 @@ export const SummaryCardStats = ({ summary }: SummaryCardStatsProps) => {
 	return (
 		<SummaryCard title={t("pages.incidents.summaryCard.incidentStats.title")}>
 			<SummaryItem
-				icon={<Bell size={18} />}
+				icon={<Icon icon={Bell} />}
 				label={t("pages.incidents.summaryCard.incidentStats.totalIncidents")}
 				value={summary?.total || 0}
 			/>
 			<SummaryItem
-				icon={<TriangleAlert size={18} />}
+				icon={<Icon icon={TriangleAlert} />}
 				label={t("pages.incidents.summaryCard.incidentStats.mostAffectedMonitor")}
 				value={mostAffected}
 			/>
 			<SummaryItem
-				icon={<Wrench size={18} />}
+				icon={<Icon icon={Wrench} />}
 				label={t("pages.incidents.summaryCard.incidentStats.avgResolutionTime")}
 				value={
 					summary.total > 0
diff --git a/client/src/Pages/Incidents/Components/ControlsIncidentFilter.tsx b/client/src/Pages/Incidents/Components/ControlsIncidentFilter.tsx
index a0f4eb15a..af7cba105 100644
--- a/client/src/Pages/Incidents/Components/ControlsIncidentFilter.tsx
+++ b/client/src/Pages/Incidents/Components/ControlsIncidentFilter.tsx
@@ -75,7 +75,7 @@ export const ControlsIncidentFilter = ({
 					variant="contained"
 					onClick={onClearFilters}
 				>
-					{t("pages.incidents.filters.clearFilters")}
+					{t("common.buttons.clearFilters")}
 				</Button>
 			)}
 		</Stack>
diff --git a/client/src/Pages/Incidents/index.tsx b/client/src/Pages/Incidents/index.tsx
index 84c414b26..a0a7e04d8 100644
--- a/client/src/Pages/Incidents/index.tsx
+++ b/client/src/Pages/Incidents/index.tsx
@@ -15,6 +15,7 @@ import { HeaderTimeRange } from "@/Components/common";
 import { ControlsIncidentFilter } from "@/Pages/Incidents/Components/ControlsIncidentFilter";
 
 import { useGet } from "@/Hooks/UseApi";
+import { LAYOUT } from "@/Utils/Theme/constants";
 import { useState, useEffect, useMemo } from "react";
 import { useParams } from "react-router-dom";
 import type { Incident, IncidentsResponse, IncidentSummary } from "@/Types/Incident";
@@ -186,8 +187,9 @@ const IncidentsPage = () => {
 			{activeIncidentsCount > 0 && (
 				<>
 					<Typography
-						variant="h6"
-						sx={{ mb: theme.spacing(4), textTransform: "uppercase" }}
+						variant="eyebrow"
+						color="text.secondary"
+						sx={{ mb: theme.spacing(LAYOUT.XS) }}
 					>
 						{t("pages.incidents.table.activeIncidents")}
 					</Typography>
@@ -208,8 +210,9 @@ const IncidentsPage = () => {
 			)}
 
 			<Typography
-				variant="h6"
-				sx={{ mb: theme.spacing(4), textTransform: "uppercase" }}
+				variant="eyebrow"
+				color="text.secondary"
+				sx={{ mb: theme.spacing(LAYOUT.XS) }}
 			>
 				{t("pages.incidents.table.resolvedIncidents")}
 			</Typography>

From 5792ca624e3e0eea67b4bb5fdd13ca43dac9dad4 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 29 Apr 2026 09:37:37 -0700
Subject: [PATCH 4/7] normalize NoticeBanner

---
 .../design-elements/MonitorStatus.tsx         |  2 +-
 .../design-elements/NoticeBanner.tsx          | 31 +++++++++----------
 client/src/Utils/Theme/Palette.ts             | 13 ++++----
 client/src/Utils/Theme/Theme.ts               |  2 +-
 client/src/Utils/Theme/constants.ts           |  1 +
 5 files changed, 25 insertions(+), 24 deletions(-)

diff --git a/client/src/Components/design-elements/MonitorStatus.tsx b/client/src/Components/design-elements/MonitorStatus.tsx
index dbeb5fa84..14f33d934 100644
--- a/client/src/Components/design-elements/MonitorStatus.tsx
+++ b/client/src/Components/design-elements/MonitorStatus.tsx
@@ -17,7 +17,7 @@ export const MonitorStatus = ({ monitor }: { monitor: Monitor }) => {
 	return (
 		<Stack>
 			<Typography
-				fontSize={typographyLevels.xl}
+				fontSize={typographyLevels.xxl}
 				fontWeight={500}
 				overflow={"hidden"}
 				textOverflow={"ellipsis"}
diff --git a/client/src/Components/design-elements/NoticeBanner.tsx b/client/src/Components/design-elements/NoticeBanner.tsx
index a04a5cb4e..2008f3000 100644
--- a/client/src/Components/design-elements/NoticeBanner.tsx
+++ b/client/src/Components/design-elements/NoticeBanner.tsx
@@ -3,8 +3,10 @@ import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 import { useTheme, alpha } from "@mui/material/styles";
 import { LAYOUT } from "@/Utils/Theme/constants";
+import { typographyLevels } from "@/Utils/Theme/Palette";
 
-type Severity = "info" | "warning" | "error";
+export const Severities = ["info", "warning", "error"] as const;
+export type Severity = (typeof Severities)[number];
 
 const SEVERITY_GLYPH: Record<Severity, string> = {
 	info: "ⓘ",
@@ -25,29 +27,26 @@ export const NoticeBanner = ({ severity = "info", children }: NoticeBannerProps)
 			direction="row"
 			alignItems="flex-start"
 			gap={theme.spacing(LAYOUT.SM)}
-			sx={{
-				width: "100%",
-				p: theme.spacing(LAYOUT.MD),
-				borderRadius: 1,
-				border: `1px solid ${alpha(tone, 0.45)}`,
-				backgroundColor: alpha(tone, 0.08),
-				textAlign: "left",
-			}}
+			width={"100%"}
+			p={theme.spacing(LAYOUT.MD)}
+			borderRadius={theme.shape.borderRadius}
+			border={`1px solid ${alpha(tone, 0.45)}`}
+			bgcolor={alpha(tone, 0.08)}
+			textAlign={"left"}
 		>
 			<Box
 				component="span"
-				sx={{
-					color: tone,
-					fontSize: 18,
-					lineHeight: 1,
-					mt: "2px",
-				}}
+				color={tone}
+				fontSize={typographyLevels.xl}
+				lineHeight={1}
+				mt={LAYOUT.XXS}
 				aria-hidden
 			>
 				{SEVERITY_GLYPH[severity]}
 			</Box>
 			<Typography
-				sx={{ color: theme.palette.text.primary, lineHeight: 1.55, fontSize: 13 }}
+				color={theme.palette.text.primary}
+				lineHeight={1.55}
 			>
 				{children}
 			</Typography>
diff --git a/client/src/Utils/Theme/Palette.ts b/client/src/Utils/Theme/Palette.ts
index 0fe08583a..92c08cd2f 100644
--- a/client/src/Utils/Theme/Palette.ts
+++ b/client/src/Utils/Theme/Palette.ts
@@ -1,12 +1,13 @@
 const typographyBase = 13;
 
 export const typographyLevels = {
-	base: typographyBase,
-	xs: `${(typographyBase - 4) / 16}rem`,
-	s: `${(typographyBase - 2) / 16}rem`,
-	m: `${typographyBase / 16}rem`,
-	l: `${(typographyBase + 2) / 16}rem`,
-	xl: `${(typographyBase + 10) / 16}rem`,
+	base: typographyBase, // 13px
+	xs: `${(typographyBase - 4) / 16}rem`, // 9px
+	s: `${(typographyBase - 2) / 16}rem`, // 11px
+	m: `${typographyBase / 16}rem`, // 13px
+	l: `${(typographyBase + 2) / 16}rem`, // 15px
+	xl: `${(typographyBase + 5) / 16}rem`, // 18px
+	xxl: `${(typographyBase + 10) / 16}rem`, // 23px
 };
 
 export const colors = {
diff --git a/client/src/Utils/Theme/Theme.ts b/client/src/Utils/Theme/Theme.ts
index 19f864c6f..7c712d66d 100644
--- a/client/src/Utils/Theme/Theme.ts
+++ b/client/src/Utils/Theme/Theme.ts
@@ -58,7 +58,7 @@ export const theme = (mode: string, palette: any) =>
 			fontFamilyMonospace,
 			fontSize: typographyLevels.base,
 			h1: {
-				fontSize: typographyLevels.xl,
+				fontSize: typographyLevels.xxl,
 				fontWeight: 500,
 			},
 			h2: {
diff --git a/client/src/Utils/Theme/constants.ts b/client/src/Utils/Theme/constants.ts
index 8b045f9f6..e0d74815e 100644
--- a/client/src/Utils/Theme/constants.ts
+++ b/client/src/Utils/Theme/constants.ts
@@ -8,6 +8,7 @@ export const SPACING = {
 } as const;
 
 export const LAYOUT = {
+	XXS: 2,
 	XS: 4,
 	SM: 6,
 	MD: 8,

From 2dd921891045af89f13db243074d2a2a2b166982 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 29 Apr 2026 09:42:49 -0700
Subject: [PATCH 5/7] normailze dialog and basepage

---
 .../Components/design-elements/BasePage.tsx    |  4 ++--
 client/src/Components/inputs/Dialog.tsx        | 18 +++++++++---------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/client/src/Components/design-elements/BasePage.tsx b/client/src/Components/design-elements/BasePage.tsx
index 845d20a4c..c955fb6b7 100644
--- a/client/src/Components/design-elements/BasePage.tsx
+++ b/client/src/Components/design-elements/BasePage.tsx
@@ -38,9 +38,9 @@ export const PageSpeedKeyPriorityFallback = () => {
 								<Link
 									component={RouterLink}
 									to="/settings"
+									color={theme.palette.primary.main}
+									fontWeight={600}
 									sx={{
-										color: theme.palette.primary.main,
-										fontWeight: 600,
 										textDecoration: "underline",
 									}}
 								/>
diff --git a/client/src/Components/inputs/Dialog.tsx b/client/src/Components/inputs/Dialog.tsx
index 38b858bd6..02d164abd 100644
--- a/client/src/Components/inputs/Dialog.tsx
+++ b/client/src/Components/inputs/Dialog.tsx
@@ -53,24 +53,24 @@ export const DialogInput = ({
 		>
 			{title && (
 				<DialogTitle
-					sx={{
-						pb: theme.spacing(LAYOUT.XS),
-						backgroundColor: theme.palette.action.hover,
-						borderBottom: `1px solid ${theme.palette.divider}`,
-					}}
+					pb={theme.spacing(LAYOUT.XS)}
+					bgcolor={theme.palette.action.hover}
+					borderBottom={`1px solid ${theme.palette.divider}`}
 				>
 					<Typography
 						component="span"
 						variant="h2"
-						sx={{ fontWeight: 600, display: "block" }}
+						fontWeight={600}
+						display={"block"}
 					>
 						{title}
 					</Typography>
 					{content && (
 						<Typography
 							variant="body1"
-							color="text.secondary"
-							sx={{ mt: theme.spacing(LAYOUT.XS), display: "block" }}
+							color={theme.palette.text.secondary}
+							mt={theme.spacing(LAYOUT.XS)}
+							display={"block"}
 						>
 							{content}
 						</Typography>
@@ -79,7 +79,7 @@ export const DialogInput = ({
 			)}
 			{children && (
 				<DialogContent sx={{ pt: theme.spacing(LAYOUT.MD) }}>
-					<Box sx={{ pt: theme.spacing(LAYOUT.XS) }}>{children}</Box>
+					<Box pt={theme.spacing(LAYOUT.XS)}>{children}</Box>
 				</DialogContent>
 			)}
 			<DialogActions

From 63031e938eb320515bb67c326558ac22fd5331b3 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 29 Apr 2026 09:47:11 -0700
Subject: [PATCH 6/7] normalize

---
 client/src/Components/inputs/TextInput.tsx | 3 ++-
 client/src/Utils/Theme/constants.ts        | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/client/src/Components/inputs/TextInput.tsx b/client/src/Components/inputs/TextInput.tsx
index 8b7092d0b..13277be72 100644
--- a/client/src/Components/inputs/TextInput.tsx
+++ b/client/src/Components/inputs/TextInput.tsx
@@ -5,6 +5,7 @@ import { typographyLevels } from "@/Utils/Theme/Palette";
 import { useTheme } from "@mui/material/styles";
 import Stack from "@mui/material/Stack";
 import { FieldLabel } from "./FieldLabel";
+import { LAYOUT } from "@/Utils/Theme/constants";
 
 interface TextInputProps extends Omit<TextFieldProps, "label"> {
 	fieldLabel?: string;
@@ -56,7 +57,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(function T
 	if (fieldLabel) {
 		return (
 			<Stack
-				spacing={theme.spacing(2)}
+				spacing={theme.spacing(LAYOUT.XXS)}
 				sx={sx}
 			>
 				<FieldLabel required={required}>{fieldLabel}</FieldLabel>
diff --git a/client/src/Utils/Theme/constants.ts b/client/src/Utils/Theme/constants.ts
index 4b2e04be6..d718d61dc 100644
--- a/client/src/Utils/Theme/constants.ts
+++ b/client/src/Utils/Theme/constants.ts
@@ -18,5 +18,5 @@ export const LAYOUT = {
 } as const;
 
 export const HOVER = {
-	DARKEN: 0.06,
+	DARKEN: 0.06, // This is a coefficient for darkening function
 } as const;

From 301942d0eb5f863b334de0136c326a0cbc4c710d Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 29 Apr 2026 09:56:01 -0700
Subject: [PATCH 7/7] normalize

---
 .../Incidents/Components/CardDetails.tsx      | 23 +++++++++++--------
 .../Incidents/Components/CardSummary.tsx      |  2 +-
 client/src/Pages/Incidents/index.tsx          |  8 +++----
 3 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/client/src/Pages/Incidents/Components/CardDetails.tsx b/client/src/Pages/Incidents/Components/CardDetails.tsx
index c4ae3a83d..82ececaa8 100644
--- a/client/src/Pages/Incidents/Components/CardDetails.tsx
+++ b/client/src/Pages/Incidents/Components/CardDetails.tsx
@@ -13,6 +13,7 @@ import { useSelector } from "react-redux";
 import type { RootState } from "@/Types/state";
 import { formatDateWithTz } from "@/Utils/TimeUtils";
 import { getIncidentsDuration } from "@/Pages/Incidents/utils";
+import { theme } from "@/Utils/Theme/Theme";
 
 interface CardDetailsProps {
 	incident: Incident | null;
@@ -20,15 +21,19 @@ interface CardDetailsProps {
 	sx?: object;
 }
 
-const SectionHeading = ({ children }: { children: React.ReactNode }) => (
-	<Typography
-		component="h2"
-		variant="eyebrow"
-		color="text.secondary"
-	>
-		{children}
-	</Typography>
-);
+const SectionHeading = ({ children }: { children: React.ReactNode }) => {
+	const theme = useTheme();
+
+	return (
+		<Typography
+			component="h2"
+			variant="eyebrow"
+			color={theme.palette.text.secondary}
+		>
+			{children}
+		</Typography>
+	);
+};
 
 const Cell = ({ children }: { children: React.ReactNode }) => (
 	<Typography variant="body1">{children}</Typography>
diff --git a/client/src/Pages/Incidents/Components/CardSummary.tsx b/client/src/Pages/Incidents/Components/CardSummary.tsx
index ae75f5f37..60dadaa74 100644
--- a/client/src/Pages/Incidents/Components/CardSummary.tsx
+++ b/client/src/Pages/Incidents/Components/CardSummary.tsx
@@ -68,7 +68,7 @@ export const SummaryCard = ({
 				<Typography
 					component="h2"
 					variant="eyebrow"
-					color="text.secondary"
+					color={theme.palette.text.secondary}
 				>
 					{title}
 				</Typography>
diff --git a/client/src/Pages/Incidents/index.tsx b/client/src/Pages/Incidents/index.tsx
index a0a7e04d8..63cd18889 100644
--- a/client/src/Pages/Incidents/index.tsx
+++ b/client/src/Pages/Incidents/index.tsx
@@ -188,8 +188,8 @@ const IncidentsPage = () => {
 				<>
 					<Typography
 						variant="eyebrow"
-						color="text.secondary"
-						sx={{ mb: theme.spacing(LAYOUT.XS) }}
+						color={theme.palette.text.secondary}
+						mb={theme.spacing(LAYOUT.XS)}
 					>
 						{t("pages.incidents.table.activeIncidents")}
 					</Typography>
@@ -211,8 +211,8 @@ const IncidentsPage = () => {
 
 			<Typography
 				variant="eyebrow"
-				color="text.secondary"
-				sx={{ mb: theme.spacing(LAYOUT.XS) }}
+				color={theme.palette.text.secondary}
+				mb={theme.spacing(LAYOUT.XS)}
 			>
 				{t("pages.incidents.table.resolvedIncidents")}
 			</Typography>