Update role colors for a modern and subtle appearance

Refactors role color definitions and Tailwind CSS classes in `roleUtils.ts` to use a more contemporary and less flashy color palette, including dark mode support.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: a8a78c07-e900-425c-a577-5b4c5894379d
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/1957c339-2757-4d1f-8e92-e9f71a1ce58e/a8a78c07-e900-425c-a577-5b4c5894379d/vetH0Gp

client/src/lib/roleUtils.ts

@@ -1,10 +1,10 @@
 // Utilitaire pour harmoniser les couleurs des rôles dans toute l'application
 
 export const ROLE_COLORS = {
-  admin: '#f87171',        // Rouge clair (Administrateur)
-  manager: '#60a5fa',      // Bleu clair (Manager)
-  employee: '#4ade80',     // Vert clair (Employé)
-  directeur: '#a78bfa',    // Violet clair (Directeur)
+  admin: '#64748b',        // Slate moderne (Administrateur)
+  manager: '#0f766e',      // Teal professionnel (Manager) 
+  employee: '#374151',     // Gray-700 élégant (Employé)
+  directeur: '#7c3aed',    // Violet sophistiqué (Directeur)
 } as const;
 
 export const ROLE_DISPLAY_NAMES = {
@@ -26,33 +26,33 @@ export function getRoleDisplayName(roleName: string): string {
   return ROLE_DISPLAY_NAMES[roleKey] || roleName;
 }
 
-// Utilitaire pour les classes Tailwind (pour Users.tsx) - couleurs claires et douces
+// Utilitaire pour les classes Tailwind (pour Users.tsx) - couleurs modernes et subtiles
 export function getRoleTailwindClasses(roleName: string) {
   switch (roleName.toLowerCase()) {
     case 'admin':
       return {
-        badgeClass: 'bg-red-50 text-red-600 border border-red-200',
-        iconClass: 'text-red-400'
+        badgeClass: 'bg-slate-50 text-slate-700 border border-slate-200 dark:bg-slate-800 dark:text-slate-300 dark:border-slate-600',
+        iconClass: 'text-slate-500 dark:text-slate-400'
       };
     case 'manager':
       return {
-        badgeClass: 'bg-blue-50 text-blue-600 border border-blue-200',
-        iconClass: 'text-blue-400'
+        badgeClass: 'bg-teal-50 text-teal-700 border border-teal-200 dark:bg-teal-900/20 dark:text-teal-300 dark:border-teal-700',
+        iconClass: 'text-teal-600 dark:text-teal-400'
       };
     case 'employee':
       return {
-        badgeClass: 'bg-green-50 text-green-600 border border-green-200',
-        iconClass: 'text-green-400'
+        badgeClass: 'bg-gray-50 text-gray-700 border border-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600',
+        iconClass: 'text-gray-600 dark:text-gray-400'
       };
     case 'directeur':
       return {
-        badgeClass: 'bg-purple-50 text-purple-600 border border-purple-200',
-        iconClass: 'text-purple-400'
+        badgeClass: 'bg-violet-50 text-violet-700 border border-violet-200 dark:bg-violet-900/20 dark:text-violet-300 dark:border-violet-700',
+        iconClass: 'text-violet-600 dark:text-violet-400'
       };
     default:
       return {
-        badgeClass: 'bg-gray-50 text-gray-600 border border-gray-200',
-        iconClass: 'text-gray-400'
+        badgeClass: 'bg-neutral-50 text-neutral-600 border border-neutral-200 dark:bg-neutral-800 dark:text-neutral-300 dark:border-neutral-600',
+        iconClass: 'text-neutral-500 dark:text-neutral-400'
       };
   }
 }