From a0d0faf23167476e22b48f1222171f7c0437b8b4 Mon Sep 17 00:00:00 2001 From: Lucas Winther Date: Sun, 16 Aug 2026 20:38:14 +0200 Subject: [PATCH] feat(daily): keep each game's colour on its chip, done or not MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The hue only appeared on completion, so the half of the strip a reader actually scans — the unfinished half — was a row of identical grey pills with nothing to say which game each belonged to. Soft border and wash while outstanding, full strength once ticked. Done is still legible without the colour: the tick, the stronger border and the deeper wash all carry it. Co-Authored-By: Claude Opus 5 (1M context) --- src/client/components/Dailies.tsx | 20 +++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/src/client/components/Dailies.tsx b/src/client/components/Dailies.tsx index bbb4cb1..e612f4e 100644 --- a/src/client/components/Dailies.tsx +++ b/src/client/components/Dailies.tsx @@ -120,6 +120,11 @@ export function Dailies({ * The same pill whether it is a game's standing chore or an event that repeats: * to the reader at 23:50 they are the same job, and the distinction between * "the app knows about this" and "a wiki published it" is ours, not theirs. + * + * The game's hue is on the border in both states — softly when the job is + * outstanding, fully once it is done. A chip that only takes its colour on + * completion means the strip you actually scan, the unfinished one, is a row of + * identical grey pills with no clue which game each belongs to. */ function TickChip({ label, @@ -150,20 +155,25 @@ function TickChip({ title={title} className="flex max-w-[15rem] items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-medium transition-colors" style={{ - borderColor: isDone ? hue : "var(--color-hairline)", - color: isDone ? hue : "var(--color-faint)", - background: isDone ? `color-mix(in srgb, ${hue} 14%, transparent)` : "transparent", + borderColor: isDone ? hue : `color-mix(in srgb, ${hue} 34%, transparent)`, + // Colour identifies the game; done-ness is carried by the tick, the + // full-strength border and the wash. Keeping the label readable matters + // more than saturating it, so an outstanding chip stays on muted ink. + color: isDone ? hue : "var(--color-muted)", + background: isDone + ? `color-mix(in srgb, ${hue} 14%, transparent)` + : `color-mix(in srgb, ${hue} 5%, transparent)`, }} > {label}