extract colors to theme

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}

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 },
 				}),
 			})}
 		/>

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),
+	},
 };

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 };
 	}
 }