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:
Julien Froidefond
2025-09-15 11:59:31 +02:00
parent fa82a67000
commit c062fcd592
2 changed files with 12 additions and 12 deletions

View File

@@ -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é

View File

@@ -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