Snackbar style fixes

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>

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;

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>