fix(dashboard): anchor the hero greeting and unify the ring green

The greeting drifted to the vertical centre of the taller ring column
and the briefing sat a full step below it — the top row now aligns to
its start and the section gap tightens, so the greeting anchors to the
top edge and the briefing follows closely.

The band-fallback ring green landed on its own hue (#3fb868) while every
positive signal and trend delta beside it used --success (#50fa7b); a
green ring now lands on --success too, so 'green' reads as one green
across rings, signals, and deltas. Computed contrast 11.9:1 dark /
6.1:1 light — well past the graphics floor.
This commit is contained in:
Marc-André Bombeck committed 2026-07-07 16:19:14 +02:00
1 parent b6e6fa3bdc
commit 6f1833eb10
2 files changed
+16 -10

No files matched your search

+9 -5
View File
@@ -283,9 +283,11 @@
--ring-strain-from: #e06aa8;
--ring-strain-to: #ea74b1;
--tile-strain: #ff79c6;
/* Band fallback (anatomy detail view, no per-metric hue). */
--ring-green-from: #3fb868;
--ring-green-to: #48c473;
/* Band fallback (anatomy detail view, no per-metric hue). Lands on the
app-wide --success green (#50fa7b) so a "green" ring matches the green
of every positive signal / trend delta beside it. */
--ring-green-from: #35d76a;
--ring-green-to: #50fa7b;
--ring-yellow-from: #e0a050;
--ring-yellow-to: #e8ab5c;
--ring-red-from: #e0594a;
@@ -409,8 +411,10 @@
--ring-strain-from: #b62478;
--ring-strain-to: #bd2a7e;
--tile-strain: #b0277d;
--ring-green-from: #138043;
--ring-green-to: #168a48;
/* Light: lands on the light-theme --success (#14720a) so ring green
matches every positive signal beside it. */
--ring-green-from: #12760f;
--ring-green-to: #14720a;
--ring-yellow-from: #b27018;
--ring-yellow-to: #bd7a1e;
--ring-red-from: #b22e20;
@@ -254,11 +254,13 @@ export function DashboardHero({
"min-h-[8.75rem] p-4 md:min-h-[9.5rem] md:p-6",
)}
>
{/* Vertical rhythm: the section gap (greeting/ring row → briefing)
reads one step larger than the intra-block spacing so the two
zones separate cleanly; the card's own padding stays symmetric. */}
<div className="flex h-full flex-col gap-4 md:gap-6">
<div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
{/* Vertical rhythm: greeting/ring row and the briefing sit one
spacing step apart — tight enough that the briefing doesn't feel
adrift below a floating greeting. The top row aligns to its start
on desktop so the greeting anchors to the top edge instead of
drifting to the vertical centre of the taller ring column. */}
<div className="flex h-full flex-col gap-4">
<div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
<div className="min-w-0 flex-1 space-y-3">
{/* Greeting leads the typographic hierarchy: larger + heavier
than the verdict so the personalised line reads first.