Styled publishing action dropdown in publish menu

ghost/admin/app/components/gh-distribution-action-select.hbs

@@ -1,12 +1,17 @@
-<span class="gh-select">
-    <OneWaySelect
-        @value={{this.distributionValue}}
+<span class="gh-publishmenu-select">
+    <PowerSelect
         @options={{this.availablePublishActions}}
-        @optionValuePath="value"
-        @optionLabelPath="name"
-        @includeBlank={{false}}
-        @update={{this.setPublishAction}}
+        @renderInPlace={{true}}
+        @selected={{this.distributionValue}}
+        @onChange={{this.setPublishAction}}
+        @searchEnabled={{false}}
         @id="publish-action"
-        @name="publish-action" />
-    {{svg-jar "arrow-down-small"}}
+        @name="publish-action"
+        @triggerComponent="gh-power-select/trigger"
+        @triggerClass="ember-power-select-inline"
+        @dropdownClass="gh-publishmenu-select-dropdown"
+        as |availablePublishAction|
+    >
+        {{availablePublishAction.name}}
+    </PowerSelect>
 </span>

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

@@ -31,7 +31,7 @@
     right: 0;
     margin: 5px 0 20px 0;
     padding: 0px;
-    width: 332px;
+    width: 336px;
     background-color: #fff;
     background-clip: padding-box;
     border-radius: 4px;
@@ -59,10 +59,44 @@
 .gh-publishmenu-heading {
     margin: 0 0 15px 0;
     padding: 20px 20px 0;
-    font-size: 1.8rem;
+    font-size: 1.7rem;
+    font-weight: 400;
     line-height: 1.25em;
 }
 
+.gh-publishmenu-select {
+    display: inline-block;
+    padding: 0 3px;
+}
+
+.gh-publishmenu-select .ember-power-select-inline {
+    color: var(--green-d1);
+    font-size: 1.7rem;
+    font-weight: 400;
+    line-height: 1.25em;
+}
+
+.gh-publishmenu-select .ember-power-select-inline svg {
+    width: 9px !important;
+    height: 5.6px !important;
+    margin: 0 0 0 1px !important;
+}
+
+.gh-publishmenu-select .ember-power-select-inline svg path {
+    stroke: var(--green-d1) !important;
+    stroke-width: 4;
+}
+
+.gh-publishmenu-select-dropdown {
+    width: unset !important;
+    min-width: min-content !important;
+    margin-top: 4px;
+    border-top: 1px solid var(--input-border-color) !important;
+    font-size: 1.4rem;
+    white-space: nowrap;
+    border-radius: 3px !important;
+}
+
 .gh-publishmenu-content {
     border-bottom: var(--whitegrey) 1px solid;
 }

ghost/admin/tests/integration/components/gh-distribution-action-select-test.js

@@ -2,7 +2,7 @@ import hbs from 'htmlbars-inline-precompile';
 import mockPosts from '../../../mirage/config/posts';
 import {describe, it} from 'mocha';
 import {expect} from 'chai';
-import {find, findAll, render, settled} from '@ember/test-helpers';
+import {render, settled} from '@ember/test-helpers';
 import {setupRenderingTest} from 'ember-mocha';
 import {startMirage} from 'ghost-admin/initializers/ember-cli-mirage';
 
@@ -32,8 +32,5 @@ describe('Integration: Component: gh-distribution-action-select', function () {
         await render(hbs`<GhDistributionActionSelect @post=post />`);
 
         expect(this.element, 'top-level elements').to.exist;
-        expect(find('#publish-action'), 'publish action').to.exist;
-        expect(findAll('option'), 'number of options').to.have.length(3);
-        expect(find('select').value, 'selected option value').to.equal('publish_send');
     });
 });