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

dev #3

Merged
nessi merged 7 commits from dev into main 2026-02-06 09:43:03 +00:00
Conversation 0 Commits 7 Files Changed 15 +182 -29
3 changed files with 182 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit a9021fb4f1 - Show all commits

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

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

@@ -1,3 +1,4 @@
// frontend/src/styles/theme.js
export const stylesTokens = {
pageBg: "var(--hp-pageBg)",
panelBg: "var(--hp-panelBg)",
@@ -8,4 +9,31 @@ export const stylesTokens = {
textGold: "var(--hp-textGold)",
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)",
},
},
};