Improved nav buttons in launch-site wizard

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

ghost/admin/app/components/gh-launch-wizard/connect-stripe.hbs

@@ -93,13 +93,13 @@
         {{/if}}
     </div>
     <div class="gh-launch-wizard-nav-buttons">
-        <button type="button" class="gh-btn gh-btn-icon gh-btn-large mr2" {{on "click" @backStep}}><span>{{svg-jar "arrow-left"}}</span></button>
+        <button type="button" class="gh-btn gh-btn-icon-grey gh-btn-large w-30" {{on "click" @backStep}}><span>{{svg-jar "arrow-left-tail"}}</span></button>
 
         <GhTaskButton
             @buttonText="Save and continue"
             @task={{this.saveAndContinueTask}}
             @runningText="Saving"
-            @class="right gh-btn gh-btn-black gh-btn-large gh-btn-icon"
+            @class="w-70 ml4 right gh-btn gh-btn-black gh-btn-large gh-btn-icon"
             data-test-button="wizard-next"
         />
     </div>

ghost/admin/app/components/gh-launch-wizard/customise-design.hbs

@@ -156,7 +156,7 @@
             </div>
 
             <div class="gh-launch-wizard-nav-buttons">
-                <button type="button" class="gh-btn gh-btn-black gh-btn-large" {{on "click" @nextStep}} data-test-button="wizard-next"><span>Next step</span></button>
+                <button type="button" class="gh-btn gh-btn-black gh-btn-icon-right gh-btn-large w-100" {{on "click" @nextStep}} data-test-button="wizard-next"><span>Next step {{svg-jar "arrow-right-tail"}}</span></button>
             </div>
         </section>
     </div>

ghost/admin/app/components/gh-launch-wizard/finalise.hbs

@@ -5,12 +5,12 @@
         <p>You can further customise your site in Settings.</p>
     </div>
     <div class="gh-launch-wizard-nav-buttons">
-        <button type="button" class="gh-btn gh-btn-icon gh-btn-large mr2" {{on "click" @backStep}}><span>{{svg-jar "arrow-left"}}</span></button>
+        <button type="button" class="gh-btn gh-btn-icon-grey gh-btn-large w-30" {{on "click" @backStep}}><span>{{svg-jar "arrow-left-tail"}}</span></button>
         <GhTaskButton
             @task={{this.finaliseTask}}
             @buttonText="Launch your site!"
             @runningText="Launching..."
-            @class="gh-btn gh-btn-black gh-btn-large gh-btn-icon"
+            @class="w-70 ml4 gh-btn gh-btn-black gh-btn-large gh-btn-icon"
             data-test-button="wizard-finish"
         />
     </div>

ghost/admin/app/components/gh-launch-wizard/set-pricing.hbs

@@ -117,15 +117,16 @@
     </div>
 
     <div class="gh-launch-wizard-nav-buttons">
-        <button type="button" class="gh-btn gh-btn-icon gh-btn-large mr2" {{on "click" @backStep}}><span>{{svg-jar "arrow-left"}}</span></button>
+        <button type="button" class="gh-btn gh-btn-icon-grey gh-btn-large w-30" {{on "click" @backStep}}><span>{{svg-jar "arrow-left-tail"}}</span></button>
 
         {{!-- TODO: reset "failed" state automatically --}}
         <GhTaskButton
-            @buttonText="Save and continue"
             @task={{this.saveAndContinue}}
-            @runningText="Launching"
-            @class="right gh-btn gh-btn-black gh-btn-large gh-btn-icon"
+            @runningText="Saving"
+            @class="w-70 ml4 right gh-btn gh-btn-black gh-btn-large gh-btn-icon-right"
             data-test-button="wizard-next"
-        />
+        >
+            <span>Save and continue{{svg-jar "arrow-right-tail"}}</span>
+        </GhTaskButton>
     </div>
 </div>

ghost/admin/app/styles/patterns/buttons.css

@@ -36,11 +36,11 @@
 }
 
 .gh-btn-large span {
-    height: 45px;
+    height: 48px;
     padding: 0 24px;
     font-size: 1.5rem;
     font-weight: 500;
-    line-height: 44px;
+    line-height: 46px;
     letter-spacing: .4px;
 }
 
@@ -62,6 +62,7 @@ fieldset[disabled] .gh-btn {
 
 .gh-btn svg {
     display: inline-block;
+    vertical-align: middle;
 }
 
 /* Button highlights
@@ -303,6 +304,8 @@ fieldset[disabled] .gh-btn {
 svg.gh-btn-icon-right {
     margin-left: 0.5em;
     margin-right: 0;
+    width: 16px;
+    height: auto;
 }
 
 .gh-btn-icon svg path {
@@ -314,6 +317,8 @@ svg.gh-btn-icon-right {
 }
 
 .gh-btn-icon-grey svg {
+    width: 16px;
+    height: auto;
     fill: var(--midgrey);
 }
 

ghost/admin/public/assets/icons/arrow-left-tail.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M24 12c0-.576-.439-1.043-.98-1.043H.98c-.541 0-.98.467-.98 1.043 0 .576.439 1.043.98 1.043h22.04c.541 0 .98-.467.98-1.043z"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M11.958.306a.938.938 0 00-1.385 0L.287 11.262a1.092 1.092 0 000 1.476l10.286 10.956a.938.938 0 001.385 0 1.092 1.092 0 000-1.475L2.365 12l9.593-10.219a1.092 1.092 0 000-1.475z"/>
+</svg>

ghost/admin/public/assets/icons/arrow-right-tail.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M.75 12.5c0-.576.439-1.043.98-1.043h22.04c.541 0 .98.467.98 1.043 0 .576-.439 1.043-.98 1.043H1.73c-.541 0-.98-.467-.98-1.043z"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M12.792.806a.938.938 0 011.385 0l10.286 10.956a1.092 1.092 0 010 1.476L14.177 24.194a.938.938 0 01-1.385 0 1.092 1.092 0 010-1.475L22.385 12.5 12.792 2.281a1.092 1.092 0 010-1.475z"/>
+</svg>