Updated access settings dropdowns and icons

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

@@ -16,14 +16,14 @@ export default class SettingsMembersDefaultPostAccess extends Component {
             name: 'Members only',
             description: 'All logged-in members',
             value: 'members',
-            icon: 'globe',
-            icon_color: 'green'
+            icon: 'members-all',
+            icon_color: 'blue'
         }, {
             name: 'Paid-members only',
             description: 'Only logged-in members with an active Stripe subscription',
             value: 'paid',
-            icon: 'globe',
-            icon_color: 'green'
+            icon: 'members-paid',
+            icon_color: 'pink'
         }];
     }
 

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

@@ -17,13 +17,13 @@ export default class SettingsMembersSubscriptionAccess extends Component {
             description: 'People can sign in from your site but won\'t be able to sign up',
             value: 'invite',
             icon: 'email-love-letter',
-            icon_color: 'green'
+            icon_color: 'blue'
         }, {
             name: 'Nobody',
             description: 'No one will be able to subscribe or sign in',
             value: 'none',
-            icon: 'globe',
-            icon_color: 'green'
+            icon: 'no-members',
+            icon_color: 'pink'
         }];
     }
 

ghost/admin/app/styles/layouts/settings.css

@@ -1434,10 +1434,17 @@ p.theme-validation-details {
 
 .gh-setting-dropdown {
     margin-top: 1.2rem;
+    cursor: pointer;
+    background: var(--white);
+}
+
+.gh-setting-dropdown .ember-power-select-status-icon {
+    right: 24px;
 }
 
 .gh-setting-dropdown .gh-setting-dropdown-content {
     display: flex;
+    align-items: center;
     margin: 1.6rem 1rem;
 }
 
@@ -1447,13 +1454,14 @@ p.theme-validation-details {
 
 .gh-setting-dropdown-list .gh-setting-dropdown-content {
     display: flex;
+    align-items: center;
     margin: 1.4rem 1rem;
 }
 
 .gh-setting-dropdown-content svg {
-    width: 3.2rem;
-    height: 3.2rem;
-    margin-right: 1rem;
+    width: 3rem;
+    height: 3rem;
+    margin-right: 1.2rem;
 }
 
 .gh-setting-richdd-container {

ghost/admin/public/assets/icons/members-all.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M6 1.25a2.5 2.5 0 100 5 2.5 2.5 0 000-5zm-3.5 2.5a3.5 3.5 0 117 0 3.5 3.5 0 01-7 0z" fill="#000"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M1.934 9.434A5.75 5.75 0 0111.75 13.5v2.25a.5.5 0 01-.5.5H9.452l-.704 7.05a.5.5 0 01-.498.45h-4.5a.5.5 0 01-.498-.45l-.704-7.05H.75a.5.5 0 01-.5-.5V13.5a5.75 5.75 0 011.684-4.066zM6 8.75a4.75 4.75 0 00-4.75 4.75v1.75H3a.5.5 0 01.498.45l.704 7.05h3.596l.704-7.05A.5.5 0 019 15.25h1.75V13.5A4.75 4.75 0 006 8.75zM18 1.25a2.5 2.5 0 100 5 2.5 2.5 0 000-5zm-3.5 2.5a3.5 3.5 0 117 0 3.5 3.5 0 01-7 0z" fill="#000"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M15.868 8.164A5.75 5.75 0 0123.75 13.5v2.25a.5.5 0 01-.5.5h-1.798l-.705 7.05a.5.5 0 01-.497.45h-4.5a.5.5 0 01-.498-.45l-.705-7.05H13.5a.5.5 0 110-1H15a.5.5 0 01.498.45l.704 7.05h3.595l.705-7.05a.5.5 0 01.498-.45h1.75V13.5a4.75 4.75 0 00-8.822-2.443.5.5 0 11-.857-.514 5.75 5.75 0 012.797-2.38z" fill="#000"/>
+</svg>

ghost/admin/public/assets/icons/members-paid.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M3.5 24a.502.502 0 01-.498-.458L2.54 18H.5a.5.5 0 01-.5-.5V14c0-3.033 2.467-5.5 5.5-5.5S11 10.967 11 14v3.5a.5.5 0 01-.5.5H8.46l-.462 5.542A.502.502 0 017.5 24h-4zm3.54-1l.462-5.542A.502.502 0 018 17h2v-3c0-2.481-2.019-4.5-4.5-4.5A4.505 4.505 0 001 14v3h2c.258 0 .477.201.498.458L3.96 23h3.08zM5.5 8c-2.206 0-4-1.794-4-4s1.794-4 4-4 4 1.794 4 4-1.794 4-4 4zm0-7c-1.654 0-3 1.346-3 3s1.346 3 3 3 3-1.346 3-3-1.346-3-3-3zM17.439 10.87a.502.502 0 01-.344-.137 4.48 4.48 0 00-5.006-.811.502.502 0 01-.423-.906 5.472 5.472 0 016.116.99.501.501 0 01-.343.864zM14 8c-1.93 0-3.5-1.57-3.5-3.5S12.07 1 14 1s3.5 1.57 3.5 3.5S15.93 8 14 8zm0-6a2.503 2.503 0 00-2.5 2.5C11.5 5.879 12.622 7 14 7s2.5-1.121 2.5-2.5S15.378 2 14 2zM18.5 24a5.506 5.506 0 01-5.5-5.5c0-3.033 2.467-5.5 5.5-5.5s5.5 2.467 5.5 5.5-2.467 5.5-5.5 5.5zm0-10a4.505 4.505 0 00-4.5 4.5c0 2.481 2.019 4.5 4.5 4.5s4.5-2.019 4.5-4.5-2.019-4.5-4.5-4.5z" fill="#000"/>
+  <path d="M18.5 22a.5.5 0 01-.5-.5V21h-1.5a.5.5 0 010-1h3a.5.5 0 000-1h-2c-.827 0-1.5-.673-1.5-1.5s.673-1.5 1.5-1.5h.5v-.5a.5.5 0 011 0v.5h1.5a.5.5 0 010 1h-3a.5.5 0 000 1h2c.827 0 1.5.673 1.5 1.5s-.673 1.5-1.5 1.5H19v.5a.5.5 0 01-.5.5z" fill="#000"/>
+</svg>

ghost/admin/public/assets/icons/no-members.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M3.5 24a.502.502 0 01-.498-.458L2.54 18H.5a.5.5 0 01-.5-.5V14c0-3.033 2.467-5.5 5.5-5.5S11 10.967 11 14v3.5a.5.5 0 01-.5.5H8.46l-.462 5.542A.502.502 0 017.5 24h-4zm3.54-1l.462-5.542A.502.502 0 018 17h2v-3c0-2.481-2.019-4.5-4.5-4.5A4.505 4.505 0 001 14v3h2c.258 0 .477.201.498.458L3.96 23h3.08zM5.5 8c-2.206 0-4-1.794-4-4s1.794-4 4-4 4 1.794 4 4-1.794 4-4 4zm0-7c-1.654 0-3 1.346-3 3s1.346 3 3 3 3-1.346 3-3-1.346-3-3-3zM17.439 10.87a.502.502 0 01-.344-.137 4.48 4.48 0 00-5.006-.811.502.502 0 01-.423-.906 5.472 5.472 0 016.116.99.501.501 0 01-.343.864zM14 8c-1.93 0-3.5-1.57-3.5-3.5S12.07 1 14 1s3.5 1.57 3.5 3.5S15.93 8 14 8zm0-6a2.503 2.503 0 00-2.5 2.5C11.5 5.879 12.622 7 14 7s2.5-1.121 2.5-2.5S15.378 2 14 2zM18.5 24a5.463 5.463 0 01-3.856-1.583.262.262 0 01-.065-.067A5.446 5.446 0 0113 18.5c0-3.033 2.467-5.5 5.5-5.5a5.46 5.46 0 013.87 1.596l.018.016c.006.005.011.012.016.018A5.462 5.462 0 0124 18.5c0 3.033-2.467 5.5-5.5 5.5zm-2.803-1.989A4.482 4.482 0 0018.5 23c2.481 0 4.5-2.019 4.5-4.5 0-1.02-.349-2.005-.989-2.803l-6.314 6.314zM18.5 14a4.505 4.505 0 00-4.5 4.5c0 1.02.35 2.005.99 2.804l6.315-6.314c-.8-.64-1.785-.99-2.805-.99z" fill="#000"/>
+</svg>