From 93233a5c76f98c0b2f176e0e5d94c9a22a213429 Mon Sep 17 00:00:00 2001
From: Alina Beck <alina.beck@mail.com>
Date: Tue, 17 Dec 2019 14:35:49 +0530
Subject: [PATCH] style button loading state

---
 .../_new/generic/BaseButton/BaseButton.vue    | 24 ++++++++++++++++++-
 .../_new/generic/BaseIcon/BaseIcon.vue        |  1 +
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/webapp/components/_new/generic/BaseButton/BaseButton.vue b/webapp/components/_new/generic/BaseButton/BaseButton.vue
index cd9da5f91..502fc4bb8 100644
--- a/webapp/components/_new/generic/BaseButton/BaseButton.vue
+++ b/webapp/components/_new/generic/BaseButton/BaseButton.vue
@@ -1,13 +1,18 @@
 <template>
   <button :class="buttonClass" :disabled="loading">
-    <ds-spinner size="small" v-if="loading" />
+    <loading-spinner v-if="loading" />
     <base-icon v-if="icon" :name="icon" />
     <slot />
   </button>
 </template>
 
 <script>
+import LoadingSpinner from '~/components/_new/generic/LoadingSpinner/LoadingSpinner'
+
 export default {
+  components: {
+    LoadingSpinner,
+  },
   props: {
     circle: {
       type: Boolean,
@@ -35,6 +40,7 @@ export default {
 
       if (this.$slots.default == null) buttonClass += ' --icon-only'
       if (this.circle) buttonClass += ' --circle'
+      if (this.loading) buttonClass += ' --loading'
       if (this.primary) buttonClass += ' --primary'
       else if (this.danger) buttonClass += ' --danger'
 
@@ -51,6 +57,7 @@ export default {
   justify-content: center;
   height: 36px;
   padding: 0 12px;
+  vertical-align: bottom;
   color: $color-primary;
   background-color: $color-neutral-90;
   border: 1px solid $color-primary;
@@ -126,5 +133,20 @@ export default {
   &:not(.--icon-only) > .base-icon {
     margin-right: 6px;
   }
+
+  > .loading-spinner {
+    position: absolute;
+    height: 26px;
+    color: $color-neutral-60;
+  }
+
+  &.--loading {
+    color: $color-neutral-80;
+
+    &.--primary > .loading-spinner,
+    &.--danger > .loading-spinner {
+      color: $color-neutral-100;
+    }
+  }
 }
 </style>
diff --git a/webapp/components/_new/generic/BaseIcon/BaseIcon.vue b/webapp/components/_new/generic/BaseIcon/BaseIcon.vue
index c7752b7ec..a1c34555e 100644
--- a/webapp/components/_new/generic/BaseIcon/BaseIcon.vue
+++ b/webapp/components/_new/generic/BaseIcon/BaseIcon.vue
@@ -37,6 +37,7 @@ export default {
 <style lang="scss">
 .base-icon {
   display: inline-flex;
+  vertical-align: bottom;
 
   > .svg {
     height: 1.2em;