fix: bug and ui fix (#1073)

* fix: cycle and module sidebar scroll

* style: date picker theming

* style: workspace slug spacing

* fix: app sidebar z-index

* fix: favorite cycle mutation

* fix: cycle modal on error close

* feat: cycle view context

* style: active cycle stats scroll

* fix: active cycle favorite mutation

* feat: import export banner

* feat: cycle sidebar date picker logic updated

* fix: NaN in progress percentage fix

* fix: tooltip fix

* style: empty state for active cycle

* style: cycle badge width fix , all cycle empty state fix and cycle icon size fix

apps/app/components/cycles/active-cycle-details.tsx

@@ -51,6 +51,7 @@ import {
 import {
   CYCLE_COMPLETE_LIST,
   CYCLE_CURRENT_AND_UPCOMING_LIST,
+  CYCLE_DETAILS,
   CYCLE_DRAFT_LIST,
   CYCLE_ISSUES,
 } from "constants/fetch-keys";
@@ -153,6 +154,15 @@ export const ActiveCycleDetails: React.FC<TSingleStatProps> = ({ cycle, isComple
         );
         break;
     }
+    mutate(
+      CYCLE_DETAILS(projectId as string),
+      (prevData: any) =>
+        (prevData ?? []).map((c: any) => ({
+          ...c,
+          is_favorite: c.id === cycle.id ? true : c.is_favorite,
+        })),
+      false
+    );
 
     cyclesService
       .addCycleToFavorites(workspaceSlug as string, projectId as string, {
@@ -213,6 +223,15 @@ export const ActiveCycleDetails: React.FC<TSingleStatProps> = ({ cycle, isComple
         );
         break;
     }
+    mutate(
+      CYCLE_DETAILS(projectId as string),
+      (prevData: any) =>
+        (prevData ?? []).map((c: any) => ({
+          ...c,
+          is_favorite: c.id === cycle.id ? false : c.is_favorite,
+        })),
+      false
+    );
 
     cyclesService
       .removeCycleFromFavorites(workspaceSlug as string, projectId as string, cycle.id)
@@ -251,24 +270,26 @@ export const ActiveCycleDetails: React.FC<TSingleStatProps> = ({ cycle, isComple
     <div className="grid-row-2 grid rounded-[10px] shadow divide-y bg-brand-base border border-brand-base">
       <div className="grid grid-cols-1 divide-y border-brand-base lg:divide-y-0 lg:divide-x lg:grid-cols-3">
         <div className="flex flex-col text-xs">
-          <a className="w-full">
-            <div className="flex h-full flex-col gap-5 rounded-b-[10px] p-4">
+          <a className="h-full w-full">
+            <div className="flex h-60 flex-col gap-5 justify-between rounded-b-[10px] p-4">
               <div className="flex items-center justify-between gap-1">
                 <span className="flex items-center gap-1">
-                  <ContrastIcon
-                    className="h-5 w-5"
-                    color={`${
-                      cycleStatus === "current"
-                        ? "#09A953"
-                        : cycleStatus === "upcoming"
-                        ? "#F7AE59"
-                        : cycleStatus === "completed"
-                        ? "#3F76FF"
-                        : cycleStatus === "draft"
-                        ? "#858E96"
-                        : ""
-                    }`}
-                  />
+                  <span className="h-5 w-5">
+                    <ContrastIcon
+                      className="h-5 w-5"
+                      color={`${
+                        cycleStatus === "current"
+                          ? "#09A953"
+                          : cycleStatus === "upcoming"
+                          ? "#F7AE59"
+                          : cycleStatus === "completed"
+                          ? "#3F76FF"
+                          : cycleStatus === "draft"
+                          ? "#858E96"
+                          : ""
+                      }`}
+                    />
+                  </span>
                   <Tooltip tooltipContent={cycle.name} position="top-left">
                     <h3 className="break-all text-lg font-semibold">
                       {truncateText(cycle.name, 70)}
@@ -291,17 +312,17 @@ export const ActiveCycleDetails: React.FC<TSingleStatProps> = ({ cycle, isComple
                     }`}
                   >
                     {cycleStatus === "current" ? (
-                      <span className="flex gap-1">
+                      <span className="flex gap-1 whitespace-nowrap">
                         <PersonRunningIcon className="h-4 w-4" />
                         {findHowManyDaysLeft(cycle.end_date ?? new Date())} Days Left
                       </span>
                     ) : cycleStatus === "upcoming" ? (
-                      <span className="flex gap-1">
+                      <span className="flex gap-1 whitespace-nowrap">
                         <AlarmClockIcon className="h-4 w-4" />
                         {findHowManyDaysLeft(cycle.start_date ?? new Date())} Days Left
                       </span>
                     ) : cycleStatus === "completed" ? (
-                      <span className="flex gap-1">
+                      <span className="flex gap-1 whitespace-nowrap">
                         {cycle.total_issues - cycle.completed_issues > 0 && (
                           <Tooltip
                             tooltipContent={`${
@@ -400,7 +421,7 @@ export const ActiveCycleDetails: React.FC<TSingleStatProps> = ({ cycle, isComple
           </a>
         </div>
         <div className="grid col-span-2 grid-cols-1 divide-y border-brand-base md:divide-y-0 md:divide-x md:grid-cols-2">
-          <div className="flex h-full flex-col border-brand-base">
+          <div className="flex h-60 flex-col border-brand-base">
             <div className="flex h-full w-full flex-col text-brand-secondary p-4">
               <div className="flex w-full items-center gap-2 py-1">
                 <span>Progress</span>
@@ -428,7 +449,7 @@ export const ActiveCycleDetails: React.FC<TSingleStatProps> = ({ cycle, isComple
               </div>
             </div>
           </div>
-          <div className="border-brand-base p-4">
+          <div className="border-brand-base h-60 overflow-y-auto p-4">
             <ActiveCycleProgressStats issues={issues ?? []} />
           </div>
         </div>