Updated confirmation and completed pages of publishing flow

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

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

@@ -1,17 +1,10 @@
 {{#let @publishOptions.post as |post|}}
     <div class="gh-publish-title">
-        Your {{post.displayName}} is
-        {{#if post.isScheduled}}
-            scheduled
-        {{else if post.emailOnly}}
-            emailed
-        {{else}}
-            live
-        {{~/if~}}
-        !
+        <span>...aand it's out there.</span>
+        Now that's something to smile about.
     </div>
 
-    <p>
+    <p class="gh-publish-confirmation">
         {{#if post.isScheduled}}
             {{#let (moment-site-tz post.publishedAtUTC) as |scheduledAt|}}
                 On
@@ -26,10 +19,10 @@
             Your
         {{/if}}
 
-        {{post.displayName}} was
+        {{post.displayName}} is
 
         {{#if post.email}}
-            delivered to
+            on its way to
 
             <strong>{{pluralize post.email.emailCount "member"}}</strong>
 
@@ -44,7 +37,11 @@
     </p>
 
     <div class="gh-publish-cta">
-        <button type="button" class="gh-btn gh-btn-primary gh-btn-large" {{on "click" @close}}><span>Close</span></button>
-        <a href={{post.url}} class="gh-btn gh-btn-link gh-btn-large" target="_blank" rel="noopener noreferrer">Open {{post.displayName}} in new tab</a>
+        <button type="button" class="gh-btn gh-btn-black gh-btn-large" {{on "click" @close}}><span>Back to {{post.displayName}}</span></button>
+        {{#unless post.emailOnly}}
+            <div class="gh-publish-cta-secondary">
+                <a href={{post.url}} class="gh-btn gh-btn-link gh-btn-large" target="_blank" rel="noopener noreferrer">View published post on site</a>
+            </div>
+        {{/unless}}
     </div>
 {{/let}}

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

@@ -1,9 +1,6 @@
-<div class="gh-publish-title">
-    Ready to go?<br>
-    Here's what happens next.
-</div>
+<div class="gh-publish-title"><span>Ready, set, publish.</span> Share it with the world.</div>
 
-<p>
+<p class="gh-publish-confirmation">
     {{#if @publishOptions.isScheduled}}
         {{#let (moment-site-tz @publishOptions.scheduledAtUTC) as |scheduledAt|}}
             On
@@ -38,7 +35,7 @@
         will be published on your site.
     {{/if}}
 
-    Sound good?
+    Are you good to go?
 </p>
 
 <div class="gh-publish-cta">
@@ -47,7 +44,10 @@
         @buttonText={{@publishOptions.selectedPublishTypeOption.confirmButton}}
         @runningText={{if @publishOptions.willOnlyEmail "Sending" "Publishing"}}
         @successText={{if @publishOptions.willOnlyEmail "Sent" "Published"}}
-        @class="gh-btn gh-btn-icon gh-btn-green gh-btn-large"
+        @class="gh-btn gh-btn-gradient gh-btn-large"
     />
-    <button type="button" class="gh-btn gh-btn-link gh-btn-large" {{on "click" @cancel}}><span>Back to publish settings</span></button>
+    <div class="gh-publish-cta-secondary">
+        Or 
+        <button type="button" class="gh-btn gh-btn-link gh-btn-large" {{on "click" @close}}>change settings</button>
+    </div>
 </div>

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

@@ -82,6 +82,9 @@
 </div>
 
 <div class="gh-publish-cta">
-    <button type="button" class="gh-btn gh-btn-black gh-btn-large" {{on "click" @confirm}}><span>Continue &rarr;</span></button>
-    <button type="button" class="gh-btn gh-btn-link gh-btn-large" {{on "click" @close}}><span>Back to edit</span></button>
+    <button type="button" class="gh-btn gh-btn-black gh-btn-large" {{on "click" @confirm}}><span>Looks good, next &rarr;</span></button>
+    <div class="gh-publish-cta-secondary">
+        Or 
+        <button type="button" class="gh-btn gh-btn-link gh-btn-large" {{on "click" @close}}>continue editing</button>
+    </div>
 </div>

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

@@ -88,18 +88,18 @@ export class PublishOptions {
             value: 'publish+send', // internal
             label: 'Publish and email', // shown in expanded options
             display: 'Publish and email', // shown in option title
-            confirmButton: 'Publish and send', // shown in confirm step
+            confirmButton: 'Yes, publish and send', // shown in confirm step
             disabled: this.emailDisabled
         }, {
             value: 'publish',
             label: 'Publish only',
             display: 'Publish',
-            confirmButton: 'Publish'
+            confirmButton: 'Yes, publish on site'
         }, {
             value: 'send',
             label: 'Email only',
             display: 'Email',
-            confirmButton: 'Send',
+            confirmButton: 'Yes, send by email',
             disabled: this.emailDisabled
         }];
     }

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

@@ -479,13 +479,11 @@
 }
 
 .gh-publish-title span {
-    background: linear-gradient(135deg,#34b743 5%,#24db39);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
+    color: var(--green);
 }
 
 .gh-publish-settings {
-    margin-bottom: 6rem;
+    margin-bottom: 5.2rem;
     width: 100%;
 }
 
@@ -572,9 +570,67 @@
 
 .gh-publish-cta {
     display: flex;
-    width: 100%;
+    flex-direction: column;
+    width: max-content;
 }
 
-.gh-publish-cta .gh-btn-black {
-    margin-right: 1.2rem;
+.gh-publish-cta .gh-btn {
+    width: max-content;
 }
+
+.gh-publish-cta .gh-btn-gradient {
+    color: #fff;
+    fill: #fff;
+    background: rgba(0, 0, 0, 0) linear-gradient(94.75deg, 
+                #a7f500 0%, 
+                #60d20d 36.66%,
+                #30cf43 56.66%,  
+                #1dc32e 78.76%, 
+                #009b7f 100%) 
+                repeat scroll 98% 0% / 200% 100%;
+    font-weight: 500;
+    transition: background-color 200ms ease 0s, background-position-x 400ms ease-in-out 0s;
+}
+
+.gh-publish-cta .gh-btn-gradient:hover {
+    color: #fff !important;
+    background-position-x: 20%;
+    transition: background-color 200ms ease 0s, background-position-x 400ms ease-in-out 0s;
+}
+
+.gh-publish-cta .gh-btn-gradient:active,
+.gh-publish-cta .gh-btn-gradient:focus {
+    background-position-x: 20%;
+    transition: background-color 200ms ease 0s, background-position-x 400ms ease-in-out 0s;
+}
+
+.gh-publish-cta-secondary {
+    display: block;
+    overflow: hidden;
+    margin-top: 1rem;
+    height: 40px;
+    color: var(--midgrey);
+    font-size: 1.4rem;
+    font-weight: 400;
+    line-height: 40px;
+    letter-spacing: .4px;
+    text-align: left;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.gh-publish-cta-secondary .gh-btn-link {
+    display: inline;
+    padding: 0;
+    color: var(--darkgrey);
+    font-size: 1.45rem;
+    text-align: left;
+}
+
+.gh-publish-confirmation {
+    margin-bottom: 5.2rem;
+    color: var(--black);
+    font-size: 1.9rem;
+    font-weight: 400;
+    line-height: 1.35em;
+}