From a82b31353f92c7502d3250861a98baedab227c35 Mon Sep 17 00:00:00 2001
From: Peter Zimon <zimo@ghost.org>
Date: Fri, 4 Jun 2021 10:59:42 +0200
Subject: [PATCH] Updated product card styles (alpha)

---
 .../gh-membership-products-alpha.hbs          | 44 ++++++---------
 ghost/admin/app/styles/layouts/main.css       |  4 +-
 ghost/admin/app/styles/layouts/products.css   | 54 ++++++++++++++++---
 3 files changed, 64 insertions(+), 38 deletions(-)

diff --git a/ghost/admin/app/components/gh-membership-products-alpha.hbs b/ghost/admin/app/components/gh-membership-products-alpha.hbs
index 70a6c9e103..00962aa5cf 100644
--- a/ghost/admin/app/components/gh-membership-products-alpha.hbs
+++ b/ghost/admin/app/components/gh-membership-products-alpha.hbs
@@ -1,36 +1,24 @@
 {{#each this.products as |product|}}
-    <div class="gh-product-card" style="flex-direction: row;align-items: stretch">
-        <div style="display: flex;flex-grow: 1;flex-shrink: 0;flex-basis: 50%">
-            <div style="display: flex;flex-direction:column;align-items: flex-start;flex-grow: 1">
-                <h3 class="gh-product-card-name">
-                    {{product.name}}
-                </h3>
-                <p class="gh-product-card-description">
-                    {{product.description}}
-                </p>
-            </div>
-        </div>
-        <div style="display: flex;flex-direction:column;align-items: flex-start;flex-grow: 1; flex-shrink: 0; border-left: 1px solid #c4cad2;padding-left: 12px;flex-basis: 50%">
-            <h3 class="gh-product-card-name" style="margin-bottom: 12px">
-                Pricing
+    <div class="gh-product-card">
+        <button class="gh-product-card-editbutton gh-btn gh-btn-text gh-btn-link green" {{action "openEditProduct" product}}>
+            <span>Edit</span>
+        </button>
+        <div class="gh-product-card-block">
+            <h3 class="gh-product-card-name">
+                {{product.name}}
             </h3>
             <p class="gh-product-card-description">
-                <span class="ttu" style="font-weight: bold">{{product.monthlyPrice.currency}}</span>
-                <span style="font-weight: bold">{{gh-price-amount product.monthlyPrice.amount}}</span>/month
-            </p>
-            <p class="gh-product-card-description" style="margin-bottom: 0">
-                <span class="ttu" style="font-weight: bold">{{product.monthlyPrice.currency}}</span>
-                <span style="font-weight: bold">{{gh-price-amount product.yearlyPrice.amount}}</span>/year
+                {{product.description}}
             </p>
         </div>
-        <div>
-        </div>
-        <div style="display: flex;align-items: center">
-            <div>
-                <button class="gh-btn gh-btn-link" {{action "openEditProduct" product}}>
-                    <span>Edit</span>
-                </button>
-            </div>
+        <div class="gh-product-card-block">
+            <span class="gh-product-card-heading">Pricing</span>
+            <p class="gh-product-card-price">
+                <span class="amount">{{gh-price-amount product.monthlyPrice.amount}} </span><span class="currency">{{product.monthlyPrice.currency}}</span><span class="period">/month</span>
+            </p>
+            <p class="gh-product-card-price">
+                <span class="amount">{{gh-price-amount product.yearlyPrice.amount}} </span><span class="currency">{{product.monthlyPrice.currency}}</span><span class="period">/year</span>
+            </p>
         </div>
     </div>
 {{/each}}
diff --git a/ghost/admin/app/styles/layouts/main.css b/ghost/admin/app/styles/layouts/main.css
index ca78ca0160..de6d77680a 100644
--- a/ghost/admin/app/styles/layouts/main.css
+++ b/ghost/admin/app/styles/layouts/main.css
@@ -1228,12 +1228,12 @@
 
 /* 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),
-.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) {
+.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) {
     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):hover,
-.gh-expandable-content .gh-btn:not(.gh-btn-white):not(.gh-btn-green):not(.gh-btn-blue):not(.gh-btn-red):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):hover {
     background: color-mod(var(--whitegrey-d2) l(-4%));
 }
 
diff --git a/ghost/admin/app/styles/layouts/products.css b/ghost/admin/app/styles/layouts/products.css
index 8e0523bc62..75e2e3d9f3 100644
--- a/ghost/admin/app/styles/layouts/products.css
+++ b/ghost/admin/app/styles/layouts/products.css
@@ -12,14 +12,13 @@
 }
 
 .gh-product-card {
+    position:relative;
     display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
+    align-items: flex-start;
+    justify-content: space-between;
     border: 1px solid var(--whitegrey);
-    border-radius: 2px;
-    padding: 24px 48px;
+    border-radius: 3px;
+    padding: 24px;
     background: white;
     margin-bottom: 12px;
 }
@@ -30,16 +29,55 @@
     }
 }
 
+.gh-product-card-editbutton {
+    position: absolute;
+    right: 24px;
+    top: 16px;
+}
+
+.gh-product-card-block {
+    flex-basis: 50%;
+}
+
+.gh-product-card-block:not(:first-of-type) {
+    border-left: 1px solid var(--whitegrey);
+    padding-left: 16px;
+}
+
 .gh-product-card-name {
-    font-size: 1.75rem;
+    font-size: 1.8rem;
+    font-weight: 500;
     margin: 0;
 }
 
+.gh-product-card-heading {
+    display: inline-block;
+    font-size: 1.3rem;
+    font-weight: 600;
+    margin-bottom: 2px;
+}
+
 .gh-product-card-description {
-    margin: 0 0 16px;
+    margin-top: 2px;
     color: var(--midgrey);
 }
 
+.gh-product-card-price {
+    margin: 0 0 2px;
+    font-size: 1.3rem;
+    color: var(--midgrey);
+}
+
+.gh-product-card-price .amount,
+.gh-product-card-price .currency {
+    font-weight: 600;
+    color: var(--darkgrey);
+}
+
+.gh-product-card-price .currency {
+    text-transform: uppercase;
+}
+
 .gh-product-list-icon {
     display: flex;
     align-items: flex-end;