fix(design): Dracula tokens + Romance BP abbreviations + therapy-timeline polish

- GLP-1 medication card streak flame: `text-orange-400` →
  `text-dracula-orange`. The hardcoded Tailwind shade was skewing
  warm against the rest of the card.
- /insights/medikamente compliance counters: `text-green-500` /
  `text-orange-500` / `text-red-500` → `text-dracula-green` /
  `-orange` / `-red`. Same drift in three sibling spans on one
  surface; replace as a set.
- Side-effect affordance: `Smile` icon read as a positive
  affordance for a *negative* logging surface. Switch to
  `Stethoscope` so the icon matches the clinical context.
- Health Score componentBp: FR `BP` → `TA`, IT `BP` → `PA`,
  ES `BP` → `PA`, PL `BP` → `RR` — the native compact forms
  used in clinical practice. DE "Blutdruck" + EN "BP" unchanged.
- Therapy-timeline `<li>` key: array index → composite
  (`kind-date-medicationName`). Prevents DOM-reuse bugs when a
  dose change is logged mid-window and reorders the list.
- Therapy-timeline inline icons: `aria-hidden="true"` on the
  `<Pill>` injection glyph and the dose-arrow `<ArrowUp>` /
  `<ArrowDown>` so screen readers stop announcing "image"
  mid-sentence.
- Medication-form Dialog tap targets: the schedule-row dropdown
  trigger (`h-7 w-7`) and the New-schedule button + the four
  schedule inputs (`h-8`) promoted to `h-11` so the dense
  schedule grid honours the 44px floor. The labels stay compact;
  the controls grow.
This commit is contained in:
Marc-André Bombeck committed 2026-05-14 16:57:56 +02:00
1 parent 3e78da6e35
commit 8f3a95463d
8 files changed
+29 -21

No files matched your search

+1 -1
View File
@@ -874,7 +874,7 @@
"progressAria": "Health Score progress",
"deltaVsLastWeek": "{delta} vs last week",
"deltaUnavailable": "No history yet — check back next week.",
"componentBp": "BP",
"componentBp": "PA",
"componentWeight": "Peso",
"componentMood": "Estado de ánimo",
"componentCompliance": "Meds",
+1 -1
View File
@@ -874,7 +874,7 @@
"progressAria": "Health Score progress",
"deltaVsLastWeek": "{delta} vs last week",
"deltaUnavailable": "No history yet — check back next week.",
"componentBp": "BP",
"componentBp": "TA",
"componentWeight": "Poids",
"componentMood": "Humeur",
"componentCompliance": "Meds",
+1 -1
View File
@@ -874,7 +874,7 @@
"progressAria": "Health Score progress",
"deltaVsLastWeek": "{delta} vs last week",
"deltaUnavailable": "No history yet — check back next week.",
"componentBp": "BP",
"componentBp": "PA",
"componentWeight": "Peso",
"componentMood": "Umore",
"componentCompliance": "Meds",
+1 -1
View File
@@ -874,7 +874,7 @@
"progressAria": "Health Score progress",
"deltaVsLastWeek": "{delta} vs last week",
"deltaUnavailable": "No history yet — check back next week.",
"componentBp": "BP",
"componentBp": "RR",
"componentWeight": "Waga",
"componentMood": "Nastrój",
"componentCompliance": "Meds",
+5 -3
View File
@@ -182,15 +182,17 @@ export default function InsightsMedikamentePage() {
</div>
<div className="text-muted-foreground flex justify-between text-xs">
<span>
<span className="text-green-500">{med.taken7}</span>{" "}
<span className="text-dracula-green">{med.taken7}</span>{" "}
{t("insights.taken")}
</span>
<span>
<span className="text-orange-500">{med.skipped7}</span>{" "}
<span className="text-dracula-orange">
{med.skipped7}
</span>{" "}
{t("insights.skipped")}
</span>
<span>
<span className="text-red-500">{med.missed7}</span>{" "}
<span className="text-dracula-red">{med.missed7}</span>{" "}
{t("insights.missed")}
</span>
</div>
+11 -5
View File
@@ -97,8 +97,11 @@ export function TherapyTimeline({ limit }: TherapyTimelineProps) {
</CardHeader>
<CardContent>
<ol className="border-border/60 relative space-y-3 border-l pl-4">
{data.entries.map((entry, idx) => (
<li key={idx} className="relative">
{data.entries.map((entry) => (
<li
key={`${entry.kind}-${entry.date}-${entry.medicationName ?? ""}`}
className="relative"
>
<span
className="border-background absolute top-1 -left-[18px] h-3 w-3 rounded-full border-2"
aria-hidden="true"
@@ -147,9 +150,9 @@ function renderEntryLine(
case "dose-change": {
const arrow =
entry.doseDelta === "up" ? (
<ArrowUp className="inline h-3 w-3" />
<ArrowUp className="inline h-3 w-3" aria-hidden="true" />
) : entry.doseDelta === "down" ? (
<ArrowDown className="inline h-3 w-3" />
<ArrowDown className="inline h-3 w-3" aria-hidden="true" />
) : null;
return (
<span>
@@ -167,7 +170,10 @@ function renderEntryLine(
: "";
return (
<span>
<Pill className="text-dracula-cyan mr-1 inline h-3 w-3" />
<Pill
className="text-dracula-cyan mr-1 inline h-3 w-3"
aria-hidden="true"
/>
<strong>{drug}</strong>
{site}
</span>
@@ -11,7 +11,7 @@ import {
Loader2,
Pencil,
SkipForward,
Smile,
Stethoscope,
Syringe,
} from "lucide-react";
@@ -426,7 +426,7 @@ export function Glp1MedicationCard({
</div>
{streak > 0 && (
<div className="flex items-center gap-4 text-xs">
<span className="flex items-center gap-1 font-medium text-orange-400">
<span className="text-dracula-orange flex items-center gap-1 font-medium">
<Flame className="h-3.5 w-3.5" />
{streak} {t("medications.dayStreak")}
</span>
@@ -471,7 +471,7 @@ export function Glp1MedicationCard({
className="min-h-11"
onClick={() => onLogSideEffect(medication)}
>
<Smile className="mr-1 h-4 w-4" />
<Stethoscope className="mr-1 h-4 w-4" />
{t("medications.glp1LogSideEffect")}
</Button>
)}
@@ -712,7 +712,7 @@ export function MedicationForm({
type="button"
variant="ghost"
size="sm"
className="h-8"
className="min-h-11"
onClick={addSchedule}
>
<Plus className="mr-1 h-3.5 w-3.5" />
@@ -741,7 +741,7 @@ export function MedicationForm({
type="button"
variant="ghost"
size="icon"
className="h-7 w-7"
className="h-11 w-11"
aria-label={t("common.moreOptions")}
>
<MoreVertical className="h-4 w-4" />
@@ -778,7 +778,7 @@ export function MedicationForm({
pattern="[0-2][0-9]:[0-5][0-9]"
placeholder="08:00"
value={s.windowStart}
className="h-8 text-xs md:text-xs"
className="h-11 text-xs md:text-xs"
onChange={(e) =>
updateSchedule(i, "windowStart", e.target.value)
}
@@ -796,7 +796,7 @@ export function MedicationForm({
pattern="[0-2][0-9]:[0-5][0-9]"
placeholder="09:00"
value={s.windowEnd}
className="h-8 text-xs md:text-xs"
className="h-11 text-xs md:text-xs"
onChange={(e) =>
updateSchedule(i, "windowEnd", e.target.value)
}
@@ -810,7 +810,7 @@ export function MedicationForm({
</Label>
<Input
value={s.label}
className="h-8 text-xs md:text-xs"
className="h-11 text-xs md:text-xs"
onChange={(e) => updateSchedule(i, "label", e.target.value)}
placeholder={t("medications.labelPlaceholder")}
maxLength={50}
@@ -822,7 +822,7 @@ export function MedicationForm({
</Label>
<Input
value={s.dose}
className="h-8 text-xs md:text-xs"
className="h-11 text-xs md:text-xs"
onChange={(e) => updateSchedule(i, "dose", e.target.value)}
placeholder={dose || t("medications.defaultDose")}
maxLength={50}