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

Refactor and expand style tokens for rows and badges.

Browse Source 
This commit separates badge and row styles into distinct tokens, improving modularity and theme customization. It also introduces new tokens for section headers and replaces hardcoded values with more consistent styling logic. These changes enhance maintainability and visual consistency across the application.
This commit is contained in:
Sascha Nesterovic
2026-02-06 09:33:09 +01:00
parent a9021fb4f1
commit 6e460b69b4
4 changed files with 74 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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 === 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 };
if (status === 2) return { color: stylesTokens.badgeOkText, background: stylesTokens.badgeOkBg };
if (status === 1) return { color: stylesTokens.badgeNoText, background: stylesTokens.badgeNoBg };
if (status === 3) return { color: stylesTokens.badgeMaybeText, background: stylesTokens.badgeMaybeBg };
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:
effectiveStatus === 2
? `4px solid ${stylesTokens.rowOkBorder}`
: effectiveStatus === 1
? `4px solid ${stylesTokens.rowNoBorder}`
: effectiveStatus === 3
? `4px solid ${stylesTokens.rowMaybeBorder}`
: `4px solid ${stylesTokens.rowEmptyBorder}`,
borderLeft: getBorderLeft(effectiveStatus),
}}
>
<div

6
frontend/src/styles/styles.js
View File

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

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

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

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

@@ -20,10 +20,10 @@ export const THEMES = {
badgeOkBg: "rgba(0,190,80,0.18)",
badgeOkText: "#baf3c9",
rowNoBg: "rgba(255,35,35,0.16)",
rowNoBorder: "rgba(255,35,35,0.55)",
rowNoBg: "rgba(255,35,35,0.18)",
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)",
rowNoBorder: "rgba(200, 40, 40, 0.70)",
rowNoBg: "rgba(255,35,35,0.18)",
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)",
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)",
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)",
@@ -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)",
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)",
rowNoBg: "rgba(255,35,35,0.18)",
rowNoBorder: "rgba(255,35,35,0.65)",
rowNoText: "#ffb3b3",
badgeNoBg: "rgba(255,35,35,0.20)",
badgeNoText: "#ffb3b3",
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)",
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.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)",
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)",
rowNoBg: "rgba(255,35,35,0.18)",
rowNoBorder: "rgba(255,35,35,0.65)",
rowNoText: "#ffb3b3",
badgeNoBg: "rgba(255,35,35,0.20)",
badgeNoText: "#ffb3b3",
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)",
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.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)",
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)",
rowNoBg: "rgba(255,35,35,0.18)",
rowNoBorder: "rgba(255,35,35,0.65)",
rowNoText: "#ffb3b3",
badgeNoBg: "rgba(255,35,35,0.20)",
badgeNoText: "#ffb3b3",
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)",
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.05)",
rowEmptyBorder: "rgba(0,0,0,0)",