From fe7d0620a550cbd022803a0d211d567e7968fbb0 Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Tue, 28 Mar 2023 18:50:39 +0200
Subject: [PATCH] Updated color swatches in email design settings

Refs https://github.com/TryGhost/Team/issues/2830
---
 .../newsletters/components/color-picker.hbs   |  2 +-
 ghost/admin/app/styles/layouts/members.css    | 61 ++++++++++++++-----
 2 files changed, 46 insertions(+), 17 deletions(-)

diff --git a/ghost/admin/app/components/modals/newsletters/components/color-picker.hbs b/ghost/admin/app/components/modals/newsletters/components/color-picker.hbs
index b4781f0794..798e02cf55 100644
--- a/ghost/admin/app/components/modals/newsletters/components/color-picker.hbs
+++ b/ghost/admin/app/components/modals/newsletters/components/color-picker.hbs
@@ -1,7 +1,7 @@
 <div class="gh-email-design-color-picker">
     <div class="gh-btn-group">
         <p>{{this.currentColorObject.name}}</p>
-        <button type="button" class="gh-btn gh-email-design-color custom">{{svg-jar "plus"}}</button>
+        <button type="button" class="gh-btn gh-email-design-color custom"></button>
         {{#each this.availablePresetColors as |color|}}
             <button type="button" class="gh-btn gh-email-design-color {{color.class}}" {{on "click" (fn this.setCurrentColor color.value) }}></button>
         {{/each}}
diff --git a/ghost/admin/app/styles/layouts/members.css b/ghost/admin/app/styles/layouts/members.css
index 8ea01e8db2..e43b7f0bf3 100644
--- a/ghost/admin/app/styles/layouts/members.css
+++ b/ghost/admin/app/styles/layouts/members.css
@@ -1736,6 +1736,26 @@ p.gh-members-import-errordetail:first-of-type {
 /* Email newsletter design settings
 /* -------------------------------------------------------- */
 
+.gh-email-design-color-picker .gh-btn-group  {
+    vertical-align: middle;
+}
+
+.gh-email-design-color-picker .gh-btn-group p {
+    opacity: 1;
+    margin: 0;
+    color: var(--midgrey);
+    font-size: 1.2rem;
+    font-weight: 500;
+    transition: all .15s ease-in-out;
+    transition-delay: .05s;
+}
+
+.gh-email-design-color-picker .gh-btn-group:hover p {
+    opacity: 0;
+    transition: all .15s ease-in-out;
+    transition-delay: .05s;
+}
+
 .gh-btn-group .gh-email-design-color {
     display: block;
     opacity: 0;
@@ -1746,28 +1766,17 @@ p.gh-members-import-errordetail:first-of-type {
     margin: 0;
     border: 0;
     border-radius: 999px;
-    transition: all .1s ease-in-out;
+    transition: all .15s ease-in-out;
     transition-delay: .05s;
 }
 
-.gh-email-design-color-picker .gh-btn-group  {
-    vertical-align: middle;
-}
-
-.gh-email-design-color-picker .gh-btn-group p {
-    margin: 0;
-    color: var(--midgrey);
-    font-size: 1.2rem;
-    font-weight: 500;
-}
-
 .gh-btn-group:hover .gh-email-design-color {
     opacity: 1;
     width: 22px;
     height: 22px;
     margin: 0 0 0 5px;
     border: 1px solid transparent;
-    transition: all .1s ease-in-out;
+    transition: all .15s ease-in-out;
     transition-delay: .05s;
 }
 
@@ -1779,6 +1788,26 @@ p.gh-members-import-errordetail:first-of-type {
     border: 1px solid transparent;
 }
 
+.gh-email-design-color.gh-btn-group-selected::before {
+    content: "";
+    position: absolute;
+    top: -4px;
+    left: -4px;
+    right: -4px;
+    bottom: -4px;
+    opacity: 0;
+    border: 2px solid var(--green);
+    border-radius: 999px;
+    transition: all .15s ease-in-out;
+    transition-delay: .05s;
+}
+
+.gh-btn-group:hover .gh-email-design-color.gh-btn-group-selected::before {
+    opacity: 1;
+    transition: all .15s ease-in-out;
+    transition-delay: .05s;
+}
+
 .gh-btn-group .gh-email-design-color.transparent {
     background: transparent;
     border: 1px solid var(--lightgrey);
@@ -1811,14 +1840,14 @@ p.gh-members-import-errordetail:first-of-type {
 }
 
 .gh-btn-group .gh-email-design-color.custom {
-    background: var(--white-30) !important;
-    border: 1px solid var(--lightgrey);
+    background: conic-gradient(yellow, red, magenta, blue, aqua, lime, yellow) !important;
+    border: none;
 }
 
 .gh-email-design-color.custom svg {
     width: 10px;
     height: 10px;
-    color: var(--black);
+    color: var(--white);
 }
 
 .gh-email-design-alignment {