diff --git a/apps/app/components/notifications/notification-card.tsx b/apps/app/components/notifications/notification-card.tsx index 72cf1bed817..53ced88250b 100644 --- a/apps/app/components/notifications/notification-card.tsx +++ b/apps/app/components/notifications/notification-card.tsx @@ -219,44 +219,46 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => { ))} <Tooltip tooltipContent="Snooze Notification" position="top-left"> - <CustomMenu - menuButtonOnClick={(e) => { - e.stopPropagation(); - }} - customButton={ - <button - type="button" - className="text-sm flex w-full items-center gap-x-2 bg-custom-background-80 hover:bg-custom-background-100 p-0.5 rounded" - > - <Icon iconName="schedule" className="h-5 w-5 text-custom-text-300" /> - </button> - } - optionsClassName="!z-20" - > - {snoozeOptions.map((item) => ( - <CustomMenu.MenuItem - key={item.label} - renderAs="button" - onClick={(e) => { - e.stopPropagation(); + <div> + <CustomMenu + menuButtonOnClick={(e) => { + e.stopPropagation(); + }} + customButton={ + <button + type="button" + className="text-sm flex w-full items-center gap-x-2 bg-custom-background-80 hover:bg-custom-background-100 p-0.5 rounded" + > + <Icon iconName="schedule" className="h-5 w-5 text-custom-text-300" /> + </button> + } + optionsClassName="!z-20" + > + {snoozeOptions.map((item) => ( + <CustomMenu.MenuItem + key={item.label} + renderAs="button" + onClick={(e) => { + e.stopPropagation(); - if (!item.value) { - setSelectedNotificationForSnooze(notification.id); - return; - } + if (!item.value) { + setSelectedNotificationForSnooze(notification.id); + return; + } - markSnoozeNotification(notification.id, item.value).then(() => { - setToastAlert({ - title: `Notification snoozed till ${renderLongDateFormat(item.value)}`, - type: "success", + markSnoozeNotification(notification.id, item.value).then(() => { + setToastAlert({ + title: `Notification snoozed till ${renderLongDateFormat(item.value)}`, + type: "success", + }); }); - }); - }} - > - {item.label} - </CustomMenu.MenuItem> - ))} - </CustomMenu> + }} + > + {item.label} + </CustomMenu.MenuItem> + ))} + </CustomMenu> + </div> </Tooltip> </div> </div> diff --git a/apps/app/components/notifications/notification-popover.tsx b/apps/app/components/notifications/notification-popover.tsx index 5ab2220f5b6..cb71177075a 100644 --- a/apps/app/components/notifications/notification-popover.tsx +++ b/apps/app/components/notifications/notification-popover.tsx @@ -205,6 +205,7 @@ export const NotificationPopover = () => { : "border-transparent text-custom-text-200" }`} > + {tab.label} {tab.unreadCount && tab.unreadCount > 0 ? ( <span className={`ml-2 rounded-full text-xs px-2 py-0.5 ${ diff --git a/apps/app/styles/globals.css b/apps/app/styles/globals.css index 4e68cd5035c..aba03a24883 100644 --- a/apps/app/styles/globals.css +++ b/apps/app/styles/globals.css @@ -295,3 +295,7 @@ body { :-ms-input-placeholder { color: rgb(var(--color-text-400)); } + +.bp4-overlay-content { + z-index: 555 !important; +}