hotel-manage-stack/hvac
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

AC block: mode-driven accent colour, stronger fade when off

Browse source 
Icon and lit fan bars now share one --ac-accent custom property so they can
never drift apart: blue (cool), red (heat), amber (auto/fan), app-primary
default for dry (not in the requested colour spec). Off overrides all of
them with light grey plus a real opacity fade. Applies to both the
Dashboard's ZoneCard and kiosk's KioskZoneBlock via the shared CSS.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
jtricerolph 2026-08-27 14:05:04 +00:00
parent 29340beb7a
commit 0f64500813
3 changed files with 18 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/components/KioskZoneBlock.tsx
View file

@ -58,7 +58,7 @@ export default function KioskZoneBlock({ zone, liveDevices, selectionMode, selec
<div className="kiosk-block-top">
<span className="kiosk-block-zone">{zone.name}</span>
{ac && (
<div className={`ac-block${acOn ? '' : ' off'}`}>
<div className={`ac-block ac-mode-${ac.current_mode || 'unknown'}${acOn ? '' : ' off'}`}>
{ac.remote_locked && <Lock size={12} strokeWidth={1.75} className="ac-lock" />}
<div className="ac-mode-row">
<ModeIcon size={18} strokeWidth={1.75} />

2
frontend/src/components/ZoneCard.tsx
View file

@ -112,7 +112,7 @@ export default function ZoneCard({ zone, onClick }: { zone: ZoneStatus; onClick:
</div>
{ac && (
<div className={`ac-block${acOn ? '' : ' off'}`}>
<div className={`ac-block ac-mode-${ac.current_mode || 'unknown'}${acOn ? '' : ' off'}`}>
{ac.remote_locked && <Lock size={12} strokeWidth={1.75} className="ac-lock" />}
<div className="ac-mode-row">
<ModeIcon size={20} strokeWidth={1.75} />

22
frontend/src/index.css
View file

@ -230,11 +230,21 @@ html, body, #root { height: 100%; margin: 0; font-size: 14px; }
.rad-icon.heating { color: var(--danger); }
.rad-icon.idle { color: var(--text-mid); }
.ac-block { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 4px; color: var(--text-dark); }
/* Explicit muted colour rather than opacity — opacity alone just faded the
'on' fan-bar segments' orange, which read as a washed-out active state
rather than a clean off one. */
.ac-block.off { color: var(--text-mid); }
/* Mode drives one accent colour shared by the mode icon and the lit fan bars
(--ac-accent), so the two can never drift apart. Set per ac-mode-* class
below; both ZoneCard (dashboard) and KioskZoneBlock render this markup. */
.ac-block { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 4px; --ac-accent: var(--app-primary); color: var(--ac-accent); }
.ac-block.ac-mode-cool { --ac-accent: var(--st-occupied); } /* blue */
.ac-block.ac-mode-heat { --ac-accent: var(--danger); } /* red */
.ac-block.ac-mode-auto,
.ac-block.ac-mode-fan { --ac-accent: var(--health-degraded); } /* amber */
/* 'dry' isn't in the user's colour spec — left on the default app-primary
rather than inventing a meaning for it. */
/* Off: light grey + genuine fade, overriding whatever mode accent applies —
explicit colour AND opacity, so it reads clearly inactive rather than like
a washed-out active state. */
.ac-block.off { --ac-accent: var(--text-mid); color: var(--text-mid); opacity: .45; }
.ac-block.off .fan-bar span.on { background: var(--text-mid); }
.ac-lock { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); color: var(--health-degraded); }
.ac-mode-row { display: flex; align-items: center; gap: 6px; }
@ -246,7 +256,7 @@ html, body, #root { height: 100%; margin: 0; font-size: 14px; }
.fan-bar span:nth-child(2) { height: 50%; }
.fan-bar span:nth-child(3) { height: 75%; }
.fan-bar span:nth-child(4) { height: 100%; }
.fan-bar span.on { background: var(--app-primary); }
.fan-bar span.on { background: var(--ac-accent, var(--app-primary)); }
/* ── Badges ────────────────────────────────────────────────── */
.badge {