From 6166c83c5de8ea247fd073c0d2a576ef1e4d7d18 Mon Sep 17 00:00:00 2001
From: Peter Zimon <zimo@ghost.org>
Date: Thu, 21 Oct 2021 13:43:12 +0200
Subject: [PATCH] Refined member detail screen for offers

---
 .../components/gh-member-settings-form.hbs    | 15 ++++----
 ghost/admin/app/styles/layouts/main.css       |  8 ++---
 ghost/admin/app/styles/layouts/members.css    | 34 ++++++++++---------
 3 files changed, 31 insertions(+), 26 deletions(-)

diff --git a/ghost/admin/app/components/gh-member-settings-form.hbs b/ghost/admin/app/components/gh-member-settings-form.hbs
index a61743249b..b929b55e95 100644
--- a/ghost/admin/app/components/gh-member-settings-form.hbs
+++ b/ghost/admin/app/components/gh-member-settings-form.hbs
@@ -147,8 +147,8 @@
             {{/unless}}
 
             {{#each this.products as |product|}}
-                <div class="gh-member-product-container">
-                    <div class="gh-cp-memberproduct {{if (gt product.subscriptions.length 1) "multiple-subs" ""}}">
+                <div class="gh-main-section-content grey gh-member-product-container">
+                    <div class="gh-main-content-card gh-cp-memberproduct {{if (gt product.subscriptions.length 1) "multiple-subs" ""}}">
                         <h3 class="gh-memberproduct-name">
                             {{product.name}}
                             {{#if (gt product.subscriptions.length 1)}}
@@ -175,19 +175,22 @@
                                     {{/if}}
                                     {{#if sub.offer}}
                                         <div>
-                                            <span style="font-weight: bold;"> {{sub.offer.name}} </span>
+                                            <span class="gh-cp-memberproduct-pricelabel"> {{sub.offer.name}} </span>
                                             offer
                                             {{#if (eq sub.offer.type 'fixed')}}
                                                 ({{currency-symbol sub.offer.currency}}{{gh-price-amount sub.offer.amount}} off)
                                             {{else}}
                                                 ({{sub.offer.amount}}% off)
                                             {{/if}}
-                                            applied to subscription</div>
+                                            applied to subscription
+                                        </div>
                                     {{/if}}
-                                    <div class="gh-memberproduct-created">Created on {{sub.startDate}}</div>
+                                    <div class="gh-memberproduct-created">
+                                        Created on {{sub.startDate}}
+                                    </div>
                                 </div>
 
-                                <div class="flex items-center">
+                                <div class="gh-memberproduct-price-container">
                                     <div class="gh-product-card-price">
                                         <div class="flex items-start">
                                             <span class="currency-symbol">{{sub.price.currencySymbol}}</span>
diff --git a/ghost/admin/app/styles/layouts/main.css b/ghost/admin/app/styles/layouts/main.css
index 1a5265c5ce..9add14331f 100644
--- a/ghost/admin/app/styles/layouts/main.css
+++ b/ghost/admin/app/styles/layouts/main.css
@@ -1330,13 +1330,13 @@
 }
 
 /* Grey background modifiers */
-.gh-main-section-content.grey .gh-btn:not(.gh-btn-white):not(.gh-btn-green):not(.gh-btn-blue):not(.gh-btn-red):not(.gh-btn-black):not(.gh-btn-link):not(.gh-btn-text),
-.gh-expandable-content .gh-btn:not(.gh-btn-white):not(.gh-btn-green):not(.gh-btn-blue):not(.gh-btn-red):not(.gh-btn-black):not(.gh-btn-link):not(.gh-btn-text) {
+.gh-main-section-content.grey .gh-btn:not(.gh-btn-white):not(.gh-btn-green):not(.gh-btn-blue):not(.gh-btn-red):not(.gh-btn-black):not(.gh-btn-link):not(.gh-btn-text):not(.gh-btn-outline),
+.gh-expandable-content .gh-btn:not(.gh-btn-white):not(.gh-btn-green):not(.gh-btn-blue):not(.gh-btn-red):not(.gh-btn-black):not(.gh-btn-link):not(.gh-btn-text):not(.gh-btn-outline) {
     background: var(--whitegrey-d2);
 }
 
-.gh-main-section-content.grey .gh-btn:not(.gh-btn-white):not(.gh-btn-green):not(.gh-btn-blue):not(.gh-btn-red):not(.gh-btn-text):hover,
-.gh-expandable-content .gh-btn:not(.gh-btn-white):not(.gh-btn-green):not(.gh-btn-blue):not(.gh-btn-red):not(.gh-btn-link):not(.gh-btn-text):hover {
+.gh-main-section-content.grey .gh-btn:not(.gh-btn-white):not(.gh-btn-green):not(.gh-btn-blue):not(.gh-btn-red):not(.gh-btn-text):not(.gh-btn-outline):hover,
+.gh-expandable-content .gh-btn:not(.gh-btn-white):not(.gh-btn-green):not(.gh-btn-blue):not(.gh-btn-red):not(.gh-btn-link):not(.gh-btn-text):not(.gh-btn-outline):hover {
     background: color-mod(var(--whitegrey-d2) l(-4%));
 }
 
diff --git a/ghost/admin/app/styles/layouts/members.css b/ghost/admin/app/styles/layouts/members.css
index c018f6b62a..7d4747dee5 100644
--- a/ghost/admin/app/styles/layouts/members.css
+++ b/ghost/admin/app/styles/layouts/members.css
@@ -1679,10 +1679,11 @@ p.gh-members-import-errordetail:first-of-type {
 
 /* Member's product list */
 .gh-member-product-container {
-    border: 1px solid var(--whitegrey);
-    border-radius: 3px;
-    margin-bottom: 20px;
-    padding: 24px;
+    grid-row-gap: 24px;
+}
+
+.gh-cp-memberproduct {
+    margin-bottom: 0 !important;
 }
 
 .gh-memberproduct-name {
@@ -1804,21 +1805,29 @@ p.gh-members-import-errordetail:first-of-type {
 .gh-memberproduct-subscription {
     position: relative;
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     justify-content: space-between;
 }
 
+.gh-memberproduct-price-container {
+    display: flex;
+    align-items: flex-start;
+}
+
+.gh-cp-memberproduct:not(.multiple-subs) .gh-memberproduct-price-container {
+    margin-top: -19px;
+}
+
 .gh-cp-memberproduct .gh-product-card-price {
     padding: 10px 18px;
 }
 
 .gh-cp-memberproduct:not(.multiple-subs) .gh-product-card-price {
-    margin-top: -19px;
     padding: 15px 18px;
 }
 
 .product-actions-menu {
-    top: calc(100% - 16px);
+    top: calc(100% - 36px);
     right: 0px;
     left: auto;
 }
@@ -1827,16 +1836,9 @@ p.gh-members-import-errordetail:first-of-type {
     top: calc(100% + 6px);
 }
 
-.gh-cp-memberproduct .gh-memberproduct-subscription .action-menu {
-    margin-left: 3vw;
-}
-
-.gh-cp-memberproduct:not(.multiple-subs) .gh-memberproduct-subscription .action-menu {
-    margin-top: -28px;
-}
-
 .gh-memberproduct-subscription .action-menu .gh-btn-subscription-action:not(:hover) {
-    border-color: var(--main-bg-color);
+    border: 1px solid var(--whitegrey);
+    background: var(--main-bg-color) !important;
     box-shadow: none;
 }