feat: new onboarding dialog

src/lib/components/Notifications/Notification.svelte

@@ -21,14 +21,10 @@
 </script>
 
 {#if visible && !persistent}
-	<div class={classNames('bg-primary-800 rounded-xl px-6 py-2 w-80', {})}>
-		{#if !body}
-			<h1>{title}</h1>
-		{:else}
-			<div>
-				<h1>{title}</h1>
-				<div>{body}</div>
-			</div>
+	<div class={classNames('bg-primary-800 rounded-xl px-6 py-4 w-80 shadow-xl', {})}>
+		<h1 class="mb-1 h5">{title}</h1>
+		{#if body}
+			<div class="text-secondary-400">{body}</div>
 		{/if}
 	</div>
 {/if}

src/lib/components/Notifications/NotificationStack.svelte

@@ -2,8 +2,13 @@
 	import { flip } from 'svelte/animate';
 	import { fly, fade } from 'svelte/transition';
 	import { notificationStack } from './notification.store';
+	import { onDestroy } from 'svelte';
 
 	export let persistent = false;
+
+	onDestroy(() => {
+		notificationStack.destroy([]);	
+	})
 </script>
 
 <div class="fixed top-8 right-8 z-50 flex flex-col">

src/lib/components/Notifications/notification.store.ts

@@ -18,9 +18,14 @@ function useNotificationStack() {
 		return id;
 	}
 
+	function destroy() {
+		notifications.set([]);
+	}
+
 	return {
 		subscribe: notifications.subscribe,
-		create
+		create,
+		destroy
 	};
 }
 
@@ -29,7 +34,8 @@ export const createErrorNotification = (title: string, message?: string) => {
 	console.error(message);
 	notificationStack.create(Notification, {
 		title: message ? title : 'Unexpected error occurred',
-		body: message ?? title
+		body: message ?? title,
+		type: 'error'
 	});
 };
 export const createInfoNotification = (title: string, message?: string) => {