From 87e2a3db3773246f0862972cf0939f71f90b8f88 Mon Sep 17 00:00:00 2001
From: Peter Zimon <zimo@ghost.org>
Date: Mon, 17 May 2021 18:12:49 +0200
Subject: [PATCH] Refined currency dropdown

---
 ghost/admin/app/styles/layouts/settings.css   | 43 +++++++++++++++----
 .../app/templates/settings/membership.hbs     |  7 ++-
 2 files changed, 40 insertions(+), 10 deletions(-)

diff --git a/ghost/admin/app/styles/layouts/settings.css b/ghost/admin/app/styles/layouts/settings.css
index e9171d9855..d6392f941f 100644
--- a/ghost/admin/app/styles/layouts/settings.css
+++ b/ghost/admin/app/styles/layouts/settings.css
@@ -1465,26 +1465,53 @@ p.theme-validation-details {
     margin-bottom: 4px;
 }
 
+.gh-setting-members-currency {
+    position: relative;
+}
+
+.gh-setting-members-currencylabel {
+    position: absolute;
+    display: flex !important;
+    align-items: center;
+    top: 1px;
+    left: 0px;
+    background: var(--main-color-content-greybg);
+    height: 20px;
+    font-weight: 500;
+    font-size: 1.4rem;
+    color: var(--middarkgrey);
+    text-transform: uppercase;
+    pointer-events: none;
+}
+
+.gh-setting-members-currencylabel span {
+    margin-right: 0;
+}
+
+.gh-settings-members-pricelabelcont .gh-select svg {
+    position: unset;
+    margin-top: -3px;
+}
+
 .gh-settings-members-pricelabelcont .gh-select {
     padding: 0;
-    width: 320px;
+    width: 60px;
+    height: 16px;
     background: transparent;
     border: none;
+    margin-left: -4px;
 }
 
 .gh-settings-members-pricelabelcont .gh-select select {
     background: transparent;
+    font-size: 1.4rem;
+    font-weight: 500;
     border: none;
+    height: 16px;
+    width: 46px;
     padding: 0;
 }
 
-.gh-settings-members-pricelabelcont .gh-select svg {
-    position: absolute;
-    bottom: unset;
-    width: 12px;
-    margin-right: unset;
-}
-
 .gh-setting-members-prices {
     display: grid;
     grid-template-columns: 1fr 1fr;
diff --git a/ghost/admin/app/templates/settings/membership.hbs b/ghost/admin/app/templates/settings/membership.hbs
index a222d724bc..c6b6b58445 100644
--- a/ghost/admin/app/templates/settings/membership.hbs
+++ b/ghost/admin/app/templates/settings/membership.hbs
@@ -122,7 +122,11 @@
                                         <label for="monthlyPrice">Prices</label>
                                         <span>–</span>
                                         <div>
-                                            <span class="gh-select">
+                                            <span class="gh-setting-members-currency gh-select">
+                                                <div class="gh-setting-members-currencylabel">
+                                                    <span>{{this.currency}}</span>
+                                                    {{svg-jar "arrow-down-small"}}
+                                                </div>
                                                 <OneWaySelect
                                                     @value={{this.selectedCurrency}}
                                                     id="currency"
@@ -132,7 +136,6 @@
                                                     @optionLabelPath="label"
                                                     @update={{this.setStripePlansCurrency}}
                                                 />
-                                                {{svg-jar "arrow-down-small"}}
                                             </span>
                                         </div>
                                     </div>