From cf94b92be2a73f4a37dda5d0c026d288306d53cc Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Tue, 7 Mar 2023 20:48:19 +0530
Subject: [PATCH] style: ui fix (#393)

* style: truncate

* fix: truncate text added to cycle and module card

* fix: progress percentage

* feat: cycle card tooltip

* fix: sidebar fix
---
 apps/app/components/cycles/sidebar.tsx           | 10 +++++-----
 apps/app/components/cycles/single-cycle-card.tsx | 11 +++++++----
 apps/app/components/modules/sidebar.tsx          | 11 ++++++-----
 3 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/apps/app/components/cycles/sidebar.tsx b/apps/app/components/cycles/sidebar.tsx
index 982b108fb..a0c0e4a40 100644
--- a/apps/app/components/cycles/sidebar.tsx
+++ b/apps/app/components/cycles/sidebar.tsx
@@ -131,6 +131,9 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
   const isStartValid = new Date(`${cycle?.start_date}`) <= new Date();
   const isEndValid = new Date(`${cycle?.end_date}`) >= new Date(`${cycle?.start_date}`);
 
+  const progressPercentage = cycleIssues
+    ? Math.round((groupedIssues.completed.length / cycleIssues?.length) * 100)
+    : null;
   return (
     <>
       <DeleteCycleModal isOpen={cycleDeleteModal} setIsOpen={setCycleDeleteModal} data={cycle} />
@@ -329,12 +332,9 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                     <div className="flex w-full items-center justify-between gap-2    ">
                       <div className="flex items-center justify-start gap-2 text-sm">
                         <span className="font-medium text-gray-500">Progress</span>
-                        {!open ? (
+                        {!open && cycleIssues && progressPercentage ? (
                           <span className="rounded bg-[#09A953]/10 px-1.5 py-0.5 text-xs text-[#09A953]">
-                            {Math.round(
-                              (groupedIssues.completed.length / cycleIssues?.length) * 100
-                            )}
-                            %
+                            {progressPercentage ? `${progressPercentage}%` : ""}
                           </span>
                         ) : (
                           ""
diff --git a/apps/app/components/cycles/single-cycle-card.tsx b/apps/app/components/cycles/single-cycle-card.tsx
index 967b0641e..edbaa35c4 100644
--- a/apps/app/components/cycles/single-cycle-card.tsx
+++ b/apps/app/components/cycles/single-cycle-card.tsx
@@ -11,7 +11,7 @@ import cyclesService from "services/cycles.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { CustomMenu, LinearProgressIndicator } from "components/ui";
+import { CustomMenu, LinearProgressIndicator, Tooltip } from "components/ui";
 import { Disclosure, Transition } from "@headlessui/react";
 // icons
 import { CalendarDaysIcon } from "@heroicons/react/20/solid";
@@ -235,7 +235,11 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = (props) => {
           <div className="flex items-center justify-between gap-1">
             <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}>
               <a className="w-full">
-                <h3 className="text-xl font-semibold leading-5 ">{truncateText(cycle.name,75)}</h3>
+                <Tooltip tooltipContent={cycle.name} position="top-left">
+                  <h3 className="text-xl font-semibold leading-5 ">
+                    {truncateText(cycle.name, 75)}
+                  </h3>
+                </Tooltip>
               </a>
             </Link>
             {cycle.is_favorite ? (
@@ -275,8 +279,7 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = (props) => {
                   alt={cycle.owned_by.first_name}
                 />
               ) : (
-                <span
-                  className="flex h-5 w-5 items-center justify-center rounded-full bg-gray-800 capitalize  text-white">
+                <span className="flex h-5 w-5 items-center justify-center rounded-full bg-gray-800 capitalize  text-white">
                   {cycle.owned_by.first_name.charAt(0)}
                 </span>
               )}
diff --git a/apps/app/components/modules/sidebar.tsx b/apps/app/components/modules/sidebar.tsx
index 7ab811378..6466bf4e9 100644
--- a/apps/app/components/modules/sidebar.tsx
+++ b/apps/app/components/modules/sidebar.tsx
@@ -187,6 +187,10 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
   const isStartValid = new Date(`${module?.start_date}`) <= new Date();
   const isEndValid = new Date(`${module?.target_date}`) >= new Date(`${module?.start_date}`);
 
+  const progressPercentage = moduleIssues
+  ? Math.round((groupedIssues.completed.length / moduleIssues?.length) * 100)
+  : null;
+
   return (
     <>
       <LinkModal
@@ -415,12 +419,9 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
                     <div className="flex w-full items-center justify-between gap-2    ">
                       <div className="flex items-center justify-start gap-2 text-sm">
                         <span className="font-medium text-gray-500">Progress</span>
-                        {!open && moduleIssues ? (
+                        {!open && moduleIssues && progressPercentage ? (
                           <span className="rounded bg-[#09A953]/10 px-1.5 py-0.5 text-xs text-[#09A953]">
-                            {Math.round(
-                              (groupedIssues.completed.length / moduleIssues?.length) * 100
-                            )}
-                            %
+                            {progressPercentage ? `${progressPercentage}%` : ""}
                           </span>
                         ) : (
                           ""