From 507890a7aa46a1903dc4024d3aa9860137b90921 Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Mon, 10 Jun 2019 14:11:44 -0300
Subject: [PATCH] Add CSS styling to danger message box

- lost the CSS when removed buefy
---
 .../DeleteAccount/DeleteAccount.vue           | 41 +++++++++++++------
 webapp/pages/settings.vue                     |  4 +-
 2 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/webapp/components/DeleteAccount/DeleteAccount.vue b/webapp/components/DeleteAccount/DeleteAccount.vue
index 3e6388238..9dc6a6bb6 100644
--- a/webapp/components/DeleteAccount/DeleteAccount.vue
+++ b/webapp/components/DeleteAccount/DeleteAccount.vue
@@ -1,20 +1,22 @@
 <template>
   <div>
     <ds-card hover>
-      <ds-space/>
+      <ds-space />
       <ds-container>
         <ds-flex>
           <ds-flex-item :width="{ base: '100%', sm: 0.75, md: 0.5, lg: 0.5 }">
-            <ds-icon name="warning" size="xxx-large" class="delete-warning-icon"/>
+            <ds-icon name="warning" size="xxx-large" class="delete-warning-icon" />
           </ds-flex-item>
           <ds-flex-item :width="{ base: '100%', sm: 5.25, md: 2.75, lg: 5.5 }">
             <ds-heading>{{ $t('settings.deleteUserAccount.name') }}</ds-heading>
           </ds-flex-item>
-          <ds-space/>
-          <ds-heading tag="h4">{{ $t('settings.deleteUserAccount.accountDescription') }}</ds-heading>
+          <ds-space />
+          <ds-heading tag="h4">
+            {{ $t('settings.deleteUserAccount.accountDescription') }}
+          </ds-heading>
         </ds-flex>
       </ds-container>
-      <ds-space/>
+      <ds-space />
       <ds-container>
         <transition name="slide-up">
           <div v-if="deleteEnabled">
@@ -40,7 +42,7 @@
                 />
               </ds-flex-item>
             </ds-flex>
-            <ds-space margin-top="xx-small"/>
+            <ds-space margin-top="xx-small" />
             <ds-flex :gutter="{ base: 'xx-small', md: 'small', lg: 'large' }">
               <ds-flex-item
                 v-if="currentUser.commentsCount"
@@ -62,10 +64,12 @@
                   class="enable-comment-deletion-input"
                 />
               </ds-flex-item>
+              <ds-flex-item :width="{ base: '100%', sm: '100%', md: '100%', lg: '100%' }">
+                <ds-section id="delete-user-account-warning">
+                  <div v-html="$t('settings.deleteUserAccount.accountWarning')"></div>
+                </ds-section>
+              </ds-flex-item>
             </ds-flex>
-            <div class="message is-danger">
-              <div class="message-body" v-html="$t('settings.deleteUserAccount.accountWarning')"></div>
-            </div>
           </div>
         </transition>
       </ds-container>
@@ -75,7 +79,9 @@
             <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 })"
+                v-html="
+                  $t('settings.deleteUserAccount.pleaseConfirm', { confirm: currentUser.name })
+                "
               ></div>
               <ds-input
                 v-model="enableDeletionValue"
@@ -89,7 +95,9 @@
                 danger
                 :disabled="isLoading || !deleteEnabled"
                 @click="handleSubmit"
-              >{{ $t('settings.deleteUserAccount.name') }}</ds-button>
+              >
+                {{ $t('settings.deleteUserAccount.name') }}
+              </ds-button>
             </ds-flex-item>
           </ds-flex>
         </ds-container>
@@ -201,6 +209,15 @@ b.is-danger {
 
 .ds-card-footer {
   border-top: $border-size-base solid $border-color-softest;
-  background-color: $background-color-warning-inverse;
+  background-color: $background-color-danger-inverse;
+}
+
+#delete-user-account-warning {
+  background-color: $background-color-danger-inverse;
+  border-left: $border-size-x-large solid $background-color-danger-active;
+  color: $text-color-danger;
+  margin-left: 0px;
+  margin-right: 0px;
+  border-radius: $border-radius-x-large;
 }
 </style>
diff --git a/webapp/pages/settings.vue b/webapp/pages/settings.vue
index 0c7f0fbe5..1284aea7f 100644
--- a/webapp/pages/settings.vue
+++ b/webapp/pages/settings.vue
@@ -3,11 +3,11 @@
     <ds-heading tag="h1">{{ $t('settings.name') }}</ds-heading>
     <ds-flex gutter="small">
       <ds-flex-item :width="{ base: '100%', md: '200px' }">
-        <ds-menu :routes="routes" :is-exact="() => true"/>
+        <ds-menu :routes="routes" :is-exact="() => true" />
       </ds-flex-item>
       <ds-flex-item :width="{ base: '100%', md: 1 }">
         <transition name="slide-up" appear>
-          <nuxt-child/>
+          <nuxt-child />
         </transition>
       </ds-flex-item>
     </ds-flex>