From 567966459bc18a53ceb5ce8c73a9dc80a22342af Mon Sep 17 00:00:00 2001
From: Kunal Vishwakarma <116634168+kunalv17@users.noreply.github.com>
Date: Fri, 31 Mar 2023 18:31:44 +0530
Subject: [PATCH] style: added icons to ellipses in project settings label
 (#662)

---
 .../components/labels/single-label-group.tsx  | 41 +++++++++++++++----
 apps/app/components/labels/single-label.tsx   | 19 +++++++--
 .../projects/[projectId]/settings/members.tsx |  7 +++-
 3 files changed, 55 insertions(+), 12 deletions(-)

diff --git a/apps/app/components/labels/single-label-group.tsx b/apps/app/components/labels/single-label-group.tsx
index f4320e97e..d41b8508e 100644
--- a/apps/app/components/labels/single-label-group.tsx
+++ b/apps/app/components/labels/single-label-group.tsx
@@ -11,7 +11,14 @@ import issuesService from "services/issues.service";
 // ui
 import { CustomMenu } from "components/ui";
 // icons
-import { ChevronDownIcon, RectangleGroupIcon } from "@heroicons/react/24/outline";
+import {
+  ChevronDownIcon,
+  RectangleGroupIcon,
+  XMarkIcon,
+  PlusIcon,
+  PencilIcon,
+  TrashIcon,
+} from "@heroicons/react/24/outline";
 // types
 import { IIssueLabels } from "types";
 // fetch-keys
@@ -72,11 +79,22 @@ export const SingleLabelGroup: React.FC<Props> = ({
             <div className="flex items-center gap-2">
               <CustomMenu ellipsis>
                 <CustomMenu.MenuItem onClick={() => addLabelToGroup(label)}>
-                  Add more labels
+                  <span className="flex items-center justify-start gap-2">
+                    <PlusIcon className="h-4 w-4" />
+                    <span>Add more labels</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.MenuItem onClick={() => editLabel(label)}>Edit</CustomMenu.MenuItem>
                 <CustomMenu.MenuItem onClick={() => handleLabelDelete(label.id)}>
-                  Delete
+                  <span className="flex items-center justify-start gap-2">
+                    <TrashIcon className="h-4 w-4" />
+                    <span>Delete label</span>
+                  </span>
                 </CustomMenu.MenuItem>
               </CustomMenu>
               <Disclosure.Button>
@@ -117,13 +135,22 @@ export const SingleLabelGroup: React.FC<Props> = ({
                     <div className="pointer-events-none opacity-0 group-hover:pointer-events-auto group-hover:opacity-100">
                       <CustomMenu ellipsis>
                         <CustomMenu.MenuItem onClick={() => removeFromGroup(child)}>
-                          Remove from group
+                          <span className="flex items-center justify-start gap-2">
+                            <XMarkIcon className="h-4 w-4" />
+                            <span>Remove from group</span>
+                          </span>
                         </CustomMenu.MenuItem>
                         <CustomMenu.MenuItem onClick={() => editLabel(child)}>
-                          Edit
+                          <span className="flex items-center justify-start gap-2">
+                            <PencilIcon className="h-4 w-4" />
+                            <span>Edit label</span>
+                          </span>
                         </CustomMenu.MenuItem>
                         <CustomMenu.MenuItem onClick={() => handleLabelDelete(child.id)}>
-                          Delete
+                          <span className="flex items-center justify-start gap-2">
+                            <TrashIcon className="h-4 w-4" />
+                            <span>Delete label</span>
+                          </span>
                         </CustomMenu.MenuItem>
                       </CustomMenu>
                     </div>
diff --git a/apps/app/components/labels/single-label.tsx b/apps/app/components/labels/single-label.tsx
index 0bef9ee35..201d97d58 100644
--- a/apps/app/components/labels/single-label.tsx
+++ b/apps/app/components/labels/single-label.tsx
@@ -4,6 +4,8 @@ import React from "react";
 import { CustomMenu } from "components/ui";
 // types
 import { IIssueLabels } from "types";
+//icons
+import { RectangleGroupIcon, LinkIcon, PencilIcon, TrashIcon } from "@heroicons/react/24/outline";
 
 type Props = {
   label: IIssueLabels;
@@ -31,11 +33,22 @@ export const SingleLabel: React.FC<Props> = ({
       </div>
       <CustomMenu ellipsis>
         <CustomMenu.MenuItem onClick={() => addLabelToGroup(label)}>
-          Convert to group
+          <span className="flex items-center justify-start gap-2">
+            <RectangleGroupIcon className="h-4 w-4" />
+            <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.MenuItem onClick={() => editLabel(label)}>Edit</CustomMenu.MenuItem>
         <CustomMenu.MenuItem onClick={() => handleLabelDelete(label.id)}>
-          Delete
+          <span className="flex items-center justify-start gap-2">
+            <TrashIcon className="h-4 w-4" />
+            <span>Delete label</span>
+          </span>
         </CustomMenu.MenuItem>
       </CustomMenu>
     </div>
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
index 0bbb56b83..c090b9b6c 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
@@ -21,7 +21,7 @@ import SendProjectInvitationModal from "components/project/send-project-invitati
 import { CustomMenu, CustomSelect, Loader } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
-import { PlusIcon } from "@heroicons/react/24/outline";
+import { PlusIcon, XMarkIcon } from "@heroicons/react/24/outline";
 // types
 import type { NextPage, GetServerSidePropsContext } from "next";
 import { UserAuth } from "types";
@@ -261,7 +261,10 @@ const MembersSettings: NextPage<UserAuth> = ({ isMember, isOwner, isViewer, isGu
                               else setSelectedInviteRemoveMember(member.id);
                             }}
                           >
-                            Remove member
+                            <span className="flex items-center justify-start gap-2">
+                              <XMarkIcon className="h-4 w-4" />
+                              <span>Remove member</span>
+                            </span>
                           </CustomMenu.MenuItem>
                         </CustomMenu>
                       </div>