From c897f04926bb3c4108dda71134a0dd64934f88e3 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@caravel.tech>
Date: Wed, 1 Mar 2023 16:10:48 +0530
Subject: [PATCH] style: assignee drop down label

---
 .../app/components/issues/select/assignee.tsx | 21 +++++++++++++++----
 apps/app/components/ui/avatar.tsx             | 15 +++++++++++--
 2 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/apps/app/components/issues/select/assignee.tsx b/apps/app/components/issues/select/assignee.tsx
index 414ec2e9a..de77ca52b 100644
--- a/apps/app/components/issues/select/assignee.tsx
+++ b/apps/app/components/issues/select/assignee.tsx
@@ -10,6 +10,9 @@ import { Transition, Combobox } from "@headlessui/react";
 import projectServices from "services/project.service";
 // ui
 import { AssigneesList, Avatar } from "components/ui";
+// icons
+import { UserGroupIcon } from "@heroicons/react/24/outline";
+
 // fetch keys
 import { PROJECT_MEMBERS } from "constants/fetch-keys";
 
@@ -61,10 +64,20 @@ export const IssueAssigneeSelect: FC<IssueAssigneeSelectProps> = ({
     >
       {({ open }: any) => (
         <>
-          <Combobox.Button className="flex items-center cursor-pointer gap-1 rounded-md">
-            <div className="flex items-center gap-1 text-xs">
-              {value && Array.isArray(value) ? <AssigneesList userIds={value} length={10} /> : null}
-            </div>
+          <Combobox.Button className="flex items-center cursor-pointer gap-1 rounded-md border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500">
+            <span className="flex items-center gap-1 text-xs">
+              {value && value.length > 0 && Array.isArray(value) ? (
+                <>
+                  <AssigneesList userIds={value} length={3} showTotalLength />
+                  <span>Assignees</span>
+                </>
+              ) : (
+                <>
+                  <UserGroupIcon className="h-3 w-3 text-gray-500" />
+                  <span>Assignee</span>
+                </>
+              )}
+            </span>
           </Combobox.Button>
 
           <Transition
diff --git a/apps/app/components/ui/avatar.tsx b/apps/app/components/ui/avatar.tsx
index 4726ca835..25e2dec7d 100644
--- a/apps/app/components/ui/avatar.tsx
+++ b/apps/app/components/ui/avatar.tsx
@@ -47,9 +47,15 @@ type AsigneesListProps = {
   users?: Partial<IUser[]> | (Partial<IUserLite> | undefined)[] | Partial<IUserLite>[];
   userIds?: string[];
   length?: number;
+  showTotalLength?: boolean;
 };
 
-export const AssigneesList: React.FC<AsigneesListProps> = ({ users, userIds, length = 5 }) => {
+export const AssigneesList: React.FC<AsigneesListProps> = ({
+  users,
+  userIds,
+  length = 5,
+  showTotalLength = false,
+}) => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
@@ -82,7 +88,12 @@ export const AssigneesList: React.FC<AsigneesListProps> = ({ users, userIds, len
 
             return <Avatar key={userId} user={user} index={index} />;
           })}
-          {userIds.length > length ? <span>+{userIds.length - length}</span> : null}
+
+          {showTotalLength ? (
+            <span>{userIds.length}</span>
+          ) : userIds.length > length ? (
+            <span>+{userIds.length - length}</span>
+          ) : null}
         </>
       )}
     </>