From c92434a56b60e20d7b6627508149b47b55ac49ce Mon Sep 17 00:00:00 2001
From: Yulia Hermak <germak372@gmail.com>
Date: Wed, 14 Feb 2024 01:08:45 +0000
Subject: [PATCH 1/3] fix: snackbar redesign

---
 src/components/AppSnackbar.vue      | 7 +++++--
 src/store/modules/snackbar/index.js | 7 +++++--
 src/views/SendFunds.vue             | 3 ++-
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/components/AppSnackbar.vue b/src/components/AppSnackbar.vue
index 609d54a88..0bbe2ee0a 100644
--- a/src/components/AppSnackbar.vue
+++ b/src/components/AppSnackbar.vue
@@ -4,7 +4,7 @@
     :timeout="timeout"
     :color="color"
     :class="className"
-    variant="elevated"
+    :variant="variant"
     location="bottom"
     width="100%"
     :multi-line="message.length > 50"
@@ -12,7 +12,7 @@
     <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 +48,9 @@ export default {
     },
     timeout() {
       return this.$store.state.snackbar.timeout
+    },
+    variant() {
+      return this.$store.state.snackbar.variant
     }
   }
 }
diff --git a/src/store/modules/snackbar/index.js b/src/store/modules/snackbar/index.js
index dd3a5ed60..e78bea575 100644
--- a/src/store/modules/snackbar/index.js
+++ b/src/store/modules/snackbar/index.js
@@ -4,7 +4,8 @@ const initialState = {
   show: false,
   message: '',
   timeout: SNACKBAR_TIMEOUT,
-  color: ''
+  color: '',
+  variant: ''
 }
 
 const state = () => ({
@@ -12,11 +13,12 @@ const state = () => ({
 })
 
 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
index 0a2761ba5..2cd1e8ba4 100644
--- a/src/views/SendFunds.vue
+++ b/src/views/SendFunds.vue
@@ -80,8 +80,9 @@ export default {
     onError(message) {
       this.$store.dispatch('snackbar/show', {
         message,
+        timeout: -1,
         color: '#ED5270',
-        timeout: 5000
+        variant: 'outlined'
       })
     }
   }

From f3d21b1a3598c6b54541196f410cd1cd523c4ea2 Mon Sep 17 00:00:00 2001
From: Yulia Hermak <germak372@gmail.com>
Date: Sat, 17 Feb 2024 19:37:18 +0000
Subject: [PATCH 2/3] fix: border color red

---
 src/components/AppSnackbar.vue | 9 ++++++++-
 src/views/SendFunds.vue        | 1 -
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/AppSnackbar.vue b/src/components/AppSnackbar.vue
index 0bbe2ee0a..e5727a051 100644
--- a/src/components/AppSnackbar.vue
+++ b/src/components/AppSnackbar.vue
@@ -3,7 +3,7 @@
     v-model="show"
     :timeout="timeout"
     :color="color"
-    :class="className"
+    :class="[className, { outlined: variant === 'outlined' }]"
     :variant="variant"
     location="bottom"
     width="100%"
@@ -68,6 +68,7 @@ export default {
     margin: 0 auto;
     border-radius: 0;
     max-width: 300px;
+    border: 2px solid transparent;
   }
 
   :deep(.v-snackbar__content) {
@@ -86,6 +87,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/views/SendFunds.vue b/src/views/SendFunds.vue
index 2cd1e8ba4..69bf5e680 100644
--- a/src/views/SendFunds.vue
+++ b/src/views/SendFunds.vue
@@ -81,7 +81,6 @@ export default {
       this.$store.dispatch('snackbar/show', {
         message,
         timeout: -1,
-        color: '#ED5270',
         variant: 'outlined'
       })
     }

From a788efadd32af55262013100774bba12dbf175c3 Mon Sep 17 00:00:00 2001
From: Yulia Hermak <germak372@gmail.com>
Date: Mon, 19 Feb 2024 19:30:10 +0000
Subject: [PATCH 3/3] fix: clicking outside the element snackbar

---
 src/components/AppSnackbar.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/AppSnackbar.vue b/src/components/AppSnackbar.vue
index e5727a051..fd9f9060f 100644
--- a/src/components/AppSnackbar.vue
+++ b/src/components/AppSnackbar.vue
@@ -8,6 +8,7 @@
     location="bottom"
     width="100%"
     :multi-line="message.length > 50"
+    @click:outside="show = false"
   >
     <div :class="`${className}__container`">
       {{ message }}