From 71b8fd90b000a9eb285f6fff20a759b2a7eb20db Mon Sep 17 00:00:00 2001
From: gorkem-bwl <gorkem.cetin@bluewavelabs.ca>
Date: Sun, 26 Apr 2026 01:55:33 -0400
Subject: [PATCH] feat(client): unify section headers on /logs and group titles
 with their tables

- Apply the eyebrow variant to "Runtime stats" and "Memory & CPU" so /logs sections share the same uppercase header style as Job queue
- Pair each section's heading + explainer with its table in a tighter sub-stack so the big gap only sits between sections, not under the explainer
- Restore the missing useTheme() call inside TableFailedJobs and TableLogs so the monospace token resolves
---
 client/src/Pages/Logs/TabDiagnostics.tsx      |   8 +-
 client/src/Pages/Logs/TabQueue.tsx            | 106 +++++++++---------
 .../src/Pages/Logs/components/TableJobs.tsx   |   1 +
 .../src/Pages/Logs/components/TableLogs.tsx   |   1 +
 4 files changed, 61 insertions(+), 55 deletions(-)

diff --git a/client/src/Pages/Logs/TabDiagnostics.tsx b/client/src/Pages/Logs/TabDiagnostics.tsx
index 8ca8d276e..7b7ae943a 100644
--- a/client/src/Pages/Logs/TabDiagnostics.tsx
+++ b/client/src/Pages/Logs/TabDiagnostics.tsx
@@ -23,8 +23,8 @@ export const TabDiagnostics = () => {
 			<Stack gap={theme.spacing(4)}>
 				<Stack gap={theme.spacing(1)}>
 					<Typography
-						variant="h6"
-						sx={{ textTransform: "uppercase" }}
+						variant="eyebrow"
+						color="text.secondary"
 					>
 						{t("pages.logs.diagnostics.sections.runtimeStats.title")}
 					</Typography>
@@ -37,8 +37,8 @@ export const TabDiagnostics = () => {
 			<Stack gap={theme.spacing(4)}>
 				<Stack gap={theme.spacing(1)}>
 					<Typography
-						variant="h6"
-						sx={{ textTransform: "uppercase" }}
+						variant="eyebrow"
+						color="text.secondary"
 					>
 						{t("pages.logs.diagnostics.sections.memoryCpu.title")}
 					</Typography>
diff --git a/client/src/Pages/Logs/TabQueue.tsx b/client/src/Pages/Logs/TabQueue.tsx
index 34830c9d6..84573e8f0 100644
--- a/client/src/Pages/Logs/TabQueue.tsx
+++ b/client/src/Pages/Logs/TabQueue.tsx
@@ -43,61 +43,65 @@ export const TabQueue = () => {
 	};
 
 	return (
-		<Stack gap={theme.spacing(8)}>
+		<Stack gap={theme.spacing(16)}>
 			<Metrics metrics={metrics} />
-			<Stack gap={theme.spacing(1)}>
-				<Typography
-					variant="eyebrow"
-					color="text.secondary"
-				>
-					{t("pages.logs.jobQueue")}
-				</Typography>
-				<Typography
-					sx={{
-						fontSize: 13,
-						color: theme.palette.text.secondary,
-					}}
-				>
-					<Trans
-						i18nKey="pages.logs.jobQueueExplainer"
-						components={{
-							highlight: (
-								<Box
-									component="span"
-									sx={{
-										backgroundColor:
-											theme.palette.mode === "dark"
-												? "rgba(19, 113, 91, 0.18)"
-												: "#ECF7F2",
-										color: theme.palette.text.primary,
-										px: 1,
-										py: 0.25,
-										borderRadius: 0.5,
-									}}
-								/>
-							),
+			<Stack gap={theme.spacing(3)}>
+				<Stack gap={theme.spacing(1)}>
+					<Typography
+						variant="eyebrow"
+						color="text.secondary"
+					>
+						{t("pages.logs.jobQueue")}
+					</Typography>
+					<Typography
+						sx={{
+							fontSize: 13,
+							color: theme.palette.text.secondary,
 						}}
-					/>
-				</Typography>
+					>
+						<Trans
+							i18nKey="pages.logs.jobQueueExplainer"
+							components={{
+								highlight: (
+									<Box
+										component="span"
+										sx={{
+											backgroundColor:
+												theme.palette.mode === "dark"
+													? "rgba(19, 113, 91, 0.18)"
+													: "#ECF7F2",
+											color: theme.palette.text.primary,
+											px: 1,
+											py: 0.25,
+											borderRadius: 0.5,
+										}}
+									/>
+								),
+							}}
+						/>
+					</Typography>
+				</Stack>
+				<TableJobs jobs={jobs} />
 			</Stack>
-			<TableJobs jobs={jobs} />
-			<Stack gap={theme.spacing(1)}>
-				<Typography
-					variant="eyebrow"
-					color="text.secondary"
-				>
-					{t("pages.logs.failedJobs")}
-				</Typography>
-				<Typography
-					sx={{
-						fontSize: 13,
-						color: theme.palette.text.secondary,
-					}}
-				>
-					{t("pages.logs.failedJobsExplainer")}
-				</Typography>
+			<Stack gap={theme.spacing(3)}>
+				<Stack gap={theme.spacing(1)}>
+					<Typography
+						variant="eyebrow"
+						color="text.secondary"
+					>
+						{t("pages.logs.failedJobs")}
+					</Typography>
+					<Typography
+						sx={{
+							fontSize: 13,
+							color: theme.palette.text.secondary,
+						}}
+					>
+						{t("pages.logs.failedJobsExplainer")}
+					</Typography>
+				</Stack>
+				<TableFailedJobs metrics={metrics} />
 			</Stack>
-			<TableFailedJobs metrics={metrics} />
 			<Stack alignItems={"flex-end"}>
 				<Button
 					variant="contained"
diff --git a/client/src/Pages/Logs/components/TableJobs.tsx b/client/src/Pages/Logs/components/TableJobs.tsx
index 0599e8d16..f690bd417 100644
--- a/client/src/Pages/Logs/components/TableJobs.tsx
+++ b/client/src/Pages/Logs/components/TableJobs.tsx
@@ -121,6 +121,7 @@ interface TableFailedJobsProps {
 }
 export const TableFailedJobs = ({ metrics }: TableFailedJobsProps) => {
 	const { t } = useTranslation();
+	const theme = useTheme();
 	if (!metrics) {
 		return null;
 	}
diff --git a/client/src/Pages/Logs/components/TableLogs.tsx b/client/src/Pages/Logs/components/TableLogs.tsx
index 30ec686c5..1244a65aa 100644
--- a/client/src/Pages/Logs/components/TableLogs.tsx
+++ b/client/src/Pages/Logs/components/TableLogs.tsx
@@ -45,6 +45,7 @@ const LevelBadge = ({ level }: { level: LogLevel }) => {
 
 export const TableLogs = ({ logs, logCount, page, setPage }: TableLogsProps) => {
 	const { t } = useTranslation();
+	const theme = useTheme();
 	const dispatch = useDispatch();
 	const rowsPerPage = useSelector(
 		(state: RootState) => state?.ui?.logs?.rowsPerPage ?? 15