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

feat: refactor theme management and enhance color customization

Browse Source 
- Cleaned up theme architecture by consolidating CSS variables and removing redundant theme applications, ensuring a single source of truth for theming.
- Implemented a dark mode override and improved color management using CSS variables for better customization.
- Updated various components to utilize new color variables, enhancing maintainability and visual consistency across the application.
- Added detailed tasks in TODO.md for future enhancements related to user preferences and color customization features.
This commit is contained in:
Julien Froidefond
2025-09-28 10:14:25 +02:00
parent 97770917c1
commit b5d6967fcd
21 changed files with 404 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/backup/BackupTimelineChart.tsx
View File

@@ -88,7 +88,7 @@ export function BackupTimelineChart({ stats = [], className = '' }: BackupTimeli
<div className={`
relative h-8 rounded border-2 transition-all duration-200 cursor-pointer flex items-center justify-center text-xs font-medium
${stat.total === 0
? 'bg-gray-50 dark:bg-gray-800 border-gray-200 dark:border-gray-700 text-gray-400'
? 'border-[var(--border)] text-[var(--muted-foreground)]'
: 'border-transparent'
}
`}>
@@ -152,58 +152,58 @@ export function BackupTimelineChart({ stats = [], className = '' }: BackupTimeli
</div>
{/* Légende claire */}
<div className="mb-6 p-3 bg-gray-50 dark:bg-gray-800/50 rounded-lg">
<h4 className="text-sm font-medium mb-3 text-gray-700 dark:text-gray-300">Légende</h4>
<div className="mb-6 p-3 rounded-lg" style={{ backgroundColor: 'var(--card-hover)' }}>
<h4 className="text-sm font-medium mb-3 text-[var(--foreground)]">Légende</h4>
<div className="grid grid-cols-2 gap-3 text-sm">
<div className="flex items-center gap-3">
<div className="flex items-center gap-2">
<div className="w-6 h-6 bg-blue-500 rounded flex items-center justify-center text-white text-xs font-bold">15</div>
<span className="text-gray-700 dark:text-gray-300">Manuel seul</span>
<span className="text-[var(--foreground)]">Manuel seul</span>
</div>
</div>
<div className="flex items-center gap-3">
<div className="flex items-center gap-2">
<div className="w-6 h-6 bg-green-500 rounded flex items-center justify-center text-white text-xs font-bold">15</div>
<span className="text-gray-700 dark:text-gray-300">Auto seul</span>
<span className="text-[var(--foreground)]">Auto seul</span>
</div>
</div>
<div className="flex items-center gap-3">
<div className="flex items-center gap-2">
<div className="w-6 h-6 bg-gradient-to-br from-blue-500 to-green-500 rounded flex items-center justify-center text-white text-xs font-bold">15</div>
<span className="text-gray-700 dark:text-gray-300">Manuel + Auto</span>
<span className="text-[var(--foreground)]">Manuel + Auto</span>
</div>
</div>
<div className="flex items-center gap-3">
<div className="flex items-center gap-2">
<div className="w-6 h-6 bg-gray-200 dark:bg-gray-700 border-2 border-gray-300 dark:border-gray-600 rounded flex items-center justify-center text-gray-500 text-xs">15</div>
<span className="text-gray-700 dark:text-gray-300">Aucune</span>
<div className="w-6 h-6 border-2 rounded flex items-center justify-center text-xs" style={{ backgroundColor: 'var(--gray-light)', borderColor: 'var(--border)', color: 'var(--muted-foreground)' }}>15</div>
<span className="text-[var(--foreground)]">Aucune</span>
</div>
</div>
</div>
<div className="mt-3 text-xs text-gray-600 dark:text-gray-400">
<div className="mt-3 text-xs text-[var(--muted-foreground)]">
💡 Le badge orange indique le nombre total quand &gt; 1
</div>
</div>
{/* Statistiques résumées */}
<div className="grid grid-cols-3 gap-3 text-center">
<div className="p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
<div className="text-xl font-bold text-blue-600">
<div className="p-3 rounded-lg" style={{ backgroundColor: 'color-mix(in srgb, var(--blue) 10%, transparent)' }}>
<div className="text-xl font-bold" style={{ color: 'var(--blue)' }}>
{safeStats.reduce((sum, s) => sum + s.manual, 0)}
</div>
<div className="text-xs text-blue-600 font-medium">Manuelles</div>
<div className="text-xs font-medium" style={{ color: 'var(--blue)' }}>Manuelles</div>
</div>
<div className="p-3 bg-green-50 dark:bg-green-900/20 rounded-lg">
<div className="text-xl font-bold text-green-600">
<div className="p-3 rounded-lg" style={{ backgroundColor: 'color-mix(in srgb, var(--green) 10%, transparent)' }}>
<div className="text-xl font-bold" style={{ color: 'var(--green)' }}>
{safeStats.reduce((sum, s) => sum + s.automatic, 0)}
</div>
<div className="text-xs text-green-600 font-medium">Automatiques</div>
<div className="text-xs font-medium" style={{ color: 'var(--green)' }}>Automatiques</div>
</div>
<div className="p-3 bg-purple-50 dark:bg-purple-900/20 rounded-lg">
<div className="text-xl font-bold text-purple-600">
<div className="p-3 rounded-lg" style={{ backgroundColor: 'color-mix(in srgb, var(--purple) 10%, transparent)' }}>
<div className="text-xl font-bold" style={{ color: 'var(--purple)' }}>
{safeStats.reduce((sum, s) => sum + s.total, 0)}
</div>
<div className="text-xs text-purple-600 font-medium">Total</div>
<div className="text-xs font-medium" style={{ color: 'var(--purple)' }}>Total</div>
</div>
</div>
</div>