Redesign patient cards: 7 focused cards + sparklines; lighten input

- Split the overloaded card into 7 single-topic cards (Summary, Vitals,
  Labs, Medications, Problems, Allergies & alerts, Visits) so the
  equal-height row is evenly filled instead of stretched-and-empty.
- Add a dependency-free inline-SVG shaded-area Sparkline; Vitals shows a
  heart-rate trend and Labs a headline-lab trend, fed by new vitalsTrend/
  labTrend series in the fixture.
- Lighten the chat input's two surfaces so it reads as a raised layer
  above the new (lighter) page background.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Khalid Abdi
2026-06-01 19:42:30 +03:00
parent 011c71a3ad
commit 9a7e694d5a
4 changed files with 315 additions and 112 deletions
+2 -2
View File
@@ -192,10 +192,10 @@ export function ChatInput({ onSubmit, status, onStop }: ChatInputProps) {
event.preventDefault();
submit();
}}
className="w-full overflow-hidden rounded-[28px] border border-border/60 bg-[oklch(0.172_0.006_277)] shadow-sm"
className="w-full overflow-hidden rounded-[28px] border border-border/60 bg-[oklch(0.195_0.006_277)] shadow-sm"
>
{/* Top (lighter) card: textarea + toolbar, with a slightly smaller bottom radius */}
<div className="rounded-b-[22px] bg-card">
<div className="rounded-b-[22px] bg-[oklch(0.218_0.006_277)]">
<textarea
aria-label="Message"
className="field-sizing-content block max-h-48 min-h-16 w-full resize-none bg-transparent px-5 pt-5 pb-2 text-base text-foreground outline-none placeholder:text-muted-foreground"