From 75aa60cb83b00bfeb00311f3e392aac2afc4b351 Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Wed, 24 Sep 2025 08:22:16 +0200
Subject: [PATCH] style: update DeadlineReminder component styles - Refactored
 styles in `DeadlineReminder` for improved visual consistency and clarity. -
 Changed card structure and applied new background and border colors using CSS
 color-mix for better aesthetics. - Simplified text formatting and ensured
 proper opacity settings for better readability.

---
 src/components/daily/DeadlineReminder.tsx | 74 +++++++++++++----------
 1 file changed, 41 insertions(+), 33 deletions(-)

diff --git a/src/components/daily/DeadlineReminder.tsx b/src/components/daily/DeadlineReminder.tsx
index 1aae135..41494f0 100644
--- a/src/components/daily/DeadlineReminder.tsx
+++ b/src/components/daily/DeadlineReminder.tsx
@@ -37,39 +37,47 @@ export function DeadlineReminder({ deadlineMetrics }: DeadlineReminderProps) {
   }
 
   return (
-    <Card className="mb-2 p-4 bg-gradient-to-r from-amber-50/50 to-orange-50/50 dark:from-amber-950/20 dark:to-orange-950/20 border-amber-200/50 dark:border-amber-800/50">
-      <div className="flex items-start gap-3">
-        <div className="text-2xl">⚠️</div>
-        <div className="flex-1 min-w-0">
-          <h3 className="text-sm font-semibold text-amber-800 dark:text-amber-200 mb-2">
-            Rappel - Tâches urgentes ({urgentTasks.length})
-          </h3>
-          
-          <div className="flex flex-wrap gap-2">
-            {urgentTasks.map((task, index) => (
-              <div 
-                key={task.id}
-                className="inline-flex items-center gap-1 px-2 py-1 rounded-md text-xs font-medium bg-white/60 dark:bg-gray-800/60 border border-amber-200/60 dark:border-amber-700/60"
-              >
-                <span>{getUrgencyIcon(task)}</span>
-                <span className="truncate max-w-[200px]" title={task.title}>
-                  {task.title}
-                </span>
-                <span className="text-[10px] text-amber-700 dark:text-amber-300 opacity-75">
-                  ({getUrgencyText(task)})
-                </span>
-                <span className="text-[10px] opacity-60">
-                  {getSourceIcon(task.source)}
-                </span>
-                {index < urgentTasks.length - 1 && (
-                  <span className="text-amber-400 dark:text-amber-500 opacity-50">•</span>
-                )}
-              </div>
-            ))}
-          </div>
-          
-          <div className="mt-2 text-xs text-amber-700 dark:text-amber-300 opacity-75">
-            Consultez la page d&apos;accueil pour plus de détails sur les échéances
+    <Card className="mb-2">
+      <div className="outline-card-yellow p-4">
+        <div className="flex items-start gap-3">
+          <div className="text-2xl">⚠️</div>
+          <div className="flex-1 min-w-0">
+            <h3 className="text-sm font-semibold mb-2">
+              Rappel - Tâches urgentes ({urgentTasks.length})
+            </h3>
+            
+            <div className="flex flex-wrap gap-2">
+              {urgentTasks.map((task, index) => (
+                <div 
+                  key={task.id}
+                  className="inline-flex items-center gap-1 px-2 py-1 rounded-md text-xs font-medium"
+                  style={{
+                    backgroundColor: 'color-mix(in srgb, #eab308 15%, var(--card))',
+                    borderColor: 'color-mix(in srgb, #eab308 35%, var(--border))',
+                    border: '1px solid',
+                    color: 'color-mix(in srgb, #eab308 85%, var(--foreground))'
+                  }}
+                >
+                  <span>{getUrgencyIcon(task)}</span>
+                  <span className="truncate max-w-[200px]" title={task.title}>
+                    {task.title}
+                  </span>
+                  <span className="text-[10px] opacity-75">
+                    ({getUrgencyText(task)})
+                  </span>
+                  <span className="text-[10px] opacity-60">
+                    {getSourceIcon(task.source)}
+                  </span>
+                  {index < urgentTasks.length - 1 && (
+                    <span className="opacity-50">•</span>
+                  )}
+                </div>
+              ))}
+            </div>
+            
+            <div className="mt-2 text-xs opacity-75">
+              Consultez la page d&apos;accueil pour plus de détails sur les échéances
+            </div>
           </div>
         </div>
       </div>