julienfroidefond/towercontrol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: update ObjectivesBoard and SwimlanesBase for improved theming

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files

22
components/kanban/ObjectivesBoard.tsx
View File

@@ -30,28 +30,28 @@ export function ObjectivesBoard({
}
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">
<Card className="bg-[var(--card)] border-[var(--accent)]/30 shadow-[var(--accent)]/10 shadow-lg">
<CardHeader className="pb-3">
<div className="flex items-center justify-between">
<button
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>
<h2 className="text-lg font-mono font-bold text-purple-300 uppercase tracking-wider">
<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-[var(--accent)] uppercase tracking-wider">
🎯 Objectifs Principaux
</h2>
{pinnedTagName && (
<Badge variant="outline" className="border-purple-400/50 text-purple-300">
<Badge variant="outline" className="border-[var(--accent)]/50 text-[var(--accent)]">
{pinnedTagName}
</Badge>
)}
{/* Flèche de collapse */}
<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' : ''
}`}
fill="none"
@@ -63,18 +63,18 @@ export function ObjectivesBoard({
</button>
<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')}
</Badge>
{/* Bouton collapse séparé pour mobile */}
<button
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"}
>
<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' : ''
}`}
fill="none"
@@ -99,7 +99,7 @@ export function ObjectivesBoard({
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
{/* Colonne En cours / À faire */}
<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>
<h3 className="text-sm font-mono font-medium text-blue-300 uppercase tracking-wider">
En cours / À faire
@@ -134,7 +134,7 @@ export function ObjectivesBoard({
{/* Colonne Terminé */}
<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>
<h3 className="text-sm font-mono font-medium text-green-300 uppercase tracking-wider">
Terminé

2
components/kanban/SwimlanesBase.tsx
View File

@@ -264,7 +264,7 @@ export function SwimlanesBase({
const isCollapsed = collapsedSwimlanes.has(swimlane.key);
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 */}
<div className="flex items-center p-2 border-b border-[var(--border)]/50">
<button