mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-08 12:32:43 +00:00
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:
1 parent
b6e6fa3bdc
commit
6f1833eb10
2 files changed
+16
-10
No files matched your search
+9
-5
@@ -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.
|
||||
|
||||
Reference in new issue
Block a user