Michael/LogiFlow
1
0 Fork 0
mirror of https://github.com/R0m1k3/LogiFlow.git synced 2026-10-22 14:38:19 +02:00
Code Issues Packages Projects Releases Wiki Activity

Update role colors for a modern and subtle appearance

Browse Source 
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
This commit is contained in:
michaelschal committed 2025-08-11 18:59:00 +00:00
1 parent e887d8a11c
commit 70da3e9f5b
1 file changed
+15 -15
Download Patch File Download Diff File Expand all files Collapse all files
client/src/lib/roleUtils.ts
+15 -15
View File
@@ -1,10 +1,10 @@
// Utilitaire pour harmoniser les couleurs des rôles dans toute l'application // Utilitaire pour harmoniser les couleurs des rôles dans toute l'application
export const ROLE_COLORS = { export const ROLE_COLORS = {
admin: '#f87171', // Rouge clair (Administrateur) admin: '#64748b', // Slate moderne (Administrateur)
manager: '#60a5fa', // Bleu clair (Manager) manager: '#0f766e', // Teal professionnel (Manager)
employee: '#4ade80', // Vert clair (Employé) employee: '#374151', // Gray-700 élégant (Employé)
directeur: '#a78bfa', // Violet clair (Directeur) directeur: '#7c3aed', // Violet sophistiqué (Directeur)
} as const; } as const;
export const ROLE_DISPLAY_NAMES = { export const ROLE_DISPLAY_NAMES = {
@@ -26,33 +26,33 @@ export function getRoleDisplayName(roleName: string): string {
return ROLE_DISPLAY_NAMES[roleKey] || roleName; 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) { export function getRoleTailwindClasses(roleName: string) {
switch (roleName.toLowerCase()) { switch (roleName.toLowerCase()) {
case 'admin': case 'admin':
return { return {
badgeClass: 'bg-red-50 text-red-600 border border-red-200', 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-red-400' iconClass: 'text-slate-500 dark:text-slate-400'
}; };
case 'manager': case 'manager':
return { return {
badgeClass: 'bg-blue-50 text-blue-600 border border-blue-200', 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-blue-400' iconClass: 'text-teal-600 dark:text-teal-400'
}; };
case 'employee': case 'employee':
return { return {
badgeClass: 'bg-green-50 text-green-600 border border-green-200', 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-green-400' iconClass: 'text-gray-600 dark:text-gray-400'
}; };
case 'directeur': case 'directeur':
return { return {
badgeClass: 'bg-purple-50 text-purple-600 border border-purple-200', 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-purple-400' iconClass: 'text-violet-600 dark:text-violet-400'
}; };
default: default:
return { return {
badgeClass: 'bg-gray-50 text-gray-600 border border-gray-200', 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-gray-400' iconClass: 'text-neutral-500 dark:text-neutral-400'
}; };
} }
} }