From a8a5873d8839bb1dde58cc043c6ff6aa08a75881 Mon Sep 17 00:00:00 2001
From: Saheb Giri <47132373+iamsahebgiri@users.noreply.github.com>
Date: Thu, 30 Mar 2023 20:45:15 +0530
Subject: [PATCH] fix: add icons to dropdown and replace link icon (#630)

---
 .../core/board-view/single-issue.tsx          | 17 +++++++--
 .../core/list-view/single-issue.tsx           | 19 ++++++++--
 apps/app/components/cycles/sidebar.tsx        |  4 +--
 .../components/cycles/single-cycle-card.tsx   |  4 +--
 .../components/issues/my-issues-list-item.tsx |  8 ++++-
 apps/app/components/modules/sidebar.tsx       |  4 +--
 .../components/modules/single-module-card.tsx | 36 ++++++++-----------
 .../project/single-project-card.tsx           | 30 ++++++++++++----
 .../project/single-sidebar-project.tsx        | 27 +++++++++++---
 9 files changed, 104 insertions(+), 45 deletions(-)

diff --git a/apps/app/components/core/board-view/single-issue.tsx b/apps/app/components/core/board-view/single-issue.tsx
index e5c113ffa..fd36eeb95 100644
--- a/apps/app/components/core/board-view/single-issue.tsx
+++ b/apps/app/components/core/board-view/single-issue.tsx
@@ -225,17 +225,28 @@ export const SingleBoardIssue: React.FC<Props> = ({
             <div className="z-1 absolute top-1.5 right-1.5 opacity-0 group-hover/card:opacity-100">
               {type && !isNotAllowed && (
                 <CustomMenu width="auto" ellipsis>
-                  <CustomMenu.MenuItem onClick={editIssue}>Edit issue</CustomMenu.MenuItem>
+                  <CustomMenu.MenuItem onClick={editIssue}>
+                    <span className="flex items-center justify-start gap-2 text-gray-700">
+                      <PencilIcon className="h-4 w-4" />
+                      <span>Edit issue</span>
+                    </span>
+                  </CustomMenu.MenuItem>
                   {type !== "issue" && removeIssue && (
                     <CustomMenu.MenuItem onClick={removeIssue}>
                       <>Remove from {type}</>
                     </CustomMenu.MenuItem>
                   )}
                   <CustomMenu.MenuItem onClick={() => handleDeleteIssue(issue)}>
-                    Delete issue
+                    <span className="flex items-center justify-start gap-2 text-gray-700">
+                      <TrashIcon className="h-4 w-4" />
+                      <span>Delete issue</span>
+                    </span>
                   </CustomMenu.MenuItem>
                   <CustomMenu.MenuItem onClick={handleCopyText}>
-                    Copy issue link
+                    <span className="flex items-center justify-start gap-2 text-gray-700">
+                      <LinkIcon className="h-4 w-4" />
+                      <span>Copy issue Link</span>
+                    </span>
                   </CustomMenu.MenuItem>
                 </CustomMenu>
               )}
diff --git a/apps/app/components/core/list-view/single-issue.tsx b/apps/app/components/core/list-view/single-issue.tsx
index cb9b397ad..b5e31dd9c 100644
--- a/apps/app/components/core/list-view/single-issue.tsx
+++ b/apps/app/components/core/list-view/single-issue.tsx
@@ -257,16 +257,29 @@ export const SingleListIssue: React.FC<Props> = ({
             )}
             {type && !isNotAllowed && (
               <CustomMenu width="auto" ellipsis>
-                <CustomMenu.MenuItem onClick={editIssue}>Edit issue</CustomMenu.MenuItem>
+                <CustomMenu.MenuItem onClick={editIssue}>
+                  <span className="flex items-center justify-start gap-2 text-gray-700">
+                    <PencilIcon className="h-4 w-4" />
+                    <span>Edit issue</span>
+                  </span>
+                </CustomMenu.MenuItem>
                 {type !== "issue" && removeIssue && (
                   <CustomMenu.MenuItem onClick={removeIssue}>
                     <>Remove from {type}</>
                   </CustomMenu.MenuItem>
                 )}
                 <CustomMenu.MenuItem onClick={() => handleDeleteIssue(issue)}>
-                  Delete issue
+                  <span className="flex items-center justify-start gap-2 text-gray-700">
+                    <TrashIcon className="h-4 w-4" />
+                    <span>Delete issue</span>
+                  </span>
+                </CustomMenu.MenuItem>
+                <CustomMenu.MenuItem onClick={handleCopyText}>
+                  <span className="flex items-center justify-start gap-2 text-gray-700">
+                    <LinkIcon className="h-4 w-4" />
+                    <span>Copy issue link</span>
+                  </span>
                 </CustomMenu.MenuItem>
-                <CustomMenu.MenuItem onClick={handleCopyText}>Copy issue link</CustomMenu.MenuItem>
               </CustomMenu>
             )}
           </div>
diff --git a/apps/app/components/cycles/sidebar.tsx b/apps/app/components/cycles/sidebar.tsx
index 79b841df9..d7d886fd0 100644
--- a/apps/app/components/cycles/sidebar.tsx
+++ b/apps/app/components/cycles/sidebar.tsx
@@ -15,10 +15,10 @@ import {
   ChartPieIcon,
   ArrowLongRightIcon,
   TrashIcon,
-  DocumentDuplicateIcon,
   UserCircleIcon,
   ChevronDownIcon,
   DocumentIcon,
+  LinkIcon,
 } from "@heroicons/react/24/outline";
 // ui
 import { CustomMenu, Loader, ProgressBar } from "components/ui";
@@ -295,7 +295,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                     <CustomMenu width="lg" ellipsis>
                       <CustomMenu.MenuItem onClick={handleCopyText}>
                         <span className="flex items-center justify-start gap-2 text-gray-800">
-                          <DocumentDuplicateIcon className="h-4 w-4" />
+                          <LinkIcon className="h-4 w-4" />
                           <span>Copy Link</span>
                         </span>
                       </CustomMenu.MenuItem>
diff --git a/apps/app/components/cycles/single-cycle-card.tsx b/apps/app/components/cycles/single-cycle-card.tsx
index be789d343..f99cc7fc8 100644
--- a/apps/app/components/cycles/single-cycle-card.tsx
+++ b/apps/app/components/cycles/single-cycle-card.tsx
@@ -18,7 +18,7 @@ import { CalendarDaysIcon } from "@heroicons/react/20/solid";
 import { TargetIcon } from "components/icons";
 import {
   ChevronDownIcon,
-  DocumentDuplicateIcon,
+  LinkIcon,
   PencilIcon,
   StarIcon,
   TrashIcon,
@@ -318,7 +318,7 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
                 )}
                 <CustomMenu.MenuItem onClick={handleCopyText}>
                   <span className="flex items-center justify-start gap-2 text-gray-800">
-                    <DocumentDuplicateIcon className="h-4 w-4" />
+                    <LinkIcon className="h-4 w-4" />
                     <span>Copy Cycle Link</span>
                   </span>
                 </CustomMenu.MenuItem>
diff --git a/apps/app/components/issues/my-issues-list-item.tsx b/apps/app/components/issues/my-issues-list-item.tsx
index f933e95f9..273382427 100644
--- a/apps/app/components/issues/my-issues-list-item.tsx
+++ b/apps/app/components/issues/my-issues-list-item.tsx
@@ -22,6 +22,7 @@ import { IIssue, Properties } from "types";
 import { USER_ISSUE } from "constants/fetch-keys";
 import { copyTextToClipboard, truncateText } from "helpers/string.helper";
 import useToast from "hooks/use-toast";
+import { LinkIcon } from "@heroicons/react/24/outline";
 
 type Props = {
   issue: IIssue;
@@ -167,7 +168,12 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
             </Tooltip>
           )}
           <CustomMenu width="auto" ellipsis>
-            <CustomMenu.MenuItem onClick={handleCopyText}>Copy issue link</CustomMenu.MenuItem>
+            <CustomMenu.MenuItem onClick={handleCopyText}>
+              <span className="flex items-center justify-start gap-2 text-gray-700">
+                <LinkIcon className="h-4 w-4" />
+                <span>Copy issue link</span>
+              </span>
+            </CustomMenu.MenuItem>
           </CustomMenu>
         </div>
       </div>
diff --git a/apps/app/components/modules/sidebar.tsx b/apps/app/components/modules/sidebar.tsx
index 7c986078c..f272eff0f 100644
--- a/apps/app/components/modules/sidebar.tsx
+++ b/apps/app/components/modules/sidebar.tsx
@@ -12,7 +12,6 @@ import {
   CalendarDaysIcon,
   ChartPieIcon,
   ChevronDownIcon,
-  DocumentDuplicateIcon,
   DocumentIcon,
   PlusIcon,
   TrashIcon,
@@ -41,6 +40,7 @@ import { IIssue, IModule, ModuleLink, UserAuth } from "types";
 import { MODULE_DETAILS } from "constants/fetch-keys";
 // constant
 import { MODULE_STATUS } from "constants/module";
+import { LinkIcon } from "@heroicons/react/20/solid";
 
 const defaultValues: Partial<IModule> = {
   lead: "",
@@ -334,7 +334,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
                     <CustomMenu width="lg" ellipsis>
                       <CustomMenu.MenuItem onClick={handleCopyText}>
                         <span className="flex items-center justify-start gap-2 text-gray-800">
-                          <DocumentDuplicateIcon className="h-4 w-4" />
+                          <LinkIcon className="h-4 w-4" />
                           <span>Copy Link</span>
                         </span>
                       </CustomMenu.MenuItem>
diff --git a/apps/app/components/modules/single-module-card.tsx b/apps/app/components/modules/single-module-card.tsx
index cf7cbaeff..63e0c2e99 100644
--- a/apps/app/components/modules/single-module-card.tsx
+++ b/apps/app/components/modules/single-module-card.tsx
@@ -14,12 +14,7 @@ import { DeleteModuleModal } from "components/modules";
 // ui
 import { AssigneesList, Avatar, CustomMenu, Tooltip } from "components/ui";
 // icons
-import {
-  DocumentDuplicateIcon,
-  PencilIcon,
-  StarIcon,
-  TrashIcon,
-} from "@heroicons/react/24/outline";
+import { LinkIcon, PencilIcon, StarIcon, TrashIcon } from "@heroicons/react/24/outline";
 import { CalendarMonthIcon, TargetIcon } from "components/icons";
 
 // helpers
@@ -127,14 +122,14 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule })
         setIsOpen={setModuleDeleteModal}
         data={module}
       />
-      <div className="flex flex-col overflow-hidden rounded-[10px] divide-y border bg-white text-xs">
+      <div className="flex flex-col divide-y overflow-hidden rounded-[10px] border bg-white text-xs">
         <div className="p-4">
           <div className="flex w-full flex-col gap-5">
             <div className="flex items-start justify-between gap-2">
               <Tooltip tooltipContent={module.name} position="top-left">
                 <Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}>
                   <a className="w-auto max-w-[calc(100%-9rem)]">
-                    <h3 className="break-all text-lg truncate font-semibold text-black">
+                    <h3 className="truncate break-all text-lg font-semibold text-black">
                       {truncateText(module.name, 75)}
                     </h3>
                   </a>
@@ -142,7 +137,7 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule })
               </Tooltip>
 
               <div className="flex items-center gap-1">
-                <div className="mr-2 rounded flex bg-gray-100 px-2.5 py-2 whitespace-nowrap">
+                <div className="mr-2 flex whitespace-nowrap rounded bg-gray-100 px-2.5 py-2">
                   <span className="capitalize">{module?.status?.replace("-", " ")}</span>
                 </div>
                 {module.is_favorite ? (
@@ -157,20 +152,20 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule })
 
                 <CustomMenu width="auto" verticalEllipsis>
                   <CustomMenu.MenuItem onClick={handleEditModule}>
-                    <span className="flex items-center justify-start gap-2 text-gray-800">
+                    <span className="flex items-center justify-start gap-2 text-gray-700">
                       <PencilIcon className="h-4 w-4" />
                       <span>Edit Module</span>
                     </span>
                   </CustomMenu.MenuItem>
                   <CustomMenu.MenuItem onClick={handleDeleteModule}>
-                    <span className="flex items-center justify-start gap-2 text-gray-800">
+                    <span className="flex items-center justify-start gap-2 text-gray-700">
                       <TrashIcon className="h-4 w-4" />
                       <span>Delete Module</span>
                     </span>
                   </CustomMenu.MenuItem>
                   <CustomMenu.MenuItem onClick={handleCopyText}>
-                    <span className="flex items-center justify-start gap-2 text-gray-800">
-                      <DocumentDuplicateIcon className="h-4 w-4" />
+                    <span className="flex items-center justify-start gap-2 text-gray-700">
+                      <LinkIcon className="h-4 w-4" />
                       <span>Copy Module Link</span>
                     </span>
                   </CustomMenu.MenuItem>
@@ -191,7 +186,7 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule })
             </div>
           </div>
         </div>
-        <div className="flex flex-col items-end h-20">
+        <div className="flex h-20 flex-col items-end">
           <div className="flex w-full items-center justify-between gap-2 justify-self-end bg-gray-100 p-4">
             <span>Progress</span>
             <div className="bar relative h-1 w-full rounded bg-gray-300">
@@ -204,19 +199,18 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule })
             </div>
             <span>{isNaN(completionPercentage) ? 0 : completionPercentage.toFixed(0)}%</span>
           </div>
-          <div className="flex justify-between w-full h-full px-4 pb-4 bg-gray-100 item-center">
+          <div className="item-center flex h-full w-full justify-between bg-gray-100 px-4 pb-4">
             <p className="text-[#858E96]">
               Last updated:
-                <span className="text-black font-medium">
-                  {renderShortDateWithYearFormat(lastUpdated)}
-                </span>
+              <span className="font-medium text-black">
+                {renderShortDateWithYearFormat(lastUpdated)}
+              </span>
             </p>
-            {
-              module.members_detail.length>0 &&
+            {module.members_detail.length > 0 && (
               <div className="flex items-center gap-1">
                 <AssigneesList users={module.members_detail} length={4} />
               </div>
-            }
+            )}
           </div>
         </div>
       </div>
diff --git a/apps/app/components/project/single-project-card.tsx b/apps/app/components/project/single-project-card.tsx
index 21f9b7128..e366a3906 100644
--- a/apps/app/components/project/single-project-card.tsx
+++ b/apps/app/components/project/single-project-card.tsx
@@ -14,8 +14,14 @@ import useToast from "hooks/use-toast";
 // ui
 import { CustomMenu, Loader, Tooltip } from "components/ui";
 // icons
-import { CalendarDaysIcon, PencilIcon, PlusIcon } from "@heroicons/react/24/outline";
-import { StarIcon } from "@heroicons/react/20/solid";
+import {
+  CalendarDaysIcon,
+  LinkIcon,
+  PencilIcon,
+  PlusIcon,
+  StarIcon,
+  TrashIcon,
+} from "@heroicons/react/24/outline";
 // helpers
 import { renderShortNumericDateFormat } from "helpers/date-time.helper";
 import { copyTextToClipboard, truncateText } from "helpers/string.helper";
@@ -213,20 +219,32 @@ export const SingleProjectCard: React.FC<ProjectCardProps> = ({
                   <CustomMenu width="auto" verticalEllipsis>
                     {isOwner && (
                       <CustomMenu.MenuItem onClick={() => setDeleteProject(project.id)}>
-                        Delete project
+                        <span className="flex items-center justify-start gap-2 text-gray-700">
+                          <TrashIcon className="h-4 w-4" />
+                          <span>Delete project</span>
+                        </span>
                       </CustomMenu.MenuItem>
                     )}
                     {project.is_favorite ? (
                       <CustomMenu.MenuItem onClick={handleRemoveFromFavorites}>
-                        Remove from favorites
+                        <span className="flex items-center justify-start gap-2 text-gray-700">
+                          <StarIcon className="h-4 w-4" />
+                          <span>Remove from favorites</span>
+                        </span>
                       </CustomMenu.MenuItem>
                     ) : (
                       <CustomMenu.MenuItem onClick={handleAddToFavorites}>
-                        Add to favorites
+                        <span className="flex items-center justify-start gap-2 text-gray-700">
+                          <StarIcon className="h-4 w-4" />
+                          <span>Add to favorites</span>
+                        </span>
                       </CustomMenu.MenuItem>
                     )}
                     <CustomMenu.MenuItem onClick={handleCopyText}>
-                      Copy project link
+                      <span className="flex items-center justify-start gap-2 text-gray-700">
+                        <LinkIcon className="h-4 w-4" />
+                        <span>Copy project link</span>
+                      </span>
                     </CustomMenu.MenuItem>
                   </CustomMenu>
                 </div>
diff --git a/apps/app/components/project/single-sidebar-project.tsx b/apps/app/components/project/single-sidebar-project.tsx
index 8d25ad3ea..d9a60be9d 100644
--- a/apps/app/components/project/single-sidebar-project.tsx
+++ b/apps/app/components/project/single-sidebar-project.tsx
@@ -6,7 +6,12 @@ import { Disclosure, Transition } from "@headlessui/react";
 // ui
 import { CustomMenu } from "components/ui";
 // icons
-import { ChevronDownIcon, DocumentTextIcon } from "@heroicons/react/24/outline";
+import {
+  ChevronDownIcon,
+  DocumentTextIcon,
+  StarIcon,
+  TrashIcon,
+} from "@heroicons/react/24/outline";
 import {
   ContrastIcon,
   LayerDiagonalIcon,
@@ -111,20 +116,32 @@ export const SingleSidebarProject: React.FC<Props> = ({
             {!sidebarCollapse && (
               <CustomMenu ellipsis>
                 <CustomMenu.MenuItem onClick={handleDeleteProject}>
-                  Delete project
+                  <span className="flex items-center justify-start gap-2 text-gray-700">
+                    <TrashIcon className="h-4 w-4" />
+                    <span>Delete project</span>
+                  </span>
                 </CustomMenu.MenuItem>
                 {handleAddToFavorites && (
                   <CustomMenu.MenuItem onClick={handleAddToFavorites}>
-                    Add to favorites
+                    <span className="flex items-center justify-start gap-2 text-gray-700">
+                      <StarIcon className="h-4 w-4" />
+                      <span>Add to favorites</span>
+                    </span>
                   </CustomMenu.MenuItem>
                 )}
                 {handleRemoveFromFavorites && (
                   <CustomMenu.MenuItem onClick={handleRemoveFromFavorites}>
-                    Remove from favorites
+                    <span className="flex items-center justify-start gap-2 text-gray-700">
+                      <StarIcon className="h-4 w-4" />
+                      <span>Remove from favorites</span>
+                    </span>
                   </CustomMenu.MenuItem>
                 )}
                 <CustomMenu.MenuItem onClick={handleCopyText}>
-                  Copy project link
+                  <span className="flex items-center justify-start gap-2 text-gray-700">
+                    <TrashIcon className="h-4 w-4" />
+                    <span>Copy project link</span>
+                  </span>
                 </CustomMenu.MenuItem>
               </CustomMenu>
             )}