style: update color theming in Kanban components

- Replaced hardcoded colors with CSS variables in ObjectivesBoard and TaskCard for improved theme consistency.
- Updated status icon in STATUS_CONFIG for better visual representation.
- Adjusted global CSS variables for enhanced contrast and clarity across components.
This commit is contained in:
Julien Froidefond
2025-09-15 16:35:16 +02:00
parent c062fcd592
commit 49ab6f0ea4
4 changed files with 11 additions and 11 deletions

View File

@@ -100,8 +100,8 @@ export function ObjectivesBoard({
{/* Colonne En cours / À faire */} {/* Colonne En cours / À faire */}
<div className="space-y-3"> <div className="space-y-3">
<div className="flex items-center gap-2 pb-2 border-b border-[var(--accent)]/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> <div className="w-2 h-2 bg-[var(--primary)] rounded-full"></div>
<h3 className="text-sm font-mono font-medium text-blue-300 uppercase tracking-wider"> <h3 className="text-sm font-mono font-medium text-[var(--primary)] uppercase tracking-wider">
En cours / À faire En cours / À faire
</h3> </h3>
<div className="flex-1"></div> <div className="flex-1"></div>

View File

@@ -291,7 +291,7 @@ export function TaskCard({ task, onDelete, onEdit, onUpdateTitle, compactView =
<div className="flex items-center justify-between text-xs"> <div className="flex items-center justify-between text-xs">
{task.dueDate ? ( {task.dueDate ? (
<span className="flex items-center gap-1 text-[var(--muted-foreground)] font-mono"> <span className="flex items-center gap-1 text-[var(--muted-foreground)] font-mono">
<span className="text-cyan-400"></span> <span className="text-[var(--primary)]"></span>
{formatDistanceToNow(new Date(task.dueDate), { {formatDistanceToNow(new Date(task.dueDate), {
addSuffix: true, addSuffix: true,
locale: fr locale: fr

View File

@@ -19,7 +19,7 @@ export const STATUS_CONFIG: Record<TaskStatus, StatusConfig> = {
in_progress: { in_progress: {
key: 'in_progress', key: 'in_progress',
label: 'En cours', label: 'En cours',
icon: '🔄', icon: '⚙️',
color: 'blue', color: 'blue',
order: 2 order: 2
}, },

View File

@@ -2,16 +2,16 @@
:root { :root {
/* Dark theme (default) */ /* Dark theme (default) */
--background: #020617; /* slate-950 */ --background: #1e293b; /* slate-800 - encore plus clair */
--foreground: #f1f5f9; /* slate-100 */ --foreground: #f1f5f9; /* slate-100 */
--card: #0f172a; /* slate-900 */ --card: #334155; /* slate-700 - beaucoup plus clair pour contraste fort */
--card-hover: #1e293b; /* slate-800 */ --card-hover: #475569; /* slate-600 */
--card-column: #0f172a; /* slate-900 - same as card in dark */ --card-column: #0f172a; /* slate-900 - plus foncé que les cartes */
--border: #334155; /* slate-700 */ --border: #64748b; /* slate-500 - encore plus clair */
--input: #1e293b; /* slate-800 */ --input: #334155; /* slate-700 - plus clair */
--primary: #06b6d4; /* cyan-500 */ --primary: #06b6d4; /* cyan-500 */
--primary-foreground: #f1f5f9; /* slate-100 */ --primary-foreground: #f1f5f9; /* slate-100 */
--muted: #475569; /* slate-600 */ --muted: #64748b; /* slate-500 */
--muted-foreground: #94a3b8; /* slate-400 */ --muted-foreground: #94a3b8; /* slate-400 */
--accent: #f59e0b; /* amber-500 */ --accent: #f59e0b; /* amber-500 */
--destructive: #ef4444; /* red-500 */ --destructive: #ef4444; /* red-500 */