diff --git a/dashboard/src/components/DashboardLayout/NotificationPopover.tsx b/dashboard/src/components/DashboardLayout/NotificationPopover.tsx index 9d5451cc..554d9e7d 100644 --- a/dashboard/src/components/DashboardLayout/NotificationPopover.tsx +++ b/dashboard/src/components/DashboardLayout/NotificationPopover.tsx @@ -11,21 +11,21 @@ import { forwardRef, useContext, useEffect, useState } from 'react'; import clsx from 'clsx'; const IconWithBadge = forwardRef(( - { - icon, + { + icon, onClick, className, - } : { + }: { icon: IconDefinition, onClick: () => void, className: string, - }, + }, ref: React.Ref) => { return ( -
- -
+
+ +
) }); @@ -34,12 +34,12 @@ IconWithBadge.displayName = 'IconWithBadge'; export const NotificationPopover = () => { const { notifications, ongoingNotifications } = useContext(NotificationContext); - const [ newNotifications, setNewNotifications ] = useState(false); - const [ previousNotifications, setPreviousNotifications ] = useState([]); + const [newNotifications, setNewNotifications] = useState(false); + const [previousNotifications, setPreviousNotifications] = useState([]); const shouldShowPopup = () => { - return newNotifications || - ongoingNotifications.length > 0 || + return newNotifications || + ongoingNotifications.length > 0 || previousNotifications.map(n => n.fresh && !(notifications.includes(n))).length > 0; }; @@ -47,7 +47,7 @@ export const NotificationPopover = () => { setPreviousNotifications(notifications); setNewNotifications(shouldShowPopup()); }, [notifications, ongoingNotifications]); - + return ( @@ -55,12 +55,12 @@ export const NotificationPopover = () => { as={newNotifications ? IconWithBadge : FontAwesomeIcon} icon={faBell} className={clsx( - "w-4 select-none hover:cursor-pointer ui-open:text-gray-300", + "ui-open:text-gray-300 w-4 select-none hover:cursor-pointer", newNotifications ? "ui-not-open:text-white/75 ui-not-open:hover:text-white/90" : - "ui-not-open:text-white/50 ui-not-open:hover:text-white/75")} + "ui-not-open:text-white/50 ui-not-open:hover:text-white/75")} onClick={() => newNotifications && setNewNotifications(false)} /> - +