mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-08 12:32:43 +00:00
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:
1 parent
3e78da6e35
commit
8f3a95463d
8 files changed
+29
-21
No files matched your search
+1
-1
@@ -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
@@ -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
@@ -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
@@ -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",
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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}
|
||||
|
||||
Reference in new issue
Block a user