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

feat: implement theme system and UI updates

Browse Source 
- Added theme context and provider for light/dark mode support.
- Integrated theme toggle button in the Header component.
- Updated UI components to utilize CSS variables for consistent theming.
- Enhanced Kanban components and forms with new theme styles for better visual coherence.
- Adjusted global styles to define color variables for both themes, improving maintainability.
This commit is contained in:
Julien Froidefond
2025-09-15 11:49:54 +02:00
parent dce11e0569
commit 07cd3bde3b
23 changed files with 298 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
components/kanban/SwimlanesBase.tsx
View File

@@ -83,7 +83,7 @@ function DroppableColumn({
className="w-full p-2 flex justify-center transition-colors"
title="Ajouter une tâche"
>
<div className="w-5 h-5 rounded-full bg-slate-800/30 hover:bg-slate-700/50 flex items-center justify-center text-slate-600 hover:text-slate-300 transition-all text-sm">
<div className="w-5 h-5 rounded-full bg-[var(--card)] hover:bg-[var(--card-hover)] flex items-center justify-center text-[var(--muted-foreground)] hover:text-[var(--foreground)] transition-all text-sm">
+
</div>
</button>
@@ -209,11 +209,11 @@ export function SwimlanesBase({
onDragStart={handleDragStart}
onDragEnd={handleDragEnd}
>
<div className="flex flex-col h-full bg-slate-950">
<div className="flex flex-col h-full bg-[var(--background)]">
{/* Header */}
<div className="flex-shrink-0 px-6 py-4 border-b border-slate-700/50">
<div className="flex-shrink-0 px-6 py-4 border-b border-[var(--border)]/50">
<div className="flex items-center justify-between">
<h2 className="text-lg font-mono font-bold text-slate-200 uppercase tracking-wider">
<h2 className="text-lg font-mono font-bold text-[var(--foreground)] uppercase tracking-wider">
{title}
</h2>
@@ -239,7 +239,7 @@ export function SwimlanesBase({
const statusConfig = allStatuses.find(s => s.key === status);
return (
<div key={status} className="text-center">
<h3 className="text-sm font-mono font-bold text-slate-300 uppercase tracking-wider">
<h3 className="text-sm font-mono font-bold text-[var(--foreground)] uppercase tracking-wider">
{statusConfig?.icon} {statusConfig?.label}
</h3>
</div>
@@ -254,15 +254,15 @@ export function SwimlanesBase({
const isCollapsed = collapsedSwimlanes.has(swimlane.key);
return (
<div key={swimlane.key} className="border border-slate-700/50 rounded-lg bg-slate-900/30">
<div key={swimlane.key} className="border border-[var(--border)]/50 rounded-lg bg-[var(--card)]/30">
{/* Header de la swimlane */}
<div className="flex items-center p-2 border-b border-slate-700/50">
<div className="flex items-center p-2 border-b border-[var(--border)]/50">
<button
onClick={() => toggleSwimlane(swimlane.key)}
className="flex items-center gap-2 hover:bg-slate-800/50 rounded p-1 -m-1 transition-colors"
className="flex items-center gap-2 hover:bg-[var(--card-hover)] rounded p-1 -m-1 transition-colors"
>
<svg
className={`w-4 h-4 text-slate-400 transition-transform ${isCollapsed ? '' : 'rotate-90'}`}
className={`w-4 h-4 text-[var(--muted-foreground)] transition-transform ${isCollapsed ? '' : 'rotate-90'}`}
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
@@ -275,7 +275,7 @@ export function SwimlanesBase({
style={{ backgroundColor: swimlane.color }}
/>
)}
<span className="text-slate-200 font-medium text-sm">
<span className="text-[var(--foreground)] font-medium text-sm">
{swimlane.icon && `${swimlane.icon} `}
{swimlane.label} ({swimlane.tasks.length})
</span>