Merge branch 'main' of https://github.com/mue/mue

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 (
         <Header
@@ -151,7 +162,7 @@ const BackgroundOptions = memo(() => {
         />
       );
     }
-    
+
     return (
       <Header
         title={variables.getMessage('modals.main.settings.sections.background.title')}
@@ -165,7 +176,7 @@ const BackgroundOptions = memo(() => {
   return (
     <>
       {getHeader()}
-      
+
       {!backgroundSettingsSection && !effects && (
         <>
           <NavigationCard
@@ -189,7 +200,7 @@ const BackgroundOptions = memo(() => {
               />
             }
           />
-          
+
           {showEffects && (
             <NavigationCard
               icon={MdOutlineAutoAwesome}

src/features/background/options/Colour.jsx

@@ -4,6 +4,7 @@ import ColorPicker from 'react-best-gradient-color-picker';
 import { toast } from 'react-toastify';
 import { Row, Content, Action } from 'components/Layout/Settings/Item';
 import { MdRefresh } from 'react-icons/md';
+import EventBus from 'utils/eventbus';
 
 import '../scss/_colourpicker.scss';
 
@@ -15,6 +16,7 @@ const ColourOptions = () => {
   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}
         />
         <div className="colourReset">

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;
+    }
+  }
+}