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

16
components/kanban/QuickAddTask.tsx
View File

@@ -115,7 +115,7 @@ export function QuickAddTask({ status, onSubmit, onCancel }: QuickAddTaskProps)
return (
<div onBlur={handleBlur}>
<Card className="p-3 border-dashed border-cyan-500/30 bg-slate-800/50 hover:border-cyan-500/50 transition-all duration-300">
<Card className="p-3 border-dashed border-[var(--primary)]/30 bg-[var(--card)]/50 hover:border-[var(--primary)]/50 transition-all duration-300">
{/* Header avec titre et priorité */}
<div className="flex items-start gap-2 mb-2">
<input
@@ -127,7 +127,7 @@ export function QuickAddTask({ status, onSubmit, onCancel }: QuickAddTaskProps)
onFocus={() => setActiveField('title')}
placeholder="Titre de la tâche..."
disabled={isSubmitting}
className="flex-1 bg-transparent border-none outline-none text-slate-100 font-mono text-sm font-medium placeholder-slate-500 leading-tight"
className="flex-1 bg-transparent border-none outline-none text-[var(--foreground)] font-mono text-sm font-medium placeholder-[var(--muted-foreground)] leading-tight"
/>
{/* Indicateur de priorité */}
@@ -135,7 +135,7 @@ export function QuickAddTask({ status, onSubmit, onCancel }: QuickAddTaskProps)
value={formData.priority}
onChange={(e) => setFormData(prev => ({ ...prev, priority: e.target.value as TaskPriority }))}
disabled={isSubmitting}
className="bg-transparent border-none outline-none text-xs font-mono text-slate-400"
className="bg-transparent border-none outline-none text-xs font-mono text-[var(--muted-foreground)]"
>
{getAllPriorities().map(priorityConfig => (
<option key={priorityConfig.key} value={priorityConfig.key}>
@@ -154,7 +154,7 @@ export function QuickAddTask({ status, onSubmit, onCancel }: QuickAddTaskProps)
placeholder="Description..."
rows={2}
disabled={isSubmitting}
className="w-full bg-transparent border-none outline-none text-xs text-slate-400 font-mono placeholder-slate-500 resize-none mb-2"
className="w-full bg-transparent border-none outline-none text-xs text-[var(--muted-foreground)] font-mono placeholder-[var(--muted-foreground)] resize-none mb-2"
/>
{/* Tags */}
@@ -169,7 +169,7 @@ export function QuickAddTask({ status, onSubmit, onCancel }: QuickAddTaskProps)
</div>
{/* Footer avec date et actions */}
<div className="pt-2 border-t border-slate-700/50">
<div className="pt-2 border-t border-[var(--border)]/50">
<div className="flex items-center justify-between text-xs min-w-0">
<input
type="datetime-local"
@@ -180,12 +180,12 @@ export function QuickAddTask({ status, onSubmit, onCancel }: QuickAddTaskProps)
}))}
onFocus={() => setActiveField('date')}
disabled={isSubmitting}
className="bg-transparent border-none outline-none text-slate-400 font-mono text-xs flex-shrink min-w-0"
className="bg-transparent border-none outline-none text-[var(--muted-foreground)] font-mono text-xs flex-shrink min-w-0"
/>
{isSubmitting && (
<div className="flex items-center gap-1 text-cyan-400 font-mono text-xs flex-shrink-0">
<div className="w-3 h-3 border border-cyan-400 border-t-transparent rounded-full animate-spin"></div>
<div className="flex items-center gap-1 text-[var(--primary)] font-mono text-xs flex-shrink-0">
<div className="w-3 h-3 border border-[var(--primary)] border-t-transparent rounded-full animate-spin"></div>
<span>...</span>
</div>
)}