Updated color picker in signup form modal (#16971)

Refs https://github.com/TryGhost/Team/issues/3407

---------

Co-authored-by: Simon Backx <simon@ghost.org>

ghost/admin/app/components/modals/newsletters/components/color-picker.hbs

@@ -1,7 +1,12 @@
 <div class="gh-email-design-color-picker">
-    <div class="gh-btn-group" {{on "mouseenter" this.onMouseEnter}} {{on "mouseleave" this.onMouseLeave}}>
+    <div class="gh-btn-group">
-        <p>{{this.currentColorObject.name}}</p>
+        {{#each this.presetColors as |color|}}
-        <label type="button" style={{html-safe this.customColorStyle}} class="gh-btn gh-email-design-color custom {{if this.customColorSelected "gh-btn-group-selected"}}" {{on "click" this.onOpenColorPicker}}>
+            <button type="button" class="gh-btn gh-email-design-color {{color.class}} {{if (eq this.currentColorObject.value color.value) "gh-btn-group-selected"}}" {{on "click" (fn this.setCurrentColor color.value) }}>
+                <div style={{html-safe color.style}}></div>
+            </button>
+        {{/each}}
+        <label type="button" class="gh-btn gh-email-design-color custom {{if this.customColorSelected "gh-btn-group-selected"}}" {{on "click" this.onOpenColorPicker}}>
+            <div style={{html-safe this.customColorStyle}}></div>
             <input
                 type="color"
                 value={{this.colorInputValue}}
@@ -9,8 +14,5 @@
                 {{on "change" this.updateColorInputValue}}
             />
         </label>
-        {{#each this.presetColors as |color|}}
-            <button type="button" style={{html-safe color.style}} class="gh-btn gh-email-design-color {{color.class}} {{if (eq this.currentColorObject.value color.value) "gh-btn-group-selected"}}" {{on "click" (fn this.setCurrentColor color.value) }}></button>
-        {{/each}}
     </div>
 </div>

ghost/admin/app/components/modals/newsletters/components/color-picker.js

@@ -74,10 +74,6 @@ export default class ColorPicker extends Component {
         // Make sure the current color is present
         if (this.customColorSelected) {
             return 'background: ' + this.currentColor + ' !important;';
-        } else {
-            if (this.lastSelectedCustomColor && this.didSelectCustomColor) {
-                return 'background: ' + this.lastSelectedCustomColor + ' !important;';
-            }
         }
         return '';
     }
@@ -97,9 +93,6 @@ export default class ColorPicker extends Component {
     }
 
     get colorInputValue() {
-        if (this.lastSelectedCustomColor) {
-            return this.lastSelectedCustomColor;
-        }
         if (!this.currentColorObject.value || !this.currentColorObject.value.startsWith('#')) {
             return '#999999';
         }

ghost/admin/app/components/modals/settings/signup-form-embed.js

@@ -60,6 +60,12 @@ export default class SignupFormEmbedModal extends Component {
                 name: 'Black',
                 class: '',
                 style: 'background: #000000 !important;'
+            },
+            {
+                value: this.settings.accentColor,
+                name: 'Accent',
+                class: '',
+                style: 'background: ' + this.settings.accentColor + ' !important;'
             }
         ];
     }

ghost/admin/app/styles/layouts/members.css

@@ -1746,72 +1746,64 @@ p.gh-members-import-errordetail:first-of-type {
     background: none;
 }
 
-.gh-email-design-color-picker .gh-btn-group p {
-    opacity: 1;
-    margin: 0;
-    color: var(--midgrey);
-    font-weight: 400;
-    transition: all .15s ease-in-out;
-    transition-delay: .03s;
-}
-
-.gh-email-design-color-picker .gh-btn-group:hover p {
-    opacity: 0;
-    transition: all .15s ease-in-out;
-    transition-delay: .03s;
-}
-
 .gh-btn-group .gh-email-design-color {
     display: block;
-    opacity: 0;
+    opacity: 1;
     position: relative;
     z-index: 2;
-    width: 0;
+    width: 20px;
-    height: 0;
+    height: 20px;
-    margin: 0;
+    margin: 0 0 0 8px;
-    border: none;
+    border: 1px solid var(--lightgrey-l1);
     border-radius: 999px;
-    box-shadow: inset 0 0 0 1px var(--lightgrey-l1);
-    transition: all .15s ease-in-out;
-    transition-delay: .03s;
 }
 
-.gh-btn-group:hover .gh-email-design-color {
+.gh-btn-group .gh-email-design-color.gh-btn-group-selected {
-    opacity: 1;
+    outline: 2px solid var(--green);
-    width: 22px;
-    height: 22px;
-    margin: 0 0 0 6px;
-    transition: all .15s ease-in-out;
-    transition-delay: .03s;
 }
 
-.gh-email-design-color.gh-btn-group-selected {
+.gh-btn-group .gh-email-design-color.gh-btn-group-selected.custom {
-    opacity: 1;
+    outline: none;
-    width: 22px;
-    height: 22px;
-    margin: 0 0 0 6px;
 }
 
-.gh-email-design-color.gh-btn-group-selected::before {
+.gh-btn-group .gh-email-design-color > div {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: 999px;
+    z-index: 1;
+}
+
+.gh-btn-group .gh-email-design-color.custom {
+    cursor: pointer;
+    touch-action: manipulation;
+}
+
+.gh-btn-group .gh-email-design-color.gh-btn-group-selected.custom > div {
+    top: 1px;
+    left: 1px;
+    right: 1px;
+    bottom: 1px;
+    border: 1px solid var(--white);
+}
+
+.gh-btn-group .gh-email-design-color.custom::before {
+    /* Always visible, even when selected */
     content: "";
     position: absolute;
-    top: -4px;
+    top: -2px;
-    left: -4px;
+    left: -2px;
-    right: -4px;
+    right: -2px;
-    bottom: -4px;
+    bottom: -2px;
-    opacity: 0;
+    background: conic-gradient(yellow, red, magenta, blue, aqua, lime, yellow) !important;
-    border: 2px solid var(--green);
+    border: none;
     border-radius: 999px;
     transition: all .15s ease-in-out;
     transition-delay: .03s;
 }
 
-.gh-btn-group:hover .gh-email-design-color.gh-btn-group-selected::before {
-    opacity: 1;
-    transition: all .15s ease-in-out;
-    transition-delay: .03s;
-}
-
 .gh-btn-group .gh-email-design-color.transparent {
     background: transparent;
     box-shadow: inset 0 0 0 1px var(--lightgrey);
@@ -1842,13 +1834,6 @@ p.gh-members-import-errordetail:first-of-type {
     background: var(--accent-color) !important;
 }
 
-.gh-btn-group .gh-email-design-color.custom {
-    background: conic-gradient(yellow, red, magenta, blue, aqua, lime, yellow) !important;
-    display: inline-block;
-    cursor: pointer;
-    touch-action: manipulation;
-}
-
 .gh-email-design-color.custom svg {
     width: 10px;
     height: 10px;