From c062fcd59267f765e88ec3da865655182a66c6bd Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Mon, 15 Sep 2025 11:59:31 +0200
Subject: [PATCH] style: update ObjectivesBoard and SwimlanesBase for improved
 theming - Replaced hardcoded colors with CSS variables in ObjectivesBoard for
 better theme consistency. - Updated background color in SwimlanesBase to use
 new CSS variable for card columns. - Enhanced button hover effects to align
 with the new theming approach. - Minor adjustments to border colors for
 better visual coherence.

---
 components/kanban/ObjectivesBoard.tsx | 22 +++++++++++-----------
 components/kanban/SwimlanesBase.tsx   |  2 +-
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/components/kanban/ObjectivesBoard.tsx b/components/kanban/ObjectivesBoard.tsx
index 139a4bc..ed16e13 100644
--- a/components/kanban/ObjectivesBoard.tsx
+++ b/components/kanban/ObjectivesBoard.tsx
@@ -30,28 +30,28 @@ export function ObjectivesBoard({
   }
 
   return (
-    <div className="bg-gradient-to-r from-purple-900/20 to-blue-900/20 border-b border-purple-500/30">
+    <div className="bg-[var(--card)]/30 border-b border-[var(--accent)]/30">
       <div className="container mx-auto px-6 py-4">
         <Card className="bg-[var(--card)] border-[var(--accent)]/30 shadow-[var(--accent)]/10 shadow-lg">
           <CardHeader className="pb-3">
             <div className="flex items-center justify-between">
               <button
                 onClick={toggleCollapse}
-                className="flex items-center gap-3 hover:bg-purple-900/20 rounded-lg p-2 -m-2 transition-colors group"
+                className="flex items-center gap-3 hover:bg-[var(--accent)]/20 rounded-lg p-2 -m-2 transition-colors group"
               >
-                <div className="w-3 h-3 bg-purple-400 rounded-full animate-pulse shadow-purple-400/50 shadow-lg"></div>
-                <h2 className="text-lg font-mono font-bold text-purple-300 uppercase tracking-wider">
+                <div className="w-3 h-3 bg-[var(--accent)] rounded-full animate-pulse shadow-[var(--accent)]/50 shadow-lg"></div>
+                <h2 className="text-lg font-mono font-bold text-[var(--accent)] uppercase tracking-wider">
                   🎯 Objectifs Principaux
                 </h2>
                 {pinnedTagName && (
-                  <Badge variant="outline" className="border-purple-400/50 text-purple-300">
+                  <Badge variant="outline" className="border-[var(--accent)]/50 text-[var(--accent)]">
                     {pinnedTagName}
                   </Badge>
                 )}
                 
                 {/* Flèche de collapse */}
                 <svg
-                  className={`w-4 h-4 text-purple-400 transition-transform duration-200 ${
+                  className={`w-4 h-4 text-[var(--accent)] transition-transform duration-200 ${
                     isCollapsed ? 'rotate-180' : ''
                   }`}
                   fill="none"
@@ -63,18 +63,18 @@ export function ObjectivesBoard({
               </button>
               
               <div className="flex items-center gap-2">
-                <Badge variant="primary" size="sm" className="bg-purple-600">
+                <Badge variant="primary" size="sm" className="bg-[var(--accent)]">
                   {String(tasks.length).padStart(2, '0')}
                 </Badge>
                 
                 {/* Bouton collapse séparé pour mobile */}
                 <button
                   onClick={toggleCollapse}
-                  className="lg:hidden p-1 hover:bg-purple-900/20 rounded transition-colors"
+                  className="lg:hidden p-1 hover:bg-[var(--accent)]/20 rounded transition-colors"
                   aria-label={isCollapsed ? "Développer" : "Réduire"}
                 >
                   <svg
-                    className={`w-4 h-4 text-purple-400 transition-transform duration-200 ${
+                    className={`w-4 h-4 text-[var(--accent)] transition-transform duration-200 ${
                       isCollapsed ? 'rotate-180' : ''
                     }`}
                     fill="none"
@@ -99,7 +99,7 @@ export function ObjectivesBoard({
                 <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                   {/* Colonne En cours / À faire */}
                   <div className="space-y-3">
-                    <div className="flex items-center gap-2 pb-2 border-b border-purple-500/20">
+                    <div className="flex items-center gap-2 pb-2 border-b border-[var(--accent)]/20">
                       <div className="w-2 h-2 bg-blue-400 rounded-full"></div>
                       <h3 className="text-sm font-mono font-medium text-blue-300 uppercase tracking-wider">
                         En cours / À faire
@@ -134,7 +134,7 @@ export function ObjectivesBoard({
 
                   {/* Colonne Terminé */}
                   <div className="space-y-3">
-                    <div className="flex items-center gap-2 pb-2 border-b border-purple-500/20">
+                    <div className="flex items-center gap-2 pb-2 border-b border-[var(--accent)]/20">
                       <div className="w-2 h-2 bg-green-400 rounded-full"></div>
                       <h3 className="text-sm font-mono font-medium text-green-300 uppercase tracking-wider">
                         Terminé
diff --git a/components/kanban/SwimlanesBase.tsx b/components/kanban/SwimlanesBase.tsx
index a10b12e..dae6b76 100644
--- a/components/kanban/SwimlanesBase.tsx
+++ b/components/kanban/SwimlanesBase.tsx
@@ -264,7 +264,7 @@ export function SwimlanesBase({
               const isCollapsed = collapsedSwimlanes.has(swimlane.key);
               
               return (
-                <div key={swimlane.key} className="border border-[var(--border)]/50 rounded-lg bg-[var(--card)]/30">
+                <div key={swimlane.key} className="border border-[var(--border)]/50 rounded-lg bg-[var(--card-column)]">
                   {/* Header de la swimlane */}
                   <div className="flex items-center p-2 border-b border-[var(--border)]/50">
                     <button