style: update ObjectivesBoard and SwimlanesBase for improved theming
- Replaced hardcoded colors with CSS variables in ObjectivesBoard for better theme consistency. - Updated background color in SwimlanesBase to use new CSS variable for card columns. - Enhanced button hover effects to align with the new theming approach. - Minor adjustments to border colors for better visual coherence.
This commit is contained in:
@@ -30,28 +30,28 @@ export function ObjectivesBoard({
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="bg-gradient-to-r from-purple-900/20 to-blue-900/20 border-b border-purple-500/30">
|
<div className="bg-[var(--card)]/30 border-b border-[var(--accent)]/30">
|
||||||
<div className="container mx-auto px-6 py-4">
|
<div className="container mx-auto px-6 py-4">
|
||||||
<Card className="bg-[var(--card)] border-[var(--accent)]/30 shadow-[var(--accent)]/10 shadow-lg">
|
<Card className="bg-[var(--card)] border-[var(--accent)]/30 shadow-[var(--accent)]/10 shadow-lg">
|
||||||
<CardHeader className="pb-3">
|
<CardHeader className="pb-3">
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<button
|
<button
|
||||||
onClick={toggleCollapse}
|
onClick={toggleCollapse}
|
||||||
className="flex items-center gap-3 hover:bg-purple-900/20 rounded-lg p-2 -m-2 transition-colors group"
|
className="flex items-center gap-3 hover:bg-[var(--accent)]/20 rounded-lg p-2 -m-2 transition-colors group"
|
||||||
>
|
>
|
||||||
<div className="w-3 h-3 bg-purple-400 rounded-full animate-pulse shadow-purple-400/50 shadow-lg"></div>
|
<div className="w-3 h-3 bg-[var(--accent)] rounded-full animate-pulse shadow-[var(--accent)]/50 shadow-lg"></div>
|
||||||
<h2 className="text-lg font-mono font-bold text-purple-300 uppercase tracking-wider">
|
<h2 className="text-lg font-mono font-bold text-[var(--accent)] uppercase tracking-wider">
|
||||||
🎯 Objectifs Principaux
|
🎯 Objectifs Principaux
|
||||||
</h2>
|
</h2>
|
||||||
{pinnedTagName && (
|
{pinnedTagName && (
|
||||||
<Badge variant="outline" className="border-purple-400/50 text-purple-300">
|
<Badge variant="outline" className="border-[var(--accent)]/50 text-[var(--accent)]">
|
||||||
{pinnedTagName}
|
{pinnedTagName}
|
||||||
</Badge>
|
</Badge>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Flèche de collapse */}
|
{/* Flèche de collapse */}
|
||||||
<svg
|
<svg
|
||||||
className={`w-4 h-4 text-purple-400 transition-transform duration-200 ${
|
className={`w-4 h-4 text-[var(--accent)] transition-transform duration-200 ${
|
||||||
isCollapsed ? 'rotate-180' : ''
|
isCollapsed ? 'rotate-180' : ''
|
||||||
}`}
|
}`}
|
||||||
fill="none"
|
fill="none"
|
||||||
@@ -63,18 +63,18 @@ export function ObjectivesBoard({
|
|||||||
</button>
|
</button>
|
||||||
|
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<Badge variant="primary" size="sm" className="bg-purple-600">
|
<Badge variant="primary" size="sm" className="bg-[var(--accent)]">
|
||||||
{String(tasks.length).padStart(2, '0')}
|
{String(tasks.length).padStart(2, '0')}
|
||||||
</Badge>
|
</Badge>
|
||||||
|
|
||||||
{/* Bouton collapse séparé pour mobile */}
|
{/* Bouton collapse séparé pour mobile */}
|
||||||
<button
|
<button
|
||||||
onClick={toggleCollapse}
|
onClick={toggleCollapse}
|
||||||
className="lg:hidden p-1 hover:bg-purple-900/20 rounded transition-colors"
|
className="lg:hidden p-1 hover:bg-[var(--accent)]/20 rounded transition-colors"
|
||||||
aria-label={isCollapsed ? "Développer" : "Réduire"}
|
aria-label={isCollapsed ? "Développer" : "Réduire"}
|
||||||
>
|
>
|
||||||
<svg
|
<svg
|
||||||
className={`w-4 h-4 text-purple-400 transition-transform duration-200 ${
|
className={`w-4 h-4 text-[var(--accent)] transition-transform duration-200 ${
|
||||||
isCollapsed ? 'rotate-180' : ''
|
isCollapsed ? 'rotate-180' : ''
|
||||||
}`}
|
}`}
|
||||||
fill="none"
|
fill="none"
|
||||||
@@ -99,7 +99,7 @@ export function ObjectivesBoard({
|
|||||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||||
{/* 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-purple-500/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-blue-400 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-blue-300 uppercase tracking-wider">
|
||||||
En cours / À faire
|
En cours / À faire
|
||||||
@@ -134,7 +134,7 @@ export function ObjectivesBoard({
|
|||||||
|
|
||||||
{/* Colonne Terminé */}
|
{/* Colonne Terminé */}
|
||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
<div className="flex items-center gap-2 pb-2 border-b border-purple-500/20">
|
<div className="flex items-center gap-2 pb-2 border-b border-[var(--accent)]/20">
|
||||||
<div className="w-2 h-2 bg-green-400 rounded-full"></div>
|
<div className="w-2 h-2 bg-green-400 rounded-full"></div>
|
||||||
<h3 className="text-sm font-mono font-medium text-green-300 uppercase tracking-wider">
|
<h3 className="text-sm font-mono font-medium text-green-300 uppercase tracking-wider">
|
||||||
Terminé
|
Terminé
|
||||||
|
|||||||
@@ -264,7 +264,7 @@ export function SwimlanesBase({
|
|||||||
const isCollapsed = collapsedSwimlanes.has(swimlane.key);
|
const isCollapsed = collapsedSwimlanes.has(swimlane.key);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div key={swimlane.key} className="border border-[var(--border)]/50 rounded-lg bg-[var(--card)]/30">
|
<div key={swimlane.key} className="border border-[var(--border)]/50 rounded-lg bg-[var(--card-column)]">
|
||||||
{/* Header de la swimlane */}
|
{/* Header de la swimlane */}
|
||||||
<div className="flex items-center p-2 border-b border-[var(--border)]/50">
|
<div className="flex items-center p-2 border-b border-[var(--border)]/50">
|
||||||
<button
|
<button
|
||||||
|
|||||||
Reference in New Issue
Block a user