New design

src/browser/base/content/zen-popupset.inc.xhtml

@@ -106,12 +106,12 @@
     <panelview id="PanelUI-zen-gradient-generator-view" class="PanelUI-subView zen-theme-picker" role="document" mainview-with-header="true" has-custom-header="true">
       <hbox class="zen-theme-picker-gradient">
         <div id="PanelUI-zen-gradient-generator-color-actions">
-          <button id="PanelUI-zen-gradient-generator-color-add" class="subviewbutton" oncommand="gZenThemePicker.addColor();" data-l10n-id="zen-panel-ui-gradient-generator-color-add">
+          <button id="PanelUI-zen-gradient-generator-color-add" class="subviewbutton">
           </button>
-          <button id="PanelUI-zen-gradient-generator-color-remove" class="subviewbutton" oncommand="gZenThemePicker.removeColor();" data-l10n-id="zen-panel-ui-gradient-generator-color-remove">
+          <button id="PanelUI-zen-gradient-generator-color-remove" class="subviewbutton">
           </button>
           <html:div class="separator"></html:div>
-          <button id="PanelUI-zen-gradient-generator-color-reverse" class="subviewbutton" oncommand="gZenThemePicker.reverseColors();" data-l10n-id="zen-panel-ui-gradient-generator-color-reverse">
+          <button id="PanelUI-zen-gradient-generator-color-toggle-algo" class="subviewbutton">
           </button>
         </div>
       </hbox>

src/browser/base/content/zen-styles/zen-gradient-generator.css

@@ -5,7 +5,7 @@
  */
 
 #PanelUI-zen-gradient-generator {
-  --panel-width: 300px;
+  --panel-width: 350px;
   --panel-padding: 10px;
   min-width: var(--panel-width);
 }
@@ -68,9 +68,6 @@
   padding-right: var(--panel-padding);
   align-items: center;
   gap: var(--panel-padding);
-  border-bottom: 1px solid color-mix(in srgb, var(--zen-colors-border) 50%, transparent 50%);
-  padding-bottom: 15px;
-  margin-bottom: 15px;
 }
 
 #zen-theme-picker-color {
@@ -225,7 +222,7 @@
     inset: 0;
     background-image: linear-gradient(to right, var(--zen-primary-color) 1px, transparent 1px),
       linear-gradient(to bottom, var(--zen-primary-color) 1px, transparent 1px);
-    background-size: 24px 24px;
+    background-size: 20px 20px;
     content: '';
     position: absolute;
     top: 0;
@@ -258,28 +255,34 @@
 
 #PanelUI-zen-gradient-generator-color-actions {
   display: flex;
-  gap: 10px;
   position: absolute;
-  bottom: 15px;
+  bottom: 20px;
   left: 50%;
+  z-index: 1;
   transform: translateX(-50%);
   & .separator,
   & button {
-    background: light-dark(rgba(0,0,0,0.1), rgba(255,255,255,0.1));
+    background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
   }
 
   & button {
-    padding: 0.4rem;
+    border: none !important;
-    border-radius: 5px;
+    padding: 0.4rem !important;
+    min-width: fit-content !important;
     transition: background 0.2s;
+    & .button-text {
+      display: none;
+    }
+    appearance: none;
     &:hover {
-      background: light-dark(rgba(0,0,0,0.2), rgba(255,255,255,0.2));
+      background: light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
     }
   }
 
   & .separator {
     width: 1px;
-    height: 20px;
+    margin: 0 0.5rem;
+    height: 30px;
   }
 }
 

src/browser/base/zen-components/ZenGradientGenerator.mjs

@@ -2,7 +2,7 @@
   class ZenThemePicker extends ZenMultiWindowFeature {
     static GRADIENT_IMAGE_URL = 'chrome://browser/content/zen-images/gradient.png';
     static GRADIENT_DISPLAY_URL = 'chrome://browser/content/zen-images/gradient-display.png';
-    static MAX_DOTS = 5;
+    static MAX_DOTS = 3;
 
     currentOpacity = 0.5;
     currentRotation = 45;
@@ -78,7 +78,7 @@
 
     onImageLoad() {
       // resize the image to fit the panel
-      const imageSize = 300 - 20; // 20 is the padding (10px)
+      const imageSize = 350 - 20; // 20 is the padding (10px)
       const scale = imageSize / Math.max(this.image.width, this.image.height);
       this.image.width *= scale;
       this.image.height *= scale;
@@ -448,12 +448,18 @@
 
     onThemePickerClick(event) {
       event.preventDefault();
+      const target = event.target;
+      if (target.id === 'PanelUI-zen-gradient-generator-color-add') {
+        if (this.dots.length >= ZenThemePicker.MAX_DOTS) return;
+      } else if (target.id === 'PanelUI-zen-gradient-generator-color-remove') {
+      } else if (target.id === 'PanelUI-zen-gradient-generator-color-toggle-algo') {
+      }
 
       if (event.button !== 0 || this.dragging || this.recentlyDragged) return;
 
       const gradient = this.panel.querySelector('.zen-theme-picker-gradient');
       const rect = gradient.getBoundingClientRect();
-      const padding = 90;
+      const padding = 60;
 
       const centerX = rect.left + rect.width / 2;
       const centerY = rect.top + rect.height / 2;

src/browser/themes/shared/zen-icons/icons.css

@@ -45,6 +45,10 @@
   list-style-image: url('reload.svg') !important;
 }
 
+#PanelUI-zen-gradient-generator-color-toggle-algo {
+  list-style-image: url('palette.svg');
+}
+
 .tab-reset-button,
 #PanelUI-zen-gradient-generator-color-remove {
   list-style-image: url('unpin.svg') !important;

src/browser/themes/shared/zen-icons/jar.inc.mn

@@ -82,6 +82,7 @@
   skin/classic/browser/zen-icons/nucleo-copyright-notice.html                      (../shared/zen-icons/nucleo-copyright-notice.html) 
   skin/classic/browser/zen-icons/open.svg                      (../shared/zen-icons/open.svg) 
   skin/classic/browser/zen-icons/page-portrait.svg                      (../shared/zen-icons/page-portrait.svg) 
+  skin/classic/browser/zen-icons/palette.svg                      (../shared/zen-icons/palette.svg) 
   skin/classic/browser/zen-icons/passwords.svg                      (../shared/zen-icons/passwords.svg) 
   skin/classic/browser/zen-icons/paste-and-go.svg                      (../shared/zen-icons/paste-and-go.svg) 
   skin/classic/browser/zen-icons/permissions.svg                      (../shared/zen-icons/permissions.svg) 

src/browser/themes/shared/zen-icons/palette.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="currentColor" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M7.25,4.25v-.5c0-.552-.448-1-1-1H3.75c-.552,0-1,.448-1,1V13" data-color="color-2"></path><path d="M12.932,8.25l.2-.2c.391-.391,.391-1.024,0-1.414l-1.768-1.768c-.391-.391-1.024-.391-1.414,0L3.409,11.409" data-color="color-2"></path><circle cx="5" cy="13" r=".75" fill="currentColor" data-stroke="none" stroke="none"></circle><path d="M9,6.75h0c1.242,0,2.25,1.008,2.25,2.25v9.25c0,.552-.448,1-1,1h-2.5c-.552,0-1-.448-1-1V9c0-1.242,1.008-2.25,2.25-2.25Z" transform="translate(-4 22) rotate(-90)"></path><line x1="8.25" y1="10.75" x2="8.25" y2="15.25"></line><line x1="11.75" y1="10.75" x2="11.75" y2="15.25"></line></g></svg>