From 25de2b42ebea2c95e736a7d54546e462b6d348b1 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 10 Jun 2022 10:53:15 +0200
Subject: [PATCH] feat: implement new alerts

---
 src/lib/layout/notification.svelte  | 53 ++++++++++++++++++++++++-----
 src/lib/layout/notifications.svelte |  7 ++--
 src/lib/stores/notifications.ts     |  1 +
 3 files changed, 49 insertions(+), 12 deletions(-)

diff --git a/src/lib/layout/notification.svelte b/src/lib/layout/notification.svelte
index 58aa43798..01ee630e9 100644
--- a/src/lib/layout/notification.svelte
+++ b/src/lib/layout/notification.svelte
@@ -3,17 +3,54 @@
     import type { Notification } from '../stores/notifications';
 
     export let type: Notification['type'] = 'info';
+    export let title: Notification['title'];
+
+    let icon: string;
+    switch (type) {
+        case 'success':
+            icon = 'check-circle';
+            break;
+        case 'warning':
+            icon = 'exclamation';
+            break;
+
+        case 'error':
+            icon = 'exclamation-circle';
+            break;
+
+        case 'info':
+            icon = 'info';
+            break;
+
+        default:
+            icon = '';
+            break;
+    }
 
     const dispatch = createEventDispatcher();
 </script>
 
-<li class="toaster-item">
-    <div class={`toaster-message is-${type}`}>
-        <button class="x-button" on:click={() => dispatch('dismiss')}>
-            <span class="icon-cancel" aria-hidden="true" />
-        </button>
-        <span class="text">
-            <slot />
-        </span>
+<li class={`alert-sticky is-${type}`}>
+    <button class="x-button" aria-label="close alert" on:click={() => dispatch('dismiss')}>
+        <span class="icon-x" aria-hidden="true" />
+    </button>
+    <div class="alert-sticky-image">
+        <span class={`icon-${icon}`} aria-hidden="true" />
     </div>
+    <div class="alert-sticky-content">
+        {#if title}
+            <h4 class="alert-sticky-title">{title}</h4>
+        {/if}
+        <p><slot /></p>
+    </div>
+    <!-- 
+    <div class="buttons u-flex">
+        <button class="button is-text is-small">
+            <span class="text">Action 1</span>
+        </button>
+        <button class="button is-text is-small">
+            <span class="text">Action 2</span>
+        </button>
+    </div>
+-->
 </li>
diff --git a/src/lib/layout/notifications.svelte b/src/lib/layout/notifications.svelte
index 6920f9a54..547ae8def 100644
--- a/src/lib/layout/notifications.svelte
+++ b/src/lib/layout/notifications.svelte
@@ -9,6 +9,7 @@
             {#each $notifications as notification (notification.id)}
                 <Notification
                     type={notification.type}
+                    title={notification.title}
                     on:dismiss={() => dismissNotification(notification.id)}>
                     {notification.message}
                 </Notification>
@@ -20,10 +21,8 @@
 <style lang="scss">
     section {
         position: fixed;
-        bottom: 0;
-        left: 0;
-        right: 0;
+        top: calc(var(--main-header-height) + 24px);
+        right: 24px;
         z-index: 1000;
-        margin-bottom: 0.5rem;
     }
 </style>
diff --git a/src/lib/stores/notifications.ts b/src/lib/stores/notifications.ts
index 75bfbe8f4..5a9fffe9d 100644
--- a/src/lib/stores/notifications.ts
+++ b/src/lib/stores/notifications.ts
@@ -6,6 +6,7 @@ export type Notification = {
     dismissible?: boolean;
     timeout?: number;
     message: string;
+    title?: string;
 };
 
 let counter = 0;