Added icons to membership dropdown options

no issue

- add icon + icon color to the subscription access and default post access option lists
- updated templates to use icon in trigger and option display
- fixed ember-power-select styles overriding svgs in trigger

ghost/admin/app/components/settings/members-default-post-access.hbs

@@ -11,9 +11,11 @@
         @selected={{this.selectedOption}}
         @onChange={{this.setDefaultContentVisibility}}
         @disabled={{eq this.settings.membersSignupAccess "none"}}
+        @triggerClass="gh-setting-dropdown"
         as |option|
     >
         <div class="flex ma2">
+            {{svg-jar option.icon class=(concat "w8 h8 mr2 fill-" (or option.icon_color "green"))}}
             <div class="gh-radio-label">
                 {{option.name}}<br>
                 <div class="gh-radio-desc">{{option.description}}</div>

ghost/admin/app/components/settings/members-default-post-access.js

@@ -9,15 +9,21 @@ export default class SettingsMembersDefaultPostAccess extends Component {
         return [{
             name: 'Public',
             description: 'All site visitors to your site, no login required',
-            value: 'public'
+            value: 'public',
+            icon: 'globe',
+            icon_color: 'green'
         }, {
             name: 'Members only',
             description: 'All logged-in members',
-            value: 'members'
+            value: 'members',
+            icon: 'globe',
+            icon_color: 'green'
         }, {
             name: 'Paid-members only',
             description: 'Only logged-in mmembers with an active Stripe subscription',
-            value: 'paid'
+            value: 'paid',
+            icon: 'globe',
+            icon_color: 'green'
         }];
     }
 

ghost/admin/app/components/settings/members-subscription-access.hbs

@@ -10,9 +10,11 @@
         @options={{this.options}}
         @selected={{this.selectedOption}}
         @onChange={{this.setSignupAccess}}
+        @triggerClass="gh-setting-dropdown"
         as |option|
     >
         <div class="flex ma2">
+            {{svg-jar option.icon class=(concat "w8 h8 mr2 fill-" (or option.icon_color "green"))}}
             <div class="gh-radio-label">
                 {{option.name}}<br>
                 <div class="gh-radio-desc">{{option.description}}</div>

ghost/admin/app/components/settings/members-subscription-access.js

@@ -9,15 +9,21 @@ export default class SettingsMembersSubscriptionAccess extends Component {
         return [{
             name: 'Anyone can sign up',
             description: 'All visitors will be able to subscribe and sign in',
-            value: 'all'
+            value: 'all',
+            icon: 'globe',
+            icon_color: 'green'
         }, {
             name: 'Only people I invite',
             description: 'People can sign in from your site but won\'t be able to sign up',
-            value: 'invite'
+            value: 'invite',
+            icon: 'globe',
+            icon_color: 'green'
         }, {
             name: 'Nobody',
             description: 'No one will be able to subscribe or sign in',
-            value: 'none'
+            value: 'none',
+            icon: 'globe',
+            icon_color: 'green'
         }];
     }
 

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

@@ -9,7 +9,7 @@
     border: 1px solid color-mod(var(--lightgrey) l(-5%) s(-5%));
 }
 
-.ember-power-select-trigger svg {
+.ember-power-select-trigger:not(.gh-setting-dropdown) svg {
     height: 4px;
     width: 6.11px;
     margin-left: 2px;
@@ -17,7 +17,7 @@
     vertical-align: middle;
 }
 
-.ember-power-select-trigger svg path {
+.ember-power-select-trigger:not(.gh-setting-dropdown) svg path {
     stroke: var(--darkgrey);
 }