From ec5d567dae1aad8e7a25afb8547f292c7f5c4206 Mon Sep 17 00:00:00 2001
From: Benjamin Sutter <beni_sutter@hotmail.com>
Date: Wed, 10 Jun 2026 23:05:08 +0200
Subject: [PATCH] =?UTF-8?q?refine:=20Reminder=20Manager=20=E2=80=94=20alig?=
 =?UTF-8?q?n=20to=20premium=20design?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace SaaS-generic KPI icon boxes with flat inline layout.
Replace MUI color-prop status chips with design-system colors
matching the rest of the supply workspace.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/supply/ReminderKpiBar.tsx  | 35 +++++++----------------
 src/components/supply/ReminderListRow.tsx | 28 +++++++++++-------
 2 files changed, 27 insertions(+), 36 deletions(-)

diff --git a/src/components/supply/ReminderKpiBar.tsx b/src/components/supply/ReminderKpiBar.tsx
index ca61e29..cd61328 100644
--- a/src/components/supply/ReminderKpiBar.tsx
+++ b/src/components/supply/ReminderKpiBar.tsx
@@ -21,41 +21,26 @@ function KpiCard({ icon, label, value, color, active, onClick }: KpiCardProps) {
       onClick={onClick}
       sx={{
         flex: 1,
-        p: 1.5,
+        px: 1.5,
+        py: 1.125,
         display: 'flex',
         alignItems: 'center',
-        gap: 1.5,
-        border: active ? `2px solid ${color}` : '1px solid #e2e8f0',
+        gap: 1,
+        border: active ? `1.5px solid ${color}` : '1px solid #e8e7e4',
         borderRadius: 1.5,
-        bgcolor: active ? `${color}10` : 'white',
+        bgcolor: active ? `${color}08` : 'white',
         cursor: 'pointer',
-        transition: 'all 0.15s',
+        transition: 'border-color 0.15s, background 0.15s',
         minWidth: 0,
-        '&:hover': {
-          bgcolor: `${color}0d`,
-          borderColor: color,
-        },
+        '&:hover': { bgcolor: `${color}06`, borderColor: color },
       }}
     >
-      <Box
-        sx={{
-          width: 34,
-          height: 34,
-          borderRadius: 1,
-          bgcolor: `${color}18`,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          flexShrink: 0,
-        }}
-      >
-        {icon}
-      </Box>
+      <Box sx={{ opacity: active ? 1 : 0.55, flexShrink: 0 }}>{icon}</Box>
       <Box sx={{ minWidth: 0 }}>
-        <Typography variant="h6" sx={{ fontWeight: 700, color, lineHeight: 1.2, fontSize: '1.25rem' }}>
+        <Typography sx={{ fontWeight: 700, color, lineHeight: 1.1, fontSize: '1.1rem' }}>
           {value}
         </Typography>
-        <Typography variant="caption" color="text.secondary" sx={{ whiteSpace: 'nowrap', fontSize: '0.7rem' }}>
+        <Typography variant="caption" sx={{ color: '#64748b', whiteSpace: 'nowrap', fontSize: '0.68rem' }}>
           {label}
         </Typography>
       </Box>
diff --git a/src/components/supply/ReminderListRow.tsx b/src/components/supply/ReminderListRow.tsx
index 4a90d75..13cea0c 100644
--- a/src/components/supply/ReminderListRow.tsx
+++ b/src/components/supply/ReminderListRow.tsx
@@ -16,20 +16,20 @@ const PRIORITY_BORDER: Record<string, string> = {
   [ReminderPriority.LOW]: 'transparent',
 }
 
-const STATUS_CHIP_COLOR: Record<string, 'default' | 'success' | 'warning' | 'error' | 'info'> = {
-  ACTIVE: 'info',
-  SNOOZED: 'warning',
-  COMPLETED: 'success',
-  DISMISSED: 'default',
-}
-
 const STATUS_LABEL: Record<string, string> = {
-  ACTIVE: 'Aktiv',
-  SNOOZED: 'Schlummernd',
+  ACTIVE:    'Aktiv',
+  SNOOZED:   'Schlummernd',
   COMPLETED: 'Erledigt',
   DISMISSED: 'Verworfen',
 }
 
+const STATUS_STYLE: Record<string, { bg: string; color: string; border: string }> = {
+  ACTIVE:    { bg: '#f0fdf4', color: '#15803d', border: '#bbf7d0' },
+  SNOOZED:   { bg: '#fefce8', color: '#92400e', border: '#fde68a' },
+  COMPLETED: { bg: '#f8fafc', color: '#475569', border: '#e2e8f0' },
+  DISMISSED: { bg: '#f8fafc', color: '#94a3b8', border: '#e8e7e4' },
+}
+
 interface Props {
   reminder: Reminder
 }
@@ -121,9 +121,15 @@ export const ReminderListRow = memo(function ReminderListRow({ reminder }: Props
       <Box>
         <Chip
           label={STATUS_LABEL[reminder.status]}
-          color={STATUS_CHIP_COLOR[reminder.status]}
           size="small"
-          sx={{ height: 20, fontSize: '0.7rem' }}
+          sx={{
+            height: 20,
+            fontSize: '0.7rem',
+            fontWeight: 500,
+            bgcolor: STATUS_STYLE[reminder.status]?.bg ?? '#f8fafc',
+            color: STATUS_STYLE[reminder.status]?.color ?? '#64748b',
+            border: `1px solid ${STATUS_STYLE[reminder.status]?.border ?? '#e2e8f0'}`,
+          }}
         />
       </Box>