From ccce29512ef929e3cbabe4cd5c5ae9ec76cd374b Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Mon, 10 Jun 2019 14:53:10 -0300
Subject: [PATCH] Fix styling

---
 .../DeleteAccount/DeleteAccount.vue           | 59 +++++++++----------
 1 file changed, 28 insertions(+), 31 deletions(-)

diff --git a/webapp/components/DeleteAccount/DeleteAccount.vue b/webapp/components/DeleteAccount/DeleteAccount.vue
index 9dc6a6bb6..872be24f5 100644
--- a/webapp/components/DeleteAccount/DeleteAccount.vue
+++ b/webapp/components/DeleteAccount/DeleteAccount.vue
@@ -20,21 +20,22 @@
       <ds-container>
         <transition name="slide-up">
           <div v-if="deleteEnabled">
+            <div
+              class="delete-input-label"
+              v-html="
+                $t('settings.deleteUserAccount.pleaseConfirm', {
+                  confirm: $t('settings.deleteUserAccount.contributionsCount', {
+                    count: currentUser.contributionsCount,
+                  }),
+                })
+              "
+            ></div>
+            <ds-space margin-bottom="xx-small" />
             <ds-flex :gutter="{ base: 'xx-small', md: 'small', lg: 'large' }">
               <ds-flex-item
                 v-if="currentUser.contributionsCount"
                 :width="{ base: '100%', sm: '100%', md: '100%', lg: '100%' }"
               >
-                <div
-                  class="delete-input-label"
-                  v-html="
-                    $t('settings.deleteUserAccount.pleaseConfirm', {
-                      confirm: $t('settings.deleteUserAccount.contributionsCount', {
-                        count: currentUser.contributionsCount,
-                      }),
-                    })
-                  "
-                ></div>
                 <ds-input
                   v-model="deleteContributionsValue"
                   @input="enableDeletion"
@@ -42,22 +43,23 @@
                 />
               </ds-flex-item>
             </ds-flex>
-            <ds-space margin-top="xx-small" />
+            <ds-space margin-bottom="xx-small" />
+            <div
+              class="delete-input-label"
+              v-html="
+                $t('settings.deleteUserAccount.pleaseConfirm', {
+                  confirm: $t('settings.deleteUserAccount.commentsCount', {
+                    count: currentUser.commentsCount,
+                  }),
+                })
+              "
+            ></div>
+            <ds-space margin-bottom="xx-small" />
             <ds-flex :gutter="{ base: 'xx-small', md: 'small', lg: 'large' }">
               <ds-flex-item
                 v-if="currentUser.commentsCount"
                 :width="{ base: '100%', sm: '100%', md: '100%', lg: '100%' }"
               >
-                <div
-                  class="delete-input-label"
-                  v-html="
-                    $t('settings.deleteUserAccount.pleaseConfirm', {
-                      confirm: $t('settings.deleteUserAccount.commentsCount', {
-                        count: currentUser.commentsCount,
-                      }),
-                    })
-                  "
-                ></div>
                 <ds-input
                   v-model="deleteCommentsValue"
                   @input="enableDeletion"
@@ -75,14 +77,13 @@
       </ds-container>
       <template slot="footer">
         <ds-container>
+          <div
+            class="delete-input-label"
+            v-html="$t('settings.deleteUserAccount.pleaseConfirm', { confirm: currentUser.name })"
+          ></div>
+          <ds-space margin-bottom="xx-small" />
           <ds-flex :gutter="{ base: 'xx-small', md: 'small', lg: 'large' }">
             <ds-flex-item :width="{ base: '100%', sm: '100%', md: '100%', lg: 1.75 }">
-              <div
-                class="delete-input-label"
-                v-html="
-                  $t('settings.deleteUserAccount.pleaseConfirm', { confirm: currentUser.name })
-                "
-              ></div>
               <ds-input
                 v-model="enableDeletionValue"
                 @input="enableDeletion"
@@ -195,10 +196,6 @@ export default {
   border-color: $border-color-danger;
 }
 
-.ds-button-danger {
-  margin-top: 1.55rem;
-}
-
 .delete-input-label {
   font-size: $font-size-base;
 }