Membership settings UI refinements

- added Portal mock container and background
- updated header behavior

ghost/admin/app/styles/layouts/settings.css

@@ -1381,6 +1381,25 @@ p.theme-validation-details {
 }
 
 /* Membership */
+.gh-setting-members-header {
+    position: relative;
+    background: none;
+}
+
+.gh-setting-members-canvas::before {
+    position: absolute;
+    display: block;
+    content: "";
+    top: -450px;
+    right: -250px;
+    width: 970px;
+    height: 970px;
+    border-radius: 50%;
+    z-index: 0;
+    background: var(--main-color-content-greybg);
+    opacity: 0.5;
+}
+
 .gh-setting-members-basics {
     display: grid;
     grid-template-columns: auto 460px;
@@ -1391,6 +1410,10 @@ p.theme-validation-details {
     font-size: 1.6rem;
 }
 
+.gh-setting-members-portalcta {
+    background: linear-gradient(to left, color-mod(var(--main-color-content-greybg) l(-3%)), var(--main-color-content-greybg));
+}
+
 .gh-setting-members-portalpreview {
     flex-basis: 460px;
     justify-self: end;
@@ -1446,4 +1469,23 @@ p.theme-validation-details {
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-gap: 20px;
+}
+
+.gh-setting-members-portal-mock {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #fff;
+    box-shadow:
+        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)
+    ;
+    width: 420px;
+    height: 582px;
+    margin-bottom: 60px;
+    border-radius: 5px;
 }

ghost/admin/app/templates/settings.hbs

@@ -41,26 +41,12 @@
         <div class="gh-setting-header">Members</div>
         <div class="gh-settings-main-grid">
             <LinkTo class="gh-setting-group" @route="settings.membership" data-test-nav="members-membership">
-                <span class="blue">{{svg-jar "eye"}}</span>
+                <span class="blue">{{svg-jar "portal-logo-stroke"}}</span>
                 <div>
                     <h4>Membership</h4>
-                    <p>REPLACE ME</p>
+                    <p>Access, prices and sign-up options</p>
                 </div>
             </LinkTo>
-            <LinkTo class="gh-setting-group" @route="settings.products" data-test-nav="members-products">
-                <span class="green">{{svg-jar "module"}}</span>
-                <div>
-                    <h4>Products</h4>
-                    <p>Set up subscription products and prices</p>
-                </div>
-            </LinkTo>
-            <button type="button" class="gh-setting-group portal" {{action (toggle "showPortalSettings" this)}} data-test-toggle-membersFrom>
-                <span class="pink">{{svg-jar "portal-logo-stroke"}}</span>
-                <div>
-                    <h4>Portal</h4>
-                    <p>Customize members modal signup flow</p>
-                </div>
-            </button>
             {{#if this.session.user.isOwner}}
             <LinkTo class="gh-setting-group" @route="settings.members-email" data-test-nav="members-email">
                 <span class="yellow">{{svg-jar "email-stroke"}}</span>
@@ -69,13 +55,6 @@
                     <p>Customise emails and set email addresses</p>
                 </div>
             </LinkTo>
-            <LinkTo class="gh-setting-group" @route="settings.members-payments" data-test-nav="members-payments">
-                <span class="blue">{{svg-jar "piggy-bank"}}</span>
-                <div>
-                    <h4>Payments</h4>
-                    <p>Stripe connection settings</p>
-                </div>
-            </LinkTo>
             {{/if}}
         </div>
 

ghost/admin/app/templates/settings/membership.hbs

@@ -1,5 +1,5 @@
-<section class="gh-canvas">
-    <GhCanvasHeader class="gh-canvas-header">
+<section class="gh-canvas gh-setting-members-canvas">
+    <GhCanvasHeader class="gh-canvas-header gh-setting-members-header">
         <h2 class="gh-canvas-title" data-test-screen-title>
             <LinkTo @route="settings">Settings</LinkTo>
             <span>{{svg-jar "arrow-right"}}</span>
@@ -23,7 +23,7 @@
             <div class="gh-setting-members-basicsform">
                 <p class="intro">Fund your work with subscription revenue. Connect your Stripe account and offer premium content to your audience. Our creators are already making over $2 million per year, while Ghost takes 0% payment fees.</p>
 
-                <section class="gh-expandable">
+                <section class="gh-expandable gh-setting-members-portalcta">
                     <div class="gh-expandable-block">
                         <div class="gh-expandable-header">
                             <div>
@@ -34,7 +34,7 @@
                             </div>
                             <div>
                                 <button type="button" class="gh-btn gh-btn-green" {{action (toggle "showPortalSettings" this)}} data-test-toggle-membersFrom>
-                                    <span>Customise Portal</span>
+                                    <span>Customise Portal &rarr;</span>
                                 </button>
                             </div>
                         </div>
@@ -47,7 +47,9 @@
                 </div>
             </div>
             <div class="gh-setting-members-portalpreview">
+                <div class="gh-setting-members-portal-mock">
                 PORTAL PREVIEW
+                </div>
             </div>
         </div>