From 510b1153293f512561ff5cb172aca67167f171df Mon Sep 17 00:00:00 2001
From: James Morris <james.morris@ghost.org>
Date: Wed, 9 Feb 2022 18:10:02 +0000
Subject: [PATCH] Better styling for the Finishing Touches screen

refs: https://github.com/TryGhost/Team/issues/1303

- fixed glaring styling issues after technical implementation
- got to a place for testing, though small issues remain
---
 .../app/components/modals/get-started.hbs     |  2 +-
 ghost/admin/app/styles/layouts/main.css       | 87 ++++++++++++++++++-
 .../app/templates/setup/finishing-touches.hbs | 16 ++--
 3 files changed, 95 insertions(+), 10 deletions(-)

diff --git a/ghost/admin/app/components/modals/get-started.hbs b/ghost/admin/app/components/modals/get-started.hbs
index 978a7f311c..ade490729e 100644
--- a/ghost/admin/app/components/modals/get-started.hbs
+++ b/ghost/admin/app/components/modals/get-started.hbs
@@ -19,7 +19,7 @@
             {{svg-jar "get-started-migrations"}}
             <h4>Migrating data</h4>
             <p>Import content from other tools into Ghost with ease.</p>
-            <p><a href="https://docs.ghost.org" class="gh-btn" target="_blank" rel="noopener noreferrer" {{on "click" @close}}><span>Learn more</span></a></p>
+            <p><a href=" https://ghost.org/docs/migration/" class="gh-btn" target="_blank" rel="noopener noreferrer" {{on "click" @close}}><span>Learn more</span></a></p>
         </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/ghost/admin/app/styles/layouts/main.css b/ghost/admin/app/styles/layouts/main.css
index 2081f936bf..d50d1bf075 100644
--- a/ghost/admin/app/styles/layouts/main.css
+++ b/ghost/admin/app/styles/layouts/main.css
@@ -1795,7 +1795,80 @@ section.gh-ds h2 {
 }
 
 
-/* Get started modal
+/* Finishing touches */
+/* ---------------------------------------------------- */
+
+@keyframes fadeUp {
+    0% {
+        opacity: 0;
+        transform: translateY(32px);
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.gh-finishing-touches {
+    background: #DFDFDF;
+    flex-direction: column;
+}
+
+.gh-finishing-touches header {
+    padding: 32px 0 24px;
+}
+
+.gh-finishing-touches header h1 {
+    font-size: 4.1rem;
+    letter-spacing: -0.025em;
+    color: rgb(21, 23, 26);
+    margin: 0;
+}
+
+.gh-finishing-touches header p {   
+    font-size: 1.9rem;
+    line-height: 1.5em;
+    margin: 0.5rem 0 2rem;
+    color: rgb(112, 123, 139);
+}
+
+.gh-finishing-touches main {
+    background: #ffffff;
+    box-shadow: 0 0 30px rgba(0,0,0,0.075);
+    width: calc(100% - 32px);
+    border-radius: 8px;
+    margin: 0 16px 16px;
+
+    animation: fadeUp ease 300ms;
+    animation-iteration-count: 1;
+    animation-fill-mode: forwards;
+}
+
+.gh-finishing-touches .gh-nav-design-settings {
+    background: transparent;
+    padding-top: 31px;
+}
+
+.gh-finishing-touches .gh-setting-desc {
+    padding-right: 2rem;
+}
+
+.gh-finishing-touches .gh-browserpreview-previewcontainer {
+    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
+    border-radius: 5px !important;
+    overflow: hidden;
+}
+
+.gh-finishing-touches .gh-browserpreview-browser .tabs {
+    background: #fff;
+}
+
+.gh-finishing-touches .gh-browserpreview-browser .tabs div {
+    display: none;
+}
+
+
+/* Get started modal */
 /* ---------------------------------------------------- */
 
 .gh-get-started-welcome {
@@ -1819,3 +1892,15 @@ section.gh-ds h2 {
 .gh-get-started-extras .br {
     border-color: var(--whitegrey);
 }
+
+.gh-get-started-extras .pa4:first-child {
+    padding-left: 0;
+    padding-bottom: 0;
+    padding-right: 3rem;
+}
+
+.gh-get-started-extras .pa4:last-child {
+    padding-right: 0;
+    padding-bottom: 0;
+    padding-left: 3rem;
+}
diff --git a/ghost/admin/app/templates/setup/finishing-touches.hbs b/ghost/admin/app/templates/setup/finishing-touches.hbs
index 1d9138fc1d..2038d33ea4 100644
--- a/ghost/admin/app/templates/setup/finishing-touches.hbs
+++ b/ghost/admin/app/templates/setup/finishing-touches.hbs
@@ -1,9 +1,9 @@
-<div class="gh-flow">
-    <div class="tc">
+<div class="gh-flow gh-finishing-touches">
+    <header class="tc">
         <h1>Finishing touches</h1>
-        <p>You chose a look, now it's time to make it your own.</p>
-    </div>
-    <div class="flex flex-row h-100">
+        <p>You chose a theme, now it's time to make it your own.</p>
+    </header>
+    <main class="flex flex-row h-100">
         <div class="gh-nav gh-nav-contextual gh-nav-design">
             <div class="flex flex-column h-100">
                 <div class="gh-nav-body">
@@ -16,9 +16,9 @@
                     </div>
                     <div class="pa4">
                         <GhTaskButton
-                            class="gh-btn gh-btn-black gh-btn-icon w-100"
+                            class="gh-btn gh-btn-large gh-btn-black gh-btn-icon w-100"
                             @task={{this.saveAndContinueTask}}
-                            @buttonText="Let's get writing →"
+                            @buttonText="Continue →"
                             @runningText="Saving..."
                             @showSuccess={{false}}
                             data-test-button="save-and-continue"
@@ -32,5 +32,5 @@
                 <GhHtmlIframe class="site-frame" @html={{this.themeManagement.previewHtml}} />
             </GhBrowserPreview>
         </div>
-    </div>
+    </main>
 </div>
\ No newline at end of file