From 6a7745c9a863cb9808f19cdbd34b9eb3351c9a60 Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Tue, 8 Sep 2020 17:56:44 +0200
Subject: [PATCH] Adjusted dark mode styling of top menu dropdowns on the
 members page for consistency

---
 ghost/admin/app/components/gh-members-filter.hbs   |  6 +++---
 ghost/admin/app/styles/components/dropdowns.css    |  4 ----
 ghost/admin/app/styles/components/power-select.css |  4 ++++
 ghost/admin/app/styles/layouts/content.css         |  2 ++
 ghost/admin/app/styles/layouts/members.css         |  5 +++++
 ghost/admin/app/styles/patterns/buttons.css        | 11 +++++++----
 6 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/ghost/admin/app/components/gh-members-filter.hbs b/ghost/admin/app/components/gh-members-filter.hbs
index 61a1d463b7..7e8f85f391 100644
--- a/ghost/admin/app/components/gh-members-filter.hbs
+++ b/ghost/admin/app/components/gh-members-filter.hbs
@@ -1,11 +1,11 @@
 <span class="dropdown dropdown-topmenu">
     <GhDropdownButton
         @dropdownName="members-label-menu"
-        @classNames="gh-btn gh-btn-white gh-btn-filter first" @title="Member Labels"
+        @classNames="gh-contentfilter-menu-trigger" @title="Member Labels"
         @data-test-user-actions="true">
-        <span class="nudge-bottom--1 {{if @selectedLabel.slug "blue fw6"}} gh-btn-filter-maxwidth" title="{{@selectedLabel.name}}">
+        <span class="{{if @selectedLabel.slug "blue fw6"}} gh-btn-filter-maxwidth" title="{{@selectedLabel.name}}">
             <span>{{@selectedLabel.name}}</span>
-            {{svg-jar "arrow-down-stroke" class="w2 h2 stroke-midgrey ml1"}}
+            {{svg-jar "arrow-down-small"}}
         </span>
     </GhDropdownButton>
     <GhDropdown @name="members-label-menu" @tagName="div"
diff --git a/ghost/admin/app/styles/components/dropdowns.css b/ghost/admin/app/styles/components/dropdowns.css
index 24bb1b83dd..bab2e192ec 100644
--- a/ghost/admin/app/styles/components/dropdowns.css
+++ b/ghost/admin/app/styles/components/dropdowns.css
@@ -10,10 +10,6 @@
     z-index: 1100;
 }
 
-.dropdown-topmenu {
-    height: 33px;
-}
-
 .dropdown-toggle:focus {
     outline: 0;
 }
diff --git a/ghost/admin/app/styles/components/power-select.css b/ghost/admin/app/styles/components/power-select.css
index 828d93edb5..2ec44bd1cf 100644
--- a/ghost/admin/app/styles/components/power-select.css
+++ b/ghost/admin/app/styles/components/power-select.css
@@ -25,6 +25,10 @@
     padding: 2px 0 3px 0 !important;
 }
 
+.ember-power-select-selected-item {
+    margin-left: 0;
+}
+
 .ember-basic-dropdown--opened > .ember-power-select-trigger,
 .ember-power-select-trigger[aria-expanded="true"],
 .ember-power-select-search input {
diff --git a/ghost/admin/app/styles/layouts/content.css b/ghost/admin/app/styles/layouts/content.css
index 84d849ea10..220fac9d85 100644
--- a/ghost/admin/app/styles/layouts/content.css
+++ b/ghost/admin/app/styles/layouts/content.css
@@ -50,6 +50,8 @@
     font-size: 1.3rem;
     font-weight: 400;
     color: var(--darkgrey);
+    letter-spacing: 0.2px;
+    height: 33px;
     padding: 5px 10px 6px 10px;
     box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.01), 0 1px 2px rgba(0, 0, 0, 0.05);
     outline: none;
diff --git a/ghost/admin/app/styles/layouts/members.css b/ghost/admin/app/styles/layouts/members.css
index 20990a4a9c..06ad90cc80 100644
--- a/ghost/admin/app/styles/layouts/members.css
+++ b/ghost/admin/app/styles/layouts/members.css
@@ -103,6 +103,11 @@
     left: 10px;
 }
 
+.dropdown-topmenu .gh-contentfilter-menu-trigger {
+    border-top-left-radius: 4px !important;
+    border-bottom-left-radius: 4px !important;
+}
+
 .gh-members-list-searchfield.active {
     border-color: #3eb0ef;
     box-shadow: inset 0 0 0 1px #3eb0ef;
diff --git a/ghost/admin/app/styles/patterns/buttons.css b/ghost/admin/app/styles/patterns/buttons.css
index b53e736080..b8c8580cc6 100644
--- a/ghost/admin/app/styles/patterns/buttons.css
+++ b/ghost/admin/app/styles/patterns/buttons.css
@@ -541,6 +541,13 @@ Usage: CTA buttons grouped together horizontally.
     max-width: 160px;
 }
 
+.gh-btn-filter-maxwidth svg {
+    height: 4px;
+    width: 6.11px;
+    margin-left: 2px;
+    margin-top: -2px;
+    vertical-align: middle;
+}
 
 /* Stripe Connect buttons
 /* ---------------------------------------------------------- */
@@ -636,10 +643,6 @@ Usage: CTA buttons grouped together horizontally.
     box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1);
 }
 
-.stripe-connect:active span:before {
-
-}
-
 .stripe-connect.light-blue {
     background: #b5c3d8;
     background-image: -webkit-linear-gradient(#b5c3d8, #9cabc2);