From a03e0c788fa12c211748374b21bfc29610b9c7bd Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Mon, 6 Nov 2023 14:53:26 +0530
Subject: [PATCH] fix: notifications option in the sidebar menu not collapsing
 (#2662)

---
 .../list/headers/group-by-card.tsx              | 14 +++++++-------
 .../notifications/notification-popover.tsx      | 17 +++++++----------
 web/store/issue/issue_filters.store.ts          |  1 +
 3 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/web/components/issues/issue-layouts/list/headers/group-by-card.tsx b/web/components/issues/issue-layouts/list/headers/group-by-card.tsx
index 7397ae3d7..4a43fdf77 100644
--- a/web/components/issues/issue-layouts/list/headers/group-by-card.tsx
+++ b/web/components/issues/issue-layouts/list/headers/group-by-card.tsx
@@ -91,12 +91,12 @@ export const HeaderGroupByCard = observer(({ icon, title, count, issuePayload }:
         />
       )}
       <div
-        className={`flex-shrink-0 relative flex gap-2 p-1.5 ${
-          verticalAlignPosition ? `flex-col items-center w-[44px]` : `flex-row items-center w-full`
+        className={`flex-shrink-0 relative flex gap-2 py-1.5 ${
+          verticalAlignPosition ? `flex-col items-center w-11` : `flex-row items-center w-full`
         }`}
       >
-        <div className="flex-shrink-0 w-[20px] h-[20px] rounded-sm overflow-hidden flex justify-center items-center">
-          {icon ? icon : <CircleDashed width={14} strokeWidth={2} />}
+        <div className="flex-shrink-0 w-5 h-5 rounded-sm overflow-hidden flex justify-center items-center">
+          {icon ? icon : <CircleDashed className="h-3.5 w-3.5" strokeWidth={2} />}
         </div>
 
         <div className={`flex items-center gap-1 ${verticalAlignPosition ? `flex-col` : `flex-row w-full`}`}>
@@ -114,8 +114,8 @@ export const HeaderGroupByCard = observer(({ icon, title, count, issuePayload }:
           <CustomMenu
             width="auto"
             customButton={
-              <span className="flex-shrink-0 w-[20px] h-[20px] rounded-sm overflow-hidden flex justify-center items-center hover:bg-custom-background-80 cursor-pointer transition-all">
-                <Plus width={14} strokeWidth={2} />
+              <span className="flex-shrink-0 w-5 h-5 rounded-sm overflow-hidden flex justify-center items-center hover:bg-custom-background-80 cursor-pointer transition-all">
+                <Plus className="h-3.5 w-3.5" strokeWidth={2} />
               </span>
             }
           >
@@ -128,7 +128,7 @@ export const HeaderGroupByCard = observer(({ icon, title, count, issuePayload }:
           </CustomMenu>
         ) : (
           <div
-            className="flex-shrink-0 w-[20px] h-[20px] rounded-sm overflow-hidden flex justify-center items-center hover:bg-custom-background-80 cursor-pointer transition-all"
+            className="flex-shrink-0 w-5 h-5 rounded-sm overflow-hidden flex justify-center items-center hover:bg-custom-background-80 cursor-pointer transition-all"
             onClick={() => setIsOpen(true)}
           >
             <Plus width={14} strokeWidth={2} />
diff --git a/web/components/notifications/notification-popover.tsx b/web/components/notifications/notification-popover.tsx
index 41977da9e..90a1d7d71 100644
--- a/web/components/notifications/notification-popover.tsx
+++ b/web/components/notifications/notification-popover.tsx
@@ -16,7 +16,7 @@ import { getNumberCount } from "helpers/string.helper";
 import { useMobxStore } from "lib/mobx/store-provider";
 
 export const NotificationPopover = observer(() => {
-  const store: any = useMobxStore();
+  const { theme: themeStore } = useMobxStore();
 
   const {
     notifications,
@@ -45,6 +45,8 @@ export const NotificationPopover = observer(() => {
     markAllNotificationsAsRead,
   } = useUserNotification();
 
+  const isSidebarCollapsed = themeStore.sidebarCollapsed;
+
   return (
     <>
       <SnoozeNotificationModal
@@ -62,23 +64,18 @@ export const NotificationPopover = observer(() => {
 
           return (
             <>
-              <Tooltip
-                tooltipContent="Notifications"
-                position="right"
-                className="ml-2"
-                disabled={!store?.theme?.sidebarCollapsed}
-              >
+              <Tooltip tooltipContent="Notifications" position="right" className="ml-2" disabled={!isSidebarCollapsed}>
                 <Popover.Button
                   className={`relative group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none ${
                     isActive
                       ? "bg-custom-primary-100/10 text-custom-primary-100"
                       : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80"
-                  } ${store?.theme?.sidebarCollapsed ? "justify-center" : ""}`}
+                  } ${isSidebarCollapsed ? "justify-center" : ""}`}
                 >
                   <Bell className="h-4 w-4" />
-                  {store?.theme?.sidebarCollapsed ? null : <span>Notifications</span>}
+                  {isSidebarCollapsed ? null : <span>Notifications</span>}
                   {totalNotificationCount && totalNotificationCount > 0 ? (
-                    store?.theme?.sidebarCollapsed ? (
+                    isSidebarCollapsed ? (
                       <span className="absolute right-3.5 top-2 h-2 w-2 bg-custom-primary-300 rounded-full" />
                     ) : (
                       <span className="ml-auto bg-custom-primary-300 rounded-full text-xs text-white px-1.5">
diff --git a/web/store/issue/issue_filters.store.ts b/web/store/issue/issue_filters.store.ts
index f6e84c622..be28cca87 100644
--- a/web/store/issue/issue_filters.store.ts
+++ b/web/store/issue/issue_filters.store.ts
@@ -17,6 +17,7 @@ import {
 export interface IIssueFilterStore {
   loader: boolean;
   error: any | null;
+  // TODO: store filters and properties separately for each project
   userDisplayProperties: IIssueDisplayProperties;
   userDisplayFilters: IIssueDisplayFilterOptions;
   userFilters: IIssueFilterOptions;