Updated publishmenu styles

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

ghost/admin/app/components/gh-members-segment-count.hbs

@@ -4,6 +4,6 @@
     {{did-insert (perform this.fetchTotalsTask)}}
     {{did-update (perform this.fetchSegmentTotalTask) @segment}}
 >
-    {{format-number this.segmentTotal}} / {{format-number this.total}} members
+    <strong>{{format-number this.segmentTotal}}</strong> members
 </span>
 {{/if}}

ghost/admin/app/components/gh-members-segment-select.hbs

@@ -7,6 +7,7 @@
     @renderInPlace={{this.renderInPlace}}
     @onChange={{this.setSegment}}
     @disabled={{@disabled}}
+    @class="select-members"
     as |option|
 >
     {{option.name}}

ghost/admin/app/components/gh-members-segment-select.js

@@ -50,11 +50,11 @@ export default class GhMembersSegmentSelect extends Component {
         const options = yield [{
             name: 'Free members',
             segment: 'status:free',
-            class: 'segment-status'
+            class: 'segment-status-free'
         }, {
             name: 'Paid members',
             segment: 'status:-free', // paid & comped
-            class: 'segment-status'
+            class: 'segment-status-paid'
         }];
 
         // fetch all labels w̶i̶t̶h̶ c̶o̶u̶n̶t̶s̶

ghost/admin/app/components/gh-publishmenu-draft.hbs

@@ -36,7 +36,7 @@
                     <p class="gh-box gh-box-alert">{{html-safe this.sendingEmailLimitError}}</p>
                 {{else}}
                     <div class="gh-publishmenu-email-label {{if this.disableEmailOption "pe-none"}}">
-                        <label class="gh-publishmenu-radio-label mb3 {{if this.disableEmailOption "midgrey"}}">Send by email to</label>
+                        <label class="gh-publishmenu-radio-label mb2 {{if this.disableEmailOption "midgrey"}}">Send by email to</label>
 
                         <div class="form-group">
                             <GhMembersSegmentSelect

ghost/admin/app/styles/app-dark.css

@@ -730,6 +730,28 @@ input:focus,
     background: var(--main-color-content-greybg) !important;
 }
 
+/* Segment input */
+
+.token-segment-status-free {
+    border: 1px solid var(--green-d1);
+    background: var(--green-d1);
+}
+
+.token-segment-status-paid {
+    border: 1px solid var(--pink-d1);
+    background: var(--pink-d1);
+}
+
+.token-segment-product {
+    background: var(--darkgrey);
+    color: var(--white);
+}
+
+.token-segment-product svg path {
+    stroke: var(--lightgrey);
+    fill: var(--lightgrey);
+}
+
 /* Post preview modal */
 .gh-post-preview-header,
 .gh-post-preview-browser-footer {

ghost/admin/app/styles/components/power-select.css

@@ -103,8 +103,11 @@
 .ember-power-select-group .ember-power-select-group-name {
     position: relative;
     display: inline-block;
-    padding: 7px 12px;
+    width: 100%;
+    margin-top: 6px;
+    padding: 10px 12px 8px;
     cursor: default;
+    border-top: 1px solid var(--list-color-divider);
     text-transform: uppercase;
     color: var(--midlightgrey);
     white-space: nowrap;
@@ -113,17 +116,6 @@
     font-weight: 500;
 }
 
-.ember-power-select-group .ember-power-select-group-name:after {
-    content: "";
-    position: absolute;
-    top: 60%;
-    left: calc(100% - 3px);
-    display: block;
-    width: calc(540px - 100%);
-    height: 1px;
-    border-bottom: color-mod(var(--lightgrey) l(-5%)) 1px solid;
-}
-
 @media (max-width: 900px) {
     .ember-power-select-group .ember-power-select-group-name:after {
         width: calc(524px - 100%);
@@ -208,16 +200,17 @@
 }
 
 .ember-power-select-multiple-remove-btn:not(:hover) {
-    opacity: 0.75;
+    opacity: 1;
 }
 
 .ember-power-select-multiple-remove-btn svg {
-    width: 9px;
-    height: 9px;
+    width: 8px;
+    height: 8px;
 }
 
 .ember-power-select-multiple-remove-btn svg path {
     stroke: white;
+    stroke-width: 2px;
     fill: white;
 }
 
@@ -244,6 +237,10 @@
     max-height: 172px; /* 5.5 options */
 }
 
+.ember-power-select-options[role="listbox"] {
+    overflow-x: hidden;
+}
+
 /* Tag input */
 
 .tag-token--internal {
@@ -258,34 +255,37 @@
 
 /* Segment input */
 
-.token-segment-status {
-    background: color-mod(var(--blue) alpha(0.1));
-    color: var(--blue);
+.token-segment-status-free {
+    border: 1px solid var(--green-d1);
+    color: var(--white);
+    background: var(--green-d1);
 }
 
-.token-segment-status svg path {
-    stroke: var(--blue);
-    fill: var(--blue);
+.token-segment-status-paid {
+    border: 1px solid var(--pink-d1);
+    color: var(--white);
+    background: var(--pink-d1);
 }
 
 .token-segment-label {
-    background: color-mod(var(--green) alpha(0.1));
-    color: var(--green);
+    border: 1px solid var(--whitegrey-d1);
+    color: var(--darkgrey);
+    background: var(--whitegrey-d1);
 }
 
 .token-segment-label svg path {
-    stroke: var(--green);
-    fill: var(--green);
+    stroke: var(--middarkgrey);
+    fill: var(--middarkgrey);
 }
 
 .token-segment-product {
-    background: color-mod(var(--purple) alpha(0.1));
-    color: var(--purple);
+    background: var(--black);
+    color: var(--white);
 }
 
 .token-segment-product svg path {
-    stroke: var(--purple);
-    fill: var(--purple);
+    stroke: var(--white);
+    fill: var(--white);
 }
 
 /* Inside settings / Mailgun region */

ghost/admin/app/styles/components/publishmenu.css

@@ -31,7 +31,7 @@
     right: 0;
     margin: 5px 0 20px 0;
     padding: 0px;
-    width: 320px;
+    width: 332px;
     background-color: #fff;
     background-clip: padding-box;
     border-radius: 4px;
@@ -118,7 +118,7 @@
     font-size: 1.3rem;
     line-height: 1.4em;
     font-weight: 300;
-    color: color-mod(var(--midgrey) l(+10%));
+    color: var(--midgrey-l1);
     margin-top: 2px;
 }
 
@@ -235,6 +235,16 @@
     line-height: 1.5em;    
 }
 
+.gh-publishmenu-email .select-members {
+    margin-bottom: .2rem;
+}
+
+.gh-publishmenu-email .segment-totals {
+    color: var(--midgrey-l1);
+    font-size: 1.3rem;
+    font-weight: 300;
+}
+
 .for-checkbox .gh-publishmenu-email-checkbox {
     margin-right: 0;
     margin-top: -2px;