Refactoring - Version OK

unionflow-mobile-apps/lib/features/dashboard/presentation/widgets/common/section_header.dart

@@ -1,9 +1,12 @@
 import 'package:flutter/material.dart';
+import '../../../../../shared/design_system/unionflow_design_system.dart';
 
 /// Widget réutilisable pour les en-têtes de section
-/// 
+///
 /// Composant standardisé pour tous les titres de section dans les dashboards
 /// avec support pour actions, sous-titres et styles personnalisés.
+///
+/// REFACTORISÉ pour utiliser le Design System UnionFlow.
 class SectionHeader extends StatelessWidget {
   /// Titre principal de la section
   final String title;
@@ -48,7 +51,7 @@ class SectionHeader extends StatelessWidget {
     this.subtitle,
     this.action,
     this.icon,
-  }) : color = const Color(0xFF6C5CE7),
+  }) : color = ColorTokens.primary,
        fontSize = 20,
        style = SectionHeaderStyle.primary,
        bottomSpacing = 16;
@@ -60,7 +63,7 @@ class SectionHeader extends StatelessWidget {
     this.subtitle,
     this.action,
     this.icon,
-  }) : color = const Color(0xFF6C5CE7),
+  }) : color = ColorTokens.primary,
        fontSize = 16,
        style = SectionHeaderStyle.normal,
        bottomSpacing = 12;
@@ -100,25 +103,21 @@ class SectionHeader extends StatelessWidget {
 
   /// En-tête principal avec fond coloré
   Widget _buildPrimaryHeader() {
+    final effectiveColor = color ?? ColorTokens.primary;
+
     return Container(
-      padding: const EdgeInsets.all(16),
+      padding: const EdgeInsets.all(SpacingTokens.lg),
       decoration: BoxDecoration(
         gradient: LinearGradient(
           colors: [
-            color ?? const Color(0xFF6C5CE7),
-            (color ?? const Color(0xFF6C5CE7)).withOpacity(0.8),
+            effectiveColor,
+            effectiveColor.withOpacity(0.8),
           ],
           begin: Alignment.topLeft,
           end: Alignment.bottomRight,
         ),
-        borderRadius: BorderRadius.circular(12),
-        boxShadow: [
-          BoxShadow(
-            color: (color ?? const Color(0xFF6C5CE7)).withOpacity(0.3),
-            blurRadius: 12,
-            offset: const Offset(0, 4),
-          ),
-        ],
+        borderRadius: BorderRadius.circular(SpacingTokens.radiusLg),
+        boxShadow: ShadowTokens.primary,
       ),
       child: Row(
         children: [
@@ -175,10 +174,10 @@ class SectionHeader extends StatelessWidget {
         if (icon != null) ...[
           Icon(
             icon,
-            color: color ?? const Color(0xFF6C5CE7),
+            color: color ?? ColorTokens.primary,
             size: 20,
           ),
-          const SizedBox(width: 8),
+          const SizedBox(width: SpacingTokens.md),
         ],
         Expanded(
           child: Column(
@@ -189,7 +188,7 @@ class SectionHeader extends StatelessWidget {
                 style: TextStyle(
                   fontSize: fontSize ?? 16,
                   fontWeight: FontWeight.bold,
-                  color: color ?? const Color(0xFF6C5CE7),
+                  color: color ?? ColorTokens.primary,
                 ),
               ),
               if (subtitle != null) ...[
@@ -257,10 +256,10 @@ class SectionHeader extends StatelessWidget {
           if (icon != null) ...[
             Icon(
               icon,
-              color: color ?? const Color(0xFF6C5CE7),
+              color: color ?? ColorTokens.primary,
               size: 20,
             ),
-            const SizedBox(width: 8),
+            const SizedBox(width: SpacingTokens.md),
           ],
           Expanded(
             child: Column(
@@ -271,7 +270,7 @@ class SectionHeader extends StatelessWidget {
                   style: TextStyle(
                     fontSize: fontSize ?? 16,
                     fontWeight: FontWeight.bold,
-                    color: color ?? const Color(0xFF6C5CE7),
+                    color: color ?? ColorTokens.primary,
                   ),
                 ),
                 if (subtitle != null) ...[