From 3365a8f7da3f0d540da1ea521706f94a10360720 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Mon, 4 May 2026 12:11:57 -0700
Subject: [PATCH] extract colors to theme

---
 client/src/Pages/Logs/TabQueue.tsx             |  6 +-----
 client/src/Pages/Logs/components/TableJobs.tsx |  8 ++------
 client/src/Utils/Theme/Palette.ts              | 13 +++++++++++++
 client/src/Utils/Theme/Theme.ts                |  2 ++
 4 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/client/src/Pages/Logs/TabQueue.tsx b/client/src/Pages/Logs/TabQueue.tsx
index 87d658635..a39250be0 100644
--- a/client/src/Pages/Logs/TabQueue.tsx
+++ b/client/src/Pages/Logs/TabQueue.tsx
@@ -61,11 +61,7 @@ export const TabQueue = () => {
 								highlight: (
 									<Box
 										component="span"
-										bgcolor={
-											theme.palette.mode === "dark"
-												? "rgba(19, 113, 91, 0.18)"
-												: "#ECF7F2"
-										}
+										bgcolor={theme.palette.rowStatus.running}
 										color={theme.palette.text.primary}
 										px={SPACING.SM}
 										py={SPACING.XXS}
diff --git a/client/src/Pages/Logs/components/TableJobs.tsx b/client/src/Pages/Logs/components/TableJobs.tsx
index 1f1da1003..99e9b6711 100644
--- a/client/src/Pages/Logs/components/TableJobs.tsx
+++ b/client/src/Pages/Logs/components/TableJobs.tsx
@@ -129,20 +129,16 @@ export const TableJobs = ({ jobs }: TableJobsProps) => {
 		},
 	];
 
-	const isDark = theme.palette.mode === "dark";
-	const runningBg = isDark ? "rgba(19, 113, 91, 0.18)" : "#ECF7F2";
-	const pausedBg = isDark ? "rgba(255, 165, 0, 0.18)" : "#FFF4E5";
-
 	return (
 		<Table
 			headers={headers}
 			data={jobsWithId}
 			getRowSx={(row) => ({
 				...(row.lockedAt && {
-					"& td": { backgroundColor: runningBg },
+					"& td": { backgroundColor: theme.palette.rowStatus.running },
 				}),
 				...(row.monitorActive === false && {
-					"& td": { backgroundColor: pausedBg },
+					"& td": { backgroundColor: theme.palette.rowStatus.paused },
 				}),
 			})}
 		/>
diff --git a/client/src/Utils/Theme/Palette.ts b/client/src/Utils/Theme/Palette.ts
index 92c08cd2f..55dc1e26e 100644
--- a/client/src/Utils/Theme/Palette.ts
+++ b/client/src/Utils/Theme/Palette.ts
@@ -1,3 +1,5 @@
+import { alpha } from "@mui/material/styles";
+
 const typographyBase = 13;
 
 export const typographyLevels = {
@@ -17,6 +19,9 @@ export const colors = {
 	gray850: "#1c1c21",
 	brandGreen: "#13715B",
 	brandGreenLight: "#4DAF94",
+	green200: "#ECF7F2",
+	yellow200: "#FFF4E5",
+	orange500: "#FFA500",
 };
 
 export const lightPalette = {
@@ -29,6 +34,10 @@ export const lightPalette = {
 	sidebar: {
 		accent: colors.brandGreen,
 	},
+	rowStatus: {
+		running: colors.green200,
+		paused: colors.yellow200,
+	},
 };
 
 export const darkPalette = {
@@ -45,4 +54,8 @@ export const darkPalette = {
 	sidebar: {
 		accent: colors.brandGreenLight,
 	},
+	rowStatus: {
+		running: alpha(colors.brandGreen, 0.18),
+		paused: alpha(colors.orange500, 0.18),
+	},
 };
diff --git a/client/src/Utils/Theme/Theme.ts b/client/src/Utils/Theme/Theme.ts
index 7c712d66d..04f4c94eb 100644
--- a/client/src/Utils/Theme/Theme.ts
+++ b/client/src/Utils/Theme/Theme.ts
@@ -15,9 +15,11 @@ declare module "@mui/material/styles" {
 	}
 	interface Palette {
 		sidebar: { accent: string };
+		rowStatus: { running: string; paused: string };
 	}
 	interface PaletteOptions {
 		sidebar?: { accent: string };
+		rowStatus?: { running: string; paused: string };
 	}
 }