From 0b32d7babb88f1e67c299d529ff860dbe6e39e24 Mon Sep 17 00:00:00 2001
From: Nassim Jahnke <jahnke.nassim@gmail.com>
Date: Fri, 3 Jun 2022 18:35:26 +0200
Subject: [PATCH] Dumb notification changes Not done, also missing fade
 effects, since vue's transition group was acting up

---
 frontend-new/src/components/Notifications.vue | 10 +++++++---
 frontend-new/src/store/notification.ts        |  7 ++++---
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/frontend-new/src/components/Notifications.vue b/frontend-new/src/components/Notifications.vue
index d72334fd..58164a30 100644
--- a/frontend-new/src/components/Notifications.vue
+++ b/frontend-new/src/components/Notifications.vue
@@ -5,15 +5,19 @@ const notificationStore = useNotificationStore();
 </script>
 
 <template>
-  <div class="fixed h-screen flex bottom-0 left-0 right-0 items-end justify-center pointer-events-none z-60">
+  <div class="fixed h-screen flex bottom-15 right-10 items-end pointer-events-none z-60">
     <div>
       <div
         v-for="(notification, idx) in notificationStore.notifications"
         :key="idx"
-        class="rounded p-4 mb-2 pointer-events-auto"
-        :style="{ 'background-color': notification.color }"
+        class="rounded p-4 px-5 mb-2 pointer-events-auto text-right border-2px bg-slate-700"
+        :style="{ 'border-color': notification.color }"
       >
         <span class="inline-flex items-center">
+          <span class="text-lg mr-2">
+            <IconMdiAlertOutline v-if="notification.color === 'red'" class="text-red-600" />
+            <IconMdiCheck v-else-if="notification.color === 'green'" class="text-lime-600" />
+          </span>
           {{ notification.message }}
           <IconMdiClose v-if="notification.clearable" class="ml-1 cursor-pointer" @click="notificationStore.remove(notification)" />
         </span>
diff --git a/frontend-new/src/store/notification.ts b/frontend-new/src/store/notification.ts
index 561e549a..588d03de 100644
--- a/frontend-new/src/store/notification.ts
+++ b/frontend-new/src/store/notification.ts
@@ -12,6 +12,7 @@ function waitTimeout(ms: number) {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
 
+const defaultTimeout = 4000;
 export const useNotificationStore = defineStore("notification", () => {
   const notifications = ref<Set<Notification>>(new Set<Notification>());
 
@@ -20,15 +21,15 @@ export const useNotificationStore = defineStore("notification", () => {
     if (notification.timeout === -1) {
       return;
     }
-    await waitTimeout(notification.timeout || 3000);
+    await waitTimeout(notification.timeout || defaultTimeout);
     remove(notification);
   }
 
-  async function success(message: string, clearable = true, timeout = 3000) {
+  async function success(message: string, clearable = true, timeout = defaultTimeout) {
     await show({ message, color: "green", clearable, timeout });
   }
 
-  async function error(message: string, clearable = true, timeout = 3000) {
+  async function error(message: string, clearable = true, timeout = defaultTimeout) {
     await show({ message, color: "red", clearable, timeout });
   }