feat: enhance Calendar component legend styling

- Updated the legend in the Calendar component for improved visual clarity.
- Adjusted spacing, added borders, and modified item sizes for better alignment and readability.
- Ensured consistent text styling for legend items.

TODO.md

@@ -17,7 +17,7 @@
 - [x] **Header dépasse en tablet** - Corriger le débordement du header sur tablette <!-- Responsive amélioré, taille réglée, navigation adaptative -->
 - [x] **Icônes agenda et filtres** - Améliorer les icônes de l'agenda et des filtres dans desktop controls (utiliser une lib) <!-- Clock pour échéance, Settings pour filtres, Search visuelle -->
 - [x] **Réunion/tâche design** - Revoir le design des bouton dans dailySectrion : les toggles avoir un compposant ui
-- [ ] **Légende calendrier et padding** - Corriger l'espacement et la légende du calendrier dans daily
+- [x] **Légende calendrier et padding** - Corriger l'espacement et la légende du calendrier dans daily
 - [ ] **EditModal task couleur calendrier** - Problème de couleur en ajout de taches dans tous les icones calendriers; colmler au thème
 - [ ] **Weekly deux boutons actualiser** - Corriger la duplication des boutons d'actualisation
 - [ ] **Settings : tag icônes actions** - Icônes trop petites dans les actions des tags

src/components/ui/Calendar.tsx

@@ -204,14 +204,18 @@ export function Calendar({
 
       {/* Légende */}
       {showLegend && (
-        <div className="mt-4 text-xs text-[var(--muted-foreground)] space-y-1">
-          <div className="flex items-center gap-2">
-            <div className="w-2 h-2 rounded-full bg-[var(--primary)]"></div>
-            <span>Jour avec des éléments</span>
+        <div className="mt-4 pt-3 border-t border-[var(--border)]/30 text-xs text-[var(--muted-foreground)] space-y-1.5">
+          <div className="flex items-center gap-3">
+            <div className="w-8 flex justify-center">
+              <div className="w-2 h-2 rounded-full bg-[var(--primary)]"></div>
+            </div>
+            <span className="text-xs text-left flex-1">Jour avec des éléments</span>
           </div>
-          <div className="flex items-center gap-2">
-            <div className="w-4 h-4 rounded border border-[var(--primary)] bg-[var(--primary)]/20"></div>
-            <span>Aujourd&apos;hui</span>
+          <div className="flex items-center gap-3">
+            <div className="w-8 flex justify-center">
+              <div className="w-3 h-3 rounded border border-[var(--primary)] bg-[var(--primary)]/20"></div>
+            </div>
+            <span className="text-xs text-left flex-1">Aujourd&apos;hui</span>
           </div>
         </div>
       )}