From ae9abe22c0e989062db46e169504a5cae9957c5a Mon Sep 17 00:00:00 2001
From: Peter Zimon <zimo@ghost.org>
Date: Wed, 10 Feb 2021 11:08:05 +0100
Subject: [PATCH] Update portal settings UI

---
 .../app/components/modal-portal-settings.hbs  | 34 ++++-----
 .../app/styles/layouts/portal-settings.css    | 70 +++++++++++++------
 ghost/admin/app/styles/patterns/buttons.css   |  8 +--
 .../templates/settings/general-loading.hbs    |  8 +--
 .../admin/app/templates/settings/general.hbs  |  2 +-
 5 files changed, 76 insertions(+), 46 deletions(-)

diff --git a/ghost/admin/app/components/modal-portal-settings.hbs b/ghost/admin/app/components/modal-portal-settings.hbs
index 95ffbcd903..ddd675ba6c 100644
--- a/ghost/admin/app/components/modal-portal-settings.hbs
+++ b/ghost/admin/app/components/modal-portal-settings.hbs
@@ -1,12 +1,12 @@
 <div class="modal-body gh-ps-modal-body">
     <div class="flex pa0 flex-grow-1 gh-portal-settings">
         <div class="gh-portal-settings-sidebar">
-            <h2 class="f4 fw6 pa0 ma0 flex bb b--whitegrey pl6 pr6 items-center gh-portal-settings-topbarheight">Portal settings</h2>
+            <h2 class="gh-portal-settings-title">Portal settings</h2>
             <div class="gh-portal-form-wrapper">
                 <fieldset class="gh-portal-settings-form">
                     <div class="gh-portal-setting-section" onclick={{action "switchToSignupPage"}}>
                         <h3 class="gh-portal-setting-sectionheading">Signup options</h3>
-                        <GhFormGroup @classNames="gh-members-subscribed-checkbox pb5 mb0">
+                        <GhFormGroup @classNames="gh-members-subscribed-checkbox gh-portal-setting-first pb5 mb0">
                             <div class="flex justify-between items-center">
                                 <div class="mr3">
                                     <h4 class="gh-portal-setting-title">Display name in signup form</h4>
@@ -93,14 +93,14 @@
                         </div>
                         {{else}}
                         <div class="gh-portal-setting-no-stripe">
-                            You need to <button class="gh-btn gh-btn-link blue" {{action "openStripeSettings"}}>connect to Stripe</button> to take payments
+                            You need to <button class="gh-btn gh-btn-link black" {{action "openStripeSettings"}}>connect to Stripe</button> to take payments
                         </div>
                         {{/if}}
                     </div>
-                    <div class="gh-portal-setting-section divider-top" onclick={{action "switchToSignupPage"}}>
+                    <div class="gh-portal-setting-section" onclick={{action "switchToSignupPage"}}>
                         <h3 class="gh-portal-setting-sectionheading">Look & feel</h3>
-                        <GhFormGroup @classNames="gh-members-subscribed-checkbox mb0 pt3 b--whitegrey">
-                            <div class="flex justify-between items-center nt2">
+                        <GhFormGroup @classNames="gh-members-subscribed-checkbox gh-portal-setting-first mb0 b--whitegrey">
+                            <div class="flex justify-between items-center">
                                 <h4 class="gh-portal-setting-title">Show Portal button</h4>
                                 <div class="for-switch small">
                                     <label
@@ -211,13 +211,13 @@
                             {{/if}}
                         {{/if}}
                     </div>
-                    <div class="gh-portal-setting-section redirects divider-top">
+                    <div class="gh-portal-setting-section redirects">
                         <h4 class="gh-portal-setting-sectionheading">Welcome page</h4>
                         <GhFormGroup
                             @errors={{settings.errors}}
                             @hasValidated={{settings.hasValidated}}
                             @property="membersFreeSignupRedirect"
-                            @classNames="mt5"
+                            @classNames="mt2"
                         >
                             <h4 class="gh-portal-setting-title">For free signups</h4>
                             <div class="flex items-center mt2">
@@ -262,13 +262,15 @@
             </div>
         </div>
         <div class="gh-portal-settings-main">
-            <div class="flex items-center justify-between w-100 gh-portal-settings-topbarheight">
-                <ul class="gh-portal-settings-maintabs">
-                    <li class="{{if (eq this.page "signup") "active"}}"><a href="#" {{action "switchPreviewPage" "signup"}} data-test-link="switch-portal-preview-page">Signup</a></li>
-                    <li class="{{if (eq this.page "accountHome") "active"}}"><a href="#" {{action "switchPreviewPage" "accountHome"}} data-test-link="switch-portal-preview-page">Account</a></li>
-                    <li class="{{if this.showLinksPage "active"}}"><a href="#" {{action "switchPreviewPage" "links"}} data-test-link="switch-portal-preview-page">Links</a></li>
-                </ul>
-                <div class="flex items-center">
+            <div class="gh-portal-settings-previewheader">
+
+                <div class="gh-btn-group">
+                    <a class="gh-btn {{if (eq this.page "signup") "gh-btn-group-selected"}}" href="#" {{action "switchPreviewPage" "signup"}} data-test-link="switch-portal-preview-page"><span>Signup</span></a>
+                    <a class="gh-btn {{if (eq this.page "accountHome") "gh-btn-group-selected"}}" href="#" {{action "switchPreviewPage" "accountHome"}} data-test-link="switch-portal-preview-page"><span>Account</span></a>
+                    <a class="gh-btn {{if this.showLinksPage "gh-btn-group-selected"}}" href="#" {{action "switchPreviewPage" "links"}} data-test-link="switch-portal-preview-page"><span>Links</span></a>
+                </div>
+
+                <div class="gh-portal-settings-actions">
                     <button
                         class="gh-btn mr3"
                         {{action "closeModal"}}
@@ -283,7 +285,7 @@
                         @buttonText="Save and close"
                         @successText="Saved"
                         @task={{this.saveTask}}
-                        @idleClass="gh-btn-blue"
+                        @idleClass="gh-btn-primary"
                         @class="gh-btn gh-btn-icon"
                         data-test-button="save-members-modal-setting"
                     />
diff --git a/ghost/admin/app/styles/layouts/portal-settings.css b/ghost/admin/app/styles/layouts/portal-settings.css
index 6991973b8a..30ed0382dc 100644
--- a/ghost/admin/app/styles/layouts/portal-settings.css
+++ b/ghost/admin/app/styles/layouts/portal-settings.css
@@ -79,7 +79,7 @@
 }
 
 .gh-portal-settings .form-group.space-l {
-    margin-bottom: 1.9em;
+    margin-bottom: 1.6em;
 }
 
 .gh-portal-setting-title {
@@ -94,16 +94,18 @@
 }
 
 .gh-portal-setting-sectionheading {
-    font-size: 1.2rem;
-    font-weight: 500;
-    color: var(--midlightgrey);
-    margin: 0 0 12px;
+    font-size: 1.1rem;
+    font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.2px;
+    color: var(--black);
+    margin: 0;
+    padding: 0 0 8px;
+    border-bottom: 1px solid var(--whitegrey);
 }
 
 .gh-portal-setting-section {
-    margin: 12px -24px;
+    margin: 0 -24px 3.5vw;
     padding: 0 28px;
 }
 
@@ -111,11 +113,6 @@
     line-height: 1.5em;
 }
 
-.gh-portal-setting-section.divider-top {
-    border-top: 1px solid var(--whitegrey);
-    padding-top: 16px;
-}
-
 .gh-portal-settings .input-color input {
     position: relative;
     height: 30px;
@@ -181,7 +178,7 @@
     display: flex;
     flex-direction: column;
     flex-grow: 1;
-    padding: 0 20px 20px;
+    padding: 0;
     border-left: 1px solid var(--whitegrey);
 }
 
@@ -240,6 +237,10 @@
     padding: 2px;
 }
 
+.gh-portal-setting-first {
+    margin: 12px 0 0;
+}
+
 .gh-portal-button-icon {
     display: inline-block;
     cursor: pointer;
@@ -254,11 +255,11 @@
 }
 
 .gh-portal-button-icon:hover {
-    box-shadow: 0px 0px 0px 1px color-mod(var(--blue) a(40%));
+    box-shadow: 0px 0px 0px 1px color-mod(var(--green) a(40%));
 }
 
 .gh-portal-button-icon.selected-icon {
-    box-shadow: 0px 0px 0px 2px var(--blue);
+    box-shadow: 0px 0px 0px 2px var(--green);
 }
 
 .gh-portal-button-icon svg path {
@@ -266,7 +267,7 @@
 }
 
 .gh-portal-button-icon.selected-icon svg path {
-    stroke: var(--blue);
+    stroke: var(--green);
 }
 
 .gh-portal-button-icon .gh-loading-spinner {
@@ -364,23 +365,51 @@
     border: none;
 }
 
+.gh-portal-settings-title {
+    display: flex;
+    align-items: center;
+    padding: 0 24px;
+    margin: 0;
+    height: 66px;
+    font-size: 1.9rem;
+    font-weight: 600;
+    letter-spacing: -0.1px;
+}
+
+.gh-portal-settings-previewheader {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    height: 66px;
+    padding: 0 24px;
+    margin: 0;
+    width: 100%;
+}
+
+.gh-portal-settings-previewheader .gh-btn-group .gh-btn {
+    min-width: 90px;
+}
+
+.gh-portal-settings-actions {
+    position: absolute;
+    top: 16px;
+    right: 24px;
+}
+
 .gh-portal-preview-wrapper {
     overflow: hidden;
     max-height: calc(100vh - 60px - 66px - 20px);
     height: 100%;
-    border: 1px solid var(--whitegrey);
     background: #EDF0F2;
-    border-radius: 5px;
 }
 
 .gh-portal-preview-container {
     position: relative;
     flex-grow: 1;
-    border: 1px solid var(--whitegrey);
-    border-radius: 5px;
     overflow: hidden;
     background: #EDF0F2;
-    max-height: calc(100vh - 60px - 66px - 20px);
+    max-height: calc(100vh - 60px - 66px);
 }
 
 .gh-portal-preview-wrapper .gh-portal-preview-container {
@@ -537,7 +566,6 @@
 
 .gh-portal-setting-no-stripe {
     padding: 20px;
-    margin-bottom: 28px;
     font-size: 1.3rem;
     text-align: center;
     background: var(--whitegrey-l2);
diff --git a/ghost/admin/app/styles/patterns/buttons.css b/ghost/admin/app/styles/patterns/buttons.css
index 4aa7b33fcb..a05780075c 100644
--- a/ghost/admin/app/styles/patterns/buttons.css
+++ b/ghost/admin/app/styles/patterns/buttons.css
@@ -384,8 +384,8 @@ Usage: CTA buttons grouped together horizontally.
 .gh-btn-group {
     border-radius: 0;
     background: var(--whitegrey-l1);
-    border-radius: 2px;
-    padding: 1px;
+    border-radius: 3px;
+    line-height: 0;
 }
 
 .gh-btn-group .gh-btn {
@@ -400,8 +400,8 @@ Usage: CTA buttons grouped together horizontally.
 
 .gh-btn-group .gh-btn span {
     border-radius: 0;
-    height: 31px;
-    line-height: 31px;
+    height: 30px;
+    line-height: 30px;
     border-radius: 2px;
     background: transparent !important;
 }
diff --git a/ghost/admin/app/templates/settings/general-loading.hbs b/ghost/admin/app/templates/settings/general-loading.hbs
index 037808ee1b..95a455460b 100644
--- a/ghost/admin/app/templates/settings/general-loading.hbs
+++ b/ghost/admin/app/templates/settings/general-loading.hbs
@@ -1,14 +1,14 @@
 <section class="gh-canvas">
-    <header class="gh-canvas-header">
+    <GhCanvasHeader class="gh-canvas-header">
         <h2 class="gh-canvas-title" data-test-screen-title>
             <LinkTo @route="settings">Settings</LinkTo>
             <span>{{svg-jar "arrow-right"}}</span>
-            General settings
+            General
         </h2>
         <section class="view-actions">
-            <GhTaskButton @buttonText="Save settings" @task={{this.save}} @class="gh-btn gh-btn-blue gh-btn-icon" @disabled={{true}} data-test-save-button="true" />
+            <GhTaskButton @buttonText="Save settings" @task={{this.save}} @class="gh-btn gh-btn-primary gh-btn-icon" data-test-button="save" />
         </section>
-    </header>
+    </GhCanvasHeader>
 
     <section class="gh-content">
         <GhLoadingSpinner />
diff --git a/ghost/admin/app/templates/settings/general.hbs b/ghost/admin/app/templates/settings/general.hbs
index 47c5ddffa0..3a660927d8 100644
--- a/ghost/admin/app/templates/settings/general.hbs
+++ b/ghost/admin/app/templates/settings/general.hbs
@@ -3,7 +3,7 @@
         <h2 class="gh-canvas-title" data-test-screen-title>
             <LinkTo @route="settings">Settings</LinkTo>
             <span>{{svg-jar "arrow-right"}}</span>
-            General settings
+            General
         </h2>
         <section class="view-actions">
             <GhTaskButton @buttonText="Save settings" @task={{this.save}} @class="gh-btn gh-btn-primary gh-btn-icon" data-test-button="save" />