nessi/cluedo-hp-webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor status-based styles to use theme tokens.

Browse Source 
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.
This commit is contained in:
Sascha Nesterovic
2026-02-06 09:25:43 +01:00
parent a08b74ff7a
commit a9021fb4f1
3 changed files with 182 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
frontend/src/components/SheetSection.jsx
View File

@@ -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

44
frontend/src/styles/theme.js
View File

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

135
frontend/src/styles/themes.js
View File

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