From df835fd4e26fb6c81c8ef4c2223a3d01cec43537 Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Tue, 11 May 2021 13:09:52 +0200
Subject: [PATCH] Refined segment selector in post settings menu and email
 newsletter settings

Refs https://github.com/TryGhost/Team/issues/581
---
 .../app/components/gh-post-settings-menu.hbs  |  2 +-
 .../settings/default-email-recipients.hbs     |  4 ++--
 .../app/styles/components/power-select.css    |  8 ++++++++
 .../app/styles/components/settings-menu.css   | 20 +++++++++++++++++++
 ghost/admin/app/styles/layouts/settings.css   | 14 +++++++++++++
 5 files changed, 45 insertions(+), 3 deletions(-)

diff --git a/ghost/admin/app/components/gh-post-settings-menu.hbs b/ghost/admin/app/components/gh-post-settings-menu.hbs
index d8a48dfb80..be0ad108eb 100644
--- a/ghost/admin/app/components/gh-post-settings-menu.hbs
+++ b/ghost/admin/app/components/gh-post-settings-menu.hbs
@@ -103,7 +103,7 @@
                                 </div>
                             </div>
                         </div>
-                        <GhErrorMessage @errors={{this.post.errors}} @property="visibility" data-test-error="visibility" />
+                        <GhErrorMessage @errors={{this.post.errors}} @property="visibility" class="no-selection" data-test-error="visibility" />
                     </GhFormGroup>
                 {{/if}}
 
diff --git a/ghost/admin/app/components/settings/default-email-recipients.hbs b/ghost/admin/app/components/settings/default-email-recipients.hbs
index 183b603e49..51e08afe4e 100644
--- a/ghost/admin/app/components/settings/default-email-recipients.hbs
+++ b/ghost/admin/app/components/settings/default-email-recipients.hbs
@@ -11,13 +11,13 @@
         <div class="flex flex-column w-50">
             <div class="{{if this.isDisabled "disabled-overlay"}}">
                 <div
-                    class="gh-radio {{if this.isSegmentSelected "active"}}"
+                    class="gh-radio member-segments {{if this.isSegmentSelected "active"}}"
                     {{on "click" (fn this.setDefaultEmailRecipients "segment")}}
                 >
                     <div class="gh-radio-button"></div>
                     <div class="gh-radio-content">
                         <div class="gh-radio-label">Send emails to</div>
-                        <div class="gh-radio-desc">
+                        <div class="gh-radio-desc select-members">
                             <GhMembersSegmentSelect
                                 @segment={{this.settings.editorDefaultEmailRecipientsFilter}}
                                 @onChange={{this.setDefaultEmailRecipientsFilter}}
diff --git a/ghost/admin/app/styles/components/power-select.css b/ghost/admin/app/styles/components/power-select.css
index 7e26992085..31f36c9669 100644
--- a/ghost/admin/app/styles/components/power-select.css
+++ b/ghost/admin/app/styles/components/power-select.css
@@ -54,6 +54,10 @@
     border-top: 1px solid color-mod(var(--whitegrey) a(70%) s(-10%));
 }
 
+.ember-power-select-dropdown.ember-basic-dropdown-content--below {
+    border-bottom: none;
+}
+
 .ember-power-select-option {
     margin: 0;
     padding: 6px 14px;
@@ -75,6 +79,10 @@
     max-height: 50vh;
 }
 
+.ember-power-select-options li {
+    margin-bottom: 0;
+}
+
 .ember-power-select-search input {
     display: inline-block !important;
     margin: 0 1px !important;
diff --git a/ghost/admin/app/styles/components/settings-menu.css b/ghost/admin/app/styles/components/settings-menu.css
index 9fd31601e8..1e7e2c58d8 100644
--- a/ghost/admin/app/styles/components/settings-menu.css
+++ b/ghost/admin/app/styles/components/settings-menu.css
@@ -166,6 +166,26 @@
     margin-top: 0;
 }
 
+.settings-menu-content .gh-radio {
+    margin: 20px 0; 
+}
+
+.settings-menu-content .no-selection {
+    margin-top: -16px;
+}
+
+.settings-menu-content .gh-radio-desc {
+    margin: 8px 0 0 -32px;
+}
+
+.settings-menu-content .select-members {
+    margin-bottom: .4rem;
+}
+
+.settings-menu-content .segment-totals {
+    line-height: 1.65;
+}
+
 .settings-menu-content textarea {
     height: 108px;
 }
diff --git a/ghost/admin/app/styles/layouts/settings.css b/ghost/admin/app/styles/layouts/settings.css
index 0723553f93..582041e78b 100644
--- a/ghost/admin/app/styles/layouts/settings.css
+++ b/ghost/admin/app/styles/layouts/settings.css
@@ -804,6 +804,20 @@
 }
 
 
+/* Email newsletter
+/* ---------------------------------------------------------- */
+
+.member-segments .select-members {
+    margin-bottom: .4rem;
+}
+
+.member-segments .segment-totals {
+    position: relative;
+    top: 2px;
+    line-height: 1.65;
+}
+
+
 /* Code injection
 /* ---------------------------------------------------------- */