Refined segment selector in post settings menu and email newsletter settings

Refs https://github.com/TryGhost/Team/issues/581

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}}
 

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}}

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;

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;
 }

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
 /* ---------------------------------------------------------- */