style: cycle ui revamp, and chore: code refactor (#2558)

* chore: cycle custom svg icon added and code refactor

* chore: module code refactor

* style: cycle ui revamp and code refactor

* chore: cycle card view layout fix

* chore: layout fix

* style: module and cycle title tooltip position

web/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx

@@ -25,7 +25,7 @@ const SingleCycle: React.FC = () => {
 
   const { cycle: cycleStore } = useMobxStore();
 
-  const { storedValue } = useLocalStorage("cycle_sidebar_collapsed", "false");
+  const { setValue, storedValue } = useLocalStorage("cycle_sidebar_collapsed", "false");
   const isSidebarCollapsed = storedValue ? (storedValue === "true" ? true : false) : false;
 
   const { error } = useSWR(
@@ -35,6 +35,10 @@ const SingleCycle: React.FC = () => {
       : null
   );
 
+  const toggleSidebar = () => {
+    setValue(`${!isSidebarCollapsed}`);
+  };
+
   // TODO: add this function to bulk add issues to cycle
   // const handleAddIssuesToCycle = async (data: ISearchIssueResponse[]) => {
   //   if (!workspaceSlug || !projectId) return;
@@ -75,11 +79,21 @@ const SingleCycle: React.FC = () => {
         />
       ) : (
         <>
-          <div className="relative w-full h-full flex overflow-auto">
-            <div className={`h-full w-full ${isSidebarCollapsed ? "" : "mr-[24rem]"} duration-300`}>
+          <div className="flex h-full w-full">
+            <div className="h-full w-full">
               <CycleLayoutRoot />
             </div>
-            {cycleId && <CycleDetailsSidebar isOpen={!isSidebarCollapsed} cycleId={cycleId.toString()} />}
+            {cycleId && !isSidebarCollapsed && (
+              <div
+                className="flex flex-col gap-3.5 h-full w-[24rem] z-10 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 py-3.5 duration-300 flex-shrink-0"
+                style={{
+                  boxShadow:
+                    "0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(16, 24, 40, 0.06), 0px 1px 8px -1px rgba(16, 24, 40, 0.06)",
+                }}
+              >
+                <CycleDetailsSidebar cycleId={cycleId.toString()} handleClose={toggleSidebar} />
+              </div>
+            )}
           </div>
         </>
       )}

web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx

@@ -29,7 +29,11 @@ const ProjectCyclesPage: NextPage = observer(() => {
   const { project: projectStore, cycle: cycleStore } = useMobxStore();
   // router
   const router = useRouter();
-  const { workspaceSlug, projectId } = router.query as { workspaceSlug: string; projectId: string };
+  const { workspaceSlug, projectId, peekCycle } = router.query as {
+    workspaceSlug: string;
+    projectId: string;
+    peekCycle: string;
+  };
   // fetching project details
   useSWR(
     workspaceSlug && projectId ? `PROJECT_DETAILS_${projectId}` : null,
@@ -150,13 +154,14 @@ const ProjectCyclesPage: NextPage = observer(() => {
           </div>
 
           <Tab.Panels as={Fragment}>
-            <Tab.Panel as="div" className="p-4 sm:p-5 h-full overflow-y-auto">
+            <Tab.Panel as="div" className="h-full overflow-y-auto">
               {cycleView && cycleLayout && workspaceSlug && projectId && (
                 <CyclesView
                   filter={"all"}
                   layout={cycleLayout as TCycleLayout}
                   workspaceSlug={workspaceSlug}
                   projectId={projectId}
+                  peekCycle={peekCycle}
                 />
               )}
             </Tab.Panel>
@@ -165,35 +170,38 @@ const ProjectCyclesPage: NextPage = observer(() => {
               <ActiveCycleDetails workspaceSlug={workspaceSlug} projectId={projectId} />
             </Tab.Panel>
 
-            <Tab.Panel as="div" className="p-4 sm:p-5 h-full overflow-y-auto">
+            <Tab.Panel as="div" className="h-full overflow-y-auto">
               {cycleView && cycleLayout && workspaceSlug && projectId && (
                 <CyclesView
                   filter={"upcoming"}
                   layout={cycleLayout as TCycleLayout}
                   workspaceSlug={workspaceSlug}
                   projectId={projectId}
+                  peekCycle={peekCycle}
                 />
               )}
             </Tab.Panel>
 
-            <Tab.Panel as="div" className="p-4 sm:p-5 h-full overflow-y-auto">
+            <Tab.Panel as="div" className="h-full overflow-y-auto">
               {cycleView && cycleLayout && workspaceSlug && projectId && (
                 <CyclesView
                   filter={"completed"}
                   layout={cycleLayout as TCycleLayout}
                   workspaceSlug={workspaceSlug}
                   projectId={projectId}
+                  peekCycle={peekCycle}
                 />
               )}
             </Tab.Panel>
 
-            <Tab.Panel as="div" className="p-4 sm:p-5 h-full overflow-y-auto">
+            <Tab.Panel as="div" className="h-full overflow-y-auto">
               {cycleView && cycleLayout && workspaceSlug && projectId && (
                 <CyclesView
                   filter={"draft"}
                   layout={cycleLayout as TCycleLayout}
                   workspaceSlug={workspaceSlug}
                   projectId={projectId}
+                  peekCycle={peekCycle}
                 />
               )}
             </Tab.Panel>