feat: add lucide-react icons to QuickActions component

- Integrated lucide-react icons for QuickActions, replacing SVGs with Plus, LayoutGrid, Calendar, and Settings icons for improved UI consistency. - Updated package.json and package-lock.json to include lucide-react dependency. - Marked the Gravatar task as complete in TODO.md for better tracking of UI/UX improvements.
2025-10-03 17:32:34 +02:00
parent 0658b8ff93
commit e14b428e12
4 changed files with 17 additions and 23 deletions
--- a/TODO.md
+++ b/TODO.md
@@ -9,8 +9,7 @@
 ## 🐛 Problèmes relevés en réunion - Corrections UI/UX

 ### 🎨 Design et Interface
- [ ] **Homepage cards** : toute en variant glass
- [ ] **Gravatar** - Implémenter l'affichage des avatars Gravatar
+- [X] **Homepage cards** : toute en variant glass
 - [ ] **Icône Kanban homepage** - Changer icône sur la page d'accueil, pas lisible (utiliser une lib)
 - [ ] **Lisibilité label graph par tag** - Améliorer la lisibilité des labels dans les graphiques par tag
 - [ ] **Tag homepage** - Problème d'affichage des graphs de tags sur la homepage coté lisibilité, cezrtaines icones ne sont pas entièrement visible, et la légende est trop proche du graphe.
@@ -39,6 +38,7 @@
 - [ ] **États sélectionnés desktop control** - Revoir les couleurs des états sélectionnés pour avoir le joli bleu du dropdown partout
 - [ ] **Dépasse 1000 caractères en edit modal task** - Corriger la limite (pas de limite) et revoir la quickcard description
 - [ ] **UI si échéance et trop de labels dans le footer de card** - Améliorer l'affichage en mode détaillé TaskCard; certains boutons sont sur deux lignes ce qui casse l'affichage
+- [ ] **Gravatar** - Implémenter l'affichage des avatars Gravatar

 ### 🔧 Fonctionnalités et Intégrations
 - [ ] **Synchro Jira et TFS shortcuts** - Ajouter des raccourcis et bouton dans Kanban
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
        "clsx": "^2.1.1",
        "date-fns": "^4.1.0",
        "emoji-regex": "^10.5.0",
+        "lucide-react": "^0.544.0",
        "next": "15.5.3",
        "next-auth": "^4.24.11",
        "prisma": "^6.16.1",
@@ -6048,6 +6049,14 @@
        "node": ">=10"
      }
    },
+    "node_modules/lucide-react": {
+      "version": "0.544.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.544.0.tgz",
+      "integrity": "sha512-t5tS44bqd825zAW45UQxpG2CvcC4urOwn2TrwSH8u+MjeE+1NnWl6QqeQ/6NdjMqdOygyiT9p3Ev0p1NJykxjw==",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
    "node_modules/magic-string": {
      "version": "0.30.19",
      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.19.tgz",
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
    "clsx": "^2.1.1",
    "date-fns": "^4.1.0",
    "emoji-regex": "^10.5.0",
+    "lucide-react": "^0.544.0",
    "next": "15.5.3",
    "next-auth": "^4.24.11",
    "prisma": "^6.16.1",
--- a/src/components/dashboard/QuickActions.tsx
+++ b/src/components/dashboard/QuickActions.tsx
@@ -4,6 +4,7 @@ import { useState } from 'react';
 import { ActionCard } from '@/components/ui';
 import { CreateTaskForm } from '@/components/forms/CreateTaskForm';
 import { CreateTaskData } from '@/clients/tasks-client';
+import { Plus, LayoutGrid, Calendar, Settings } from 'lucide-react';

 interface QuickActionsProps {
  onCreateTask: (data: CreateTaskData) => Promise<void>;
@@ -23,11 +24,7 @@ export function QuickActions({ onCreateTask }: QuickActionsProps) {
        <ActionCard
          title="Nouvelle Tâche"
          description="Créer une nouvelle tâche"
-          icon={
-            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
-            </svg>
-          }
+          icon={<Plus className="w-6 h-6" />}
          onClick={() => setIsCreateModalOpen(true)}
          variant="primary"
        />
@@ -35,11 +32,7 @@ export function QuickActions({ onCreateTask }: QuickActionsProps) {
        <ActionCard
          title="Kanban Board"
          description="Gérer les tâches"
-          icon={
-            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 0V5a2 2 0 012-2h2a2 2 0 002-2" />
-            </svg>
-          }
+          icon={<LayoutGrid className="w-6 h-6" />}
          href="/kanban"
          variant="secondary"
        />
@@ -47,11 +40,7 @@ export function QuickActions({ onCreateTask }: QuickActionsProps) {
        <ActionCard
          title="Daily"
          description="Checkboxes quotidiennes"
-          icon={
-            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
-            </svg>
-          }
+          icon={<Calendar className="w-6 h-6" />}
          href="/daily"
          variant="secondary"
        />
@@ -59,12 +48,7 @@ export function QuickActions({ onCreateTask }: QuickActionsProps) {
        <ActionCard
          title="Paramètres"
          description="Configuration"
-          icon={
-            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-            </svg>
-          }
+          icon={<Settings className="w-6 h-6" />}
          href="/settings"
          variant="secondary"
        />