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

refactor: update theme management and enhance UI components

Browse Source 
- Refactored theme imports in `preferences.ts` and `ThemeSelector.tsx` to use centralized `theme-config`.
- Added new CSS variables for special cards in `globals.css` to improve theme consistency.
- Enhanced `Header` and `TaskCard` components with theme dropdown functionality for better user experience.
- Updated `ThemeProvider` to support cycling through dark themes, improving theme selection flexibility.
- Cleaned up unused imports and streamlined component structures for better maintainability.
This commit is contained in:
Julien Froidefond
2025-09-29 08:51:20 +02:00
parent 641a009b34
commit 8d657872c0
14 changed files with 554 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
src/app/globals.css
View File

@@ -22,6 +22,14 @@
--blue: #2563eb; /* blue-600 */
--gray: #6b7280; /* gray-500 */
--gray-light: #e5e7eb; /* gray-200 */
/* Cartes spéciales */
--jira-card: #dbeafe; /* blue-100 - clair */
--tfs-card: #fed7aa; /* orange-200 - clair */
--jira-border: #3b82f6; /* blue-500 */
--tfs-border: #f59e0b; /* amber-500 */
--jira-text: #1e40af; /* blue-800 - foncé pour contraste */
--tfs-text: #92400e; /* amber-800 - foncé pour contraste */
}
.light {
@@ -46,13 +54,21 @@
--blue: #2563eb; /* blue-600 */
--gray: #6b7280; /* gray-500 */
--gray-light: #e5e7eb; /* gray-200 */
/* Cartes spéciales */
--jira-card: #dbeafe; /* blue-100 - clair */
--tfs-card: #fed7aa; /* orange-200 - clair */
--jira-border: #3b82f6; /* blue-500 */
--tfs-border: #f59e0b; /* amber-500 */
--jira-text: #1e40af; /* blue-800 - foncé pour contraste */
--tfs-text: #92400e; /* amber-800 - foncé pour contraste */
}
.dark {
/* Dark theme override */
--background: #1e293b; /* slate-800 - encore plus clair */
--foreground: #f1f5f9; /* slate-100 */
--card: #334155; /* slate-700 - beaucoup plus clair pour contraste fort */
--card: #1e293b; /* slate-800 - même couleur que le background */
--card-hover: #475569; /* slate-600 */
--card-column: #0f172a; /* slate-900 - plus foncé que les cartes */
--border: #64748b; /* slate-500 - encore plus clair */
@@ -70,6 +86,14 @@
--blue: #3b82f6; /* blue-500 */
--gray: #9ca3af; /* gray-400 */
--gray-light: #374151; /* gray-700 */
/* Cartes spéciales */
--jira-card: #1e3a8a; /* blue-900 - très foncé */
--tfs-card: #9a3412; /* orange-900 - très foncé */
--jira-border: #60a5fa; /* blue-400 - plus clair pour contraste */
--tfs-border: #fb923c; /* orange-400 - plus clair pour contraste */
--jira-text: #93c5fd; /* blue-300 - clair pour contraste */
--tfs-text: #fdba74; /* orange-300 - clair pour contraste */
}
.dracula {
@@ -94,6 +118,14 @@
--blue: #8be9fd; /* dracula cyan */
--gray: #6272a4; /* dracula comment */
--gray-light: #44475a; /* dracula current line */
/* Cartes spéciales */
--jira-card: #44475a; /* dracula current line - fond neutre */
--tfs-card: #44475a; /* dracula current line - fond neutre */
--jira-border: #8be9fd; /* dracula cyan */
--tfs-border: #ffb86c; /* dracula orange */
--jira-text: #f8f8f2; /* dracula foreground - texte principal */
--tfs-text: #f8f8f2; /* dracula foreground - texte principal */
}
.monokai {
@@ -118,6 +150,14 @@
--blue: #66d9ef; /* monokai cyan */
--gray: #75715e; /* monokai comment */
--gray-light: #3e3d32; /* monokai selection */
/* Cartes spéciales */
--jira-card: #3e3d32; /* monokai selection - fond neutre */
--tfs-card: #3e3d32; /* monokai selection - fond neutre */
--jira-border: #66d9ef; /* monokai cyan */
--tfs-border: #fd971f; /* monokai orange */
--jira-text: #f8f8f2; /* monokai foreground */
--tfs-text: #f8f8f2; /* monokai foreground */
}
.nord {
@@ -142,6 +182,14 @@
--blue: #5e81ac; /* nord10 */
--gray: #4c566a; /* nord3 */
--gray-light: #3b4252; /* nord1 */
/* Cartes spéciales */
--jira-card: #3b4252; /* nord1 - fond neutre */
--tfs-card: #3b4252; /* nord1 - fond neutre */
--jira-border: #5e81ac; /* nord10 - bleu */
--tfs-border: #d08770; /* nord12 - orange */
--jira-text: #d8dee9; /* nord4 - texte principal */
--tfs-text: #d8dee9; /* nord4 - texte principal */
}
.gruvbox {
@@ -166,6 +214,14 @@
--blue: #83a598; /* gruvbox blue */
--gray: #a89984; /* gruvbox gray */
--gray-light: #3c3836; /* gruvbox bg1 */
/* Cartes spéciales */
--jira-card: #3c3836; /* gruvbox bg1 - fond neutre */
--tfs-card: #3c3836; /* gruvbox bg1 - fond neutre */
--jira-border: #83a598; /* gruvbox blue */
--tfs-border: #fe8019; /* gruvbox orange */
--jira-text: #ebdbb2; /* gruvbox fg */
--tfs-text: #ebdbb2; /* gruvbox fg */
}
.tokyo_night {
@@ -190,6 +246,14 @@
--blue: #7aa2f7; /* tokyo-night blue */
--gray: #565f89; /* tokyo-night comment */
--gray-light: #24283b; /* tokyo-night bg_highlight */
/* Cartes spéciales */
--jira-card: #24283b; /* tokyo-night bg_highlight - fond neutre */
--tfs-card: #24283b; /* tokyo-night bg_highlight - fond neutre */
--jira-border: #7aa2f7; /* tokyo-night blue */
--tfs-border: #ff9e64; /* tokyo-night orange */
--jira-text: #a9b1d6; /* tokyo-night fg */
--tfs-text: #a9b1d6; /* tokyo-night fg */
}
.catppuccin {
@@ -214,6 +278,14 @@
--blue: #89b4fa; /* catppuccin blue */
--gray: #6c7086; /* catppuccin overlay0 */
--gray-light: #313244; /* catppuccin surface0 */
/* Cartes spéciales */
--jira-card: #313244; /* catppuccin surface0 - fond neutre */
--tfs-card: #313244; /* catppuccin surface0 - fond neutre */
--jira-border: #89b4fa; /* catppuccin blue */
--tfs-border: #fab387; /* catppuccin peach */
--jira-text: #cdd6f4; /* catppuccin text */
--tfs-text: #cdd6f4; /* catppuccin text */
}
.rose_pine {
@@ -238,6 +310,14 @@
--blue: #3e8fb0; /* rose-pine pine */
--gray: #6e6a86; /* rose-pine muted */
--gray-light: #26233a; /* rose-pine surface */
/* Cartes spéciales */
--jira-card: #26233a; /* rose-pine surface - fond neutre */
--tfs-card: #26233a; /* rose-pine surface - fond neutre */
--jira-border: #3e8fb0; /* rose-pine pine - bleu */
--tfs-border: #f6c177; /* rose-pine gold - orange/jaune */
--jira-text: #e0def4; /* rose-pine text */
--tfs-text: #e0def4; /* rose-pine text */
}
.one_dark {
@@ -262,6 +342,14 @@
--blue: #61afef; /* one-dark blue */
--gray: #5c6370; /* one-dark bg3 */
--gray-light: #3e4451; /* one-dark bg1 */
/* Cartes spéciales */
--jira-card: #3e4451; /* one-dark bg1 - fond neutre */
--tfs-card: #3e4451; /* one-dark bg1 - fond neutre */
--jira-border: #61afef; /* one-dark blue */
--tfs-border: #e5c07b; /* one-dark yellow */
--jira-text: #abb2bf; /* one-dark fg */
--tfs-text: #abb2bf; /* one-dark fg */
}
.material {
@@ -286,6 +374,14 @@
--blue: #2196f3; /* material info */
--gray: #3c3c3c; /* material outline */
--gray-light: #1e1e1e; /* material surface */
/* Cartes spéciales */
--jira-card: #1e1e1e; /* material surface - fond neutre */
--tfs-card: #1e1e1e; /* material surface - fond neutre */
--jira-border: #2196f3; /* material info - bleu */
--tfs-border: #ffab40; /* material secondary - orange */
--jira-text: #ffffff; /* material on-bg */
--tfs-text: #ffffff; /* material on-bg */
}
.solarized {
@@ -310,6 +406,14 @@
--blue: #268bd2; /* solarized blue */
--gray: #586e75; /* solarized base01 */
--gray-light: #073642; /* solarized base02 */
/* Cartes spéciales */
--jira-card: #073642; /* solarized base02 - fond neutre */
--tfs-card: #073642; /* solarized base02 - fond neutre */
--jira-border: #268bd2; /* solarized blue */
--tfs-border: #b58900; /* solarized yellow */
--jira-text: #93a1a1; /* solarized base1 */
--tfs-text: #93a1a1; /* solarized base1 */
}
@theme inline {

2
src/app/layout.tsx
View File

@@ -5,6 +5,7 @@ import { ThemeProvider } from "@/contexts/ThemeContext";
import { JiraConfigProvider } from "@/contexts/JiraConfigContext";
import { UserPreferencesProvider } from "@/contexts/UserPreferencesContext";
import { userPreferencesService } from "@/services/core/user-preferences";
import { KeyboardShortcuts } from "@/components/KeyboardShortcuts";
const geistSans = Geist({
variable: "--font-geist-sans",
@@ -38,6 +39,7 @@ export default async function RootLayout({
initialTheme={initialPreferences.viewPreferences.theme}
userPreferredTheme={initialPreferences.viewPreferences.theme === 'light' ? 'dark' : initialPreferences.viewPreferences.theme}
>
<KeyboardShortcuts />
<JiraConfigProvider config={initialPreferences.jiraConfig}>
<UserPreferencesProvider initialPreferences={initialPreferences}>
{children}