From 42cfc02ef637d3a27fb7c0572dbe3703d6241fcb Mon Sep 17 00:00:00 2001
From: kvakazyambra <kvakazyambra@gmail.com>
Date: Wed, 25 Oct 2023 00:44:10 +0300
Subject: [PATCH] Snackbar style fixes

---
 public/icons/check-success.svg          |  4 ++++
 src/components/Nav/Snackbar.module.scss | 15 ++++++++++++++-
 src/components/Nav/Snackbar.tsx         | 11 +++++++++--
 3 files changed, 27 insertions(+), 3 deletions(-)
 create mode 100644 public/icons/check-success.svg

diff --git a/public/icons/check-success.svg b/public/icons/check-success.svg
new file mode 100644
index 00000000..61549770
--- /dev/null
+++ b/public/icons/check-success.svg
@@ -0,0 +1,4 @@
+<svg width="25" height="28" viewBox="0 0 25 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd"
+			d="M19.5 8.01738L17.4826 6L10.5029 12.9797L7.51738 9.99421L5.5 12.0116L10.5029 17.0145L19.5 8.01738Z" fill="#2BB452"/>
+</svg>
diff --git a/src/components/Nav/Snackbar.module.scss b/src/components/Nav/Snackbar.module.scss
index ade8289a..a0fb8e64 100644
--- a/src/components/Nav/Snackbar.module.scss
+++ b/src/components/Nav/Snackbar.module.scss
@@ -2,15 +2,28 @@
   min-height: 2px;
   background-color: var(--default-color);
   color: #fff;
+  font-size: 2rem;
+  font-weight: 500;
   transition: background-color 0.3s;
 
   &.error {
     background-color: #d00820;
   }
+
+  &.success {
+    .icon {
+      height: 1.8em;
+      margin-right: 0.5em;
+      margin-top: 0.1em;
+      width: 1.8em;
+    }
+  }
 }
 
 .content {
-  transition: height 0.3s, color 0.3s;
+  transition:
+    height 0.3s,
+    color 0.3s;
   height: 60px;
   display: flex;
   align-items: center;
diff --git a/src/components/Nav/Snackbar.tsx b/src/components/Nav/Snackbar.tsx
index bf2113a0..540e41bb 100644
--- a/src/components/Nav/Snackbar.tsx
+++ b/src/components/Nav/Snackbar.tsx
@@ -3,6 +3,7 @@ import { useSnackbar } from '../../context/snackbar'
 import styles from './Snackbar.module.scss'
 import { Transition } from 'solid-transition-group'
 import { clsx } from 'clsx'
+import { Icon } from '../_shared/Icon'
 
 export const Snackbar = () => {
   const { snackbarMessage } = useSnackbar()
@@ -10,7 +11,8 @@ export const Snackbar = () => {
   return (
     <div
       class={clsx(styles.snackbar, {
-        [styles.error]: snackbarMessage()?.type === 'error'
+        [styles.error]: snackbarMessage()?.type === 'error',
+        [styles.success]: snackbarMessage()?.type === 'success'
       })}
     >
       <Transition
@@ -19,7 +21,12 @@ export const Snackbar = () => {
         onExit={(el, done) => setTimeout(() => done(), 300)}
       >
         <Show when={snackbarMessage()}>
-          <div class={styles.content}>{snackbarMessage().body}</div>
+          <div class={styles.content}>
+            <Show when={snackbarMessage()?.type === 'success'}>
+              <Icon name="check-success" class={styles.icon} />
+            </Show>
+            {snackbarMessage().body}
+          </div>
         </Show>
       </Transition>
     </div>