diff --git a/frontend/src/components/BandMap.tsx b/frontend/src/components/BandMap.tsx index 607d429..af87296 100644 --- a/frontend/src/components/BandMap.tsx +++ b/frontend/src/components/BandMap.tsx @@ -167,7 +167,23 @@ function statusLabel(s: string, t: (k: string) => string, muted = false): string } } -function statusStyle(s: string): { pill: string; bar: string; line: string; dot: string } { +// QUIET: no status colour at all. The pill keeps the card background and the +// accent drops to a plain border grey, so the spot is present but says nothing. +const QUIET_STYLE = { + pill: 'bg-card text-muted-foreground border-border/60 hover:bg-muted/50', + bar: 'bg-muted-foreground/30', + line: 'stroke-border', + dot: 'fill-border', +}; + +function statusStyle(s: string, muted = false): { pill: string; bar: string; line: string; dot: string } { + // A muted spot must land on QUIET, never on the default branch below. That + // default paints bg-primary/60 — the theme's burnt orange at 60 % over a dark + // card, i.e. brown — because it was written for the rare unresolved entity and + // orange is this app's "look here" colour. With the mute option on, most of + // the map is muted, so the whole band map turned brown and the quietest spots + // shouted the loudest. + if (muted) return QUIET_STYLE; // pill = full pill background+text+border // bar = thick left accent inside the pill // line = SVG leader stroke (visible on hover) @@ -191,12 +207,7 @@ function statusStyle(s: string): { pill: string; bar: string; line: string; dot: line: 'stroke-caution', dot: 'fill-caution', }; - case 'worked': return { - pill: 'bg-card text-muted-foreground border-border/60 hover:bg-muted/50', - bar: 'bg-muted-foreground/30', - line: 'stroke-border', - dot: 'fill-border', - }; + case 'worked': return QUIET_STYLE; default: return { pill: 'bg-card text-foreground border-border hover:bg-accent/40', bar: 'bg-primary/60', @@ -564,7 +575,7 @@ export function BandMap({ band, spots, spotStatus: spotStatusRaw, currentFreqHz, {placed.map((p, i) => { const k = spotStatusKey(p.spot.dx_call, p.spot.band ?? '', p.spot.comment ?? '', p.spot.freq_hz); const st = spotStatus[k]?.status ?? ''; - const style = statusStyle(st); + const style = statusStyle(st, spotStatus[k]?.muted); const labelMidY = p.labelY + PILL_H / 2; const bumped = Math.abs(p.freqY - labelMidY) > 0.5; return ( @@ -612,7 +623,7 @@ export function BandMap({ band, spots, spotStatus: spotStatusRaw, currentFreqHz, const k = spotStatusKey(p.spot.dx_call, p.spot.band ?? '', p.spot.comment ?? '', p.spot.freq_hz); const entry = spotStatus[k]; const st = entry?.status ?? ''; - const style = statusStyle(st); + const style = statusStyle(st, entry?.muted); const mode = inferSpotMode(p.spot.comment ?? '', p.spot.freq_hz); return (