From 651aa65c28c48a229a8caca2c043616d568a904b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= Date: Tue, 16 Jun 2026 21:54:25 +0200 Subject: [PATCH] fix(dashboard): flatten the hero band to match the tile + chart surfaces MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The daily-verdict band wore a gradient surface and a health-score ring with a drop-shadow bloom, a green-band breathing pulse, a conic sheen, and a sweep entrance. It read louder than the chart cards and tiles it sits among. Drop the gradient: the band now wears the same bg-card + border + radius + padding as , and the dose chip sits on a neutral muted surface (no card tint, blur, or shadow). Add a flat treatment to that suppresses the bloom, pulse, sheen, and entrance sweep, and pass it on the hero ring only. The wellness strip and anatomy view keep the full reveal. Reduced-motion handling is unchanged. Information is untouched — only the visual treatment changes. --- src/app/globals.css | 5 ++++ .../hero/__tests__/dashboard-hero.test.tsx | 27 ++++++++++++------- .../dashboard/hero/dashboard-hero.tsx | 20 ++++++++------ .../insights/derived/score-ring.tsx | 22 +++++++++++---- 4 files changed, 51 insertions(+), 23 deletions(-) diff --git a/src/app/globals.css b/src/app/globals.css index 46b5f1dc9..417fb9536 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -705,6 +705,11 @@ 0 0 3px color-mix(in srgb, var(--ring-glow) 45%, transparent) ); } +/* Flat 2-D arc — no bloom, no pulse. The dashboard hero ring uses this so it + reads as calmly as the chart + tile surfaces around it. */ +.wellness-ring-arc--flat { + filter: none; +} .wellness-ring-arc--pulse { /* Breathe a few times to celebrate a strong score, then settle — an infinite loop would repaint the (non-compositable) drop-shadow filter diff --git a/src/components/dashboard/hero/__tests__/dashboard-hero.test.tsx b/src/components/dashboard/hero/__tests__/dashboard-hero.test.tsx index 30ee06eb4..451b8af0a 100644 --- a/src/components/dashboard/hero/__tests__/dashboard-hero.test.tsx +++ b/src/components/dashboard/hero/__tests__/dashboard-hero.test.tsx @@ -361,7 +361,7 @@ describe(" — verdict variants", () => { }); describe(" — dose row", () => { - it("prints the day tally with the v1.16.6 card chrome and the Pill icon", () => { + it("prints the day tally with the neutral chip chrome and the Pill icon", () => { const html = render( baseSnapshot({ medsToday: medsToday({ scheduledToday: 3, takenToday: 1 }), @@ -372,15 +372,13 @@ describe(" — dose row", () => { /]*data-slot="dashboard-hero-doses"[^>]*>/, ); expect(doseRow).not.toBeNull(); - for (const cls of [ - "bg-card/65", - "border-border/60", - "rounded-xl", - "shadow-sm", - "backdrop-blur-sm", - ]) { + // v1.18.1: chip sits on a neutral muted surface over the plain card — + // no translucent card tint, no blur, no shadow (the gradient is gone). + for (const cls of ["bg-muted/50", "border-border/60", "rounded-xl"]) { expect(doseRow![0]).toContain(cls); } + expect(doseRow![0]).not.toContain("backdrop-blur"); + expect(doseRow![0]).not.toContain("shadow-sm"); }); it("all doses resolved (taken + skipped) → 'Alle Dosen für heute erledigt'", () => { @@ -581,8 +579,17 @@ describe(" — source pins", () => { expect(src).toMatch(/resolveDashboardVerdict\(snapshot,\s*new Date\(\)\)/); }); - it("uses the hero-gradient chrome WITHOUT glow-purple", () => { - expect(src).toContain("hero-gradient"); + it("wears the plain card surface — no gradient, no glow", () => { + // v1.18.1: the band drops the gradient hero treatment and sits on the + // same `bg-card` + border + radius as the surrounding chart cards. + expect(src).toContain("bg-card"); + expect(src).toContain("border-border"); + expect(src).toContain("rounded-xl"); + expect(src).not.toContain("hero-gradient"); expect(src).not.toContain("glow-purple"); }); + + it("renders the score ring flat (no bloom / pulse / sheen / sweep)", () => { + expect(src).toMatch(/]*\n(?:[^>]*\n)*?\s*flat\b/); + }); }); diff --git a/src/components/dashboard/hero/dashboard-hero.tsx b/src/components/dashboard/hero/dashboard-hero.tsx index 6daeb2566..4e3096396 100644 --- a/src/components/dashboard/hero/dashboard-hero.tsx +++ b/src/components/dashboard/hero/dashboard-hero.tsx @@ -15,8 +15,10 @@ * band's anchor, larger and heavier than the verdict so the * personalised line is not drowned by the content below it), the * verdict sentence with its single CTA button, and the dose row; - * - right column: the shared `` at `sm` geometry. A null - * score renders the ring's provisional state at the identical + * - right column: the shared `` at `sm` geometry, in its + * `flat` treatment (no bloom / pulse / sheen / sweep) so the dial + * sits as calmly as the surrounding chart cards. A null score + * renders the ring's provisional state at the identical * 120 px footprint, so the column never collapses. The provisional * label is honest about WHY the score is null: when the snapshot * already carries score inputs (weight / BP summaries, mood @@ -220,11 +222,12 @@ export function DashboardHero({
`). No + // gradient, no glow — it reads as one of the dashboard tiles. + "bg-card border-border relative isolate overflow-hidden rounded-xl border", + "min-h-[8.75rem] p-4 md:min-h-[9.5rem] md:p-6", )} >
@@ -272,7 +275,7 @@ export function DashboardHero({
- {/* Conic specular sheen — sweeps the arc once on the strip reveal. */} -