Merge pull request #598 from Adamant-im/fix/snackbar-redesign

fix: snackbar redesign
Adamant-im · Feb 26, 2024 · f6e4008 · f6e4008
2 parents 82f8274 + a788efa
commit f6e4008
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 7 deletions.
diff --git a/src/components/AppSnackbar.vue b/src/components/AppSnackbar.vue
@@ -3,16 +3,17 @@
     v-model="show"
     :timeout="timeout"
     :color="color"
-    :class="className"
-    variant="elevated"
+    :class="[className, { outlined: variant === 'outlined' }]"
+    :variant="variant"
     location="bottom"
     width="100%"
     :multi-line="message.length > 50"
+    @click:outside="show = false"
   >
     <div :class="`${className}__container`">
       {{ message }}
       <v-btn
-        v-if="timeout === 0 || timeout > 2000"
+        v-if="timeout === 0 || timeout > 2000 || timeout === -1"
         size="x-small"
         variant="text"
         fab
@@ -48,6 +49,9 @@ export default {
     },
     timeout() {
       return this.$store.state.snackbar.timeout
+    },
+    variant() {
+      return this.$store.state.snackbar.variant
     }
   }
 }
@@ -65,6 +69,7 @@ export default {
     margin: 0 auto;
     border-radius: 0;
     max-width: 300px;
+    border: 2px solid transparent;
   }
 
   :deep(.v-snackbar__content) {
@@ -83,6 +88,12 @@ export default {
     padding: 0;
     width: 36px;
   }
+
+  &.outlined {
+    :deep(.v-snackbar__wrapper) {
+      border-color: map-get($adm-colors, 'danger');
+    }
+  }
 }
 
 .v-theme--light.app-snackbar {

diff --git a/src/store/modules/snackbar/index.js b/src/store/modules/snackbar/index.js
@@ -4,19 +4,21 @@ const initialState = {
   show: false,
   message: '',
   timeout: SNACKBAR_TIMEOUT,
-  color: ''
+  color: '',
+  variant: ''
 }
 
 const state = () => ({
   ...initialState // clone object
 })
 
 const mutations = {
-  show(state, { message = '', timeout = SNACKBAR_TIMEOUT, color = '' }) {
+  show(state, { message = '', timeout = SNACKBAR_TIMEOUT, color = '', variant = '' }) {
     if (message) {
       state.message = message
       state.color = color
       state.timeout = timeout
+      state.variant = variant
 
       state.show = true
     }
@@ -28,6 +30,7 @@ const mutations = {
     state.message = initialState.message
     state.timeout = initialState.timeout
     state.color = initialState.color
+    state.variant = initialState.variant
   }
 }
 

diff --git a/src/views/SendFunds.vue b/src/views/SendFunds.vue
@@ -80,8 +80,8 @@ export default {
     onError(message) {
       this.$store.dispatch('snackbar/show', {
         message,
-        color: '#ED5270',
-        timeout: 5000
+        timeout: -1,
+        variant: 'outlined'
       })
     }
   }