frontend/src/components/SheetSection.jsx

@@ -3,15 +3,6 @@ import React from "react";
 import { styles } from "../styles/styles";
 import { stylesTokens } from "../styles/theme";
 
-/**
- * props:
- * - title: string
- * - entries: array
- * - pulseId: number | null
- * - onCycleStatus(entry): fn
- * - onToggleTag(entry): fn
- * - displayTag(entry): string
- */
 export default function SheetSection({
   title,
   entries,
@@ -20,7 +11,6 @@ export default function SheetSection({
   onToggleTag,
   displayTag,
 }) {
-  // --- helpers (lokal, weil sie rein UI sind) ---
   const getRowBg = (status) => {
     if (status === 1) return stylesTokens.rowNoBg;
     if (status === 2) return stylesTokens.rowOkBg;
@@ -44,10 +34,17 @@ export default function SheetSection({
   };
 
   const getStatusBadge = (status) => {
-    if (status === 2) return { color: stylesTokens.rowOkText, background: stylesTokens.rowOkBg };
+    if (status === 2) return { color: stylesTokens.badgeOkText, background: stylesTokens.badgeOkBg };
-    if (status === 1) return { color: stylesTokens.rowNoText, background: stylesTokens.rowNoBg };
+    if (status === 1) return { color: stylesTokens.badgeNoText, background: stylesTokens.badgeNoBg };
-    if (status === 3) return { color: stylesTokens.rowMaybeText, background: stylesTokens.rowMaybeBg };
+    if (status === 3) return { color: stylesTokens.badgeMaybeText, background: stylesTokens.badgeMaybeBg };
-    return { color: stylesTokens.rowEmptyText, background: stylesTokens.rowEmptyBg };
+    return { color: stylesTokens.badgeEmptyText, background: stylesTokens.badgeEmptyBg };
+  };
+
+  const getBorderLeft = (status) => {
+    if (status === 2) return `4px solid ${stylesTokens.rowOkBorder}`;
+    if (status === 1) return `4px solid ${stylesTokens.rowNoBorder}`;
+    if (status === 3) return `4px solid ${stylesTokens.rowMaybeBorder}`;
+    return `4px solid ${stylesTokens.rowEmptyBorder}`;
   };
 
   return (
@@ -56,7 +53,6 @@ export default function SheetSection({
 
       <div style={{ display: "grid" }}>
         {entries.map((e) => {
-          // UI "rot" wenn note_tag i/m/s (Backend s wird als s.XX angezeigt)
           const isIorMorS = e.note_tag === "i" || e.note_tag === "m" || e.note_tag === "s";
           const effectiveStatus = e.status === 0 && isIorMorS ? 1 : e.status;
 
@@ -70,14 +66,7 @@ export default function SheetSection({
                 ...styles.row,
                 background: getRowBg(effectiveStatus),
                 animation: pulseId === e.entry_id ? "rowPulse 220ms ease-out" : "none",
-                borderLeft:
+                borderLeft: getBorderLeft(effectiveStatus),
-                  effectiveStatus === 2
-                    ? `4px solid ${stylesTokens.rowOkBorder}`
-                    : effectiveStatus === 1
-                    ? `4px solid ${stylesTokens.rowNoBorder}`
-                    : effectiveStatus === 3
-                    ? `4px solid ${stylesTokens.rowMaybeBorder}`
-                    : `4px solid ${stylesTokens.rowEmptyBorder}`,
               }}
             >
               <div

frontend/src/styles/styles.js

@@ -48,9 +48,9 @@ export const styles = {
     fontWeight: 1000,
     fontFamily: '"Cinzel Decorative", "IM Fell English", system-ui',
     letterSpacing: 1.0,
-    color: stylesTokens.textGold,
+    color: stylesTokens.sectionHeaderText,
-    background: "linear-gradient(180deg, rgba(32,32,36,0.92), rgba(14,14,16,0.92))",
+    background: `linear-gradient(180deg, ${stylesTokens.sectionHeaderBgTop}, ${stylesTokens.sectionHeaderBgBottom})`,
-    borderBottom: `1px solid ${stylesTokens.goldLine}`,
+    borderBottom: `1px solid ${stylesTokens.sectionHeaderBorder}`,
     textTransform: "uppercase",
     textShadow: "0 1px 0 rgba(0,0,0,0.6)",
   },

frontend/src/styles/theme.js

@@ -10,30 +10,41 @@ export const stylesTokens = {
 
   goldLine: "var(--hp-goldLine)",
 
-  // ===== NEW: Row/Table colors so themes affect tables =====
+  // ===== Section Header (NEW) =====
+  sectionHeaderBgTop: "var(--hp-sectionHeaderBgTop)",
+  sectionHeaderBgBottom: "var(--hp-sectionHeaderBgBottom)",
+  sectionHeaderText: "var(--hp-sectionHeaderText)",
+  sectionHeaderBorder: "var(--hp-sectionHeaderBorder)",
+
+  // ===== Row/Table colors =====
   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)",
+
+  // ===== Badge colors (NEW: getrennt von row*) =====
+  badgeOkBg: "var(--hp-badgeOkBg)",
+  badgeOkText: "var(--hp-badgeOkText)",
+
+  badgeNoBg: "var(--hp-badgeNoBg)",
+  badgeNoText: "var(--hp-badgeNoText)",
+
+  badgeMaybeBg: "var(--hp-badgeMaybeBg)",
+  badgeMaybeText: "var(--hp-badgeMaybeText)",
+
   badgeEmptyBg: "var(--hp-badgeEmptyBg)",
   badgeEmptyText: "var(--hp-badgeEmptyText)",
 };

frontend/src/styles/themes.js

@@ -20,10 +20,10 @@ export const THEMES = {
       badgeOkBg: "rgba(0,190,80,0.18)",
       badgeOkText: "#baf3c9",
 
-      rowNoBg: "rgba(255,35,35,0.16)",
+      rowNoBg: "rgba(255,35,35,0.18)",
-      rowNoBorder: "rgba(255,35,35,0.55)",
+      rowNoBorder: "rgba(255,35,35,0.65)",
       rowNoText: "#ffb3b3",
-      badgeNoBg: "rgba(255,35,35,0.18)",
+      badgeNoBg: "rgba(255,35,35,0.20)",
       badgeNoText: "#ffb3b3",
 
       rowMaybeBg: "rgba(140,140,140,0.12)",
@@ -60,17 +60,17 @@ export const THEMES = {
       badgeOkBg: "rgba(255, 184, 107, 0.20)",
       badgeOkText: "rgba(255, 235, 210, 0.95)",
 
-      rowNoBg: "rgba(200, 40, 40, 0.26)",
+      rowNoBg: "rgba(255,35,35,0.18)",
-      rowNoBorder: "rgba(200, 40, 40, 0.70)",
+      rowNoBorder: "rgba(255,35,35,0.65)",
       rowNoText: "#ffb3b3",
-      badgeNoBg: "rgba(200, 40, 40, 0.22)",
+      badgeNoBg: "rgba(255,35,35,0.20)",
       badgeNoText: "#ffb3b3",
 
-      rowMaybeBg: "rgba(255, 210, 140, 0.14)",
+      rowMaybeBg: "rgba(140,140,140,0.12)",
-      rowMaybeBorder: "rgba(255, 210, 140, 0.30)",
+      rowMaybeBorder: "rgba(233,216,166,0.22)",
-      rowMaybeText: "rgba(255, 235, 210, 0.88)",
+      rowMaybeText: "rgba(233,216,166,0.85)",
-      badgeMaybeBg: "rgba(255, 210, 140, 0.16)",
+      badgeMaybeBg: "rgba(140,140,140,0.14)",
-      badgeMaybeText: "rgba(255, 235, 210, 0.88)",
+      badgeMaybeText: "rgba(233,216,166,0.85)",
 
       rowEmptyBg: "rgba(255,255,255,0.06)",
       rowEmptyBorder: "rgba(0,0,0,0)",
@@ -100,17 +100,17 @@ export const THEMES = {
       badgeOkBg: "rgba(124, 255, 182, 0.18)",
       badgeOkText: "rgba(210, 255, 235, 0.95)",
 
-      rowNoBg: "rgba(40, 120, 80, 0.28)",
+      rowNoBg: "rgba(255,35,35,0.18)",
-      rowNoBorder: "rgba(40, 120, 80, 0.70)",
+      rowNoBorder: "rgba(255,35,35,0.65)",
-      rowNoText: "rgba(190, 245, 220, 0.88)",
+      rowNoText: "#ffb3b3",
-      badgeNoBg: "rgba(40, 120, 80, 0.22)",
+      badgeNoBg: "rgba(255,35,35,0.20)",
-      badgeNoText: "rgba(190, 245, 220, 0.88)",
+      badgeNoText: "#ffb3b3",
 
-      rowMaybeBg: "rgba(124, 255, 182, 0.10)",
+      rowMaybeBg: "rgba(140,140,140,0.12)",
-      rowMaybeBorder: "rgba(124, 255, 182, 0.28)",
+      rowMaybeBorder: "rgba(233,216,166,0.22)",
-      rowMaybeText: "rgba(200, 255, 230, 0.85)",
+      rowMaybeText: "rgba(233,216,166,0.85)",
-      badgeMaybeBg: "rgba(124, 255, 182, 0.12)",
+      badgeMaybeBg: "rgba(140,140,140,0.14)",
-      badgeMaybeText: "rgba(200, 255, 230, 0.85)",
+      badgeMaybeText: "rgba(233,216,166,0.85)",
 
       rowEmptyBg: "rgba(255,255,255,0.05)",
       rowEmptyBorder: "rgba(0,0,0,0)",
@@ -140,17 +140,17 @@ export const THEMES = {
       badgeOkBg: "rgba(143, 182, 255, 0.18)",
       badgeOkText: "rgba(225, 235, 255, 0.95)",
 
-      rowNoBg: "rgba(70, 95, 160, 0.28)",
+      rowNoBg: "rgba(255,35,35,0.18)",
-      rowNoBorder: "rgba(70, 95, 160, 0.70)",
+      rowNoBorder: "rgba(255,35,35,0.65)",
-      rowNoText: "rgba(205, 220, 255, 0.90)",
+      rowNoText: "#ffb3b3",
-      badgeNoBg: "rgba(70, 95, 160, 0.22)",
+      badgeNoBg: "rgba(255,35,35,0.20)",
-      badgeNoText: "rgba(205, 220, 255, 0.90)",
+      badgeNoText: "#ffb3b3",
 
-      rowMaybeBg: "rgba(143, 182, 255, 0.10)",
+      rowMaybeBg: "rgba(140,140,140,0.12)",
-      rowMaybeBorder: "rgba(143, 182, 255, 0.28)",
+      rowMaybeBorder: "rgba(233,216,166,0.22)",
-      rowMaybeText: "rgba(210, 225, 255, 0.88)",
+      rowMaybeText: "rgba(233,216,166,0.85)",
-      badgeMaybeBg: "rgba(143, 182, 255, 0.12)",
+      badgeMaybeBg: "rgba(140,140,140,0.14)",
-      badgeMaybeText: "rgba(210, 225, 255, 0.88)",
+      badgeMaybeText: "rgba(233,216,166,0.85)",
 
       rowEmptyBg: "rgba(255,255,255,0.05)",
       rowEmptyBorder: "rgba(0,0,0,0)",
@@ -180,17 +180,17 @@ export const THEMES = {
       badgeOkBg: "rgba(255, 226, 122, 0.20)",
       badgeOkText: "rgba(255, 245, 210, 0.95)",
 
-      rowNoBg: "rgba(160, 120, 40, 0.28)",
+      rowNoBg: "rgba(255,35,35,0.18)",
-      rowNoBorder: "rgba(160, 120, 40, 0.70)",
+      rowNoBorder: "rgba(255,35,35,0.65)",
-      rowNoText: "rgba(255, 230, 170, 0.90)",
+      rowNoText: "#ffb3b3",
-      badgeNoBg: "rgba(160, 120, 40, 0.22)",
+      badgeNoBg: "rgba(255,35,35,0.20)",
-      badgeNoText: "rgba(255, 230, 170, 0.90)",
+      badgeNoText: "#ffb3b3",
 
-      rowMaybeBg: "rgba(255, 226, 122, 0.10)",
+      rowMaybeBg: "rgba(140,140,140,0.12)",
-      rowMaybeBorder: "rgba(255, 226, 122, 0.28)",
+      rowMaybeBorder: "rgba(233,216,166,0.22)",
-      rowMaybeText: "rgba(255, 245, 210, 0.88)",
+      rowMaybeText: "rgba(233,216,166,0.85)",
-      badgeMaybeBg: "rgba(255, 226, 122, 0.12)",
+      badgeMaybeBg: "rgba(140,140,140,0.14)",
-      badgeMaybeText: "rgba(255, 245, 210, 0.88)",
+      badgeMaybeText: "rgba(233,216,166,0.85)",
 
       rowEmptyBg: "rgba(255,255,255,0.05)",
       rowEmptyBorder: "rgba(0,0,0,0)",