From 41daa5fadaadc1fb172cadbbb72c9573a14faa1f Mon Sep 17 00:00:00 2001
From: Peter Zimon <zimo@ghost.org>
Date: Fri, 17 Jul 2020 09:19:47 +0200
Subject: [PATCH] Moved Portal settings button to top

no refs.
- moved cancel and save buttons to top to save space and resolve conflict with Portal button
---
 .../modal-members-modal-settings.hbs          | 56 ++++++++++---------
 .../app/styles/layouts/portal-settings.css    | 12 ++--
 2 files changed, 37 insertions(+), 31 deletions(-)

diff --git a/ghost/admin/app/components/modal-members-modal-settings.hbs b/ghost/admin/app/components/modal-members-modal-settings.hbs
index 67fb663fea..5107127560 100644
--- a/ghost/admin/app/components/modal-members-modal-settings.hbs
+++ b/ghost/admin/app/components/modal-members-modal-settings.hbs
@@ -1,9 +1,9 @@
 <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">Portal settings</h2>
+            <h2 class="f4 fw6 pa0 ma0 flex bb b--whitegrey nl6 nr6 pl6 pr6 items-center gh-portal-settings-topbarheight">Portal settings</h2>
             <fieldset class="gh-portal-settings-form">
-                <div class="gh-portal-setting-section divider-top">
+                <div class="gh-portal-setting-section">
                     <h3 class="gh-portal-setting-sectionheading">Singup options</h3>
                     <GhFormGroup @classNames="gh-members-subscribed-checkbox pb5 mb0">
                         <div class="flex justify-between items-center">
@@ -259,11 +259,33 @@
             </fieldset>
         </div>
         <div class="gh-portal-settings-main">
-            <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 (eq this.page "links") "active"}}"><a href="#" {{action "switchPreviewPage" "links"}} data-test-link="switch-portal-preview-page">Links</a></li>
-            </ul>
+            <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 (eq this.page "links") "active"}}"><a href="#" {{action "switchPreviewPage" "links"}} data-test-link="switch-portal-preview-page">Links</a></li>
+                </ul>
+                <div class="flex items-center">
+                    <button
+                        class="gh-btn mr3"
+                        {{action "closeModal"}}
+                        {{!-- disable mouseDown so it doesn't trigger focus-out validations --}}
+                        {{on "mousedown" (optional this.noop)}}
+                        data-test-button="cancel-custom-view-form"
+                    >
+                        <span>Cancel</span>
+                    </button>
+
+                    <GhTaskButton
+                        @buttonText="Save and close"
+                        @successText="Saved"
+                        @task={{this.saveTask}}
+                        @idleClass="gh-btn-blue"
+                        @class="gh-btn gh-btn-icon"
+                        data-test-button="save-members-modal-setting"
+                    />
+                </div>
+            </div>
             <div class="relative flex-grow-1">
                 <GhSiteIframe
                     @guid="test-site-portal"
@@ -271,26 +293,6 @@
                     @classNames="gh-portal-siteiframe"
                 ></GhSiteIframe>
             </div>
-            <div class="modal-footer">
-                <button
-                    class="gh-btn"
-                    {{action "closeModal"}}
-                    {{!-- disable mouseDown so it doesn't trigger focus-out validations --}}
-                    {{on "mousedown" (optional this.noop)}}
-                    data-test-button="cancel-custom-view-form"
-                >
-                    <span>Cancel</span>
-                </button>
-
-                <GhTaskButton
-                    @buttonText="Save and close"
-                    @successText="Saved"
-                    @task={{this.saveTask}}
-                    @idleClass="gh-btn-blue"
-                    @class="gh-btn gh-btn-icon"
-                    data-test-button="save-members-modal-setting"
-                />
-            </div>
         </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/ghost/admin/app/styles/layouts/portal-settings.css b/ghost/admin/app/styles/layouts/portal-settings.css
index a487536b73..9ba9cd9bdb 100644
--- a/ghost/admin/app/styles/layouts/portal-settings.css
+++ b/ghost/admin/app/styles/layouts/portal-settings.css
@@ -60,7 +60,7 @@
 }
 
 .gh-portal-settings-sidebar {
-    padding: 22px 28px 28px;
+    padding: 0px 24px 20px;
 }
 
 .gh-portal-settings-form {
@@ -92,7 +92,7 @@
 }
 
 .gh-portal-setting-section {
-    margin: 12px -28px;
+    margin: 12px -24px;
     padding: 0 28px;
 }
 
@@ -128,11 +128,15 @@
     right: 9px;
 }
 
+.gh-portal-settings-topbarheight {
+    height: 60px;
+}
+
 .gh-portal-settings-main {
     display: flex;
     flex-direction: column;
     flex-grow: 1;
-    padding: 17px 28px 28px;
+    padding: 0 20px 20px;
     border-left: 1px solid var(--whitegrey);
 }
 
@@ -146,7 +150,7 @@
     display: flex;
     align-items: center;
     padding: 0;
-    margin: 4px 0 20px;
+    margin: 0;
 }
 
 .gh-portal-settings-maintabs li {