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:
@@ -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>
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
@@ -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
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -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 */
|
||||||
|
|||||||
Reference in New Issue
Block a user