From f4405927eee692181db60ca4e04966059c0f2b4a Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Fri, 6 May 2022 13:54:15 +0100
Subject: [PATCH] Updated publish settings forms

Refs https://github.com/TryGhost/Team/issues/1544
---
 .../modals/publish-flow/options.hbs           |  2 +-
 .../publish-options/email-recipients.hbs      |  9 ++-
 .../publish-options/publish-at.hbs            | 39 ++++++------
 .../gh-members-recipient-select.hbs           |  4 +-
 .../app/styles/components/publishmenu.css     | 62 ++++++++++++++-----
 5 files changed, 73 insertions(+), 43 deletions(-)

diff --git a/ghost/admin/app/components/editor-labs/modals/publish-flow/options.hbs b/ghost/admin/app/components/editor-labs/modals/publish-flow/options.hbs
index f580b58d33..91eeba2a3f 100644
--- a/ghost/admin/app/components/editor-labs/modals/publish-flow/options.hbs
+++ b/ghost/admin/app/components/editor-labs/modals/publish-flow/options.hbs
@@ -94,7 +94,7 @@
             </span>
         </button>
         {{#liquid-if (eq this.openSection "publishAt")}}
-            <div class="gh-publish-setting-form">
+            <div class="gh-publish-setting-form last">
                 <EditorLabs::PublishOptions::PublishAt
                     @publishOptions={{@publishOptions}}
                 />
diff --git a/ghost/admin/app/components/editor-labs/publish-options/email-recipients.hbs b/ghost/admin/app/components/editor-labs/publish-options/email-recipients.hbs
index 99f529d02d..e0f8b8ccbf 100644
--- a/ghost/admin/app/components/editor-labs/publish-options/email-recipients.hbs
+++ b/ghost/admin/app/components/editor-labs/publish-options/email-recipients.hbs
@@ -4,17 +4,16 @@
         to start sending newsletters!
     </p>
 {{else}}
-    <div class="form-group max-width">
+    <div class="form-group max-width mb0">
         {{#if (gt @publishOptions.newsletters.length 1)}}
-            <div class="mb3">
-                Newsletter:
+            <div class="mb4">
                 <PowerSelect
                     @selected={{@publishOptions.newsletter}}
                     @options={{@publishOptions.newsletters}}
                     @onChange={{@publishOptions.setNewsletter}}
                     @triggerComponent="gh-power-select/trigger"
-                    @triggerClass="gh-publishmenu-newsletter-trigger"
-                    @dropdownClass="gh-publishmenu-newsletter-dropdown"
+                    @triggerClass="gh-publish-newsletter-trigger"
+                    @dropdownClass="gh-publish-newsletter-dropdown"
                     as |newsletter|
                 >
                     {{newsletter.name}}
diff --git a/ghost/admin/app/components/editor-labs/publish-options/publish-at.hbs b/ghost/admin/app/components/editor-labs/publish-options/publish-at.hbs
index 0582cdb4dd..902143b608 100644
--- a/ghost/admin/app/components/editor-labs/publish-options/publish-at.hbs
+++ b/ghost/admin/app/components/editor-labs/publish-options/publish-at.hbs
@@ -1,25 +1,24 @@
 {{!-- template-lint-disable no-invalid-interactive --}}
 <fieldset>
-    <div class="gh-publishmenu-radio {{unless @publishOptions.isScheduled "active"}}" {{on "click" (fn @publishOptions.toggleScheduled false)}}>
-        <div class="gh-publishmenu-radio-button" data-test-publishmenu-published-option></div>
-        <div class="gh-publishmenu-radio-content">
-            <div class="gh-publishmenu-radio-label">Set it live now</div>
-        </div>
-    </div>
-    <div class="gh-publishmenu-radio {{if @publishOptions.isScheduled "active"}}" {{on "click" (fn @publishOptions.toggleScheduled true)}}>
-        <div class="gh-publishmenu-radio-button" data-test-publishmenu-scheduled-option></div>
-        <div class="gh-publishmenu-radio-content">
-            <div class="gh-publishmenu-radio-label">Schedule it for later</div>
-            <GhDateTimePicker
-                @date={{moment-format (moment-site-tz @publishOptions.scheduledAtUTC) "YYYY-MM-DD"}}
-                @time={{moment-format (moment-site-tz @publishOptions.scheduledAtUTC) "HH:mm"}}
-                @setDate={{this.setDate}}
-                @setTime={{this.setTime}}
-                @minDate={{@publishOptions.minScheduledAt}}
-                @isActive={{@publishOptions.isScheduled}}
-                @renderInPlace={{false}}
-            />
-            <div class="gh-publishmenu-radio-desc">Set automatic future publish date</div>
+    <div class="gh-publish-schedule">
+        <div class="gh-radio {{unless @publishOptions.isScheduled "active"}}" {{on "click" (fn @publishOptions.toggleScheduled false)}}>
+            <div class="gh-radio-button" data-test-publishmenu-published-option></div>
+            <label>Set it live now</label>
+        </div>
+        <div class="gh-radio {{if @publishOptions.isScheduled "active"}}" {{on "click" (fn @publishOptions.toggleScheduled true)}}>
+            <div class="gh-radio-button" data-test-publishmenu-scheduled-option></div>
+            <label>Schedule it for later</label>
         </div>
     </div>
+    {{#if @publishOptions.isScheduled}}
+        <GhDateTimePicker
+            @date={{moment-format (moment-site-tz @publishOptions.scheduledAtUTC) "YYYY-MM-DD"}}
+            @time={{moment-format (moment-site-tz @publishOptions.scheduledAtUTC) "HH:mm"}}
+            @setDate={{this.setDate}}
+            @setTime={{this.setTime}}
+            @minDate={{@publishOptions.minScheduledAt}}
+            @isActive={{@publishOptions.isScheduled}}
+            @renderInPlace={{false}}
+        />
+    {{/if}}
 </fieldset>
\ No newline at end of file
diff --git a/ghost/admin/app/components/gh-members-recipient-select.hbs b/ghost/admin/app/components/gh-members-recipient-select.hbs
index e0e27b7dd7..a92e887b1d 100644
--- a/ghost/admin/app/components/gh-members-recipient-select.hbs
+++ b/ghost/admin/app/components/gh-members-recipient-select.hbs
@@ -1,6 +1,6 @@
 <div class="gh-publishmenu-send-to-option">
     <p>
-        Free members
+        Free subscribers
         {{#let (members-count-fetcher query=(hash filter=(concat @newsletter.recipientFilter "+status:free"))) as |countFetcher|}}
             <span class="gh-publishmenu-emailcount" data-test-email-count="free-members">({{countFetcher.count}})</span>
         {{/let}}
@@ -24,7 +24,7 @@
 {{#if this.isPaidAvailable}}
     <div class="gh-publishmenu-send-to-option">
         <p>
-            Paid members
+            Paid subscribers
             {{#let (members-count-fetcher query=(hash filter=(concat @newsletter.recipientFilter "+status:-free"))) as |countFetcher|}}
                 <span class="gh-publishmenu-emailcount" data-test-email-count="paid-members">({{countFetcher.count}})</span>
             {{/let}}
diff --git a/ghost/admin/app/styles/components/publishmenu.css b/ghost/admin/app/styles/components/publishmenu.css
index a67a13a97e..2235098190 100644
--- a/ghost/admin/app/styles/components/publishmenu.css
+++ b/ghost/admin/app/styles/components/publishmenu.css
@@ -373,12 +373,6 @@
     right: 10px;
 }
 
-.gh-publishmenu-newsletter-trigger svg {
-    position: absolute;
-    top: 50%;
-    right: 10px;
-}
-
 .gh-publishmenu-newsletter-dropdown {
     z-index: 99999;
 }
@@ -458,7 +452,7 @@
     display: flex;
     flex-direction: column;
     height: 100%;
-    width: 740px;
+    width: 640px;
     margin: 0 auto 8rem;
     padding-top: 11vw;
     margin-bottom: 11vw;
@@ -554,20 +548,31 @@
 }
 
 .gh-publish-setting-form {
-    margin: 1rem 0 3.6rem;
+    margin: 1.6rem 0 4rem;
     background-color: var(--white);
 }
 
-.gh-publish-setting-form .gh-publish-types {
+.gh-publish-setting-form.last {
+    margin-bottom: 0;
+}
+
+.gh-publish-setting-form.last fieldset {
+    margin-bottom: 0;
+}
+
+.gh-publish-types,
+.gh-publish-schedule {
     display: flex;
     margin: 0;
 }
 
-.gh-publish-types .gh-radio-button {
+.gh-publish-types .gh-radio-button,
+.gh-publish-schedule .gh-radio-button {
     display: none;
 }
 
-.gh-publish-types label {
+.gh-publish-types label,
+.gh-publish-schedule label {
     display: block;
     height: 40px;
     margin-right: 1.2rem;
@@ -583,7 +588,8 @@
     border-radius: 21px;
 }
 
-.gh-publish-types .gh-radio-button:checked + label {
+.gh-publish-types .gh-radio-button:checked + label,
+.gh-publish-schedule .gh-radio.active label {
     padding: 0 19px;
     border: 2px solid var(--black);
     color: var(--black);
@@ -591,10 +597,36 @@
     background: var(--whitegrey-l2);
 }
 
-.gh-publish-types label:hover {
+.gh-publish-types label:hover,
+.gh-publish-schedule label:hover {
     color: var(--middarkgrey-d1);
 }
 
+.gh-publish-newsletter-trigger {
+    padding: 8px 16px;
+    font-size: 1.45rem;
+}
+
+.gh-publish-newsletter-trigger svg {
+    position: absolute;
+    top: 50%;
+    right: 16px;
+}
+
+.gh-publish-newsletter-dropdown {
+    z-index: 99999;
+    padding: 4px 0;
+}
+
+.gh-publish-newsletter-dropdown .ember-power-select-option {
+    padding: 8px 16px;
+}
+
+.gh-publish-newsletter-dropdown .ember-power-select-option[aria-selected="true"] {
+    color: var(--black);
+    font-weight: 600;
+}
+
 .gh-publish-cta {
     display: flex;
     flex-direction: column;
@@ -655,9 +687,9 @@
 }
 
 .gh-publish-confirmation {
-    margin-bottom: 5.2rem;
+    margin-bottom: 7rem;
     color: var(--black);
-    font-size: 1.9rem;
+    font-size: 1.8rem;
     font-weight: 400;
     line-height: 1.35em;
 }
\ No newline at end of file