Updated single member delete design

no issue
- updated single member delete modal copy + design layout
- swapped switch to regular checkbox + applied red color to it
- set button label based on checkbox state

ghost/admin/app/components/modal-delete-member.hbs

@@ -1,28 +1,28 @@
 <header class="modal-header">
-    <h1>Are you sure you want to delete this member?</h1>
+    <h1>Delete member account</h1>
 </header>
 <a class="close" href="" role="button" title="Close" {{action "closeModal"}}>{{svg-jar "close"}}<span class="hidden">Close</span></a>
 
 <div class="modal-body">
-    <p>
-        You're about to delete "<strong>{{or this.member.name this.member.email}}</strong>". This is permanent! We warned you, k?
+    <p class="mb6">
+        Permanently delete <strong>{{this.member.email}}</strong> from Ghost.
     </p>
 
     {{#if this.hasActiveStripeSubscriptions}}
         <div class="flex justify-between">
-            <div>
-                <h4>Cancel Stripe subscription</h4>
-                <p class="pa0 ma0">If disabled, member's Stripe subscription will continue</p>
-            </div>
-            <div class="for-switch">
-                <label class="switch">
+            <div class="form-group for-checkbox gh-member-cancelstripe-checkbox">
+                <label class="checkbox">
                     <input
                         class="gh-input"
                         type="checkbox"
                         checked={{this.shouldCancelSubscriptions}}
                         {{on "click" (action "toggleShouldCancelSubscriptions")}}
                     />
-                    <span class="input-toggle-component mt1"></span>
+                    <span class="input-toggle-component"></span>
+                    <div>
+                        <h4>Also cancel subscription in Stripe</h4>
+                        <p>If disabled, the member’s premium subscription will continue</p>
+                    </div>
                 </label>
             </div>
         </div>
@@ -31,5 +31,5 @@
 
 <div class="modal-footer">
     <button {{action "closeModal"}} class="gh-btn"><span>Cancel</span></button>
-    <GhTaskButton @buttonText="Delete" @successText="Deleted" @task={{this.deleteMember}} @class="gh-btn gh-btn-red gh-btn-icon" />
+    <GhTaskButton @buttonText={{if this.shouldCancelSubscriptions "Delete member + Cancel subscription" "Delete member"}} @successText="Deleted" @task={{this.deleteMember}} @class="gh-btn gh-btn-red gh-btn-icon" />
 </div>

ghost/admin/app/components/modal-delete-member.js

@@ -1,6 +1,7 @@
 import ModalComponent from 'ghost-admin/components/modal-base';
 import {alias} from '@ember/object/computed';
 import {computed} from '@ember/object';
+import {reads} from '@ember/object/computed';
 import {inject as service} from '@ember/service';
 import {task} from 'ember-concurrency';
 
@@ -14,6 +15,8 @@ export default ModalComponent.extend({
 
     member: alias('model'),
 
+    cancelSubscriptions: reads('shouldCancelSubscriptions'),
+
     hasActiveStripeSubscriptions: computed('member', function () {
         let subscriptions = this.member.get('stripe');
 
@@ -34,7 +37,7 @@ export default ModalComponent.extend({
         },
 
         toggleShouldCancelSubscriptions() {
-            this.shouldCancelSubscriptions = !this.shouldCancelSubscriptions;
+            this.set('shouldCancelSubscriptions', !this.shouldCancelSubscriptions);
         }
     },
 

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

@@ -436,6 +436,31 @@ textarea.gh-member-details-textarea {
     flex-basis: 408px;
 }
 
+.gh-member-cancelstripe-checkbox {
+    margin-bottom: 4px;
+}
+
+.gh-member-cancelstripe-checkbox label {
+    display: flex;
+}
+
+.gh-member-cancelstripe-checkbox h4 {
+    font-size: 1.4rem;
+    font-weight: 600;
+    line-height: 1.15em;
+    margin-top: 2px;
+}
+
+.gh-member-cancelstripe-checkbox label p {
+    margin-top: -2px;
+    color: var(--middarkgrey);
+}
+
+.gh-member-cancelstripe-checkbox input:checked + .input-toggle-component {
+    border-color: color-mod(var(--red) l(-5%));
+    background: var(--red);
+}
+
 /* Import modal
 /* ---------------------------------------------------------- */