Updated publish settings page

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

ghost/admin/app/components/editor-labs/modals/publish-flow/options.hbs

@@ -1,4 +1,4 @@
-<div class="gh-publish-title"><span>Another masterpiece.</span> Ready to share it with the world?</div>
+<div class="gh-publish-title"><span>Ready, set, publish.</span> Share it with the world.</div>
 <div class="gh-publish-settings">
     <div class="gh-publish-setting">
         <div class="gh-publish-setting-title">
@@ -20,11 +20,11 @@
         {{/liquid-if}}
     </div>
 
-    {{#if (not-eq @publishOptions.publishType "publish")}}
-        <div class="gh-publish-setting">
-            <div class="gh-publish-setting-title">
-                {{svg-jar "member"}}
-                <div class="gh-publish-setting-trigger">
+    <div class="gh-publish-setting {{if (eq @publishOptions.publishType "publish") "disabled"}}">
+        <div class="gh-publish-setting-title">
+            {{svg-jar "member"}}
+            <div class="gh-publish-setting-trigger">
+                {{#if (not-eq @publishOptions.publishType "publish")}}
                     {{#let (members-count-fetcher query=(hash filter=@publishOptions.recipientFilter)) as |countFetcher|}}
                         {{countFetcher.count}}
                     {{/let}}
@@ -32,10 +32,12 @@
                         <span>{{@publishOptions.newsletter.name}}</span>
                     {{/unless}}
                     subscribers
-                </div>
+                {{else}}
+                    Not sent to any members
+                {{/if}}
             </div>
         </div>
-    {{/if}}
+    </div>
 
     <div class="gh-publish-setting">
         <div class="gh-publish-setting-title">
@@ -51,9 +53,11 @@
             </button>
         </div>
         {{#liquid-if (eq this.openSection "publishAt")}}
-            <EditorLabs::PublishOptions::PublishAt
-                @publishOptions={{@publishOptions}}
-            />
+            <div class="gh-publish-setting-form">
+                <EditorLabs::PublishOptions::PublishAt
+                    @publishOptions={{@publishOptions}}
+                />
+            </div>
         {{/liquid-if}}
     </div>
 

ghost/admin/app/components/editor-labs/publish-management.js

@@ -83,12 +83,12 @@ export class PublishOptions {
         }, {
             value: 'publish',
             label: 'Publish only',
-            display: 'Publish on site',
+            display: 'Publish',
             confirmButton: 'Publish'
         }, {
             value: 'send',
             label: 'Email only',
-            display: 'Send email',
+            display: 'Email',
             confirmButton: 'Send',
             disabled: this.emailDisabled
         }];

ghost/admin/app/components/editor-labs/publish-options/publish-type.hbs

@@ -1,16 +1,19 @@
-<fieldset>
+<fieldset class="gh-publish-types">
     {{#each @publishOptions.publishTypeOptions as |option|}}
-        <div class="radio-button">
-            <input
-                type="radio"
-                name="publish-type"
-                id="publish-type-{{option.value}}"
-                value={{option.value}}
-                checked={{eq option.value @publishOptions.selectedPublishTypeOption.value}}
-                disabled={{option.disabled}}
-                {{on "change" this.onChange}}
-            >
-            <label for="publish-type-{{option.value}}">{{option.label}}</label>
+        <div class="gh-btn gh-btn-outline gh-btn-large">
+            <span>
+                <input
+                    type="radio"
+                    name="publish-type"
+                    id="publish-type-{{option.value}}"
+                    class="gh-radio-button"
+                    value={{option.value}}
+                    checked={{eq option.value @publishOptions.selectedPublishTypeOption.value}}
+                    disabled={{option.disabled}}
+                    {{on "change" this.onChange}}
+                >
+                <label for="publish-type-{{option.value}}">{{option.label}}</label>
+            </span>
         </div>
     {{/each}}
 </fieldset>

ghost/admin/app/styles/components/publishmenu.css

@@ -459,18 +459,19 @@
     display: flex;
     flex-direction: column;
     height: 100%;
-    width: 640px;
+    width: 740px;
     margin: 0 auto 8rem;
     padding-top: 11vw;
     margin-bottom: 11vw;
 }
 
 .gh-publish-title {
-    margin-bottom: 4.6rem;
+    margin: 2px 0 4.6rem;
     color: var(--black);
-    font-size: 3.6rem;
+    font-size: 4.8rem;
     font-weight: 700;
-    line-height: 1.3em;
+    letter-spacing: -.017em;
+    line-height: 1.1em;
 }
 
 .gh-publish-title span {
@@ -490,6 +491,11 @@
     margin-bottom: 1.6rem;
 }
 
+.gh-publish-setting.disabled {
+    opacity: .3;
+    cursor: default;
+}
+
 .gh-publish-setting-title {
     display: flex;
     align-items: center;
@@ -516,34 +522,29 @@
     cursor: pointer;
 }
 
-.gh-publish-setting-title span {
-    border-bottom: 0;
-    font-weight: 700;
-}
-
 .gh-publish-setting input[type="radio"]:disabled + label {
     color: var(--midlightgrey);
 }
 
-.gh-publish-setting fieldset {
-    margin: 0;
-    margin-top: 1.6rem;
-    background-color: var(--whitegrey);
+.gh-publish-setting-form {
+    margin: 2.4rem 0 2rem 3.6rem;
+    background-color: var(--white);
 }
 
-.gh-publish-setting .radio-button {
+.gh-publish-setting-form .gh-publish-types {
     display: flex;
-    flex-direction: row;
-    align-items: center;
-    column-gap: 5px;
-    padding: 10px;
-    border-bottom: 1px solid var(--white);
+    margin: 0;
 }
 
-.gh-publish-setting .gh-publishmenu-radio {
-    margin: 0;
-    padding: 20px 10px;
-    border-bottom: 1px solid var(--white);
+.gh-publish-types .gh-btn {
+    margin-right: 1.2rem;
+    cursor: pointer;
+    border-radius: 21px;
+    box-shadow: none;
+}
+
+.gh-publish-types .gh-radio-button {
+    display: none;
 }
 
 .gh-publish-cta {