feat: refactor theme management and enhance color customization
- 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
@@ -271,11 +271,14 @@ export default function BackupSettingsPageClient({ initialData }: BackupSettings
|
||||
if (!message) return null;
|
||||
|
||||
return (
|
||||
<div className={`text-xs mt-2 px-2 py-1 rounded transition-all inline-block ${
|
||||
message.type === 'success'
|
||||
? 'text-green-700 dark:text-green-300 bg-green-50 dark:bg-green-950/20 border border-green-200 dark:border-green-800/20'
|
||||
: 'text-red-700 dark:text-red-300 bg-red-50 dark:bg-red-950/20 border border-red-200 dark:border-red-800/20'
|
||||
}`}>
|
||||
<div
|
||||
className="text-xs mt-2 px-2 py-1 rounded transition-all inline-block border"
|
||||
style={{
|
||||
color: message.type === 'success' ? 'var(--success)' : 'var(--destructive)',
|
||||
backgroundColor: message.type === 'success' ? 'color-mix(in srgb, var(--success) 10%, transparent)' : 'color-mix(in srgb, var(--destructive) 10%, transparent)',
|
||||
borderColor: message.type === 'success' ? 'color-mix(in srgb, var(--success) 20%, var(--border))' : 'color-mix(in srgb, var(--destructive) 20%, var(--border))'
|
||||
}}
|
||||
>
|
||||
{message.text}
|
||||
</div>
|
||||
);
|
||||
@@ -561,11 +564,13 @@ export default function BackupSettingsPageClient({ initialData }: BackupSettings
|
||||
<span className="text-xs text-[var(--muted-foreground)]">
|
||||
{formatFileSize(backup.size)}
|
||||
</span>
|
||||
<span className={`text-xs px-1.5 py-0.5 rounded ${
|
||||
backup.type === 'manual'
|
||||
? 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300'
|
||||
: 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300'
|
||||
}`}>
|
||||
<span
|
||||
className="text-xs px-1.5 py-0.5 rounded"
|
||||
style={{
|
||||
color: backup.type === 'manual' ? 'var(--blue)' : 'var(--muted-foreground)',
|
||||
backgroundColor: backup.type === 'manual' ? 'color-mix(in srgb, var(--blue) 10%, transparent)' : 'color-mix(in srgb, var(--muted) 10%, transparent)'
|
||||
}}
|
||||
>
|
||||
{backup.type === 'manual' ? 'Manuel' : 'Auto'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -341,8 +341,8 @@ export function JiraConfigForm() {
|
||||
{validationResult && (
|
||||
<div className={`mt-2 p-2 rounded text-sm ${
|
||||
validationResult.type === 'success'
|
||||
? 'bg-green-50 border border-green-200 text-green-800 dark:bg-green-900/20 dark:border-green-800 dark:text-green-200'
|
||||
: 'bg-red-50 border border-red-200 text-red-800 dark:bg-red-900/20 dark:border-red-800 dark:text-red-200'
|
||||
? 'border border-[var(--success)]/20'
|
||||
: 'border border-[var(--destructive)]/20'
|
||||
}`}>
|
||||
{validationResult.text}
|
||||
</div>
|
||||
@@ -433,11 +433,14 @@ export function JiraConfigForm() {
|
||||
)}
|
||||
|
||||
{message && (
|
||||
<div className={`p-4 rounded border ${
|
||||
message.type === 'success'
|
||||
? 'bg-green-50 border-green-200 text-green-800 dark:bg-green-900/20 dark:border-green-800 dark:text-green-200'
|
||||
: 'bg-red-50 border-red-200 text-red-800 dark:bg-red-900/20 dark:border-red-800 dark:text-red-200'
|
||||
}`}>
|
||||
<div
|
||||
className="p-4 rounded border"
|
||||
style={{
|
||||
color: message.type === 'success' ? 'var(--success)' : 'var(--destructive)',
|
||||
backgroundColor: message.type === 'success' ? 'color-mix(in srgb, var(--success) 10%, transparent)' : 'color-mix(in srgb, var(--destructive) 10%, transparent)',
|
||||
borderColor: message.type === 'success' ? 'color-mix(in srgb, var(--success) 20%, var(--border))' : 'color-mix(in srgb, var(--destructive) 20%, var(--border))'
|
||||
}}
|
||||
>
|
||||
{message.text}
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -339,16 +339,16 @@ export function TfsConfigForm() {
|
||||
|
||||
{/* Actions de gestion des données TFS */}
|
||||
{isTfsConfigured && (
|
||||
<div className="p-4 bg-[var(--card)] rounded border border-orange-200 dark:border-orange-800">
|
||||
<div className="p-4 bg-[var(--card)] rounded border" style={{ borderColor: 'color-mix(in srgb, var(--accent) 30%, var(--border))', backgroundColor: 'color-mix(in srgb, var(--accent) 5%, var(--card))', color: 'var(--accent)' }}>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 className="font-medium text-orange-800 dark:text-orange-200">
|
||||
<h3 className="font-medium" style={{ color: 'var(--accent)' }}>
|
||||
⚠️ Gestion des données
|
||||
</h3>
|
||||
<p className="text-sm text-orange-600 dark:text-orange-300">
|
||||
<p className="text-sm" style={{ color: 'var(--accent)' }}>
|
||||
Supprimez toutes les tâches TFS synchronisées de la base locale
|
||||
</p>
|
||||
<p className="text-xs text-orange-500 dark:text-orange-400 mt-1">
|
||||
<p className="text-xs mt-1" style={{ color: 'var(--accent)' }}>
|
||||
<strong>Attention:</strong> Cette action est irréversible et
|
||||
supprimera définitivement toutes les tâches importées depuis
|
||||
Azure DevOps.
|
||||
@@ -624,11 +624,12 @@ export function TfsConfigForm() {
|
||||
|
||||
{message && (
|
||||
<div
|
||||
className={`p-4 rounded border ${
|
||||
message.type === 'success'
|
||||
? 'bg-green-50 border-green-200 text-green-800 dark:bg-green-900/20 dark:border-green-800 dark:text-green-200'
|
||||
: 'bg-red-50 border-red-200 text-red-800 dark:bg-red-900/20 dark:border-red-800 dark:text-red-200'
|
||||
}`}
|
||||
className="p-4 rounded border"
|
||||
style={{
|
||||
color: message.type === 'success' ? 'var(--success)' : 'var(--destructive)',
|
||||
backgroundColor: message.type === 'success' ? 'color-mix(in srgb, var(--success) 10%, transparent)' : 'color-mix(in srgb, var(--destructive) 10%, transparent)',
|
||||
borderColor: message.type === 'success' ? 'color-mix(in srgb, var(--success) 20%, var(--border))' : 'color-mix(in srgb, var(--destructive) 20%, var(--border))'
|
||||
}}
|
||||
>
|
||||
{message.text}
|
||||
</div>
|
||||
|
||||
@@ -43,11 +43,9 @@ export function QuickActions({
|
||||
Créer une sauvegarde des données
|
||||
</p>
|
||||
{messages.backup && (
|
||||
<p className={`text-xs mt-1 ${
|
||||
messages.backup.type === 'success'
|
||||
? 'text-green-600 dark:text-green-400'
|
||||
: 'text-red-600 dark:text-red-400'
|
||||
}`}>
|
||||
<p className="text-xs mt-1" style={{
|
||||
color: messages.backup.type === 'success' ? 'var(--success)' : 'var(--destructive)'
|
||||
}}>
|
||||
{messages.backup.text}
|
||||
</p>
|
||||
)}
|
||||
@@ -72,11 +70,9 @@ export function QuickActions({
|
||||
Tester la connexion Jira
|
||||
</p>
|
||||
{messages.jira && (
|
||||
<p className={`text-xs mt-1 ${
|
||||
messages.jira.type === 'success'
|
||||
? 'text-green-600 dark:text-green-400'
|
||||
: 'text-red-600 dark:text-red-400'
|
||||
}`}>
|
||||
<p className="text-xs mt-1" style={{
|
||||
color: messages.jira.type === 'success' ? 'var(--success)' : 'var(--destructive)'
|
||||
}}>
|
||||
{messages.jira.text}
|
||||
</p>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user