From 80ee7885e1d45dd310674c7deebf3f06e80531f2 Mon Sep 17 00:00:00 2001 From: alexsparkes Date: Sat, 24 Jan 2026 15:43:44 +0000 Subject: [PATCH] fix(background): enhance background settings handling and improve colour picker styles --- .../background/options/BackgroundOptions.jsx | 23 +- src/features/background/options/Colour.jsx | 6 + .../background/scss/_colourpicker.scss | 202 +++++++++++++++++- 3 files changed, 216 insertions(+), 15 deletions(-) diff --git a/src/features/background/options/BackgroundOptions.jsx b/src/features/background/options/BackgroundOptions.jsx index 19aa9e79..b69d4e84 100644 --- a/src/features/background/options/BackgroundOptions.jsx +++ b/src/features/background/options/BackgroundOptions.jsx @@ -29,10 +29,21 @@ const BackgroundOptions = memo(() => { const [backgroundAPI, setBackgroundAPI] = useState(localStorage.getItem('backgroundAPI') || 'mue'); const [marketplaceEnabled] = useState(localStorage.getItem('photo_packs')); const [effects, setEffects] = useState(false); - const [backgroundSettingsSection, setBackgroundSettingsSection] = useState(false); - + + // Auto-show source section for types without effects/display settings + const shouldShowSourceByDefault = ['colour', 'random_colour', 'random_gradient'].includes(backgroundType); + const [backgroundSettingsSection, setBackgroundSettingsSection] = useState(shouldShowSourceByDefault); + const controllerRef = useRef(null); + // Auto-navigate to source section when switching to colour/random types + useEffect(() => { + if (shouldShowSourceByDefault) { + setBackgroundSettingsSection(true); + setEffects(false); + } + }, [shouldShowSourceByDefault]); + const getBackgroundCategories = useCallback(async () => { const data = await ( await fetch(variables.constants.API_URL + '/images/categories', { @@ -139,7 +150,7 @@ const BackgroundOptions = memo(() => { /> ); } - + if (backgroundSettingsSection) { return (
{ /> ); } - + return (
{ return ( <> {getHeader()} - + {!backgroundSettingsSection && !effects && ( <> { /> } /> - + {showEffects && ( { const changeColour = (output) => { setColour(output); localStorage.setItem('customBackgroundColour', output); + EventBus.emit('refresh', 'background'); showReminder(); }; @@ -22,6 +24,7 @@ const ColourOptions = () => { setColour('rgba(0, 0, 0, 0)'); localStorage.setItem('customBackgroundColour', 'rgba(0, 0, 0, 0)'); toast(variables.getMessage('toasts.reset')); + EventBus.emit('refresh', 'background'); showReminder(); }; @@ -47,6 +50,9 @@ const ColourOptions = () => { hideEyeDrop={true} hideColorGuide={true} hidePresets={true} + hideAdvancedSliders={false} + hideColorTypeBtns={false} + hideInputType={false} height={147} />
diff --git a/src/features/background/scss/_colourpicker.scss b/src/features/background/scss/_colourpicker.scss index 9a8c28cf..e40ac6ad 100644 --- a/src/features/background/scss/_colourpicker.scss +++ b/src/features/background/scss/_colourpicker.scss @@ -1,18 +1,152 @@ @use 'scss/variables' as *; -#rbgcp-solid-btn, -#rbgcp-hex-input, -#rbgcp-input, -#rbgcp-eyedropper-btn, -#rbgcp-advanced-btn, -#rbgcp-comparibles-btn, -#rbgcp-color-model-btn, -#rbgcp-gradient-controls-wrap div { +// Main wrapper - cleaner appearance without heavy border +#rbgcp-wrapper, +#rbgcp-color-picker-dark { @include themed { - background: t($btn-background) !important; + background: transparent !important; + border: none !important; + border-radius: 0 !important; } } +// Override any remaining dark backgrounds from inline styles +div[style*='background: rgb(32, 32, 32)'] { + @include themed { + background: transparent !important; + } +} + +// Canvas wrapper - smoother corners +#rbgcp-square-canvas-wrapper-dark { + border-radius: 6px !important; + overflow: hidden; +} + +// Bottom controls section +#rbgcp-body { + @include themed { + background: t($modal-secondaryColour) !important; + } +} + +// Control wrappers - SPECIFIC targeting to avoid breaking sliders +#rbgcp-controls-wrapper-dark, +#rbgcp-color-type-btns-dark, +#rbgcp-control-rightside-wrapper-dark, +#rbgcp-inputs-wrap-dark { + @include themed { + background: t($modal-secondaryColour) !important; + border-radius: 6px !important; + } +} + +// Slider area backgrounds - soft grey for light theme +#rbgcp-hue-wrap-dark, +#rbgcp-opacity-wrapper-dark { + position: relative !important; + + // Add a soft background wrapper + &::before { + content: ''; + position: absolute; + inset: 0; + z-index: -1; + border-radius: 14px; + + @include themed { + .light & { + background: rgba(0, 0, 0, 0.08) !important; + } + .dark & { + background: rgba(0, 0, 0, 0.3) !important; + } + } + } +} + +// Input fields and buttons - cover all variations +#rbgcp-solid-btn, +#rbgcp-solid-btn-dark, +#rbgcp-gradient-btn, +#rbgcp-gradient-btn-dark, +#rbgcp-hex-input, +#rbgcp-hex-input-dark, +#rbgcp-input, +#rbgcp-R-input-dark, +#rbgcp-G-input-dark, +#rbgcp-B-input-dark, +#rbgcp-A-input-dark, +input[id*='rbgcp'], +#rbgcp-eyedropper-btn, +#rbgcp-advanced-btn, +#rbgcp-advanced-btn-dark, +#rbgcp-comparibles-btn, +#rbgcp-color-model-btn, +#rbgcp-color-model-btn-dark, +#rbgcp-gradient-controls-wrap div { + @include themed { + background: t($btn-background) !important; + color: t($color) !important; + border: 1px solid rgba(128, 128, 128, 0.2) !important; + } +} + +// Active state for Solid/Gradient buttons - check for black background or box-shadow +#rbgcp-solid-btn-dark[style*='background: black'], +#rbgcp-solid-btn-dark[style*='background: rgb(0, 0, 0)'], +#rbgcp-gradient-btn-dark[style*='background: black'], +#rbgcp-gradient-btn-dark[style*='background: rgb(0, 0, 0)'] { + @include themed { + background: t($link) !important; + color: white !important; + border-color: t($link) !important; + font-weight: 700 !important; + } +} + +// Icon buttons - make icons more visible +#rbgcp-advanced-btn-dark, +#rbgcp-color-model-btn-dark { + svg, + svg polyline, + svg line, + svg path { + @include themed { + stroke: t($color) !important; + fill: none !important; + } + } + + &:hover { + @include themed { + background: t($btn-backgroundHover) !important; + border-color: t($link) !important; + } + + svg, + svg polyline, + svg line, + svg path { + @include themed { + stroke: t($link) !important; + } + } + } +} + +// Labels under inputs +#rbgcp-hex-input-wrapper-dark div, +#rbgcp-R-input-wrapper-dark div, +#rbgcp-G-input-wrapper-dark div, +#rbgcp-B-input-wrapper-dark div, +#rbgcp-A-input-wrapper-dark div { + @include themed { + color: t($color) !important; + } +} + +// Hover states #rbgcp-gradient-btn:hover, #rbgcp-solid-btn:hover, #rbgcp-eyedropper-btn:hover, @@ -25,6 +159,16 @@ @include themed { background: t($btn-backgroundHover) !important; + border-color: t($color) !important; + } +} + +// Active/selected button states +#rbgcp-solid-btn[style*='background: rgb(242, 242, 242)'], +#rbgcp-gradient-btn[style*='background: rgb(242, 242, 242)'] { + @include themed { + background: t($btn-backgroundHover) !important; + border-color: t($link) !important; } } @@ -35,7 +179,47 @@ #rbgcp-point-delete-btn { @include themed { background: t($btn-background) !important; + border: 1px solid t($boxShadow) !important; } height: 28px; } + +// Text labels +#rbgcp-wrapper { + label { + @include themed { + color: t($color) !important; + } + } +} + +// Reset button styling +.colourReset { + margin-top: 12px; + + .link { + display: inline-flex; + align-items: center; + gap: 6px; + font-size: 14px; + cursor: pointer; + padding: 8px 12px; + border-radius: 8px; + transition: all 0.2s ease; + + @include themed { + color: t($link); + background: t($modal-secondaryColour); + + &:hover { + background: t($btn-backgroundHover); + transform: translateY(-1px); + } + } + + svg { + font-size: 16px; + } + } +}