enh: Improve danger-zone layout (#4039)

Author: snitin315

app/templates/components/account/danger-zone.hbs

@@ -1,23 +1,28 @@
 <div class="row">
-  {{#if isUserDeletable}}
-    <p>
-      {{t 'All user data will be deleted. Your user data will be entirely erased and any data that will stay 
-      in the system for accounting purposes will be anonymised and there will be no link to any of your personal information. 
-      Once you delete this account, you will have no longer access to the system.'}}
-    </p>
-    <button {{action 'openDeleteUserModal' data.user.id data.user.email}} class='ui red button'>
-      {{t 'Delete Your Account'}}
-    </button>
+  <div class="ui grid">
+    <div class="ui left aligned sixteen wide mobile ten wide computer column">
+      <h3 class="ui header">
+        {{t 'Delete Your Account'}}
+      </h3>
+      <p class="ui muted text">
+        {{#if isUserDeletable}}
+          {{t 'All user data will be deleted. Your user data will be entirely erased and any data that will stay 
+          in the system for accounting purposes will be anonymised and there will be no link to any of your personal information. 
+          Once you delete this account, you will have no longer access to the system.'}}
+        {{else}}
+          {{t 'Your account currently cannot be deleted as active events and/or orders are associated with it. 
+          Before you can delete your account you must transfer the ownership of your event(s) to another organizer or cancel your event(s). 
+          If you have ticket orders stored in the system, please cancel your orders first too.'}}
+        {{/if}}  
+      </p>
+    </div>
+    <div class="ui right aligned sixteen wide mobile six wide computer column">
+      <button {{action 'openDeleteUserModal' data.user.id data.user.email}} class={{if isUserDeletable 'ui labeled icon red button' 'ui labeled icon red button disabled'}}>
+        <i class="trash icon"></i>
+        {{t 'Delete Your Account'}}
+      </button>
+    </div>
     {{modals/user-delete-modal isLoading=isLoading isOpen=isUserDeleteModalOpen openConfirmDeleteUserModal=(action 'openConfirmDeleteUserModal') confirmEmail=confirmEmail userEmail=userEmail deleteUser=(action 'deleteUser' data.user)}}
     {{modals/confirm-user-delete-modal isLoading=isLoading isOpen=isConfirmUserDeleteModalOpen checked=checked deleteUser=(action 'deleteUser' data.user)}}
-  {{else}}
-    <p>
-      {{t 'Your account currently cannot be deleted as active events and/or orders are associated with it. 
-      Before you can delete your account you must transfer the ownership of your event(s) to another organizer or cancel your event(s). 
-      If you have ticket orders stored in the system, please cancel your orders first too.'}}
-    </p>
-    <button class='ui red button disabled'>
-      {{t 'Delete Your Account'}}
-    </button>
-  {{/if}}
+  </div>  
 </div>