From 76419917bfd7223c368845cd8be29a87d31f84a6 Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Tue, 26 Jan 2021 16:40:14 +0100
Subject: [PATCH] Changed design for first step of the launch wizard

---
 .../gh-launch-wizard/customise-design.hbs     | 47 ++++++++++---------
 .../app/styles/layouts/fullscreen-wizard.css  | 23 ++++++++-
 ghost/admin/app/styles/layouts/settings.css   |  2 +-
 ghost/admin/app/templates/launch.hbs          | 10 ++--
 .../app/templates/launch/customise-design.hbs |  2 +-
 ghost/admin/app/templates/settings/design.hbs |  4 +-
 6 files changed, 58 insertions(+), 30 deletions(-)

diff --git a/ghost/admin/app/components/gh-launch-wizard/customise-design.hbs b/ghost/admin/app/components/gh-launch-wizard/customise-design.hbs
index 89795263b7..6ba87d3875 100644
--- a/ghost/admin/app/components/gh-launch-wizard/customise-design.hbs
+++ b/ghost/admin/app/components/gh-launch-wizard/customise-design.hbs
@@ -1,15 +1,15 @@
 <div class="flex mb4 br3 bg-white">
-    <div class="w-30 pa4">
-        <h2>Customise</h2>
+    <div class="w-30 vh-75 mt12 ml20 pr6">
+        <h2>Customise your site</h2>
 
-        <div class="mb6" data-test-setting="icon">
+        <div class="mt10 mb10" data-test-setting="icon">
             <GhUploader
                 @extensions={{this.iconExtensions}}
                 @paramsHash={{hash purpose="icon"}}
                 @onComplete={{action "imageUploaded" "icon"}}
                 as |uploader|
             >
-            <div class="gh-setting-content pb2">
+            <div class="gh-setting-content pb4">
                 <div class="gh-setting-title">Publication icon</div>
                 <div class="gh-setting-desc">A square, social icon used in the UI of your publication, at least 60x60px</div>
                 {{#each uploader.errors as |error|}}
@@ -21,10 +21,12 @@
                 {{#if uploader.isUploading}}
                     {{uploader.progressBar}}
                 {{else if this.settings.icon}}
-                    <img class="blog-icon" src="{{this.settings.icon}}" {{on "click" this.triggerFileDialog}} alt="icon" data-test-icon-img>
-                    <button type="button" class="gh-setting-action-smallimg-delete" {{on "click" (fn this.removeImage "icon")}} data-test-delete-image="icon">
-                        <span>delete</span>
-                    </button>
+                    <div class="flex items-end">
+                        <img class="blog-icon" src="{{this.settings.icon}}" {{on "click" this.triggerFileDialog}} alt="icon" data-test-icon-img>
+                        <button type="button" class="gh-setting-action-smallimg-delete" {{on "click" (fn this.removeImage "icon")}} data-test-delete-image="icon">
+                            <span class="ml2">delete</span>
+                        </button>
+                    </div>
                 {{else}}
                     <button type="button" class="gh-btn" {{on "click" triggerFileDialog}} data-test-image-upload-btn="icon">
                         <span>Upload Image</span>
@@ -37,13 +39,13 @@
             </GhUploader>
         </div>
 
-        <div class="mb6" data-test-setting="logo">
+        <div class="mb10" data-test-setting="logo">
             <GhUploader
                 @extensions={{this.imageExtensions}}
                 @onComplete={{action "imageUploaded" "logo"}}
                 as |uploader|
             >
-            <div class="gh-setting-content pb2">
+            <div class="gh-setting-content pb4">
                 <div class="gh-setting-title">Publication logo</div>
                 <div class="gh-setting-desc">The primary logo for your brand displayed across your theme, should be transparent and at least 600px x 72px</div>
                 {{#each uploader.errors as |error|}}
@@ -54,10 +56,12 @@
                 {{#if uploader.isUploading}}
                     {{uploader.progressBar}}
                 {{else if this.settings.logo}}
-                    <img class="blog-logo" src="{{this.settings.logo}}" {{on "click" this.triggerFileDialog}} alt="logo" data-test-logo-img>
-                    <button type="button" class="gh-setting-action-smallimg-delete" {{on "click" (fn this.removeImage "logo")}} data-test-delete-image="logo">
-                        <span>delete</span>
-                    </button>
+                    <div class="flex items-end">
+                        <img class="blog-logo" src="{{this.settings.logo}}" {{on "click" this.triggerFileDialog}} alt="logo" data-test-logo-img>
+                        <button type="button" class="gh-setting-action-smallimg-delete" {{on "click" (fn this.removeImage "logo")}} data-test-delete-image="logo">
+                            <span class="ml2">delete</span>
+                        </button>
+                    </div>
                 {{else}}
                     <button type="button" class="gh-btn" {{on "click" this.triggerFileDialog}} data-test-image-upload-btn="logo">
                         <span>Upload Image</span>
@@ -70,13 +74,13 @@
             </GhUploader>
         </div>
 
-        <div class="mb6" data-test-setting="coverImage">
+        <div class="mb12" data-test-setting="coverImage">
             <GhUploader
                 @extensions={{this.imageExtensions}}
                 @onComplete={{action "imageUploaded" "coverImage"}}
                 as |uploader|
             >
-            <div class="gh-setting-content pb2">
+            <div class="gh-setting-content pb4">
                 <div class="gh-setting-title">Publication cover</div>
                 <div class="gh-setting-desc">An optional large background image for your site</div>
                 {{#each uploader.errors as |error|}}
@@ -102,11 +106,12 @@
             </div>
             </GhUploader>
         </div>
+
+        <button type="button" class="gh-btn gh-btn-blue" {{on "click" @afterComplete}} data-test-button="wizard-next"><span>Next step</span></button>
+
     </div>
 
-    <div class="relative flex-grow-1">
-        <GhSiteIframe class="br3 br--right" @guid={{this.previewGuid}}></GhSiteIframe>
+    <div class="relative flex-grow-1 mt12 ml12 mr20">
+        <GhSiteIframe class="gh-launch-wizard-preview" @guid={{this.previewGuid}}></GhSiteIframe>
     </div>
-</div>
-
-<button type="button" class="right gh-btn gh-btn-blue" {{on "click" @afterComplete}} data-test-button="wizard-next"><span>Next</span></button>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/ghost/admin/app/styles/layouts/fullscreen-wizard.css b/ghost/admin/app/styles/layouts/fullscreen-wizard.css
index 5c3c096f82..8b636bc279 100644
--- a/ghost/admin/app/styles/layouts/fullscreen-wizard.css
+++ b/ghost/admin/app/styles/layouts/fullscreen-wizard.css
@@ -6,6 +6,27 @@
     left: 0;
     z-index: 1000;
     height: 100vh;
-    background: var(--whitegrey);
+    background: var(--white);
     overflow: auto;
 }
+
+.gh-launch-wizard-step-indicator {
+    font-size: 1.2rem;
+    font-weight: 500;
+    letter-spacing: 0.1px;
+    color: var(--midgrey);
+    text-transform: uppercase;
+}
+
+.gh-launch-wizard-preview {
+    border-radius: 6px;
+    box-shadow: 
+        0 0 0 1px rgba(0,0,0,0.02),
+        0 2.8px 2.2px rgba(0, 0, 0, 0.02),
+        0 6.7px 5.3px rgba(0, 0, 0, 0.028),
+        0 12.5px 10px rgba(0, 0, 0, 0.035),
+        0 22.3px 17.9px rgba(0, 0, 0, 0.042),
+        0 41.8px 33.4px rgba(0, 0, 0, 0.05),
+        0 100px 80px rgba(0, 0, 0, 0.07);
+    ;
+}
\ No newline at end of file
diff --git a/ghost/admin/app/styles/layouts/settings.css b/ghost/admin/app/styles/layouts/settings.css
index 5555bcdfff..e099ab201d 100644
--- a/ghost/admin/app/styles/layouts/settings.css
+++ b/ghost/admin/app/styles/layouts/settings.css
@@ -227,8 +227,8 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    width: 100%;
     color: var(--midgrey);
+    margin-top: 8px;
     text-decoration: none;
     font-size: 13px;
     line-height: 10px;
diff --git a/ghost/admin/app/templates/launch.hbs b/ghost/admin/app/templates/launch.hbs
index 5b18746d2b..9fb1268a16 100644
--- a/ghost/admin/app/templates/launch.hbs
+++ b/ghost/admin/app/templates/launch.hbs
@@ -1,8 +1,10 @@
 <div class="fullscreen-wizard-container">
-    <button type="button" class="close absolute top-6 right-6 w6" title="Close" {{on "click" this.close}} data-test-button="close-wizard">
-        {{svg-jar "close"}}
-        <span class="hidden">Close</span>
-    </button>
+    <div class="mt8 ml20 mr20 flex justify-between-l items-center">
+        <div class="ttu gh-launch-wizard-step-indicator">Step 1</div>
+        <button type="button" class="close gh-btn" title="Close" {{on "click" this.close}} data-test-button="close-wizard">
+            <span>Save and exit</span>
+        </button>
+    </div>
 
     {{outlet}}
 </div>
\ No newline at end of file
diff --git a/ghost/admin/app/templates/launch/customise-design.hbs b/ghost/admin/app/templates/launch/customise-design.hbs
index cdbc952e63..6e8f1254c4 100644
--- a/ghost/admin/app/templates/launch/customise-design.hbs
+++ b/ghost/admin/app/templates/launch/customise-design.hbs
@@ -1,4 +1,4 @@
-<section class="ma19">
+<section class="mt8 bt b--whitegrey">
     <GhLaunchWizard::CustomiseDesign
         @afterComplete={{this.goToNext}}
     />
diff --git a/ghost/admin/app/templates/settings/design.hbs b/ghost/admin/app/templates/settings/design.hbs
index 52bcd5736b..ba8418004c 100644
--- a/ghost/admin/app/templates/settings/design.hbs
+++ b/ghost/admin/app/templates/settings/design.hbs
@@ -34,7 +34,7 @@
                         <div class="gh-setting-error" data-test-error="icon">{{or error.context error.message}}</div>
                     {{/each}}
                 </div>
-                <div class="gh-setting-action gh-setting-action-smallimg">
+                <div class="gh-setting-action gh-setting-action-smallimg flex flex-column">
                     {{#if uploader.isUploading}}
                         {{uploader.progressBar}}
                     {{else if this.settings.icon}}
@@ -66,7 +66,7 @@
                         <div class="gh-setting-error" data-test-error="logo">{{or error.context error.message}}</div>
                     {{/each}}
                 </div>
-                <div class="gh-setting-action gh-setting-action-smallimg">
+                <div class="gh-setting-action gh-setting-action-smallimg flex flex-column">
                     {{#if uploader.isUploading}}
                         {{uploader.progressBar}}
                     {{else if this.settings.logo}}