From a9021fb4f1592f1b37fdd6b7c8fb61ad8ac1e104 Mon Sep 17 00:00:00 2001
From: nessi <sascha@nesterovic.cc>
Date: Fri, 6 Feb 2026 09:25:43 +0100
Subject: [PATCH] Refactor status-based styles to use theme tokens.

This change replaces hardcoded status-based styles with theme tokens, improving consistency and maintainability. The update also enables easier customization of styles across different themes by centralizing row and badge colors in theme configurations.
---
 frontend/src/components/SheetSection.jsx |  32 +++---
 frontend/src/styles/theme.js             |  44 ++++++--
 frontend/src/styles/themes.js            | 135 ++++++++++++++++++++++-
 3 files changed, 182 insertions(+), 29 deletions(-)

diff --git a/frontend/src/components/SheetSection.jsx b/frontend/src/components/SheetSection.jsx
index 9ca0cb5..ec7c7a1 100644
--- a/frontend/src/components/SheetSection.jsx
+++ b/frontend/src/components/SheetSection.jsx
@@ -22,16 +22,17 @@ export default function SheetSection({
 }) {
   // --- helpers (lokal, weil sie rein UI sind) ---
   const getRowBg = (status) => {
-    if (status === 1) return "rgba(255, 35, 35, 0.16)";
-    if (status === 2) return "rgba(0, 190, 80, 0.16)";
-    if (status === 3) return "rgba(140, 140, 140, 0.12)";
-    return "rgba(255,255,255,0.06)";
+    if (status === 1) return stylesTokens.rowNoBg;
+    if (status === 2) return stylesTokens.rowOkBg;
+    if (status === 3) return stylesTokens.rowMaybeBg;
+    if (status === 0) return stylesTokens.rowEmptyBg;
+    return stylesTokens.rowDefaultBg;
   };
 
   const getNameColor = (status) => {
-    if (status === 1) return "#ffb3b3";
-    if (status === 2) return "#baf3c9";
-    if (status === 3) return "rgba(233,216,166,0.78)";
+    if (status === 1) return stylesTokens.rowNoText;
+    if (status === 2) return stylesTokens.rowOkText;
+    if (status === 3) return stylesTokens.rowMaybeText;
     return stylesTokens.textMain;
   };
 
@@ -43,11 +44,10 @@ export default function SheetSection({
   };
 
   const getStatusBadge = (status) => {
-    if (status === 2) return { color: "#baf3c9", background: "rgba(0,190,80,0.18)" };
-    if (status === 1) return { color: "#ffb3b3", background: "rgba(255,35,35,0.18)" };
-    if (status === 3)
-      return { color: "rgba(233,216,166,0.85)", background: "rgba(140,140,140,0.14)" };
-    return { color: "rgba(233,216,166,0.75)", background: "rgba(255,255,255,0.08)" };
+    if (status === 2) return { color: stylesTokens.rowOkText, background: stylesTokens.rowOkBg };
+    if (status === 1) return { color: stylesTokens.rowNoText, background: stylesTokens.rowNoBg };
+    if (status === 3) return { color: stylesTokens.rowMaybeText, background: stylesTokens.rowMaybeBg };
+    return { color: stylesTokens.rowEmptyText, background: stylesTokens.rowEmptyBg };
   };
 
   return (
@@ -72,12 +72,12 @@ export default function SheetSection({
                 animation: pulseId === e.entry_id ? "rowPulse 220ms ease-out" : "none",
                 borderLeft:
                   effectiveStatus === 2
-                    ? "4px solid rgba(0,190,80,0.55)"
+                    ? `4px solid ${stylesTokens.rowOkBorder}`
                     : effectiveStatus === 1
-                    ? "4px solid rgba(255,35,35,0.55)"
+                    ? `4px solid ${stylesTokens.rowNoBorder}`
                     : effectiveStatus === 3
-                    ? "4px solid rgba(233,216,166,0.22)"
-                    : "4px solid rgba(0,0,0,0)",
+                    ? `4px solid ${stylesTokens.rowMaybeBorder}`
+                    : `4px solid ${stylesTokens.rowEmptyBorder}`,
               }}
             >
               <div
diff --git a/frontend/src/styles/theme.js b/frontend/src/styles/theme.js
index 50dd625..ef2167f 100644
--- a/frontend/src/styles/theme.js
+++ b/frontend/src/styles/theme.js
@@ -1,11 +1,39 @@
+// frontend/src/styles/theme.js
 export const stylesTokens = {
-    pageBg: "var(--hp-pageBg)",
-    panelBg: "var(--hp-panelBg)",
-    panelBorder: "var(--hp-panelBorder)",
+  pageBg: "var(--hp-pageBg)",
+  panelBg: "var(--hp-panelBg)",
+  panelBorder: "var(--hp-panelBorder)",
 
-    textMain: "var(--hp-textMain)",
-    textDim: "var(--hp-textDim)",
-    textGold: "var(--hp-textGold)",
+  textMain: "var(--hp-textMain)",
+  textDim: "var(--hp-textDim)",
+  textGold: "var(--hp-textGold)",
 
-    goldLine: "var(--hp-goldLine)",
-  };
\ No newline at end of file
+  goldLine: "var(--hp-goldLine)",
+
+  // ===== NEW: Row/Table colors so themes affect tables =====
+  rowDefaultBg: "var(--hp-rowDefaultBg)",
+
+  rowOkBg: "var(--hp-rowOkBg)",
+  rowOkBorder: "var(--hp-rowOkBorder)",
+  rowOkText: "var(--hp-rowOkText)",
+  badgeOkBg: "var(--hp-badgeOkBg)",
+  badgeOkText: "var(--hp-badgeOkText)",
+
+  rowNoBg: "var(--hp-rowNoBg)",
+  rowNoBorder: "var(--hp-rowNoBorder)",
+  rowNoText: "var(--hp-rowNoText)",
+  badgeNoBg: "var(--hp-badgeNoBg)",
+  badgeNoText: "var(--hp-badgeNoText)",
+
+  rowMaybeBg: "var(--hp-rowMaybeBg)",
+  rowMaybeBorder: "var(--hp-rowMaybeBorder)",
+  rowMaybeText: "var(--hp-rowMaybeText)",
+  badgeMaybeBg: "var(--hp-badgeMaybeBg)",
+  badgeMaybeText: "var(--hp-badgeMaybeText)",
+
+  rowEmptyBg: "var(--hp-rowEmptyBg)",
+  rowEmptyBorder: "var(--hp-rowEmptyBorder)",
+  rowEmptyText: "var(--hp-rowEmptyText)",
+  badgeEmptyBg: "var(--hp-badgeEmptyBg)",
+  badgeEmptyText: "var(--hp-badgeEmptyText)",
+};
diff --git a/frontend/src/styles/themes.js b/frontend/src/styles/themes.js
index 2350018..aef927a 100644
--- a/frontend/src/styles/themes.js
+++ b/frontend/src/styles/themes.js
@@ -10,8 +10,33 @@ export const THEMES = {
       textMain: "rgba(245, 239, 220, 0.92)",
       textDim: "rgba(233, 216, 166, 0.70)",
       textGold: "#e9d8a6",
-
       goldLine: "rgba(233, 216, 166, 0.18)",
+
+      rowDefaultBg: "rgba(255,255,255,0.06)",
+
+      rowOkBg: "rgba(0,190,80,0.16)",
+      rowOkBorder: "rgba(0,190,80,0.55)",
+      rowOkText: "#baf3c9",
+      badgeOkBg: "rgba(0,190,80,0.18)",
+      badgeOkText: "#baf3c9",
+
+      rowNoBg: "rgba(255,35,35,0.16)",
+      rowNoBorder: "rgba(255,35,35,0.55)",
+      rowNoText: "#ffb3b3",
+      badgeNoBg: "rgba(255,35,35,0.18)",
+      badgeNoText: "#ffb3b3",
+
+      rowMaybeBg: "rgba(140,140,140,0.12)",
+      rowMaybeBorder: "rgba(233,216,166,0.22)",
+      rowMaybeText: "rgba(233,216,166,0.85)",
+      badgeMaybeBg: "rgba(140,140,140,0.14)",
+      badgeMaybeText: "rgba(233,216,166,0.85)",
+
+      rowEmptyBg: "rgba(255,255,255,0.06)",
+      rowEmptyBorder: "rgba(0,0,0,0)",
+      rowEmptyText: "rgba(233,216,166,0.75)",
+      badgeEmptyBg: "rgba(255,255,255,0.08)",
+      badgeEmptyText: "rgba(233,216,166,0.75)",
     },
   },
 
@@ -25,8 +50,33 @@ export const THEMES = {
       textMain: "rgba(245, 239, 220, 0.92)",
       textDim: "rgba(255, 210, 170, 0.70)",
       textGold: "#ffb86b",
-
       goldLine: "rgba(255, 184, 107, 0.18)",
+
+      rowDefaultBg: "rgba(255, 184, 107, 0.08)",
+
+      rowOkBg: "rgba(255, 184, 107, 0.18)",
+      rowOkBorder: "rgba(255, 184, 107, 0.55)",
+      rowOkText: "rgba(255, 235, 210, 0.95)",
+      badgeOkBg: "rgba(255, 184, 107, 0.20)",
+      badgeOkText: "rgba(255, 235, 210, 0.95)",
+
+      rowNoBg: "rgba(200, 40, 40, 0.26)",
+      rowNoBorder: "rgba(200, 40, 40, 0.70)",
+      rowNoText: "#ffb3b3",
+      badgeNoBg: "rgba(200, 40, 40, 0.22)",
+      badgeNoText: "#ffb3b3",
+
+      rowMaybeBg: "rgba(255, 210, 140, 0.14)",
+      rowMaybeBorder: "rgba(255, 210, 140, 0.30)",
+      rowMaybeText: "rgba(255, 235, 210, 0.88)",
+      badgeMaybeBg: "rgba(255, 210, 140, 0.16)",
+      badgeMaybeText: "rgba(255, 235, 210, 0.88)",
+
+      rowEmptyBg: "rgba(255,255,255,0.06)",
+      rowEmptyBorder: "rgba(0,0,0,0)",
+      rowEmptyText: "rgba(255, 230, 190, 0.75)",
+      badgeEmptyBg: "rgba(255,255,255,0.08)",
+      badgeEmptyText: "rgba(255, 230, 190, 0.75)",
     },
   },
 
@@ -40,8 +90,33 @@ export const THEMES = {
       textMain: "rgba(235, 245, 240, 0.92)",
       textDim: "rgba(175, 240, 210, 0.70)",
       textGold: "#7CFFB6",
-
       goldLine: "rgba(124, 255, 182, 0.18)",
+
+      rowDefaultBg: "rgba(124, 255, 182, 0.07)",
+
+      rowOkBg: "rgba(124, 255, 182, 0.16)",
+      rowOkBorder: "rgba(124, 255, 182, 0.55)",
+      rowOkText: "rgba(210, 255, 235, 0.95)",
+      badgeOkBg: "rgba(124, 255, 182, 0.18)",
+      badgeOkText: "rgba(210, 255, 235, 0.95)",
+
+      rowNoBg: "rgba(40, 120, 80, 0.28)",
+      rowNoBorder: "rgba(40, 120, 80, 0.70)",
+      rowNoText: "rgba(190, 245, 220, 0.88)",
+      badgeNoBg: "rgba(40, 120, 80, 0.22)",
+      badgeNoText: "rgba(190, 245, 220, 0.88)",
+
+      rowMaybeBg: "rgba(124, 255, 182, 0.10)",
+      rowMaybeBorder: "rgba(124, 255, 182, 0.28)",
+      rowMaybeText: "rgba(200, 255, 230, 0.85)",
+      badgeMaybeBg: "rgba(124, 255, 182, 0.12)",
+      badgeMaybeText: "rgba(200, 255, 230, 0.85)",
+
+      rowEmptyBg: "rgba(255,255,255,0.05)",
+      rowEmptyBorder: "rgba(0,0,0,0)",
+      rowEmptyText: "rgba(180, 240, 210, 0.75)",
+      badgeEmptyBg: "rgba(255,255,255,0.08)",
+      badgeEmptyText: "rgba(180, 240, 210, 0.75)",
     },
   },
 
@@ -55,8 +130,33 @@ export const THEMES = {
       textMain: "rgba(235, 240, 250, 0.92)",
       textDim: "rgba(180, 205, 255, 0.72)",
       textGold: "#8FB6FF",
-
       goldLine: "rgba(143, 182, 255, 0.18)",
+
+      rowDefaultBg: "rgba(143, 182, 255, 0.07)",
+
+      rowOkBg: "rgba(143, 182, 255, 0.16)",
+      rowOkBorder: "rgba(143, 182, 255, 0.55)",
+      rowOkText: "rgba(225, 235, 255, 0.95)",
+      badgeOkBg: "rgba(143, 182, 255, 0.18)",
+      badgeOkText: "rgba(225, 235, 255, 0.95)",
+
+      rowNoBg: "rgba(70, 95, 160, 0.28)",
+      rowNoBorder: "rgba(70, 95, 160, 0.70)",
+      rowNoText: "rgba(205, 220, 255, 0.90)",
+      badgeNoBg: "rgba(70, 95, 160, 0.22)",
+      badgeNoText: "rgba(205, 220, 255, 0.90)",
+
+      rowMaybeBg: "rgba(143, 182, 255, 0.10)",
+      rowMaybeBorder: "rgba(143, 182, 255, 0.28)",
+      rowMaybeText: "rgba(210, 225, 255, 0.88)",
+      badgeMaybeBg: "rgba(143, 182, 255, 0.12)",
+      badgeMaybeText: "rgba(210, 225, 255, 0.88)",
+
+      rowEmptyBg: "rgba(255,255,255,0.05)",
+      rowEmptyBorder: "rgba(0,0,0,0)",
+      rowEmptyText: "rgba(180, 205, 255, 0.78)",
+      badgeEmptyBg: "rgba(255,255,255,0.08)",
+      badgeEmptyText: "rgba(180, 205, 255, 0.78)",
     },
   },
 
@@ -70,8 +170,33 @@ export const THEMES = {
       textMain: "rgba(245, 239, 220, 0.92)",
       textDim: "rgba(255, 240, 180, 0.70)",
       textGold: "#FFE27A",
-
       goldLine: "rgba(255, 226, 122, 0.18)",
+
+      rowDefaultBg: "rgba(255, 226, 122, 0.08)",
+
+      rowOkBg: "rgba(255, 226, 122, 0.18)",
+      rowOkBorder: "rgba(255, 226, 122, 0.60)",
+      rowOkText: "rgba(255, 245, 210, 0.95)",
+      badgeOkBg: "rgba(255, 226, 122, 0.20)",
+      badgeOkText: "rgba(255, 245, 210, 0.95)",
+
+      rowNoBg: "rgba(160, 120, 40, 0.28)",
+      rowNoBorder: "rgba(160, 120, 40, 0.70)",
+      rowNoText: "rgba(255, 230, 170, 0.90)",
+      badgeNoBg: "rgba(160, 120, 40, 0.22)",
+      badgeNoText: "rgba(255, 230, 170, 0.90)",
+
+      rowMaybeBg: "rgba(255, 226, 122, 0.10)",
+      rowMaybeBorder: "rgba(255, 226, 122, 0.28)",
+      rowMaybeText: "rgba(255, 245, 210, 0.88)",
+      badgeMaybeBg: "rgba(255, 226, 122, 0.12)",
+      badgeMaybeText: "rgba(255, 245, 210, 0.88)",
+
+      rowEmptyBg: "rgba(255,255,255,0.05)",
+      rowEmptyBorder: "rgba(0,0,0,0)",
+      rowEmptyText: "rgba(255, 240, 180, 0.78)",
+      badgeEmptyBg: "rgba(255,255,255,0.08)",
+      badgeEmptyText: "rgba(255, 240, 180, 0.78)",
     },
   },
 };