From 4b32633cbfbb6e66f9140de645b3cba0583ae3de Mon Sep 17 00:00:00 2001
From: Peter Zimon <zimo@ghost.org>
Date: Fri, 10 Sep 2021 18:16:11 +0200
Subject: [PATCH] Updated currency UI in tier preview

---
 ghost/admin/app/components/modal-product.hbs | 8 +++++---
 ghost/admin/app/styles/layouts/products.css  | 7 +++++++
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/ghost/admin/app/components/modal-product.hbs b/ghost/admin/app/components/modal-product.hbs
index 60e940d393..edce8c8d49 100644
--- a/ghost/admin/app/components/modal-product.hbs
+++ b/ghost/admin/app/components/modal-product.hbs
@@ -154,18 +154,20 @@
                             
                             {{#if this.stripeMonthlyAmount}}
                                 <span class="monthly-price">
+                                    <span class="currency">{{currency-symbol this.currency}}</span>
                                     {{this.stripeMonthlyAmount}}
-                                    <span class="period"><span class="currency">{{this.currency}}</span>/month</span>
+                                    <span class="period">/month</span>
                                 </span>
                             {{else}}
                                 <span class="monthly-price placeholder">
+                                    <span class="currency">{{currency-symbol this.currency}}</span>
                                     0
-                                    <span class="period"><span class="currency">{{this.currency}}</span>/month</span>
+                                    <span class="period">/month</span>
                                 </span>
                             {{/if}}
 
                             {{#if this.stripeYearlyAmount}}
-                                <span class="yearly-price">{{this.stripeYearlyAmount}}<span class="currency">{{this.currency}}</span>/year</span>
+                                <span class="yearly-price">{{currency-symbol this.currency}}{{this.stripeYearlyAmount}}/year</span>
                             {{else}}
                                 <span class="yearly-price placeholder">0<span class="currency">{{this.currency}}</span>/year</span>
                             {{/if}}
diff --git a/ghost/admin/app/styles/layouts/products.css b/ghost/admin/app/styles/layouts/products.css
index 942e6c0a6e..d21076c0b4 100644
--- a/ghost/admin/app/styles/layouts/products.css
+++ b/ghost/admin/app/styles/layouts/products.css
@@ -585,6 +585,13 @@
     text-transform: uppercase;
 }
 
+.gh-product-form-tierpreview .monthly-price .currency {
+    align-self: flex-start;
+    font-size: 2.0rem;
+    font-weight: 500;
+    line-height: 1.3em;
+}
+
 .gh-product-form-tierpreview ul {
     list-style: none;
     margin: 0;