From 4cebceb0d8b293f2accab5a5a8f5e71305d0cd99 Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Tue, 28 Mar 2023 12:39:33 +0200
Subject: [PATCH] Added transitions to newsletter color pickers

Refs https://github.com/TryGhost/Team/issues/2830
---
 .../modals/newsletters/edit/design-labs.hbs   | 23 +++++----
 ghost/admin/app/styles/layouts/members.css    | 50 ++++++++++++++-----
 2 files changed, 50 insertions(+), 23 deletions(-)

diff --git a/ghost/admin/app/components/modals/newsletters/edit/design-labs.hbs b/ghost/admin/app/components/modals/newsletters/edit/design-labs.hbs
index c6f1ab932d..7bd94e1919 100644
--- a/ghost/admin/app/components/modals/newsletters/edit/design-labs.hbs
+++ b/ghost/admin/app/components/modals/newsletters/edit/design-labs.hbs
@@ -123,9 +123,10 @@
                             <label class="modal-fullsettings-title">Background color</label>
                             <div class="gh-email-design-color-picker">
                                 <div class="gh-btn-group">
-                                    <button type="button" title="Custom color" class="gh-btn gh-email-design-color custom">{{svg-jar "plus"}}</button>
-                                    <button type="button" title="Black" class="gh-btn gh-email-design-color black"></button>
-                                    <button type="button" title="White" class="gh-btn gh-email-design-color white gh-btn-group-selected"></button>
+                                    <p>White</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 black"></button>
+                                    <button type="button" class="gh-btn gh-email-design-color white gh-btn-group-selected"></button>
                                 </div>
                             </div>
                         </GhFormGroup>
@@ -134,10 +135,11 @@
                             <label class="modal-fullsettings-title">Border color</label>
                             <div class="gh-email-design-color-picker">
                                 <div class="gh-btn-group">
-                                    <button type="button" title="Custom color" class="gh-btn gh-email-design-color custom">{{svg-jar "plus"}}</button>
-                                    <button type="button" title="Brand color" class="gh-btn gh-email-design-color accent"></button>
-                                    <button type="button" title="Black" class="gh-btn gh-email-design-color black"></button>
-                                    <button type="button" title="Transparent" class="gh-btn gh-email-design-color transparent gh-btn-group-selected"></button>
+                                    <p>Transparent</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 accent"></button>
+                                    <button type="button" class="gh-btn gh-email-design-color black"></button>
+                                    <button type="button" class="gh-btn gh-email-design-color transparent gh-btn-group-selected"></button>
                                 </div>
                             </div>
                         </GhFormGroup>
@@ -179,9 +181,10 @@
                             <label class="modal-fullsettings-title">Heading color</label>
                             <div class="gh-email-design-color-picker">
                                 <div class="gh-btn-group">
-                                    <button type="button" title="Custom color" class="gh-btn gh-email-design-color custom">{{svg-jar "plus"}}</button>
-                                    <button type="button" title="Brand color" class="gh-btn gh-email-design-color accent"></button>
-                                    <button type="button" title="Auto"class="gh-btn gh-email-design-color black gh-btn-group-selected"></button>
+                                    <p>Auto</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 accent"></button>
+                                    <button type="button" class="gh-btn gh-email-design-color black gh-btn-group-selected"></button>
                                 </div>
                             </div>
                         </GhFormGroup>
diff --git a/ghost/admin/app/styles/layouts/members.css b/ghost/admin/app/styles/layouts/members.css
index 09a98db569..8ea01e8db2 100644
--- a/ghost/admin/app/styles/layouts/members.css
+++ b/ghost/admin/app/styles/layouts/members.css
@@ -1737,30 +1737,54 @@ p.gh-members-import-errordetail:first-of-type {
 /* -------------------------------------------------------- */
 
 .gh-btn-group .gh-email-design-color {
-    display: none;
+    display: block;
+    opacity: 0;
     position: relative;
     z-index: 2;
+    width: 0;
+    height: 0;
+    margin: 0;
+    border: 0;
+    border-radius: 999px;
+    transition: all .1s 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;
-    border-radius: 999px;
-}
-
-.gh-btn-group:hover .gh-email-design-color {
-    display: block;
+    transition: all .1s ease-in-out;
+    transition-delay: .05s;
 }
 
 .gh-email-design-color.gh-btn-group-selected {
-    display: block;
+    opacity: 1;
+    width: 22px;
+    height: 22px;
+    margin: 0 0 0 5px;
+    border: 1px solid transparent;
 }
 
-.gh-email-design-color.transparent {
+.gh-btn-group .gh-email-design-color.transparent {
     background: transparent;
     border: 1px solid var(--lightgrey);
 }
 
-.gh-email-design-color.transparent::before {
+.gh-email-design-color.transparent::after {
     content: "";
     position: absolute;
     top: 3px;
@@ -1773,20 +1797,20 @@ p.gh-members-import-errordetail:first-of-type {
     transform-origin: left;
 }
 
-.gh-email-design-color.white {
+.gh-btn-group .gh-email-design-color.white {
     background: var(--white) !important;
     border: 1px solid var(--lightgrey-l1);
 }
 
-.gh-email-design-color.black {
+.gh-btn-group .gh-email-design-color.black {
     background: var(--black) !important;
 }
 
-.gh-email-design-color.accent {
+.gh-btn-group .gh-email-design-color.accent {
     background: var(--accent-color) !important;
 }
 
-.gh-email-design-color.custom {
+.gh-btn-group .gh-email-design-color.custom {
     background: var(--white-30) !important;
     border: 1px solid var(--lightgrey);
 }