fix dot not being clickable

Author: seliayeu

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<HTMLDivElement>) => {
 
   return (
-    <div ref={ref}>
-      <FontAwesomeIcon icon={icon} className={className} onClick={onClick} />
-      <div className="absolute top-[3px] right-[0px] h-2 w-2 rounded-full bg-red" />
+    <div ref={ref} onClick={onClick} className={className}>
+      <FontAwesomeIcon icon={icon} />
+      <div className="bg-red absolute right-[0px] top-[3px] h-2 w-2 cursor-pointer rounded-full" />
     </div>
   )
 });
@@ -34,33 +34,33 @@ IconWithBadge.displayName = 'IconWithBadge';
 
 export const NotificationPopover = () => {
   const { notifications, ongoingNotifications } = useContext(NotificationContext);
-  const [ newNotifications, setNewNotifications ] = useState<boolean>(false);
-  const [ previousNotifications, setPreviousNotifications ] = useState<NotificationItem[]>([]);
+  const [newNotifications, setNewNotifications] = useState<boolean>(false);
+  const [previousNotifications, setPreviousNotifications] = useState<NotificationItem[]>([]);
 
   const shouldShowPopup = () => {
-    return newNotifications || 
-      ongoingNotifications.length > 0 || 
+    return newNotifications ||
+      ongoingNotifications.length > 0 ||
       previousNotifications.map(n => n.fresh && !(notifications.includes(n))).length > 0;
   };
 
   useEffect(() => {
     setPreviousNotifications(notifications);
     setNewNotifications(shouldShowPopup());
   }, [notifications, ongoingNotifications]);
-    
+
 
   return (
     <Popover className="relative">
       <Popover.Button
         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)}
       />
-      <Popover.Panel className="absolute right-0 z-40 mt-1 h-[80vh] w-[480px] rounded-lg drop-shadow-lg child:h-full">
+      <Popover.Panel className="child:h-full absolute right-0 z-40 mt-1 h-[80vh] w-[480px] rounded-lg drop-shadow-lg">
         <NotificationPanel className="rounded-lg border" />
       </Popover.Panel>
     </Popover>