From 5d0533a44fc60d125f302eaffbf025382e4888b2 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Fri, 31 Mar 2023 00:31:00 +0530
Subject: [PATCH] style: ellipsis consistent style (#632)

* style: ellipsis consistent style

* style: consistent ellipsis menu for module and cycle
---
 .../core/board-view/single-issue.tsx           |  6 +++---
 .../components/core/list-view/single-issue.tsx |  6 +++---
 apps/app/components/cycles/sidebar.tsx         | 14 +++++++-------
 .../components/cycles/single-cycle-card.tsx    |  8 ++++----
 .../components/issues/my-issues-list-item.tsx  |  2 +-
 apps/app/components/modules/sidebar.tsx        | 18 ++++++++++--------
 .../components/modules/single-module-card.tsx  | 12 ++++++------
 .../components/project/single-project-card.tsx |  8 ++++----
 .../project/single-sidebar-project.tsx         | 11 ++++++-----
 apps/app/components/ui/context-menu.tsx        |  4 ++--
 apps/app/components/ui/custom-menu.tsx         |  4 ++--
 11 files changed, 48 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 fd36eeb95..c067ed01c 100644
--- a/apps/app/components/core/board-view/single-issue.tsx
+++ b/apps/app/components/core/board-view/single-issue.tsx
@@ -226,7 +226,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
               {type && !isNotAllowed && (
                 <CustomMenu width="auto" ellipsis>
                   <CustomMenu.MenuItem onClick={editIssue}>
-                    <span className="flex items-center justify-start gap-2 text-gray-700">
+                    <span className="flex items-center justify-start gap-2">
                       <PencilIcon className="h-4 w-4" />
                       <span>Edit issue</span>
                     </span>
@@ -237,13 +237,13 @@ export const SingleBoardIssue: React.FC<Props> = ({
                     </CustomMenu.MenuItem>
                   )}
                   <CustomMenu.MenuItem onClick={() => handleDeleteIssue(issue)}>
-                    <span className="flex items-center justify-start gap-2 text-gray-700">
+                    <span className="flex items-center justify-start gap-2">
                       <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">
+                    <span className="flex items-center justify-start gap-2">
                       <LinkIcon className="h-4 w-4" />
                       <span>Copy issue Link</span>
                     </span>
diff --git a/apps/app/components/core/list-view/single-issue.tsx b/apps/app/components/core/list-view/single-issue.tsx
index b5e31dd9c..0dc66996c 100644
--- a/apps/app/components/core/list-view/single-issue.tsx
+++ b/apps/app/components/core/list-view/single-issue.tsx
@@ -258,7 +258,7 @@ export const SingleListIssue: React.FC<Props> = ({
             {type && !isNotAllowed && (
               <CustomMenu width="auto" ellipsis>
                 <CustomMenu.MenuItem onClick={editIssue}>
-                  <span className="flex items-center justify-start gap-2 text-gray-700">
+                  <span className="flex items-center justify-start gap-2">
                     <PencilIcon className="h-4 w-4" />
                     <span>Edit issue</span>
                   </span>
@@ -269,13 +269,13 @@ export const SingleListIssue: React.FC<Props> = ({
                   </CustomMenu.MenuItem>
                 )}
                 <CustomMenu.MenuItem onClick={() => handleDeleteIssue(issue)}>
-                  <span className="flex items-center justify-start gap-2 text-gray-700">
+                  <span className="flex items-center justify-start gap-2">
                     <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">
+                  <span className="flex items-center justify-start gap-2">
                     <LinkIcon className="h-4 w-4" />
                     <span>Copy issue link</span>
                   </span>
diff --git a/apps/app/components/cycles/sidebar.tsx b/apps/app/components/cycles/sidebar.tsx
index d7d886fd0..c3a04ae6b 100644
--- a/apps/app/components/cycles/sidebar.tsx
+++ b/apps/app/components/cycles/sidebar.tsx
@@ -293,20 +293,20 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                   <div className="flex items-start justify-between gap-2 w-full">
                     <h4 className="text-xl font-semibold text-gray-900">{cycle.name}</h4>
                     <CustomMenu width="lg" ellipsis>
-                      <CustomMenu.MenuItem onClick={handleCopyText}>
-                        <span className="flex items-center justify-start gap-2 text-gray-800">
-                          <LinkIcon className="h-4 w-4" />
-                          <span>Copy Link</span>
-                        </span>
-                      </CustomMenu.MenuItem>
                       {!isCompleted && (
                         <CustomMenu.MenuItem onClick={() => setCycleDeleteModal(true)}>
-                          <span className="flex items-center justify-start gap-2 text-gray-800">
+                          <span className="flex items-center justify-start gap-2">
                             <TrashIcon className="h-4 w-4" />
                             <span>Delete</span>
                           </span>
                         </CustomMenu.MenuItem>
                       )}
+                      <CustomMenu.MenuItem onClick={handleCopyText}>
+                        <span className="flex items-center justify-start gap-2">
+                          <LinkIcon className="h-4 w-4" />
+                          <span>Copy link</span>
+                        </span>
+                      </CustomMenu.MenuItem>
                     </CustomMenu>
                   </div>
 
diff --git a/apps/app/components/cycles/single-cycle-card.tsx b/apps/app/components/cycles/single-cycle-card.tsx
index f99cc7fc8..d6b1200a0 100644
--- a/apps/app/components/cycles/single-cycle-card.tsx
+++ b/apps/app/components/cycles/single-cycle-card.tsx
@@ -310,16 +310,16 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
               <CustomMenu width="auto" verticalEllipsis>
                 {!isCompleted && (
                   <CustomMenu.MenuItem onClick={handleDeleteCycle}>
-                    <span className="flex items-center justify-start gap-2 text-gray-800">
+                    <span className="flex items-center justify-start gap-2">
                       <TrashIcon className="h-4 w-4" />
-                      <span>Delete Cycle</span>
+                      <span>Delete cycle</span>
                     </span>
                   </CustomMenu.MenuItem>
                 )}
                 <CustomMenu.MenuItem onClick={handleCopyText}>
-                  <span className="flex items-center justify-start gap-2 text-gray-800">
+                  <span className="flex items-center justify-start gap-2">
                     <LinkIcon className="h-4 w-4" />
-                    <span>Copy Cycle Link</span>
+                    <span>Copy cycle link</span>
                   </span>
                 </CustomMenu.MenuItem>
               </CustomMenu>
diff --git a/apps/app/components/issues/my-issues-list-item.tsx b/apps/app/components/issues/my-issues-list-item.tsx
index 273382427..676371d85 100644
--- a/apps/app/components/issues/my-issues-list-item.tsx
+++ b/apps/app/components/issues/my-issues-list-item.tsx
@@ -169,7 +169,7 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
           )}
           <CustomMenu width="auto" ellipsis>
             <CustomMenu.MenuItem onClick={handleCopyText}>
-              <span className="flex items-center justify-start gap-2 text-gray-700">
+              <span className="flex items-center justify-start gap-2">
                 <LinkIcon className="h-4 w-4" />
                 <span>Copy issue link</span>
               </span>
diff --git a/apps/app/components/modules/sidebar.tsx b/apps/app/components/modules/sidebar.tsx
index f272eff0f..f42a36e68 100644
--- a/apps/app/components/modules/sidebar.tsx
+++ b/apps/app/components/modules/sidebar.tsx
@@ -305,7 +305,9 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
                           <Popover.Panel className="absolute top-10 -right-5 z-20  transform overflow-hidden">
                             <DatePicker
                               selected={
-                                watch("target_date") ? new Date(`${watch("target_date")}`) : new Date()
+                                watch("target_date")
+                                  ? new Date(`${watch("target_date")}`)
+                                  : new Date()
                               }
                               onChange={(date) => {
                                 submitChanges({
@@ -332,18 +334,18 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
                   <div className="flex items-start justify-between gap-2 w-full  ">
                     <h4 className="text-xl font-semibold text-gray-900">{module.name}</h4>
                     <CustomMenu width="lg" ellipsis>
-                      <CustomMenu.MenuItem onClick={handleCopyText}>
-                        <span className="flex items-center justify-start gap-2 text-gray-800">
-                          <LinkIcon className="h-4 w-4" />
-                          <span>Copy Link</span>
-                        </span>
-                      </CustomMenu.MenuItem>
                       <CustomMenu.MenuItem onClick={() => setModuleDeleteModal(true)}>
-                        <span className="flex items-center justify-start gap-2 text-gray-800">
+                        <span className="flex items-center justify-start gap-2">
                           <TrashIcon className="h-4 w-4" />
                           <span>Delete</span>
                         </span>
                       </CustomMenu.MenuItem>
+                      <CustomMenu.MenuItem onClick={handleCopyText}>
+                        <span className="flex items-center justify-start gap-2">
+                          <LinkIcon className="h-4 w-4" />
+                          <span>Copy link</span>
+                        </span>
+                      </CustomMenu.MenuItem>
                     </CustomMenu>
                   </div>
 
diff --git a/apps/app/components/modules/single-module-card.tsx b/apps/app/components/modules/single-module-card.tsx
index 63e0c2e99..b5b815a69 100644
--- a/apps/app/components/modules/single-module-card.tsx
+++ b/apps/app/components/modules/single-module-card.tsx
@@ -152,21 +152,21 @@ 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-700">
+                    <span className="flex items-center justify-start gap-2">
                       <PencilIcon className="h-4 w-4" />
-                      <span>Edit Module</span>
+                      <span>Edit module</span>
                     </span>
                   </CustomMenu.MenuItem>
                   <CustomMenu.MenuItem onClick={handleDeleteModule}>
-                    <span className="flex items-center justify-start gap-2 text-gray-700">
+                    <span className="flex items-center justify-start gap-2">
                       <TrashIcon className="h-4 w-4" />
-                      <span>Delete Module</span>
+                      <span>Delete module</span>
                     </span>
                   </CustomMenu.MenuItem>
                   <CustomMenu.MenuItem onClick={handleCopyText}>
-                    <span className="flex items-center justify-start gap-2 text-gray-700">
+                    <span className="flex items-center justify-start gap-2">
                       <LinkIcon className="h-4 w-4" />
-                      <span>Copy Module Link</span>
+                      <span>Copy module link</span>
                     </span>
                   </CustomMenu.MenuItem>
                 </CustomMenu>
diff --git a/apps/app/components/project/single-project-card.tsx b/apps/app/components/project/single-project-card.tsx
index e366a3906..02e2190c7 100644
--- a/apps/app/components/project/single-project-card.tsx
+++ b/apps/app/components/project/single-project-card.tsx
@@ -219,7 +219,7 @@ export const SingleProjectCard: React.FC<ProjectCardProps> = ({
                   <CustomMenu width="auto" verticalEllipsis>
                     {isOwner && (
                       <CustomMenu.MenuItem onClick={() => setDeleteProject(project.id)}>
-                        <span className="flex items-center justify-start gap-2 text-gray-700">
+                        <span className="flex items-center justify-start gap-2">
                           <TrashIcon className="h-4 w-4" />
                           <span>Delete project</span>
                         </span>
@@ -227,21 +227,21 @@ export const SingleProjectCard: React.FC<ProjectCardProps> = ({
                     )}
                     {project.is_favorite ? (
                       <CustomMenu.MenuItem onClick={handleRemoveFromFavorites}>
-                        <span className="flex items-center justify-start gap-2 text-gray-700">
+                        <span className="flex items-center justify-start gap-2">
                           <StarIcon className="h-4 w-4" />
                           <span>Remove from favorites</span>
                         </span>
                       </CustomMenu.MenuItem>
                     ) : (
                       <CustomMenu.MenuItem onClick={handleAddToFavorites}>
-                        <span className="flex items-center justify-start gap-2 text-gray-700">
+                        <span className="flex items-center justify-start gap-2">
                           <StarIcon className="h-4 w-4" />
                           <span>Add to favorites</span>
                         </span>
                       </CustomMenu.MenuItem>
                     )}
                     <CustomMenu.MenuItem onClick={handleCopyText}>
-                      <span className="flex items-center justify-start gap-2 text-gray-700">
+                      <span className="flex items-center justify-start gap-2">
                         <LinkIcon className="h-4 w-4" />
                         <span>Copy project link</span>
                       </span>
diff --git a/apps/app/components/project/single-sidebar-project.tsx b/apps/app/components/project/single-sidebar-project.tsx
index d9a60be9d..1e2273513 100644
--- a/apps/app/components/project/single-sidebar-project.tsx
+++ b/apps/app/components/project/single-sidebar-project.tsx
@@ -9,6 +9,7 @@ import { CustomMenu } from "components/ui";
 import {
   ChevronDownIcon,
   DocumentTextIcon,
+  LinkIcon,
   StarIcon,
   TrashIcon,
 } from "@heroicons/react/24/outline";
@@ -116,14 +117,14 @@ export const SingleSidebarProject: React.FC<Props> = ({
             {!sidebarCollapse && (
               <CustomMenu ellipsis>
                 <CustomMenu.MenuItem onClick={handleDeleteProject}>
-                  <span className="flex items-center justify-start gap-2 text-gray-700">
+                  <span className="flex items-center justify-start gap-2 ">
                     <TrashIcon className="h-4 w-4" />
                     <span>Delete project</span>
                   </span>
                 </CustomMenu.MenuItem>
                 {handleAddToFavorites && (
                   <CustomMenu.MenuItem onClick={handleAddToFavorites}>
-                    <span className="flex items-center justify-start gap-2 text-gray-700">
+                    <span className="flex items-center justify-start gap-2">
                       <StarIcon className="h-4 w-4" />
                       <span>Add to favorites</span>
                     </span>
@@ -131,15 +132,15 @@ export const SingleSidebarProject: React.FC<Props> = ({
                 )}
                 {handleRemoveFromFavorites && (
                   <CustomMenu.MenuItem onClick={handleRemoveFromFavorites}>
-                    <span className="flex items-center justify-start gap-2 text-gray-700">
+                    <span className="flex items-center justify-start gap-2">
                       <StarIcon className="h-4 w-4" />
                       <span>Remove from favorites</span>
                     </span>
                   </CustomMenu.MenuItem>
                 )}
                 <CustomMenu.MenuItem onClick={handleCopyText}>
-                  <span className="flex items-center justify-start gap-2 text-gray-700">
-                    <TrashIcon className="h-4 w-4" />
+                  <span className="flex items-center justify-start gap-2">
+                    <LinkIcon className="h-4 w-4" />
                     <span>Copy project link</span>
                   </span>
                 </CustomMenu.MenuItem>
diff --git a/apps/app/components/ui/context-menu.tsx b/apps/app/components/ui/context-menu.tsx
index acef49779..ac91cc27f 100644
--- a/apps/app/components/ui/context-menu.tsx
+++ b/apps/app/components/ui/context-menu.tsx
@@ -71,7 +71,7 @@ const MenuItem: React.FC<MenuItemProps> = ({
     {renderAs === "a" ? (
       <Link href={href}>
         <a
-          className={`${className} flex w-full items-center gap-2 rounded px-1 py-1.5 text-left hover:bg-hover-gray`}
+          className={`${className} flex w-full items-center gap-2 rounded px-1 py-1.5 text-left text-gray-500 hover:bg-gray-100 hover:text-gray-900`}
         >
           <>
             {Icon && <Icon />}
@@ -82,7 +82,7 @@ const MenuItem: React.FC<MenuItemProps> = ({
     ) : (
       <button
         type="button"
-        className={`${className} flex w-full items-center gap-2 rounded px-1 py-1.5 text-left hover:bg-hover-gray`}
+        className={`${className} flex w-full items-center gap-2 rounded px-1 py-1.5 text-left text-gray-500 hover:bg-gray-100 hover:text-gray-900`}
         onClick={onClick}
       >
         <>
diff --git a/apps/app/components/ui/custom-menu.tsx b/apps/app/components/ui/custom-menu.tsx
index 9d8fc6fd9..d324ad299 100644
--- a/apps/app/components/ui/custom-menu.tsx
+++ b/apps/app/components/ui/custom-menu.tsx
@@ -141,7 +141,7 @@ const MenuItem: React.FC<MenuItemProps> = ({
           <a
             className={`${className} ${
               active ? "bg-hover-gray" : ""
-            } inline-block w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-gray-500`}
+            } inline-block w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-gray-500 hover:bg-gray-100 hover:text-gray-900`}
             onClick={close}
           >
             {children}
@@ -152,7 +152,7 @@ const MenuItem: React.FC<MenuItemProps> = ({
           type="button"
           className={`${className} ${
             active ? "bg-hover-gray" : ""
-          } w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-gray-500`}
+          } w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-gray-500 hover:bg-gray-100 hover:text-gray-900`}
           onClick={onClick}
         >
           {children}