From fbb9311f9e4537136b750f28ebbd9f25d1e429d4 Mon Sep 17 00:00:00 2001 From: Julien Froidefond Date: Thu, 2 Oct 2025 14:14:06 +0200 Subject: [PATCH] feat: update background gradients and presets in BackgroundImageSelector - Adjusted gradient definitions for various themes to enhance visual appeal and consistency. - Added new gradient presets (sunset, ocean, forest, galaxy) to the BackgroundContext for broader customization options. - Cleaned up unused console logs in useBackgroundCycle for better performance and readability. --- .../settings/BackgroundImageSelector.tsx | 22 +++++++-------- src/contexts/BackgroundContext.tsx | 24 ++++++++++------ src/hooks/useBackgroundCycle.ts | 28 ------------------- 3 files changed, 27 insertions(+), 47 deletions(-) diff --git a/src/components/settings/BackgroundImageSelector.tsx b/src/components/settings/BackgroundImageSelector.tsx index da755be..ac54f9e 100644 --- a/src/components/settings/BackgroundImageSelector.tsx +++ b/src/components/settings/BackgroundImageSelector.tsx @@ -17,67 +17,67 @@ const PRESET_BACKGROUNDS = [ id: 'theme-subtle', name: 'Dégradé subtil', description: 'Dégradé doux avec les couleurs du thème', - preview: 'linear-gradient(135deg, var(--background) 0%, var(--card-column) 100%)' + preview: 'linear-gradient(135deg, var(--background) 0%, color-mix(in srgb, var(--primary) 15%, var(--background)) 100%)' }, { id: 'theme-primary', name: 'Dégradé primaire', description: 'Dégradé marqué avec la couleur primaire', - preview: 'linear-gradient(135deg, var(--background) 0%, color-mix(in srgb, var(--primary) 60%, var(--background)) 100%)' + preview: 'linear-gradient(135deg, var(--background) 0%, color-mix(in srgb, var(--primary) 25%, var(--background)) 100%)' }, { id: 'theme-accent', name: 'Dégradé accent', description: 'Dégradé marqué avec la couleur d\'accent', - preview: 'linear-gradient(135deg, var(--background) 0%, color-mix(in srgb, var(--accent) 60%, var(--background)) 100%)' + preview: 'linear-gradient(135deg, var(--background) 0%, color-mix(in srgb, var(--accent) 25%, var(--background)) 100%)' }, { id: 'theme-success', name: 'Dégradé succès', description: 'Dégradé marqué avec la couleur de succès', - preview: 'linear-gradient(135deg, var(--background) 0%, color-mix(in srgb, var(--success) 60%, var(--background)) 100%)' + preview: 'linear-gradient(135deg, var(--background) 0%, color-mix(in srgb, var(--success) 25%, var(--background)) 100%)' }, { id: 'theme-purple', name: 'Dégradé violet', description: 'Dégradé marqué avec la couleur violette', - preview: 'linear-gradient(135deg, var(--background) 0%, color-mix(in srgb, var(--purple) 60%, var(--background)) 100%)' + preview: 'linear-gradient(135deg, var(--background) 0%, color-mix(in srgb, var(--purple) 25%, var(--background)) 100%)' }, { id: 'theme-diagonal', name: 'Dégradé diagonal', description: 'Dégradé diagonal avec plusieurs couleurs', - preview: 'linear-gradient(45deg, var(--background) 0%, color-mix(in srgb, var(--primary) 40%, var(--background)) 50%, color-mix(in srgb, var(--accent) 40%, var(--background)) 100%)' + preview: 'linear-gradient(45deg, var(--background) 0%, color-mix(in srgb, var(--primary) 20%, var(--background)) 50%, color-mix(in srgb, var(--accent) 20%, var(--background)) 100%)' }, { id: 'theme-radial', name: 'Dégradé radial', description: 'Dégradé radial centré avec les couleurs du thème', - preview: 'radial-gradient(circle at center, var(--background) 0%, color-mix(in srgb, var(--primary) 50%, var(--background)) 100%)' + preview: 'radial-gradient(circle at center, var(--background) 0%, color-mix(in srgb, var(--primary) 20%, var(--background)) 100%)' }, { id: 'theme-sunset', name: 'Dégradé coucher de soleil', description: 'Dégradé orange-rouge intense', - preview: 'linear-gradient(135deg, color-mix(in srgb, var(--accent) 80%, var(--background)) 0%, color-mix(in srgb, var(--destructive) 60%, var(--background)) 100%)' + preview: 'linear-gradient(135deg, color-mix(in srgb, var(--accent) 30%, var(--background)) 0%, color-mix(in srgb, var(--destructive) 20%, var(--background)) 100%)' }, { id: 'theme-ocean', name: 'Dégradé océan', description: 'Dégradé bleu profond', - preview: 'linear-gradient(135deg, color-mix(in srgb, var(--blue) 70%, var(--background)) 0%, color-mix(in srgb, var(--primary) 50%, var(--background)) 100%)' + preview: 'linear-gradient(135deg, color-mix(in srgb, var(--blue) 25%, var(--background)) 0%, color-mix(in srgb, var(--primary) 15%, var(--background)) 100%)' }, { id: 'theme-forest', name: 'Dégradé forêt', description: 'Dégradé vert naturel', - preview: 'linear-gradient(135deg, color-mix(in srgb, var(--green) 60%, var(--background)) 0%, color-mix(in srgb, var(--success) 40%, var(--background)) 100%)' + preview: 'linear-gradient(135deg, color-mix(in srgb, var(--green) 25%, var(--background)) 0%, color-mix(in srgb, var(--success) 15%, var(--background)) 100%)' }, { id: 'theme-galaxy', name: 'Dégradé galaxie', description: 'Dégradé violet-bleu mystique', - preview: 'linear-gradient(135deg, color-mix(in srgb, var(--purple) 70%, var(--background)) 0%, color-mix(in srgb, var(--blue) 50%, var(--background)) 100%)' + preview: 'linear-gradient(135deg, color-mix(in srgb, var(--purple) 25%, var(--background)) 0%, color-mix(in srgb, var(--blue) 20%, var(--background)) 100%)' } ]; diff --git a/src/contexts/BackgroundContext.tsx b/src/contexts/BackgroundContext.tsx index daf2e68..508d2da 100644 --- a/src/contexts/BackgroundContext.tsx +++ b/src/contexts/BackgroundContext.tsx @@ -76,19 +76,27 @@ export function BackgroundProvider({ children }: BackgroundProviderProps) { 'theme-success', 'theme-purple', 'theme-diagonal', - 'theme-radial' + 'theme-radial', + 'theme-sunset', + 'theme-ocean', + 'theme-forest', + 'theme-galaxy' ]; if (PRESET_BACKGROUNDS.includes(backgroundImage)) { // Appliquer le preset basé sur le thème const presetStyles = { - 'theme-subtle': 'linear-gradient(135deg, var(--background) 0%, var(--card-column) 100%)', - 'theme-primary': 'linear-gradient(135deg, var(--background) 0%, color-mix(in srgb, var(--primary) 20%, var(--background)) 100%)', - 'theme-accent': 'linear-gradient(135deg, var(--background) 0%, color-mix(in srgb, var(--accent) 20%, var(--background)) 100%)', - 'theme-success': 'linear-gradient(135deg, var(--background) 0%, color-mix(in srgb, var(--success) 20%, var(--background)) 100%)', - 'theme-purple': 'linear-gradient(135deg, var(--background) 0%, color-mix(in srgb, var(--purple) 20%, var(--background)) 100%)', - 'theme-diagonal': 'linear-gradient(45deg, var(--background) 0%, color-mix(in srgb, var(--primary) 15%, var(--background)) 50%, color-mix(in srgb, var(--accent) 15%, var(--background)) 100%)', - 'theme-radial': 'radial-gradient(circle at center, var(--background) 0%, color-mix(in srgb, var(--primary) 25%, var(--background)) 100%)' + 'theme-subtle': 'linear-gradient(135deg, var(--background) 0%, color-mix(in srgb, var(--primary) 15%, var(--background)) 100%)', + 'theme-primary': 'linear-gradient(135deg, var(--background) 0%, color-mix(in srgb, var(--primary) 25%, var(--background)) 100%)', + 'theme-accent': 'linear-gradient(135deg, var(--background) 0%, color-mix(in srgb, var(--accent) 25%, var(--background)) 100%)', + 'theme-success': 'linear-gradient(135deg, var(--background) 0%, color-mix(in srgb, var(--success) 25%, var(--background)) 100%)', + 'theme-purple': 'linear-gradient(135deg, var(--background) 0%, color-mix(in srgb, var(--purple) 25%, var(--background)) 100%)', + 'theme-diagonal': 'linear-gradient(45deg, var(--background) 0%, color-mix(in srgb, var(--primary) 20%, var(--background)) 50%, color-mix(in srgb, var(--accent) 20%, var(--background)) 100%)', + 'theme-radial': 'radial-gradient(circle at center, var(--background) 0%, color-mix(in srgb, var(--primary) 20%, var(--background)) 100%)', + 'theme-sunset': 'linear-gradient(135deg, color-mix(in srgb, var(--accent) 30%, var(--background)) 0%, color-mix(in srgb, var(--destructive) 20%, var(--background)) 100%)', + 'theme-ocean': 'linear-gradient(135deg, color-mix(in srgb, var(--blue) 25%, var(--background)) 0%, color-mix(in srgb, var(--primary) 15%, var(--background)) 100%)', + 'theme-forest': 'linear-gradient(135deg, color-mix(in srgb, var(--green) 25%, var(--background)) 0%, color-mix(in srgb, var(--success) 15%, var(--background)) 100%)', + 'theme-galaxy': 'linear-gradient(135deg, color-mix(in srgb, var(--purple) 25%, var(--background)) 0%, color-mix(in srgb, var(--blue) 20%, var(--background)) 100%)' }; backgroundElement.style.backgroundImage = presetStyles[backgroundImage as keyof typeof presetStyles]; diff --git a/src/hooks/useBackgroundCycle.ts b/src/hooks/useBackgroundCycle.ts index 1e93a90..f1a0400 100644 --- a/src/hooks/useBackgroundCycle.ts +++ b/src/hooks/useBackgroundCycle.ts @@ -29,11 +29,6 @@ export function useBackgroundCycle() { // Ajouter l'image personnalisée préservée si elle existe const preservedCustomUrl = localStorage.getItem('preservedCustomBackground'); - console.log('Debug cycle:', { - currentBackground, - preservedCustomUrl, - localStorageKeys: Object.keys(localStorage) - }); if (preservedCustomUrl && !BACKGROUND_CYCLE.includes(preservedCustomUrl)) { allBackgrounds.push(preservedCustomUrl); @@ -67,33 +62,10 @@ export function useBackgroundCycle() { const nextNextBackground = allBackgrounds[nextNextIndex]; const finalBackgroundImage = nextNextBackground === 'none' ? undefined : nextNextBackground; - console.log('Cycle result:', { - allBackgrounds, - currentIndex, - actualCurrentIndex, - nextIndex, - nextBackground, - backgroundImage, - currentBackground, - nextNextIndex, - nextNextBackground, - finalBackgroundImage - }); - updateViewPreferences({ backgroundImage: finalBackgroundImage }); return; } - console.log('Cycle result:', { - allBackgrounds, - currentIndex, - actualCurrentIndex, - nextIndex, - nextBackground, - backgroundImage, - currentBackground - }); - updateViewPreferences({ backgroundImage }); };