notification system adjustment

src/renderer/components/notification/notification-item.component.tsx

@@ -10,10 +10,10 @@ import { BsmButton } from "../shared/bsm-button.component";
 export function NotificationItem({resolver, index, notification}: {resolver?: (value: NotificationResult|string) => void, index: number, notification: Notification}) {
 
   const renderImage = () => {
-    if(notification.type === NotificationType.SUCCESS){ return <BsmImage className="h-14" image={BeatRunningImg}/>; }
-    if(notification.type === NotificationType.WARNING){ return <BsmImage className="h-14" image={BeatWaitingImg}/>; }
-    if(notification.type === NotificationType.ERROR){ return <BsmImage className="h-14" image={BeatConflictImg}/>; }
-    return <BsmImage className="h-14" image={BeatImpatientImg}/>
+    if(notification.type === NotificationType.SUCCESS){ return BeatRunningImg; }
+    if(notification.type === NotificationType.WARNING){ return BeatWaitingImg; }
+    if(notification.type === NotificationType.ERROR){ return BeatConflictImg; }
+    return BeatImpatientImg;
   }
 
   const renderNeonColors = () => {
@@ -24,23 +24,23 @@ export function NotificationItem({resolver, index, notification}: {resolver?: (v
   }
 
   return (
-    <motion.div layout initial={{x: "110%"}} animate={{x: "0%"}} exit={{x:"110%"}} className="relative w-60 rounded-md overflow-hidden -left-64 mb-4 shadow-md shadow-black bg-gradient-to-br from-light-main-color-3 to-light-main-color-2 dark:from-main-color-3 dark:to-main-color-2 text-gray-800 dark:text-white">
-        <div className="w-60 flex flex-col">
+    <motion.div layout initial={{x: "110%"}} animate={{x: "0%"}} exit={{x:"110%"}} className="relative w-[270px] rounded-md overflow-hidden -left-[285px] mb-4 shadow-md shadow-black bg-gradient-to-br from-light-main-color-2 to-light-main-color-2 dark:from-main-color-2 dark:to-main-color-2 text-gray-800 dark:text-white">
+        <div className="w-full flex flex-col">
             <div className="flex items-center justify-start pl-1">
-              {renderImage()}
+              <BsmImage className="h-14 mr-1" image={renderImage()}/>
               <div className="flex flex-col py-2">
-                <h1 className="font-bold leading-5 tracking-wide pr-5">{notification.title}</h1>
-                {notification.desc && <p className="text-sm leading-4">{notification.desc}</p>}
+                <h1 className="font-bold leading-4 tracking-wide pr-5 my-1">{notification.title}</h1>
+                {notification.desc && <p className="text-xs">{notification.desc}</p>}
               </div>
             </div>
             {notification.actions && (
               <div className="flex pb-1 w-full flex-wrap px-[2px]">
-                {notification.actions.map(a => <span className={`px-1 flex-1 grow rounded-md text-center bg-blue-500 hover:brightness-110 transition-all text-gray-200 whitespace-nowrap m-[3px] ${a.cancel && "!bg-gray-500"}`}>{a.title}</span>)}
+                {notification.actions.map(a => <span onClick={() => resolver(a.id)} className={`px-1 cursor-pointer flex-1 grow rounded-md text-center bg-blue-500 hover:brightness-110 transition-all text-gray-200 whitespace-nowrap m-[3px] ${a.cancel && "!bg-gray-500"}`}>{a.title}</span>)}
               </div>
             )}
         </div>
         <span className={`absolute w-full h-1 shadow-center left-0 top-0 ${renderNeonColors()}`}/>
-        <BsmButton icon="cross" className="absolute top-2 right-2" withBar={false}/>
+        <BsmButton icon="cross" className="absolute top-2 right-2" withBar={false} onClick={() => resolver(NotificationResult.CLOSE)}/>
     </motion.div>
   )
 }

src/renderer/components/notification/notification-overlay.component.tsx

@@ -1,7 +1,7 @@
 import { useObservable } from "renderer/hooks/use-observable.hook"
 import { NotificationService } from "renderer/services/notification.service"
 import { NotificationItem } from "./notification-item.component";
-import { AnimatePresence, AnimateSharedLayout, motion } from "framer-motion";
+import { AnimatePresence, motion } from "framer-motion";
 
 export function NotificationOverlay() {
 

src/renderer/services/bs-downloader.service.ts

@@ -19,6 +19,7 @@ export class BsDownloaderService{
     private readonly authService: AuthUserService;
 
     public readonly currentBsVersionDownload$: BehaviorSubject<BSVersion> = new BehaviorSubject(null);
+
     public readonly downloadProgress$: BehaviorSubject<number> = new BehaviorSubject(0);
     public readonly downloadWarning$: BehaviorSubject<string> = new BehaviorSubject(null);
 

src/renderer/services/notification.service.ts

@@ -14,17 +14,13 @@ export class NotificationService{
 
     private constructor(){
         this.notifications$ = new BehaviorSubject<ResolvableNotification[]>([]);
-
-        setInterval(() => {
-            this.notify({title: "coucou le testaze aze azeazeaze", desc: "ceci est un test de notification ne rien faire", actions:[{id: "1",title: "Continuer"}, {id: "1",title: "Faire autre"}, {id: "1",title: "Annuler", cancel: true}]});
-        }, 5000)
     }
 
     public notify(notification: Notification): Promise<NotificationResult|string>{
         let resovableNotification: ResolvableNotification;
         const promise = new Promise<NotificationResult|string>(resolve => {
             resovableNotification = {id: uuidv4(), notification: notification, resolver: resolve }
-            setTimeout(() => resolve(NotificationResult.NO_CHOICE), notification.duration || 10000);
+            setTimeout(() => resolve(NotificationResult.NO_CHOICE), notification.duration || 7000);
         });
 
         this.notifications$.next([...this.notifications$.value, resovableNotification]);
@@ -36,6 +32,21 @@ export class NotificationService{
         return promise;
     }
 
+    public notifyError(notification: Notification): Promise<NotificationResult|string>{
+        notification.type = NotificationType.ERROR;
+        return this.notify(notification);
+    }
+
+    public notifyWarning(notification: Notification): Promise<NotificationResult|string>{
+        notification.type = NotificationType.WARNING;
+        return this.notify(notification);
+    }
+
+    public notifySuccess(notification: Notification): Promise<NotificationResult|string>{
+        notification.type = NotificationType.SUCCESS;
+        return this.notify(notification);
+    }
+
 }
 
 export interface Notification {