refactor : animations added on bell icon & added divider

ad956 · Jul 3, 2024 · 545d595 · 545d595
1 parent 2936a96
commit 545d595
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/app/components/headbar/index.tsx b/app/components/headbar/index.tsx
@@ -32,8 +32,8 @@ export default async function Headbar({ user, role }: HeadbarProps) {
         >
           <GoPlus size={20} />
         </Button>
-
         <Notifications userId={user._id} />
+        <Divider orientation="vertical" className="h-8" />
 
         <User
           name={user.firstname}
@@ -48,6 +48,7 @@ export default async function Headbar({ user, role }: HeadbarProps) {
             >{`@${user.username}`}</Link>
           }
         />
+        <Divider orientation="vertical" className="h-8" />
 
         <form action={logoutAction} className="">
           <Button size="sm" type="submit" isIconOnly className="bg-transparent">

diff --git a/app/components/notifications/index.tsx b/app/components/notifications/index.tsx
@@ -27,7 +27,9 @@ const CustomBellIcon = ({
   return (
     <CiBellOn
       size={25}
-      color={unseenCount > 0 ? "red" : "black"}
+      className={`cursor-pointer relative ${
+        unseenCount > 0 ? "animate-bounce text-danger-800" : ""
+      }`}
       style={{
         cursor: "pointer",
       }}