From f8b6d8c0b8a59c461c9676e640a39bd83170341d Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Fri, 22 Sep 2023 18:23:48 +0530
Subject: [PATCH] fix: bug fixes and ui improvement

---
 web/components/cycles/single-cycle-list.tsx   |  6 +-
 web/components/labels/single-label.tsx        | 78 +++++++++++--------
 .../[workspaceSlug]/me/profile/index.tsx      |  2 +
 web/pages/[workspaceSlug]/settings/index.tsx  | 10 +--
 4 files changed, 57 insertions(+), 39 deletions(-)

diff --git a/web/components/cycles/single-cycle-list.tsx b/web/components/cycles/single-cycle-list.tsx
index ec01da9e760..a4c21128aa8 100644
--- a/web/components/cycles/single-cycle-list.tsx
+++ b/web/components/cycles/single-cycle-list.tsx
@@ -149,6 +149,10 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
     color: group.color,
   }));
 
+  const completedIssues = cycle.completed_issues + cycle.cancelled_issues;
+
+  const percentage = cycle.total_issues > 0 ? (completedIssues / cycle.total_issues) * 100 : 0;
+
   return (
     <div>
       <div className="flex flex-col text-xs hover:bg-custom-background-80">
@@ -307,7 +311,7 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
                       ) : cycleStatus === "completed" ? (
                         <span className="flex gap-1">
                           <RadialProgressBar progress={100} />
-                          <span>{100} %</span>
+                          <span>{Math.round(percentage)} %</span>
                         </span>
                       ) : (
                         <span className="flex gap-1">
diff --git a/web/components/labels/single-label.tsx b/web/components/labels/single-label.tsx
index be981e510d1..c163a37351b 100644
--- a/web/components/labels/single-label.tsx
+++ b/web/components/labels/single-label.tsx
@@ -1,11 +1,13 @@
-import React from "react";
+import React, { useRef, useState } from "react";
 
+//hook
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // ui
 import { CustomMenu } from "components/ui";
 // types
 import { IIssueLabels } from "types";
 //icons
-import { RectangleGroupIcon, PencilIcon } from "@heroicons/react/24/outline";
+import { PencilIcon } from "@heroicons/react/24/outline";
 import { Component, X } from "lucide-react";
 
 type Props = {
@@ -20,9 +22,14 @@ export const SingleLabel: React.FC<Props> = ({
   addLabelToGroup,
   editLabel,
   handleLabelDelete,
-}) => (
-  <div className="gap-2 space-y-3 divide-y divide-custom-border-200 rounded border border-custom-border-200 bg-custom-background-100 px-4 py-2.5">
-    <div className="group flex items-center justify-between">
+}) => {
+  const [isMenuActive, setIsMenuActive] = useState(false);
+  const actionSectionRef = useRef<HTMLDivElement | null>(null);
+
+  useOutsideClickDetector(actionSectionRef, () => setIsMenuActive(false));
+
+  return (
+    <div className="relative group flex items-center justify-between gap-2 space-y-3 rounded border border-custom-border-200 bg-custom-background-100 px-4 py-2.5">
       <div className="flex items-center gap-3">
         <span
           className="h-3.5 w-3.5 flex-shrink-0 rounded-full"
@@ -32,36 +39,41 @@ export const SingleLabel: React.FC<Props> = ({
         />
         <h6 className="text-sm">{label.name}</h6>
       </div>
-      <div className="flex items-center gap-3.5 pointer-events-none opacity-0 group-hover:pointer-events-auto group-hover:opacity-100">
-        <div className="h-4 w-4">
-          <CustomMenu
-            customButton={
-              <div className="h-4 w-4">
-                <Component className="h-4 w-4 leading-4 text-custom-sidebar-text-400 flex-shrink-0" />
-              </div>
-            }
+      <div
+        ref={actionSectionRef}
+        className={`absolute -top-0.5 right-3 flex items-start gap-3.5 pointer-events-none opacity-0 group-hover:pointer-events-auto group-hover:opacity-100 ${
+          isMenuActive ? "opacity-100" : ""
+        }`}
+      >
+        <CustomMenu
+          customButton={
+            <div className="h-4 w-4" onClick={() => setIsMenuActive(!isMenuActive)}>
+              <Component className="h-4 w-4 leading-4 text-custom-sidebar-text-400 flex-shrink-0" />
+            </div>
+          }
+        >
+          <CustomMenu.MenuItem onClick={() => addLabelToGroup(label)}>
+            <span className="flex items-center justify-start gap-2">
+              <Component className="h-4 w-4 leading-4 text-custom-sidebar-text-400 flex-shrink-0" />
+              <span>Convert to group</span>
+            </span>
+          </CustomMenu.MenuItem>
+          <CustomMenu.MenuItem onClick={() => editLabel(label)}>
+            <span className="flex items-center justify-start gap-2">
+              <PencilIcon className="h-4 w-4" />
+              <span>Edit label</span>
+            </span>
+          </CustomMenu.MenuItem>
+        </CustomMenu>
+        <div className="py-0.5">
+          <button
+            className="flex h-4 w-4 items-center justify-start gap-2"
+            onClick={handleLabelDelete}
           >
-            <CustomMenu.MenuItem onClick={() => addLabelToGroup(label)}>
-              <span className="flex items-center justify-start gap-2">
-                <Component className="h-4 w-4 leading-4 text-custom-sidebar-text-400 flex-shrink-0" />
-                <span>Convert to group</span>
-              </span>
-            </CustomMenu.MenuItem>
-            <CustomMenu.MenuItem onClick={() => editLabel(label)}>
-              <span className="flex items-center justify-start gap-2">
-                <PencilIcon className="h-4 w-4" />
-                <span>Edit label</span>
-              </span>
-            </CustomMenu.MenuItem>
-          </CustomMenu>
-        </div>
-
-        <div className="flex items-center">
-          <button className="flex items-center justify-start gap-2" onClick={handleLabelDelete}>
-            <X className="h-[18px] w-[18px] text-custom-sidebar-text-400 flex-shrink-0" />
+            <X className="h-4 w-4  text-custom-sidebar-text-400 flex-shrink-0" />
           </button>
         </div>
       </div>
     </div>
-  </div>
-);
+  );
+};
diff --git a/web/pages/[workspaceSlug]/me/profile/index.tsx b/web/pages/[workspaceSlug]/me/profile/index.tsx
index c536c384a45..40ba8ecf3aa 100644
--- a/web/pages/[workspaceSlug]/me/profile/index.tsx
+++ b/web/pages/[workspaceSlug]/me/profile/index.tsx
@@ -253,6 +253,7 @@ const Profile: NextPage = () => {
                     placeholder="Enter your first name"
                     className="!px-3 !py-2 rounded-md font-medium"
                     autoComplete="off"
+                    maxLength={24}
                   />
                 </div>
 
@@ -266,6 +267,7 @@ const Profile: NextPage = () => {
                     placeholder="Enter your last name"
                     autoComplete="off"
                     className="!px-3 !py-2 rounded-md font-medium"
+                    maxLength={24}
                   />
                 </div>
 
diff --git a/web/pages/[workspaceSlug]/settings/index.tsx b/web/pages/[workspaceSlug]/settings/index.tsx
index 4f576aa0aed..7d0d8b1b6ba 100644
--- a/web/pages/[workspaceSlug]/settings/index.tsx
+++ b/web/pages/[workspaceSlug]/settings/index.tsx
@@ -337,10 +337,10 @@ const WorkspaceSettings: NextPage = () => {
                     <Disclosure.Panel>
                       <div className="flex flex-col gap-8">
                         <span className="text-sm tracking-tight">
-                          The danger zone of the project delete page is a critical area that
-                          requires careful consideration and attention. When deleting a project, all
-                          of the data and resources within that project will be permanently removed
-                          and cannot be recovered.
+                          The danger zone of the workspace delete page is a critical area that
+                          requires careful consideration and attention. When deleting a workspace,
+                          all of the data and resources within that workspace will be permanently
+                          removed and cannot be recovered.
                         </span>
                         <div>
                           <DangerButton
@@ -348,7 +348,7 @@ const WorkspaceSettings: NextPage = () => {
                             className="!text-sm"
                             outline
                           >
-                            Delete my project
+                            Delete my workspace
                           </DangerButton>
                         </div>
                       </div>