From 6534d1dc66085d4c0247c87709caf59c971df3bd Mon Sep 17 00:00:00 2001
From: Tristan d'audibert <tristan.daudibert@gmail.com>
Date: Sun, 21 May 2023 21:58:45 +0200
Subject: [PATCH] fiew minor fixes

---
 .../src/App/NotificationsContext.ts           |  2 +-
 .../src/components/Frame/Frame.tsx            | 36 ++++++++++---------
 .../src/components/NavBar/NavBar.tsx          |  9 +++--
 3 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/hashkitty-front/src/App/NotificationsContext.ts b/hashkitty-front/src/App/NotificationsContext.ts
index 4dc29de..cfbeba3 100644
--- a/hashkitty-front/src/App/NotificationsContext.ts
+++ b/hashkitty-front/src/App/NotificationsContext.ts
@@ -80,7 +80,7 @@ export class NotificationsContextImplementation
             this.removeFromListShortliveNotifications(notif.id);
             return notif;
          });
-      }, 5000);
+      }, 3000);
       this.setShortLiveNotifications(prevNotifs => [
          ...new Set([...prevNotifs, ...notifs]),
       ]);
diff --git a/hashkitty-front/src/components/Frame/Frame.tsx b/hashkitty-front/src/components/Frame/Frame.tsx
index d6c36bb..b6e4f87 100644
--- a/hashkitty-front/src/components/Frame/Frame.tsx
+++ b/hashkitty-front/src/components/Frame/Frame.tsx
@@ -1,6 +1,8 @@
-import { Alert, CircularProgress } from '@mui/material';
-
 import { useContext } from 'react';
+import Alert from '@mui/material/Alert';
+import Grow from '@mui/material/Grow';
+import CircularProgress from '@mui/material/CircularProgress';
+
 import NavBar from '../NavBar/NavBar';
 import ColorModeContext from '../../App/ColorModeContext';
 import NotificationsContext from '../../App/NotificationsContext';
@@ -20,21 +22,23 @@ export default function Frame({ children, isLoading }: FrameProps) {
 
    return (
       <>
-         <header>
+         <header className="relative">
             <NavBar />
-            <div className="flex flex-wrap justify-center px-[15vw]">
-               {shortLiveNotifications.map(notif => (
-                  <Alert
-                     key={notif.id}
-                     onClose={() => deleteNotification(notif.id)}
-                     severity={notif.status}
-                     sx={{
-                        backgroundColor: colors.alerts[notif.status],
-                     }}
-                     className="w-full"
-                  >
-                     {notif.message}
-                  </Alert>
+            <div className="absolute flex flex-wrap justify-center px-[15vw] w-[90vw] z-10">
+               {shortLiveNotifications.map(({ id, status, message }) => (
+                  <Grow key={id} in>
+                     <Alert
+                        key={id}
+                        onClose={() => deleteNotification(id)}
+                        severity={status}
+                        sx={{
+                           backgroundColor: colors.alerts[status],
+                        }}
+                        className="w-full"
+                     >
+                        {message}
+                     </Alert>
+                  </Grow>
                ))}
             </div>
          </header>
diff --git a/hashkitty-front/src/components/NavBar/NavBar.tsx b/hashkitty-front/src/components/NavBar/NavBar.tsx
index c75ec8d..f87d5e4 100644
--- a/hashkitty-front/src/components/NavBar/NavBar.tsx
+++ b/hashkitty-front/src/components/NavBar/NavBar.tsx
@@ -100,10 +100,15 @@ const NavBar = memo(() => {
             </div>
             <div className="flex lg:hidden gap-6">
                <IconButton
-                  onClick={handleOpenPopper}
+                  onClick={e => handleOpenPopper(e)}
                   style={{ backgroundColor: 'transparent' }}
+                  disabled={notifications.length === 0}
                >
-                  <Badge badgeContent={4} color="secondary">
+                  <Badge
+                     badgeContent={notifications.length}
+                     color="secondary"
+                     sx={{ '& > span': { color: 'white' } }}
+                  >
                      <NotificationsIcon />
                   </Badge>
                </IconButton>