From 786454ee2f7edabc23ae27937e1a3bcfaa328686 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Wed, 3 Jun 2026 08:47:05 +0200
Subject: [PATCH] fix(ui): repoint medication + admin status colours to theme
 tokens for light-mode AA

The intake-history taken badge and the admin reminders status glyphs used
bare Tailwind -400/-500 shades chosen for the dark theme. On the white
Alucard light card those land well below WCAG AA (green-400 1.74:1,
red-400 2.77:1, yellow-400 1.53:1). Repoint to the success / destructive /
warning theme tokens (light values 6.1:1 / 5.0:1 / 5.8:1 on white) and pin
the original shades behind dark: so the dark rendering stays identical.
---
 src/components/admin/reminders-section.tsx           | 12 ++++++------
 .../medications/intake-history-list-v2.tsx           |  2 +-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/admin/reminders-section.tsx b/src/components/admin/reminders-section.tsx
index 779780777..cd2bf61de 100644
--- a/src/components/admin/reminders-section.tsx
+++ b/src/components/admin/reminders-section.tsx
@@ -236,9 +236,9 @@ export function RemindersSection() {
             {testNotification.data.results.map((r, i) => (
               <div key={i} className="flex items-center gap-1.5 text-xs">
                 {r.success ? (
-                  <CheckCircle2 className="h-3.5 w-3.5 shrink-0 text-green-400" />
+                  <CheckCircle2 className="text-success dark:text-green-400 h-3.5 w-3.5 shrink-0" />
                 ) : (
-                  <XCircle className="h-3.5 w-3.5 shrink-0 text-red-400" />
+                  <XCircle className="text-destructive dark:text-red-400 h-3.5 w-3.5 shrink-0" />
                 )}
                 <span className="font-medium">{r.channel}</span>
                 {r.error && (
@@ -281,11 +281,11 @@ export function RemindersSection() {
                   {med.schedules.map((sched, j) => {
                     const statusColor =
                       sched.status === "open"
-                        ? "text-green-400"
+                        ? "text-success dark:text-green-400"
                         : sched.status === "threshold"
-                          ? "text-yellow-400"
+                          ? "text-warning dark:text-yellow-400"
                           : sched.status === "missed"
-                            ? "text-red-400"
+                            ? "text-destructive dark:text-red-400"
                             : sched.status === "skipped"
                               ? "text-muted-foreground"
                               : "";
@@ -299,7 +299,7 @@ export function RemindersSection() {
                         </span>
                         <span className={statusColor}>{sched.label}</span>
                         {sched.notificationSent && (
-                          <span className="flex shrink-0 items-center gap-0.5 text-green-400">
+                          <span className="text-success dark:text-green-400 flex shrink-0 items-center gap-0.5">
                             <Bell className="h-3 w-3" />
                             {t("admin.reminderCheckNotifSent")}
                           </span>
diff --git a/src/components/medications/intake-history-list-v2.tsx b/src/components/medications/intake-history-list-v2.tsx
index 27cdb3432..a35dd9796 100644
--- a/src/components/medications/intake-history-list-v2.tsx
+++ b/src/components/medications/intake-history-list-v2.tsx
@@ -361,7 +361,7 @@ export function IntakeHistoryListV2({
                         {isTaken ? (
                           <Badge
                             variant="secondary"
-                            className="gap-1 bg-green-500/20 text-xs text-green-400"
+                            className="bg-success/15 text-success dark:bg-green-500/20 dark:text-green-400 gap-1 text-xs"
                           >
                             <Check aria-hidden="true" className="h-3 w-3" />
                             {t("medications.intakeHistoryStatusTaken")}