From 11656ea69626752ed960faf6e35a7f3460dae4e6 Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Mon, 27 Mar 2023 13:15:51 +0200
Subject: [PATCH] Added UI for changing newsletter colors to email settings

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

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 a2676d1ef9..0115bed68f 100644
--- a/ghost/admin/app/components/modals/newsletters/edit/design-labs.hbs
+++ b/ghost/admin/app/components/modals/newsletters/edit/design-labs.hbs
@@ -119,6 +119,30 @@
             {{#liquid-if isOpen class="show-overflow"}}
                 <div class="modal-fullsettings-tab-expanded">
                     <div class="gh-stack">
+                        <GhFormGroup class="gh-stack-item row">
+                            <label class="modal-fullsettings-title">Background color</label>
+                            <div class="gh-email-design-color-picker">
+                                <div class="gh-btn-group">
+                                    <button type="button" title="White" class="gh-btn gh-email-design-color white gh-btn-group-selected"></button>
+                                    <button type="button" title="Grey" class="gh-btn gh-email-design-color grey"></button>
+                                    <button type="button" title="Brand color" class="gh-btn gh-email-design-color accent"></button>
+                                    <button type="button" title="Custom color" class="gh-btn gh-email-design-color custom">{{svg-jar "plus"}}</button>
+                                </div>
+                            </div>
+                        </GhFormGroup>
+
+                        <GhFormGroup class="gh-stack-item row">
+                            <label class="modal-fullsettings-title">Border color</label>
+                            <div class="gh-email-design-color-picker">
+                                <div class="gh-btn-group">
+                                    <button type="button" title="Transparent" class="gh-btn gh-email-design-color transparent gh-btn-group-selected"></button>
+                                    <button type="button" title="Black" class="gh-btn gh-email-design-color black"></button>
+                                    <button type="button" title="Brand color" class="gh-btn gh-email-design-color accent"></button>
+                                    <button type="button" title="Custom color" class="gh-btn gh-email-design-color custom">{{svg-jar "plus"}}</button>
+                                </div>
+                            </div>
+                        </GhFormGroup>
+                        
                         <GhFormGroup class="gh-stack-item row">
                             <label class="modal-fullsettings-title">Post title</label>
                             <div class="for-switch small">
@@ -137,6 +161,7 @@
 
                         {{#if @newsletter.showPostTitleSection}}
                             <GhFormGroup class="gh-stack-item">
+                                <label class="modal-fullsettings-title">Post title style</label>
                                 <div class="gh-email-design-typography-wrapper header">
                                     <div class="modal-fullsettings-radiogroup gh-email-design-typography" data-test-input="titleFontCategory">
                                         <GhFontSelector
@@ -151,6 +176,17 @@
                                 </div>
                             </GhFormGroup>
                         {{/if}}
+                        <GhFormGroup class="gh-stack-item row">
+                            <label class="modal-fullsettings-title">Heading color</label>
+                            <div class="gh-email-design-color-picker">
+                                <div class="gh-btn-group">
+                                    <button type="button" title="Black"class="gh-btn gh-email-design-color black gh-btn-group-selected"></button>
+                                    <button type="button" title="Brand color" class="gh-btn gh-email-design-color accent"></button>
+                                    <button type="button" title="Custom color" class="gh-btn gh-email-design-color custom">{{svg-jar "plus"}}</button>
+                                </div>
+                            </div>
+                        </GhFormGroup>
+
                         <GhFormGroup class="gh-stack-item row">
                             <label class="modal-fullsettings-title">Feature image</label>
                             <div class="for-switch small">
diff --git a/ghost/admin/app/styles/layouts/members.css b/ghost/admin/app/styles/layouts/members.css
index e1ae6454bc..de48f4e678 100644
--- a/ghost/admin/app/styles/layouts/members.css
+++ b/ghost/admin/app/styles/layouts/members.css
@@ -1735,6 +1735,72 @@ p.gh-members-import-errordetail:first-of-type {
 
 /* Email newsletter design settings
 /* -------------------------------------------------------- */
+
+.gh-btn-group .gh-email-design-color {
+    position: relative;
+    width: 22px;
+    height: 22px;
+    border: 1px solid var(--lightgrey);
+    border-radius: 999px;
+    margin-left: 4px;
+}
+
+.gh-email-design-color.gh-btn-group-selected::after {
+    position: absolute;
+    content: "";
+    display: block;
+    top: -4px;
+    right: -4px;
+    bottom: -4px;
+    left: -4px;
+    border: 2px solid var(--green);
+    border-radius: 999px;
+}
+
+.gh-email-design-color.transparent {
+    background: transparent;
+    border: 1px solid var(--midlightgrey-l2);
+}
+
+.gh-email-design-color.transparent::before {
+    content: "";
+    position: absolute;
+    top: 3px;
+    left: 3px;
+    right: 0;
+    border-bottom: 1px solid var(--red);
+    width: 100%;
+    transform: rotate(45deg);
+    transform-origin: left;
+}
+
+.gh-email-design-color.white {
+    background: var(--white) !important;
+}
+
+.gh-email-design-color.grey {
+    background: var(--lightgrey) !important;
+}
+
+.gh-email-design-color.black {
+    background: var(--black) !important;
+}
+
+.gh-email-design-color.accent {
+    background: var(--accent-color) !important;
+}
+
+.gh-email-design-color.custom {
+    background: transparent;
+    border: 1px solid var(--lightgrey);
+}
+
+.gh-email-design-color.custom svg {
+    width: 10px;
+    height: 10px;
+    color: var(--black);
+}
+
 .gh-email-design-alignment {
     display: flex;
     justify-content: space-between;