From 5c5bcb33e35dc1c11dc16d5f27ded8177167402d Mon Sep 17 00:00:00 2001
From: Dakshesh Jain <65905942+dakshesh14@users.noreply.github.com>
Date: Wed, 19 Jul 2023 18:42:32 +0530
Subject: [PATCH] style: tooltip on notification header actions (#1577)

* style: tooltip on notification header

* chore: update tooltip content

---------

Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>
---
 .../notifications/notification-card.tsx       |  8 +-
 .../notifications/notification-popover.tsx    | 96 ++++++++++---------
 2 files changed, 56 insertions(+), 48 deletions(-)

diff --git a/apps/app/components/notifications/notification-card.tsx b/apps/app/components/notifications/notification-card.tsx
index 174c52a60..40728d804 100644
--- a/apps/app/components/notifications/notification-card.tsx
+++ b/apps/app/components/notifications/notification-card.tsx
@@ -176,7 +176,7 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
         {[
           {
             id: 1,
-            name: notification.read_at ? "Mark as Unread" : "Mark as Read",
+            name: notification.read_at ? "Mark as unread" : "Mark as read",
             icon: "chat_bubble",
             onClick: () => {
               markNotificationReadStatus(notification.id).then(() => {
@@ -191,7 +191,7 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
           },
           {
             id: 2,
-            name: notification.archived_at ? "Unarchive Notification" : "Archive Notification",
+            name: notification.archived_at ? "Unarchive" : "Archive",
             icon: "archive",
             onClick: () => {
               markNotificationArchivedStatus(notification.id).then(() => {
@@ -205,7 +205,7 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
             },
           },
         ].map((item) => (
-          <Tooltip tooltipContent={item.name} position="top-left">
+          <Tooltip tooltipContent={item.name}>
             <button
               type="button"
               onClick={(e) => {
@@ -220,7 +220,7 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
           </Tooltip>
         ))}
 
-        <Tooltip tooltipContent="Snooze Notification" position="top-left">
+        <Tooltip tooltipContent="Snooze">
           <div>
             <CustomMenu
               menuButtonOnClick={(e) => {
diff --git a/apps/app/components/notifications/notification-popover.tsx b/apps/app/components/notifications/notification-popover.tsx
index cb7117707..45e5d7bc0 100644
--- a/apps/app/components/notifications/notification-popover.tsx
+++ b/apps/app/components/notifications/notification-popover.tsx
@@ -12,7 +12,7 @@ import useWorkspaceMembers from "hooks/use-workspace-members";
 import useUserNotification from "hooks/use-user-notifications";
 
 // components
-import { Icon, Loader, EmptyState } from "components/ui";
+import { Icon, Loader, EmptyState, Tooltip } from "components/ui";
 import { SnoozeNotificationModal, NotificationCard } from "components/notifications";
 // images
 import emptyNotification from "public/empty-state/notification.svg";
@@ -120,50 +120,58 @@ export const NotificationPopover = () => {
                 <div className="flex items-center justify-between px-5 pt-5">
                   <h2 className="text-xl font-semibold mb-2">Notifications</h2>
                   <div className="flex gap-x-4 justify-center items-center text-custom-text-200">
-                    <button
-                      type="button"
-                      onClick={(e) => {
-                        notificationsMutate();
+                    <Tooltip tooltipContent="Refresh">
+                      <button
+                        type="button"
+                        onClick={(e) => {
+                          notificationsMutate();
 
-                        const target = e.target as HTMLButtonElement;
-                        target?.classList.add("animate-spin");
-                        setTimeout(() => {
-                          target?.classList.remove("animate-spin");
-                        }, 1000);
-                      }}
-                    >
-                      <Icon iconName="refresh" />
-                    </button>
-                    <button
-                      type="button"
-                      onClick={() => {
-                        setSnoozed(false);
-                        setArchived(false);
-                        setReadNotification((prev) => !prev);
-                      }}
-                    >
-                      <Icon iconName="filter_list" />
-                    </button>
-                    <button
-                      type="button"
-                      onClick={() => {
-                        setArchived(false);
-                        setReadNotification(false);
-                        setSnoozed((prev) => !prev);
-                      }}
-                    >
-                      <Icon iconName="schedule" />
-                    </button>
-                    <button
-                      type="button"
-                      onClick={() => {
-                        setSnoozed(false);
-                        setReadNotification(false);
-                        setArchived((prev) => !prev);
-                      }}
-                    >
-                      <Icon iconName="archive" />
-                    </button>
+                          const target = e.target as HTMLButtonElement;
+                          target?.classList.add("animate-spin");
+                          setTimeout(() => {
+                            target?.classList.remove("animate-spin");
+                          }, 1000);
+                        }}
+                      >
+                        <Icon iconName="refresh" />
+                      </button>
+                    </Tooltip>
+                    <Tooltip tooltipContent="Unread notifications">
+                      <button
+                        type="button"
+                        onClick={() => {
+                          setSnoozed(false);
+                          setArchived(false);
+                          setReadNotification((prev) => !prev);
+                        }}
+                      >
+                        <Icon iconName="filter_list" />
+                      </button>
+                    </Tooltip>
+                    <Tooltip tooltipContent="Snoozed notifications">
+                      <button
+                        type="button"
+                        onClick={() => {
+                          setArchived(false);
+                          setReadNotification(false);
+                          setSnoozed((prev) => !prev);
+                        }}
+                      >
+                        <Icon iconName="schedule" />
+                      </button>
+                    </Tooltip>
+                    <Tooltip tooltipContent="Archived notifications">
+                      <button
+                        type="button"
+                        onClick={() => {
+                          setSnoozed(false);
+                          setReadNotification(false);
+                          setArchived((prev) => !prev);
+                        }}
+                      >
+                        <Icon iconName="archive" />
+                      </button>
+                    </Tooltip>
                     <button type="button" onClick={() => closePopover()}>
                       <Icon iconName="close" />
                     </button>