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 01/14] 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}
         </>
       )}
     </>

From 217d6ea51ca01694410c3f850e431852451d2eba Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@caravel.tech>
Date: Thu, 2 Mar 2023 08:03:41 +0530
Subject: [PATCH 02/14] style: assignee dropdown

---
 .../app/components/issues/select/assignee.tsx | 83 ++++++++++++-------
 apps/app/components/ui/avatar.tsx             | 17 ++--
 2 files changed, 63 insertions(+), 37 deletions(-)

diff --git a/apps/app/components/issues/select/assignee.tsx b/apps/app/components/issues/select/assignee.tsx
index de77ca52b..291d64c6b 100644
--- a/apps/app/components/issues/select/assignee.tsx
+++ b/apps/app/components/issues/select/assignee.tsx
@@ -11,7 +11,7 @@ import projectServices from "services/project.service";
 // ui
 import { AssigneesList, Avatar } from "components/ui";
 // icons
-import { UserGroupIcon } from "@heroicons/react/24/outline";
+import { UserGroupIcon, MagnifyingGlassIcon, CheckIcon } from "@heroicons/react/24/outline";
 
 // fetch keys
 import { PROJECT_MEMBERS } from "constants/fetch-keys";
@@ -64,18 +64,27 @@ export const IssueAssigneeSelect: FC<IssueAssigneeSelectProps> = ({
     >
       {({ open }: any) => (
         <>
-          <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">
+          <Combobox.Button
+            className={({ open }) =>
+              `flex items-center text-xs cursor-pointer border rounded-md shadow-sm duration-300 
+              ${
+                open
+                  ? "outline-none border-[#3F76FF] bg-[rgba(63,118,255,0.05)] ring-1 ring-[#3F76FF] "
+                  : "hover:bg-[rgba(63,118,255,0.05)] focus:bg-[rgba(63,118,255,0.05)]"
+              }`
+            }
+          >
+            <span className="flex justify-center items-center text-xs">
               {value && value.length > 0 && Array.isArray(value) ? (
-                <>
-                  <AssigneesList userIds={value} length={3} showTotalLength />
-                  <span>Assignees</span>
-                </>
+                <span className="flex items-center justify-center gap-1 px-3 py-1">
+                  <AssigneesList userIds={value} length={3} showLength={false} />
+                  <span className=" text-[#495057]">{value.length} Assignees</span>
+                </span>
               ) : (
-                <>
-                  <UserGroupIcon className="h-3 w-3 text-gray-500" />
-                  <span>Assignee</span>
-                </>
+                <span className="flex items-center justify-center  gap-1  px-3 py-1.5">
+                  <UserGroupIcon className="h-4 w-4 text-gray-500 " />
+                  <span className=" text-[#858E96]">Assignee</span>
+                </span>
               )}
             </span>
           </Combobox.Button>
@@ -88,34 +97,50 @@ export const IssueAssigneeSelect: FC<IssueAssigneeSelectProps> = ({
             leaveTo="opacity-0"
           >
             <Combobox.Options
-              className={`absolute z-10 mt-1 max-h-32 min-w-[8rem] overflow-auto rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none text-xs`}
+              className={`absolute z-10 max-h-52 min-w-[8rem] mt-1 px-2 py-2  
+              text-xs rounded-md shadow-md overflow-auto border-none bg-white 
+              ring-1 ring-black ring-opacity-5 focus:outline-none`}
             >
-              <Combobox.Input
-                className="w-full border-b bg-transparent p-2 text-xs focus:outline-none"
-                onChange={(event) => setQuery(event.target.value)}
-                placeholder="Search"
-                displayValue={(assigned: any) => assigned?.name}
-              />
-              <div className="py-1">
+              <div className="flex justify-start items-center rounded-sm border-[0.6px] bg-[#FAFAFA] border-[#E2E2E2] w-full px-2">
+                <MagnifyingGlassIcon className="h-3 w-3 text-gray-500" />
+                <Combobox.Input
+                  className="w-full  bg-transparent py-1 px-2 text-xs text-[#888888] focus:outline-none"
+                  onChange={(event) => setQuery(event.target.value)}
+                  placeholder="Search for a person..."
+                  displayValue={(assigned: any) => assigned?.name}
+                />
+              </div>
+              <div className="py-1.5">
                 {filteredOptions ? (
                   filteredOptions.length > 0 ? (
                     filteredOptions.map((option) => (
                       <Combobox.Option
                         key={option.value}
                         className={({ active, selected }) =>
-                          `${active ? "bg-indigo-50" : ""} ${
-                            selected ? "bg-indigo-50 font-medium" : ""
-                          } flex cursor-pointer select-none items-center gap-2 truncate px-2 py-1 text-gray-900`
+                          `${
+                            active ? "bg-[#E9ECEF]" : ""
+                          } group flex cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-gray-900`
                         }
                         value={option.value}
                       >
-                        {people && (
-                          <>
-                            <Avatar
-                              user={people?.find((p) => p.member.id === option.value)?.member}
-                            />
-                            {option.display}
-                          </>
+                        {({ selected, active }) => (
+                          <div className="flex w-full gap-2 justify-between rounded">
+                            <div className="flex justify-start items-center gap-1">
+                              <Avatar
+                                user={people?.find((p) => p.member.id === option.value)?.member}
+                              />
+                              <span>{option.display}</span>
+                            </div>
+                            <div
+                              className={`flex justify-center items-center p-1 rounded border  border-[#858E96] border-opacity-0 group-hover:border-opacity-100 
+                              ${selected ? "border-opacity-100 " : ""}  
+                              ${active ? "bg-[#F8F9FA]" : ""} `}
+                            >
+                              <CheckIcon
+                                className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`}
+                              />
+                            </div>
+                          </div>
                         )}
                       </Combobox.Option>
                     ))
diff --git a/apps/app/components/ui/avatar.tsx b/apps/app/components/ui/avatar.tsx
index 25e2dec7d..e4dc68839 100644
--- a/apps/app/components/ui/avatar.tsx
+++ b/apps/app/components/ui/avatar.tsx
@@ -47,14 +47,14 @@ type AsigneesListProps = {
   users?: Partial<IUser[]> | (Partial<IUserLite> | undefined)[] | Partial<IUserLite>[];
   userIds?: string[];
   length?: number;
-  showTotalLength?: boolean;
+  showLength?: boolean;
 };
 
 export const AssigneesList: React.FC<AsigneesListProps> = ({
   users,
   userIds,
   length = 5,
-  showTotalLength = false,
+  showLength = true,
 }) => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
@@ -88,12 +88,13 @@ export const AssigneesList: React.FC<AsigneesListProps> = ({
 
             return <Avatar key={userId} user={user} index={index} />;
           })}
-
-          {showTotalLength ? (
-            <span>{userIds.length}</span>
-          ) : userIds.length > length ? (
-            <span>+{userIds.length - length}</span>
-          ) : null}
+          {showLength ? (
+            userIds.length > length ? (
+              <span>+{userIds.length - length}</span>
+            ) : null
+          ) : (
+            ""
+          )}
         </>
       )}
     </>

From 9a52031d597cae054f0925674d77d7227e5e78e7 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@caravel.tech>
Date: Thu, 2 Mar 2023 09:01:16 +0530
Subject: [PATCH 03/14] style: assignee dropdown stlye fix

---
 apps/app/components/issues/select/assignee.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/app/components/issues/select/assignee.tsx b/apps/app/components/issues/select/assignee.tsx
index 291d64c6b..e1368a17d 100644
--- a/apps/app/components/issues/select/assignee.tsx
+++ b/apps/app/components/issues/select/assignee.tsx
@@ -76,12 +76,12 @@ export const IssueAssigneeSelect: FC<IssueAssigneeSelectProps> = ({
           >
             <span className="flex justify-center items-center text-xs">
               {value && value.length > 0 && Array.isArray(value) ? (
-                <span className="flex items-center justify-center gap-1 px-3 py-1">
+                <span className="flex items-center justify-center gap-2 px-3 py-1">
                   <AssigneesList userIds={value} length={3} showLength={false} />
                   <span className=" text-[#495057]">{value.length} Assignees</span>
                 </span>
               ) : (
-                <span className="flex items-center justify-center  gap-1  px-3 py-1.5">
+                <span className="flex items-center justify-center  gap-2  px-3 py-1.5">
                   <UserGroupIcon className="h-4 w-4 text-gray-500 " />
                   <span className=" text-[#858E96]">Assignee</span>
                 </span>
@@ -116,10 +116,10 @@ export const IssueAssigneeSelect: FC<IssueAssigneeSelectProps> = ({
                     filteredOptions.map((option) => (
                       <Combobox.Option
                         key={option.value}
-                        className={({ active, selected }) =>
+                        className={({ active }) =>
                           `${
                             active ? "bg-[#E9ECEF]" : ""
-                          } group flex cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-gray-900`
+                          } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-[#495057]`
                         }
                         value={option.value}
                       >

From d8e1710a9b7d6e88f8e4b0612bf468babbb791b3 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@caravel.tech>
Date: Thu, 2 Mar 2023 09:01:47 +0530
Subject: [PATCH 04/14] style: state dropdown redesign

---
 apps/app/components/issues/select/state.tsx | 116 +++++++++++++-------
 1 file changed, 76 insertions(+), 40 deletions(-)

diff --git a/apps/app/components/issues/select/state.tsx b/apps/app/components/issues/select/state.tsx
index 269b0af73..51e49a470 100644
--- a/apps/app/components/issues/select/state.tsx
+++ b/apps/app/components/issues/select/state.tsx
@@ -7,7 +7,12 @@ import useSWR from "swr";
 // services
 import stateService from "services/state.service";
 // headless ui
-import { Squares2X2Icon, PlusIcon } from "@heroicons/react/24/outline";
+import {
+  Squares2X2Icon,
+  PlusIcon,
+  MagnifyingGlassIcon,
+  CheckIcon,
+} from "@heroicons/react/24/outline";
 // icons
 import { Combobox, Transition } from "@headlessui/react";
 // helpers
@@ -47,7 +52,6 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
     query === ""
       ? options
       : options?.filter((option) => option.display.toLowerCase().includes(query.toLowerCase()));
-
   return (
     <Combobox
       as="div"
@@ -57,21 +61,37 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
     >
       {({ open }: any) => (
         <>
-          <Combobox.Label className="sr-only">State</Combobox.Label>
           <Combobox.Button
-            className={`flex cursor-pointer items-center 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`}
+            className={({ open }) =>
+              `flex items-center text-xs cursor-pointer border rounded-md shadow-sm duration-300 
+            ${
+              open
+                ? "outline-none border-[#3F76FF] bg-[rgba(63,118,255,0.05)] ring-1 ring-[#3F76FF] "
+                : "hover:bg-[rgba(63,118,255,0.05)] focus:bg-[rgba(63,118,255,0.05)]"
+            }`
+            }
           >
-            <Squares2X2Icon className="h-3 w-3 text-gray-500" />
-            <span className={`flex items-center gap-2 ${!value ? "" : "text-gray-900"}`}>
+            <span className="flex justify-center items-center text-xs">
               {value && value !== "" ? (
-                <span
-                  className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
-                  style={{
-                    backgroundColor: options?.find((option) => option.value === value)?.color,
-                  }}
-                />
-              ) : null}
-              {options?.find((option) => option.value === value)?.display || "State"}
+                <span className="flex items-center justify-center gap-2 px-3 py-1.5">
+                  <span
+                    className="h-3 w-3 flex-shrink-0 rounded-full"
+                    style={{
+                      backgroundColor: options?.find((option) => option.value === value)?.color,
+                    }}
+                  />
+                  <span className=" text-[#495057]">
+                    {options?.find((option) => option.value === value)?.display}
+                  </span>
+                </span>
+              ) : (
+                <span className="flex items-center justify-center  gap-1  px-3 py-1.5">
+                  <Squares2X2Icon className="h-4 w-4 text-gray-500 " />
+                  <span className=" text-[#858E96]">
+                    {options?.find((option) => option.value === value)?.display || "State"}
+                  </span>
+                </span>
+              )}
             </span>
           </Combobox.Button>
 
@@ -83,38 +103,52 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
             leaveTo="opacity-0"
           >
             <Combobox.Options
-              className={`absolute z-10 mt-1 max-h-32 min-w-[8rem] overflow-auto rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none text-xs`}
+              className={`absolute z-10 max-h-52 min-w-[8rem] mt-1 px-2 py-2  
+              text-xs rounded-md shadow-md overflow-auto border-none bg-white 
+              ring-1 ring-black ring-opacity-5 focus:outline-none`}
             >
-              <Combobox.Input
-                className="w-full border-b bg-transparent p-2 text-xs focus:outline-none"
-                onChange={(event) => setQuery(event.target.value)}
-                placeholder="Search"
-                displayValue={(assigned: any) => assigned?.name}
-              />
-              <div className="py-1">
+              <div className="flex justify-start items-center rounded-sm border-[0.6px] bg-[#FAFAFA] border-[#E2E2E2] w-full px-2">
+                <MagnifyingGlassIcon className="h-3 w-3 text-gray-500" />
+                <Combobox.Input
+                  className="w-full  bg-transparent py-1 px-2  text-xs text-[#888888] focus:outline-none"
+                  onChange={(event) => setQuery(event.target.value)}
+                  placeholder="Search"
+                  displayValue={(assigned: any) => assigned?.name}
+                />
+              </div>
+              <div className="py-1.5">
                 {filteredOptions ? (
                   filteredOptions.length > 0 ? (
                     filteredOptions.map((option) => (
                       <Combobox.Option
                         key={option.value}
-                        className={({ active, selected }) =>
-                          `${active ? "bg-indigo-50" : ""} ${
-                            selected ? "bg-indigo-50 font-medium" : ""
-                          } flex cursor-pointer select-none items-center gap-2 truncate p-2 text-gray-900`
+                        className={({ active }) =>
+                          `${
+                            active ? "bg-[#E9ECEF]" : ""
+                          } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-[#495057]`
                         }
                         value={option.value}
                       >
-                        {states && (
-                          <>
-                            <span
-                              className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
-                              style={{
-                                backgroundColor: option.color,
-                              }}
-                            />
-                            {option.display}
-                          </>
-                        )}
+                        {({ selected, active }) =>
+                          states && (
+                            <div className="flex w-full gap-2 justify-between rounded">
+                              <div className="flex justify-start items-center gap-2">
+                                <span
+                                  className="h-3 w-3 flex-shrink-0 rounded-full"
+                                  style={{
+                                    backgroundColor: option.color,
+                                  }}
+                                />
+                                <span>{option.display}</span>
+                              </div>
+                              <div className="flex justify-center items-center p-1 rounded">
+                                <CheckIcon
+                                  className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`}
+                                />
+                              </div>
+                            </div>
+                          )
+                        }
                       </Combobox.Option>
                     ))
                   ) : (
@@ -125,11 +159,13 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
                 )}
                 <button
                   type="button"
-                  className="flex select-none w-full items-center gap-2 p-2 text-gray-400 hover:bg-indigo-50 hover:text-gray-900"
+                  className="flex select-none w-full items-center py-2 px-1 rounded hover:bg-[#E9ECEF]"
                   onClick={() => setIsOpen(true)}
                 >
-                  <PlusIcon className="h-3 w-3 text-gray-400" aria-hidden="true" />
-                  <span className="text-xs whitespace-nowrap">Create state</span>
+                  <span className="flex justify-start items-center gap-1">
+                    <PlusIcon className="h-4 w-4 text-[#495057]" aria-hidden="true" />
+                    <span className="text-[#495057]">Create New State</span>
+                  </span>
                 </button>
               </div>
             </Combobox.Options>

From fdbad4ff1af1b6073cbba50f160519ff697c9d0b Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@caravel.tech>
Date: Thu, 2 Mar 2023 09:38:13 +0530
Subject: [PATCH 05/14] style: dropdown ui consisteny

---
 .../app/components/issues/select/assignee.tsx | 29 ++++++------
 apps/app/components/issues/select/state.tsx   | 45 +++++++++----------
 2 files changed, 34 insertions(+), 40 deletions(-)

diff --git a/apps/app/components/issues/select/assignee.tsx b/apps/app/components/issues/select/assignee.tsx
index e1368a17d..e76acf886 100644
--- a/apps/app/components/issues/select/assignee.tsx
+++ b/apps/app/components/issues/select/assignee.tsx
@@ -74,19 +74,17 @@ export const IssueAssigneeSelect: FC<IssueAssigneeSelectProps> = ({
               }`
             }
           >
-            <span className="flex justify-center items-center text-xs">
-              {value && value.length > 0 && Array.isArray(value) ? (
-                <span className="flex items-center justify-center gap-2 px-3 py-1">
-                  <AssigneesList userIds={value} length={3} showLength={false} />
-                  <span className=" text-[#495057]">{value.length} Assignees</span>
-                </span>
-              ) : (
-                <span className="flex items-center justify-center  gap-2  px-3 py-1.5">
-                  <UserGroupIcon className="h-4 w-4 text-gray-500 " />
-                  <span className=" text-[#858E96]">Assignee</span>
-                </span>
-              )}
-            </span>
+            {value && value.length > 0 && Array.isArray(value) ? (
+              <span className="flex items-center justify-center text-xs gap-2 px-3 py-1">
+                <AssigneesList userIds={value} length={3} showLength={false} />
+                <span className=" text-[#495057]">{value.length} Assignees</span>
+              </span>
+            ) : (
+              <span className="flex items-center justify-center text-xs gap-2  px-3 py-1.5">
+                <UserGroupIcon className="h-4 w-4 text-gray-500 " />
+                <span className=" text-[#858E96]">Assignee</span>
+              </span>
+            )}
           </Combobox.Button>
 
           <Transition
@@ -97,9 +95,8 @@ export const IssueAssigneeSelect: FC<IssueAssigneeSelectProps> = ({
             leaveTo="opacity-0"
           >
             <Combobox.Options
-              className={`absolute z-10 max-h-52 min-w-[8rem] mt-1 px-2 py-2  
-              text-xs rounded-md shadow-md overflow-auto border-none bg-white 
-              ring-1 ring-black ring-opacity-5 focus:outline-none`}
+              className={`absolute z-10 max-h-52 min-w-[8rem] mt-1 px-2 py-2 text-xs
+              rounded-md shadow-md overflow-auto border-none bg-white focus:outline-none`}
             >
               <div className="flex justify-start items-center rounded-sm border-[0.6px] bg-[#FAFAFA] border-[#E2E2E2] w-full px-2">
                 <MagnifyingGlassIcon className="h-3 w-3 text-gray-500" />
diff --git a/apps/app/components/issues/select/state.tsx b/apps/app/components/issues/select/state.tsx
index 51e49a470..7dd024bb9 100644
--- a/apps/app/components/issues/select/state.tsx
+++ b/apps/app/components/issues/select/state.tsx
@@ -71,28 +71,26 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
             }`
             }
           >
-            <span className="flex justify-center items-center text-xs">
-              {value && value !== "" ? (
-                <span className="flex items-center justify-center gap-2 px-3 py-1.5">
-                  <span
-                    className="h-3 w-3 flex-shrink-0 rounded-full"
-                    style={{
-                      backgroundColor: options?.find((option) => option.value === value)?.color,
-                    }}
-                  />
-                  <span className=" text-[#495057]">
-                    {options?.find((option) => option.value === value)?.display}
-                  </span>
+            {value && value !== "" ? (
+              <span className="flex items-center justify-center text-xs gap-2 px-3 py-1.5">
+                <span
+                  className="h-3 w-3 flex-shrink-0 rounded-full"
+                  style={{
+                    backgroundColor: options?.find((option) => option.value === value)?.color,
+                  }}
+                />
+                <span className=" text-[#495057]">
+                  {options?.find((option) => option.value === value)?.display}
                 </span>
-              ) : (
-                <span className="flex items-center justify-center  gap-1  px-3 py-1.5">
-                  <Squares2X2Icon className="h-4 w-4 text-gray-500 " />
-                  <span className=" text-[#858E96]">
-                    {options?.find((option) => option.value === value)?.display || "State"}
-                  </span>
+              </span>
+            ) : (
+              <span className="flex items-center justify-center  text-xs  gap-2  px-3 py-1.5">
+                <Squares2X2Icon className="h-4 w-4 text-gray-500 " />
+                <span className=" text-[#858E96]">
+                  {options?.find((option) => option.value === value)?.display || "State"}
                 </span>
-              )}
-            </span>
+              </span>
+            )}
           </Combobox.Button>
 
           <Transition
@@ -103,16 +101,15 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
             leaveTo="opacity-0"
           >
             <Combobox.Options
-              className={`absolute z-10 max-h-52 min-w-[8rem] mt-1 px-2 py-2  
-              text-xs rounded-md shadow-md overflow-auto border-none bg-white 
-              ring-1 ring-black ring-opacity-5 focus:outline-none`}
+              className={`absolute z-10 max-h-52 min-w-[8rem] mt-1 px-2 py-2 text-xs 
+              rounded-md shadow-md overflow-auto border-none bg-white focus:outline-none`}
             >
               <div className="flex justify-start items-center rounded-sm border-[0.6px] bg-[#FAFAFA] border-[#E2E2E2] w-full px-2">
                 <MagnifyingGlassIcon className="h-3 w-3 text-gray-500" />
                 <Combobox.Input
                   className="w-full  bg-transparent py-1 px-2  text-xs text-[#888888] focus:outline-none"
                   onChange={(event) => setQuery(event.target.value)}
-                  placeholder="Search"
+                  placeholder="Search States"
                   displayValue={(assigned: any) => assigned?.name}
                 />
               </div>

From cb2f0633f7cd0a24006a82f3dded930e9fc3c251 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@caravel.tech>
Date: Thu, 2 Mar 2023 09:38:54 +0530
Subject: [PATCH 06/14] style: priority dropdown redesign

---
 .../app/components/issues/select/priority.tsx | 54 ++++++++++++++-----
 1 file changed, 41 insertions(+), 13 deletions(-)

diff --git a/apps/app/components/issues/select/priority.tsx b/apps/app/components/issues/select/priority.tsx
index 1347e2765..3497bf959 100644
--- a/apps/app/components/issues/select/priority.tsx
+++ b/apps/app/components/issues/select/priority.tsx
@@ -6,6 +6,7 @@ import { Listbox, Transition } from "@headlessui/react";
 import { getPriorityIcon } from "components/icons/priority-icon";
 // constants
 import { PRIORITIES } from "constants/project";
+import { CheckIcon } from "@heroicons/react/24/outline";
 
 type Props = {
   value: string | null;
@@ -16,9 +17,24 @@ export const IssuePrioritySelect: React.FC<Props> = ({ value, onChange }) => (
   <Listbox as="div" className="relative" value={value} onChange={onChange}>
     {({ open }) => (
       <>
-        <Listbox.Button className="flex cursor-pointer items-center 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="text-gray-500 grid place-items-center">{getPriorityIcon(value)}</span>
-          <div className="flex items-center gap-2 capitalize">{value ?? "Priority"}</div>
+        <Listbox.Button
+          className={({ open }) =>
+            `flex items-center text-xs cursor-pointer border rounded-md shadow-sm duration-300 
+            ${
+              open
+                ? "outline-none border-[#3F76FF] bg-[rgba(63,118,255,0.05)] ring-1 ring-[#3F76FF] "
+                : "hover:bg-[rgba(63,118,255,0.05)] focus:bg-[rgba(63,118,255,0.05)]"
+            }`
+          }
+        >
+          <span className="flex items-center justify-center text-xs gap-2 px-3 py-1.5">
+            <span className="flex items-center">
+              {getPriorityIcon(value, `${value ? "text-xs" : "text-xs text-[#858E96]"}`)}
+            </span>
+            <span className={`${value ? "text-[#495057]" : "text-[#858E96]"} capitalize`}>
+              {value ?? "Priority"}
+            </span>
+          </span>
         </Listbox.Button>
 
         <Transition
@@ -28,22 +44,34 @@ export const IssuePrioritySelect: React.FC<Props> = ({ value, onChange }) => (
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <Listbox.Options className="absolute mt-1 max-h-32 min-w-[8rem] overflow-y-auto whitespace-nowrap bg-white shadow-lg text-xs z-10 rounded-md py-1 ring-1 ring-black ring-opacity-5 focus:outline-none">
-            <div className="py-1">
+          <Listbox.Options
+            className={`absolute z-10 max-h-52 min-w-[8rem] px-2 py-2  text-xs 
+              rounded-md shadow-md overflow-auto border-none bg-white focus:outline-none`}
+          >
+            <div>
               {PRIORITIES.map((priority) => (
                 <Listbox.Option
                   key={priority}
-                  className={({ selected, active }) =>
-                    `${selected ? "bg-indigo-50 font-medium" : ""} ${
-                      active ? "bg-indigo-50" : ""
-                    } relative cursor-pointer select-none p-2 text-gray-900`
+                  className={({ active }) =>
+                    `${
+                      active ? "bg-[#E9ECEF]" : ""
+                    } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-[#495057]`
                   }
                   value={priority}
                 >
-                  <span className="flex items-center gap-2 capitalize">
-                    {getPriorityIcon(priority)}
-                    {priority ?? "None"}
-                  </span>
+                  {({ selected, active }) => (
+                    <div className="flex w-full gap-2 justify-between rounded">
+                      <div className="flex justify-start items-center gap-2">
+                        <span>{getPriorityIcon(priority)}</span>
+                        <span className="capitalize">{priority ?? "None"}</span>
+                      </div>
+                      <div className="flex justify-center items-center p-1 rounded">
+                        <CheckIcon
+                          className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`}
+                        />
+                      </div>
+                    </div>
+                  )}
                 </Listbox.Option>
               ))}
             </div>

From 14768960056bffb1b3ce60e6663ebaeecf2b8f01 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@caravel.tech>
Date: Thu, 2 Mar 2023 10:36:19 +0530
Subject: [PATCH 07/14] style: label dropdown redesign

---
 apps/app/components/issues/select/label.tsx | 143 ++++++++++++++------
 1 file changed, 99 insertions(+), 44 deletions(-)

diff --git a/apps/app/components/issues/select/label.tsx b/apps/app/components/issues/select/label.tsx
index 2b810b30a..74bc87eb5 100644
--- a/apps/app/components/issues/select/label.tsx
+++ b/apps/app/components/issues/select/label.tsx
@@ -7,7 +7,13 @@ import useSWR from "swr";
 // headless ui
 import { Combobox, Transition } from "@headlessui/react";
 // icons
-import { PlusIcon, RectangleGroupIcon, TagIcon } from "@heroicons/react/24/outline";
+import {
+  CheckIcon,
+  MagnifyingGlassIcon,
+  PlusIcon,
+  RectangleGroupIcon,
+  TagIcon,
+} from "@heroicons/react/24/outline";
 // services
 import issuesServices from "services/issues.service";
 // types
@@ -52,17 +58,32 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
       >
         {({ open }: any) => (
           <>
-            <Combobox.Label className="sr-only">Labels</Combobox.Label>
             <Combobox.Button
-              className={`flex cursor-pointer items-center 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`}
+              className={({ open }) =>
+                `flex items-center text-xs cursor-pointer border rounded-md shadow-sm duration-300 
+              ${
+                open
+                  ? "outline-none border-[#3F76FF] bg-[rgba(63,118,255,0.05)] ring-1 ring-[#3F76FF] "
+                  : "hover:bg-[rgba(63,118,255,0.05)] focus:bg-[rgba(63,118,255,0.05)]"
+              }`
+              }
             >
-              <TagIcon className="h-3 w-3 text-gray-500" />
-              <span className={`flex items-center gap-2 ${!value ? "" : "text-gray-900"}`}>
-                {Array.isArray(value)
-                  ? value.map((v) => issueLabels?.find((l) => l.id === v)?.name).join(", ") ||
-                    "Labels"
-                  : issueLabels?.find((l) => l.id === value)?.name || "Labels"}
-              </span>
+              {value && value.length > 0 ? (
+                <span className="flex items-center justify-center text-xs gap-2 px-3 py-1">
+                  <span className={`flex items-center gap-2 ${!value ? "" : "text-gray-900"}`}>
+                    {Array.isArray(value)
+                      ? value.map((v) => issueLabels?.find((l) => l.id === v)?.name).join(", ") ||
+                        "Labels"
+                      : issueLabels?.find((l) => l.id === value)?.name || "Labels"}
+                  </span>
+                  <span className=" text-[#495057]">{value.length} Labels</span>
+                </span>
+              ) : (
+                <span className="flex items-center justify-center text-xs gap-2  px-3 py-1.5">
+                  <TagIcon className="h-3 w-3 text-[#858E96]" />
+                  <span className=" text-[#858E96]">Label</span>
+                </span>
+              )}
             </Combobox.Button>
 
             <Transition
@@ -73,15 +94,19 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
               leaveTo="opacity-0"
             >
               <Combobox.Options
-                className={`absolute z-10 mt-1 max-h-32 min-w-[8rem] overflow-auto rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none text-xs`}
+                className={`absolute z-10 max-h-52 min-w-[8rem] mt-1 px-2 py-2 text-xs
+                rounded-md shadow-md overflow-auto border-none bg-white focus:outline-none`}
               >
-                <Combobox.Input
-                  className="w-full border-b bg-transparent p-2 text-xs focus:outline-none"
-                  onChange={(event) => setQuery(event.target.value)}
-                  placeholder="Search"
-                  displayValue={(assigned: any) => assigned?.name}
-                />
-                <div className="py-1">
+                <div className="flex justify-start items-center rounded-sm border-[0.6px] bg-[#FAFAFA] border-[#E2E2E2] w-full px-2">
+                  <MagnifyingGlassIcon className="h-3 w-3 text-gray-500" />
+                  <Combobox.Input
+                    className="w-full  bg-transparent py-1 px-2 text-xs text-[#888888] focus:outline-none"
+                    onChange={(event) => setQuery(event.target.value)}
+                    placeholder="Search for label..."
+                    displayValue={(assigned: any) => assigned?.name}
+                  />
+                </div>
+                <div className="py-1.5">
                   {issueLabels && filteredOptions ? (
                     filteredOptions.length > 0 ? (
                       filteredOptions.map((label) => {
@@ -92,21 +117,36 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
                             return (
                               <Combobox.Option
                                 key={label.id}
-                                className={({ active, selected }) =>
-                                  `${active ? "bg-indigo-50" : ""} ${
-                                    selected ? "bg-indigo-50 font-medium" : ""
-                                  } flex cursor-pointer select-none items-center gap-2 truncate p-2 text-gray-900`
+                                className={({ active }) =>
+                                  `${
+                                    active ? "bg-[#E9ECEF]" : ""
+                                  } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-[#495057]`
                                 }
                                 value={label.id}
                               >
-                                <span
-                                  className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
-                                  style={{
-                                    backgroundColor:
-                                      label.color && label.color !== "" ? label.color : "#000",
-                                  }}
-                                />
-                                {label.name}
+                                {({ selected }) => (
+                                  <div className="flex w-full gap-2 justify-between rounded">
+                                    <div className="flex justify-start items-center gap-2">
+                                      <span
+                                        className="h-3 w-3 flex-shrink-0 rounded-full"
+                                        style={{
+                                          backgroundColor:
+                                            label.color && label.color !== ""
+                                              ? label.color
+                                              : "#000",
+                                        }}
+                                      />
+                                      <span>{label.name}</span>
+                                    </div>
+                                    <div className="flex justify-center items-center p-1 rounded">
+                                      <CheckIcon
+                                        className={`h-3 w-3 ${
+                                          selected ? "opacity-100" : "opacity-0"
+                                        }`}
+                                      />
+                                    </div>
+                                  </div>
+                                )}
                               </Combobox.Option>
                             );
                         } else
@@ -119,20 +159,33 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
                                 {children.map((child) => (
                                   <Combobox.Option
                                     key={child.id}
-                                    className={({ active, selected }) =>
-                                      `${active ? "bg-indigo-50" : ""} ${
-                                        selected ? "bg-indigo-50 font-medium" : ""
-                                      } flex cursor-pointer select-none items-center gap-2 truncate p-2 text-gray-900`
+                                    className={({ active }) =>
+                                      `${
+                                        active ? "bg-[#E9ECEF]" : ""
+                                      } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-[#495057]`
                                     }
                                     value={child.id}
                                   >
-                                    <span
-                                      className="h-2 w-2 flex-shrink-0 rounded-full"
-                                      style={{
-                                        backgroundColor: child?.color ?? "black",
-                                      }}
-                                    />
-                                    {child.name}
+                                    {({ selected }) => (
+                                      <div className="flex w-full gap-2 justify-between rounded">
+                                        <div className="flex justify-start items-center gap-2">
+                                          <span
+                                            className="h-3 w-3 flex-shrink-0 rounded-full"
+                                            style={{
+                                              backgroundColor: child?.color ?? "black",
+                                            }}
+                                          />
+                                          <span>{child.name}</span>
+                                        </div>
+                                        <div className="flex justify-center items-center p-1 rounded">
+                                          <CheckIcon
+                                            className={`h-3 w-3 ${
+                                              selected ? "opacity-100" : "opacity-0"
+                                            }`}
+                                          />
+                                        </div>
+                                      </div>
+                                    )}
                                   </Combobox.Option>
                                 ))}
                               </div>
@@ -147,11 +200,13 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
                   )}
                   <button
                     type="button"
-                    className="flex select-none w-full items-center gap-2 p-2 text-gray-400 outline-none hover:bg-indigo-50 hover:text-gray-900"
+                    className="flex select-none w-full items-center py-2 px-1 rounded hover:bg-[#E9ECEF]"
                     onClick={() => setIsOpen(true)}
                   >
-                    <PlusIcon className="h-3 w-3 text-gray-400" aria-hidden="true" />
-                    <span className="text-xs whitespace-nowrap">Create label</span>
+                    <span className="flex justify-start items-center gap-1">
+                      <PlusIcon className="h-4 w-4 text-[#495057]" aria-hidden="true" />
+                      <span className="text-[#495057]">Create New Label</span>
+                    </span>
                   </button>
                 </div>
               </Combobox.Options>

From 700769665f2532875970e931509c872fe6f90730 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@caravel.tech>
Date: Thu, 2 Mar 2023 10:37:09 +0530
Subject: [PATCH 08/14] style: issue dropdown re-order

---
 apps/app/components/issues/form.tsx | 16 ++++------------
 1 file changed, 4 insertions(+), 12 deletions(-)

diff --git a/apps/app/components/issues/form.tsx b/apps/app/components/issues/form.tsx
index 11675bac8..44a2d39e5 100644
--- a/apps/app/components/issues/form.tsx
+++ b/apps/app/components/issues/form.tsx
@@ -15,7 +15,6 @@ import {
   IssueProjectSelect,
   IssueStateSelect,
 } from "components/issues/select";
-import { CycleSelect as IssueCycleSelect } from "components/cycles/select";
 import { CreateStateModal } from "components/states";
 import { CreateUpdateCycleModal } from "components/cycles";
 import { CreateLabelModal } from "components/labels";
@@ -266,16 +265,16 @@ export const IssueForm: FC<IssueFormProps> = ({
                 />
                 <Controller
                   control={control}
-                  name="cycle"
+                  name="priority"
                   render={({ field: { value, onChange } }) => (
-                    <IssueCycleSelect projectId={projectId} value={value} onChange={onChange} />
+                    <IssuePrioritySelect value={value} onChange={onChange} />
                   )}
                 />
                 <Controller
                   control={control}
-                  name="priority"
+                  name="assignees"
                   render={({ field: { value, onChange } }) => (
-                    <IssuePrioritySelect value={value} onChange={onChange} />
+                    <IssueAssigneeSelect projectId={projectId} value={value} onChange={onChange} />
                   )}
                 />
                 <Controller
@@ -303,13 +302,6 @@ export const IssueForm: FC<IssueFormProps> = ({
                     )}
                   />
                 </div>
-                <Controller
-                  control={control}
-                  name="assignees"
-                  render={({ field: { value, onChange } }) => (
-                    <IssueAssigneeSelect projectId={projectId} value={value} onChange={onChange} />
-                  )}
-                />
                 <IssueParentSelect
                   control={control}
                   isOpen={parentIssueListModalOpen}

From 9a88803a3f7567f9df2d13c67c5c1fd9a0b0a61c Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@caravel.tech>
Date: Thu, 2 Mar 2023 11:32:18 +0530
Subject: [PATCH 09/14] style: state Icon

---
 apps/app/components/issues/select/state.tsx | 28 ++++++++-------------
 1 file changed, 10 insertions(+), 18 deletions(-)

diff --git a/apps/app/components/issues/select/state.tsx b/apps/app/components/issues/select/state.tsx
index 7dd024bb9..fcf2533e8 100644
--- a/apps/app/components/issues/select/state.tsx
+++ b/apps/app/components/issues/select/state.tsx
@@ -19,6 +19,7 @@ import { Combobox, Transition } from "@headlessui/react";
 import { getStatesList } from "helpers/state.helper";
 // fetch keys
 import { STATE_LIST } from "constants/fetch-keys";
+import { getStateGroupIcon } from "components/icons";
 
 type Props = {
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
@@ -46,12 +47,15 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
     value: state.id,
     display: state.name,
     color: state.color,
+    group: state.group,
   }));
 
   const filteredOptions =
     query === ""
       ? options
       : options?.filter((option) => option.display.toLowerCase().includes(query.toLowerCase()));
+
+  const currentOption = options?.find((option) => option.value === value);
   return (
     <Combobox
       as="div"
@@ -73,22 +77,15 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
           >
             {value && value !== "" ? (
               <span className="flex items-center justify-center text-xs gap-2 px-3 py-1.5">
-                <span
-                  className="h-3 w-3 flex-shrink-0 rounded-full"
-                  style={{
-                    backgroundColor: options?.find((option) => option.value === value)?.color,
-                  }}
-                />
-                <span className=" text-[#495057]">
-                  {options?.find((option) => option.value === value)?.display}
-                </span>
+                {currentOption && currentOption.group
+                  ? getStateGroupIcon(currentOption.group, "16", "16", currentOption.color)
+                  : ""}
+                <span className=" text-[#495057]">{currentOption?.display}</span>
               </span>
             ) : (
               <span className="flex items-center justify-center  text-xs  gap-2  px-3 py-1.5">
                 <Squares2X2Icon className="h-4 w-4 text-gray-500 " />
-                <span className=" text-[#858E96]">
-                  {options?.find((option) => option.value === value)?.display || "State"}
-                </span>
+                <span className=" text-[#858E96]">{currentOption?.display || "State"}</span>
               </span>
             )}
           </Combobox.Button>
@@ -130,12 +127,7 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
                           states && (
                             <div className="flex w-full gap-2 justify-between rounded">
                               <div className="flex justify-start items-center gap-2">
-                                <span
-                                  className="h-3 w-3 flex-shrink-0 rounded-full"
-                                  style={{
-                                    backgroundColor: option.color,
-                                  }}
-                                />
+                                {getStateGroupIcon(option.group, "16", "16", option.color)}
                                 <span>{option.display}</span>
                               </div>
                               <div className="flex justify-center items-center p-1 rounded">

From 1f1fa19432088b4501fff9fba6ccdba959f88ba6 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@caravel.tech>
Date: Thu, 2 Mar 2023 12:33:12 +0530
Subject: [PATCH 10/14] style: date dropdown redesign

---
 apps/app/components/issues/form.tsx        |  7 +--
 apps/app/components/issues/select/date.tsx | 70 ++++++++++++++++++++++
 apps/app/components/issues/select/index.ts |  1 +
 3 files changed, 73 insertions(+), 5 deletions(-)
 create mode 100644 apps/app/components/issues/select/date.tsx

diff --git a/apps/app/components/issues/form.tsx b/apps/app/components/issues/form.tsx
index 44a2d39e5..d8dad77a2 100644
--- a/apps/app/components/issues/form.tsx
+++ b/apps/app/components/issues/form.tsx
@@ -14,6 +14,7 @@ import {
   IssuePrioritySelect,
   IssueProjectSelect,
   IssueStateSelect,
+  IssueDateSelect,
 } from "components/issues/select";
 import { CreateStateModal } from "components/states";
 import { CreateUpdateCycleModal } from "components/cycles";
@@ -294,11 +295,7 @@ export const IssueForm: FC<IssueFormProps> = ({
                     control={control}
                     name="target_date"
                     render={({ field: { value, onChange } }) => (
-                      <CustomDatePicker
-                        value={value}
-                        onChange={onChange}
-                        className="max-w-[7rem]"
-                      />
+                      <IssueDateSelect value={value} onChange={onChange} />
                     )}
                   />
                 </div>
diff --git a/apps/app/components/issues/select/date.tsx b/apps/app/components/issues/select/date.tsx
new file mode 100644
index 000000000..da3ecb77a
--- /dev/null
+++ b/apps/app/components/issues/select/date.tsx
@@ -0,0 +1,70 @@
+import React from "react";
+
+import { Popover, Transition } from "@headlessui/react";
+import { CalendarDaysIcon, XMarkIcon } from "@heroicons/react/24/outline";
+// react-datepicker
+import DatePicker from "react-datepicker";
+// import "react-datepicker/dist/react-datepicker.css";
+import { renderDateFormat } from "helpers/date-time.helper";
+
+type Props = {
+  value: string | null;
+  onChange: (val: string | null) => void;
+};
+
+export const IssueDateSelect: React.FC<Props> = ({ value, onChange }) => (
+  <Popover className="flex justify-center items-center relative  rounded-lg">
+    {({ open }) => (
+      <>
+        <Popover.Button
+          className={({ open }) =>
+            `flex items-center text-xs cursor-pointer border rounded-md shadow-sm duration-200 
+              ${
+                open
+                  ? "outline-none border-[#3F76FF] bg-[rgba(63,118,255,0.05)] ring-1 ring-[#3F76FF] "
+                  : "hover:bg-[rgba(63,118,255,0.05)] "
+              }`
+          }
+        >
+          <span className="flex items-center justify-center text-xs gap-2 px-3 py-1.5">
+            {value ? (
+              <>
+                <span className="text-[#495057]">{value}</span>
+                <button onClick={() => onChange(null)}>
+                  <XMarkIcon className="h-3 w-3 text-[#495057]" />
+                </button>
+              </>
+            ) : (
+              <>
+                <CalendarDaysIcon className="h-4 w-4 flex-shrink-0 " />
+                <span className="text-[#858E96]">Due Date</span>
+              </>
+            )}
+          </span>
+        </Popover.Button>
+
+        <Transition
+          as={React.Fragment}
+          enter="transition ease-out duration-200"
+          enterFrom="opacity-0 translate-y-1"
+          enterTo="opacity-100 translate-y-0"
+          leave="transition ease-in duration-150"
+          leaveFrom="opacity-100 translate-y-0"
+          leaveTo="opacity-0 translate-y-1"
+        >
+          <Popover.Panel className="absolute top-10 -left-10 z-20  transform overflow-hidden">
+            <DatePicker
+              selected={value ? new Date(value) : null}
+              onChange={(val) => {
+                if (!val) onChange("");
+                else onChange(renderDateFormat(val));
+              }}
+              dateFormat="dd-MM-yyyy"
+              inline
+            />
+          </Popover.Panel>
+        </Transition>
+      </>
+    )}
+  </Popover>
+);
diff --git a/apps/app/components/issues/select/index.ts b/apps/app/components/issues/select/index.ts
index 4338b3162..a21a1cbbb 100644
--- a/apps/app/components/issues/select/index.ts
+++ b/apps/app/components/issues/select/index.ts
@@ -4,3 +4,4 @@ export * from "./parent";
 export * from "./priority";
 export * from "./project";
 export * from "./state";
+export * from "./date";

From 5ae1f639851d4c1db7d669f97dbce938a4e47e74 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@caravel.tech>
Date: Thu, 2 Mar 2023 13:29:55 +0530
Subject: [PATCH 11/14] fix: dropdown issue label

---
 apps/app/components/issues/select/label.tsx | 12 ++++----
 apps/app/components/ui/avatar.tsx           |  2 +-
 apps/app/components/ui/index.ts             |  1 +
 apps/app/components/ui/label-list.tsx       | 32 +++++++++++++++++++++
 4 files changed, 40 insertions(+), 7 deletions(-)
 create mode 100644 apps/app/components/ui/label-list.tsx

diff --git a/apps/app/components/issues/select/label.tsx b/apps/app/components/issues/select/label.tsx
index 74bc87eb5..bed23fce5 100644
--- a/apps/app/components/issues/select/label.tsx
+++ b/apps/app/components/issues/select/label.tsx
@@ -20,6 +20,7 @@ import issuesServices from "services/issues.service";
 import type { IIssueLabels } from "types";
 // fetch-keys
 import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
+import { IssueLabelList } from "components/ui";
 
 type Props = {
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
@@ -70,12 +71,11 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
             >
               {value && value.length > 0 ? (
                 <span className="flex items-center justify-center text-xs gap-2 px-3 py-1">
-                  <span className={`flex items-center gap-2 ${!value ? "" : "text-gray-900"}`}>
-                    {Array.isArray(value)
-                      ? value.map((v) => issueLabels?.find((l) => l.id === v)?.name).join(", ") ||
-                        "Labels"
-                      : issueLabels?.find((l) => l.id === value)?.name || "Labels"}
-                  </span>
+                  <IssueLabelList
+                    labels={value.map((v) => issueLabels?.find((l) => l.id === v)?.color) ?? []}
+                    length={3}
+                    showLength
+                  />
                   <span className=" text-[#495057]">{value.length} Labels</span>
                 </span>
               ) : (
diff --git a/apps/app/components/ui/avatar.tsx b/apps/app/components/ui/avatar.tsx
index e4dc68839..2b1c7b2cc 100644
--- a/apps/app/components/ui/avatar.tsx
+++ b/apps/app/components/ui/avatar.tsx
@@ -18,7 +18,7 @@ type AvatarProps = {
 };
 
 export const Avatar: React.FC<AvatarProps> = ({ user, index }) => (
-  <div className={`relative h-5 w-5 rounded-full ${index && index !== 0 ? "-ml-2.5" : ""}`}>
+  <div className={`relative h-5 w-5 rounded-full ${index && index !== 0 ? "-ml-3.5" : ""}`}>
     {user && user.avatar && user.avatar !== "" ? (
       <div
         className={`h-5 w-5 rounded-full border-2 ${
diff --git a/apps/app/components/ui/index.ts b/apps/app/components/ui/index.ts
index 04cb34fa3..3c35734eb 100644
--- a/apps/app/components/ui/index.ts
+++ b/apps/app/components/ui/index.ts
@@ -15,3 +15,4 @@ export * from "./progress-bar";
 export * from "./select";
 export * from "./spinner";
 export * from "./tooltip";
+export * from "./label-list";
diff --git a/apps/app/components/ui/label-list.tsx b/apps/app/components/ui/label-list.tsx
new file mode 100644
index 000000000..3c5459e14
--- /dev/null
+++ b/apps/app/components/ui/label-list.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+
+type IssueLabelListProps = {
+  labels?: (string | undefined)[];
+  length?: number;
+  showLength?: boolean;
+};
+
+export const IssueLabelList: React.FC<IssueLabelListProps> = ({
+  labels,
+  length = 5,
+  showLength = true,
+}) => (
+  <>
+    {labels && (
+      <>
+        {labels.map((color, index) => (
+          <div className={`flex h-4 w-4 rounded-full ${index ? "-ml-3.5" : ""}`}>
+            <span
+              className={`h-4 w-4 flex-shrink-0 rounded-full border border-white
+              `}
+              style={{
+                backgroundColor: color,
+              }}
+            />
+          </div>
+        ))}
+        {labels.length > length ? <span>+{labels.length - length}</span> : null}
+      </>
+    )}
+  </>
+);

From 6bf608a37a5839b53cfe2deb7271b3f6fd9faf85 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@caravel.tech>
Date: Thu, 2 Mar 2023 13:36:20 +0530
Subject: [PATCH 12/14] style: transsition

---
 apps/app/components/issues/select/assignee.tsx | 13 ++++++++-----
 apps/app/components/issues/select/label.tsx    | 13 ++++++++-----
 apps/app/components/issues/select/priority.tsx | 13 ++++++++-----
 apps/app/components/issues/select/state.tsx    | 13 ++++++++-----
 4 files changed, 32 insertions(+), 20 deletions(-)

diff --git a/apps/app/components/issues/select/assignee.tsx b/apps/app/components/issues/select/assignee.tsx
index e76acf886..0926c1d6a 100644
--- a/apps/app/components/issues/select/assignee.tsx
+++ b/apps/app/components/issues/select/assignee.tsx
@@ -66,11 +66,11 @@ export const IssueAssigneeSelect: FC<IssueAssigneeSelectProps> = ({
         <>
           <Combobox.Button
             className={({ open }) =>
-              `flex items-center text-xs cursor-pointer border rounded-md shadow-sm duration-300 
+              `flex items-center text-xs cursor-pointer border rounded-md shadow-sm duration-200 
               ${
                 open
                   ? "outline-none border-[#3F76FF] bg-[rgba(63,118,255,0.05)] ring-1 ring-[#3F76FF] "
-                  : "hover:bg-[rgba(63,118,255,0.05)] focus:bg-[rgba(63,118,255,0.05)]"
+                  : "hover:bg-[rgba(63,118,255,0.05)] "
               }`
             }
           >
@@ -90,9 +90,12 @@ export const IssueAssigneeSelect: FC<IssueAssigneeSelectProps> = ({
           <Transition
             show={open}
             as={Fragment}
-            leave="transition ease-in duration-100"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
+            enter="transition ease-out duration-200"
+            enterFrom="opacity-0 translate-y-1"
+            enterTo="opacity-100 translate-y-0"
+            leave="transition ease-in duration-150"
+            leaveFrom="opacity-100 translate-y-0"
+            leaveTo="opacity-0 translate-y-1"
           >
             <Combobox.Options
               className={`absolute z-10 max-h-52 min-w-[8rem] mt-1 px-2 py-2 text-xs
diff --git a/apps/app/components/issues/select/label.tsx b/apps/app/components/issues/select/label.tsx
index bed23fce5..1f8590f5d 100644
--- a/apps/app/components/issues/select/label.tsx
+++ b/apps/app/components/issues/select/label.tsx
@@ -61,11 +61,11 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
           <>
             <Combobox.Button
               className={({ open }) =>
-                `flex items-center text-xs cursor-pointer border rounded-md shadow-sm duration-300 
+                `flex items-center text-xs cursor-pointer border rounded-md shadow-sm duration-200 
               ${
                 open
                   ? "outline-none border-[#3F76FF] bg-[rgba(63,118,255,0.05)] ring-1 ring-[#3F76FF] "
-                  : "hover:bg-[rgba(63,118,255,0.05)] focus:bg-[rgba(63,118,255,0.05)]"
+                  : "hover:bg-[rgba(63,118,255,0.05)] "
               }`
               }
             >
@@ -89,9 +89,12 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
             <Transition
               show={open}
               as={React.Fragment}
-              leave="transition ease-in duration-100"
-              leaveFrom="opacity-100"
-              leaveTo="opacity-0"
+              enter="transition ease-out duration-200"
+              enterFrom="opacity-0 translate-y-1"
+              enterTo="opacity-100 translate-y-0"
+              leave="transition ease-in duration-150"
+              leaveFrom="opacity-100 translate-y-0"
+              leaveTo="opacity-0 translate-y-1"
             >
               <Combobox.Options
                 className={`absolute z-10 max-h-52 min-w-[8rem] mt-1 px-2 py-2 text-xs
diff --git a/apps/app/components/issues/select/priority.tsx b/apps/app/components/issues/select/priority.tsx
index 3497bf959..bfdda5b74 100644
--- a/apps/app/components/issues/select/priority.tsx
+++ b/apps/app/components/issues/select/priority.tsx
@@ -19,11 +19,11 @@ export const IssuePrioritySelect: React.FC<Props> = ({ value, onChange }) => (
       <>
         <Listbox.Button
           className={({ open }) =>
-            `flex items-center text-xs cursor-pointer border rounded-md shadow-sm duration-300 
+            `flex items-center text-xs cursor-pointer border rounded-md shadow-sm duration-200 
             ${
               open
                 ? "outline-none border-[#3F76FF] bg-[rgba(63,118,255,0.05)] ring-1 ring-[#3F76FF] "
-                : "hover:bg-[rgba(63,118,255,0.05)] focus:bg-[rgba(63,118,255,0.05)]"
+                : "hover:bg-[rgba(63,118,255,0.05)]"
             }`
           }
         >
@@ -40,9 +40,12 @@ export const IssuePrioritySelect: React.FC<Props> = ({ value, onChange }) => (
         <Transition
           show={open}
           as={React.Fragment}
-          leave="transition ease-in duration-100"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
+          enter="transition ease-out duration-200"
+          enterFrom="opacity-0 translate-y-1"
+          enterTo="opacity-100 translate-y-0"
+          leave="transition ease-in duration-150"
+          leaveFrom="opacity-100 translate-y-0"
+          leaveTo="opacity-0 translate-y-1"
         >
           <Listbox.Options
             className={`absolute z-10 max-h-52 min-w-[8rem] px-2 py-2  text-xs 
diff --git a/apps/app/components/issues/select/state.tsx b/apps/app/components/issues/select/state.tsx
index fcf2533e8..e94a24999 100644
--- a/apps/app/components/issues/select/state.tsx
+++ b/apps/app/components/issues/select/state.tsx
@@ -67,11 +67,11 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
         <>
           <Combobox.Button
             className={({ open }) =>
-              `flex items-center text-xs cursor-pointer border rounded-md shadow-sm duration-300 
+              `flex items-center text-xs cursor-pointer border rounded-md shadow-sm duration-200 
             ${
               open
                 ? "outline-none border-[#3F76FF] bg-[rgba(63,118,255,0.05)] ring-1 ring-[#3F76FF] "
-                : "hover:bg-[rgba(63,118,255,0.05)] focus:bg-[rgba(63,118,255,0.05)]"
+                : "hover:bg-[rgba(63,118,255,0.05)]"
             }`
             }
           >
@@ -93,9 +93,12 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
           <Transition
             show={open}
             as={React.Fragment}
-            leave="transition ease-in duration-100"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
+            enter="transition ease-out duration-200"
+            enterFrom="opacity-0 translate-y-1"
+            enterTo="opacity-100 translate-y-0"
+            leave="transition ease-in duration-150"
+            leaveFrom="opacity-100 translate-y-0"
+            leaveTo="opacity-0 translate-y-1"
           >
             <Combobox.Options
               className={`absolute z-10 max-h-52 min-w-[8rem] mt-1 px-2 py-2 text-xs 

From 1fe1596f9ddf609b8d9d2f30011b46a52501e22c Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@caravel.tech>
Date: Thu, 2 Mar 2023 14:23:38 +0530
Subject: [PATCH 13/14] style: color fixed

---
 .../app/components/issues/select/assignee.tsx | 20 ++++++-------
 apps/app/components/issues/select/date.tsx    | 10 +++----
 apps/app/components/issues/select/label.tsx   | 28 +++++++++----------
 .../app/components/issues/select/priority.tsx | 12 ++++----
 apps/app/components/issues/select/state.tsx   | 22 +++++++--------
 5 files changed, 44 insertions(+), 48 deletions(-)

diff --git a/apps/app/components/issues/select/assignee.tsx b/apps/app/components/issues/select/assignee.tsx
index 0926c1d6a..0cedee0cd 100644
--- a/apps/app/components/issues/select/assignee.tsx
+++ b/apps/app/components/issues/select/assignee.tsx
@@ -69,20 +69,20 @@ export const IssueAssigneeSelect: FC<IssueAssigneeSelectProps> = ({
               `flex items-center text-xs cursor-pointer border rounded-md shadow-sm duration-200 
               ${
                 open
-                  ? "outline-none border-[#3F76FF] bg-[rgba(63,118,255,0.05)] ring-1 ring-[#3F76FF] "
-                  : "hover:bg-[rgba(63,118,255,0.05)] "
+                  ? "outline-none border-theme bg-theme/5 ring-1 ring-theme "
+                  : "hover:bg-theme/5 "
               }`
             }
           >
             {value && value.length > 0 && Array.isArray(value) ? (
               <span className="flex items-center justify-center text-xs gap-2 px-3 py-1">
                 <AssigneesList userIds={value} length={3} showLength={false} />
-                <span className=" text-[#495057]">{value.length} Assignees</span>
+                <span className=" text-gray-500">{value.length} Assignees</span>
               </span>
             ) : (
               <span className="flex items-center justify-center text-xs gap-2  px-3 py-1.5">
                 <UserGroupIcon className="h-4 w-4 text-gray-500 " />
-                <span className=" text-[#858E96]">Assignee</span>
+                <span className=" text-gray-500">Assignee</span>
               </span>
             )}
           </Combobox.Button>
@@ -101,10 +101,10 @@ export const IssueAssigneeSelect: FC<IssueAssigneeSelectProps> = ({
               className={`absolute z-10 max-h-52 min-w-[8rem] mt-1 px-2 py-2 text-xs
               rounded-md shadow-md overflow-auto border-none bg-white focus:outline-none`}
             >
-              <div className="flex justify-start items-center rounded-sm border-[0.6px] bg-[#FAFAFA] border-[#E2E2E2] w-full px-2">
+              <div className="flex justify-start items-center rounded-sm border-[0.6px] bg-gray-100 border-gray-200 w-full px-2">
                 <MagnifyingGlassIcon className="h-3 w-3 text-gray-500" />
                 <Combobox.Input
-                  className="w-full  bg-transparent py-1 px-2 text-xs text-[#888888] focus:outline-none"
+                  className="w-full  bg-transparent py-1 px-2 text-xs text-gray-500 focus:outline-none"
                   onChange={(event) => setQuery(event.target.value)}
                   placeholder="Search for a person..."
                   displayValue={(assigned: any) => assigned?.name}
@@ -118,8 +118,8 @@ export const IssueAssigneeSelect: FC<IssueAssigneeSelectProps> = ({
                         key={option.value}
                         className={({ active }) =>
                           `${
-                            active ? "bg-[#E9ECEF]" : ""
-                          } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-[#495057]`
+                            active ? "bg-gray-200" : ""
+                          } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-gray-500`
                         }
                         value={option.value}
                       >
@@ -132,9 +132,9 @@ export const IssueAssigneeSelect: FC<IssueAssigneeSelectProps> = ({
                               <span>{option.display}</span>
                             </div>
                             <div
-                              className={`flex justify-center items-center p-1 rounded border  border-[#858E96] border-opacity-0 group-hover:border-opacity-100 
+                              className={`flex justify-center items-center p-1 rounded border  border-gray-500 border-opacity-0 group-hover:border-opacity-100 
                               ${selected ? "border-opacity-100 " : ""}  
-                              ${active ? "bg-[#F8F9FA]" : ""} `}
+                              ${active ? "bg-gray-100" : ""} `}
                             >
                               <CheckIcon
                                 className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`}
diff --git a/apps/app/components/issues/select/date.tsx b/apps/app/components/issues/select/date.tsx
index da3ecb77a..0760b0214 100644
--- a/apps/app/components/issues/select/date.tsx
+++ b/apps/app/components/issues/select/date.tsx
@@ -21,23 +21,23 @@ export const IssueDateSelect: React.FC<Props> = ({ value, onChange }) => (
             `flex items-center text-xs cursor-pointer border rounded-md shadow-sm duration-200 
               ${
                 open
-                  ? "outline-none border-[#3F76FF] bg-[rgba(63,118,255,0.05)] ring-1 ring-[#3F76FF] "
-                  : "hover:bg-[rgba(63,118,255,0.05)] "
+                  ? "outline-none border-theme bg-theme/5 ring-1 ring-theme "
+                  : "hover:bg-theme/5 "
               }`
           }
         >
           <span className="flex items-center justify-center text-xs gap-2 px-3 py-1.5">
             {value ? (
               <>
-                <span className="text-[#495057]">{value}</span>
+                <span className="text-gray-600">{value}</span>
                 <button onClick={() => onChange(null)}>
-                  <XMarkIcon className="h-3 w-3 text-[#495057]" />
+                  <XMarkIcon className="h-3 w-3 text-gray-600" />
                 </button>
               </>
             ) : (
               <>
                 <CalendarDaysIcon className="h-4 w-4 flex-shrink-0 " />
-                <span className="text-[#858E96]">Due Date</span>
+                <span className="text-gray-500">Due Date</span>
               </>
             )}
           </span>
diff --git a/apps/app/components/issues/select/label.tsx b/apps/app/components/issues/select/label.tsx
index 1f8590f5d..a1300b712 100644
--- a/apps/app/components/issues/select/label.tsx
+++ b/apps/app/components/issues/select/label.tsx
@@ -64,8 +64,8 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
                 `flex items-center text-xs cursor-pointer border rounded-md shadow-sm duration-200 
               ${
                 open
-                  ? "outline-none border-[#3F76FF] bg-[rgba(63,118,255,0.05)] ring-1 ring-[#3F76FF] "
-                  : "hover:bg-[rgba(63,118,255,0.05)] "
+                  ? "outline-none border-theme bg-theme/5 ring-1 ring-theme "
+                  : "hover:bg-theme/5 "
               }`
               }
             >
@@ -76,12 +76,12 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
                     length={3}
                     showLength
                   />
-                  <span className=" text-[#495057]">{value.length} Labels</span>
+                  <span className=" text-gray-600">{value.length} Labels</span>
                 </span>
               ) : (
                 <span className="flex items-center justify-center text-xs gap-2  px-3 py-1.5">
-                  <TagIcon className="h-3 w-3 text-[#858E96]" />
-                  <span className=" text-[#858E96]">Label</span>
+                  <TagIcon className="h-3 w-3 text-gray-500" />
+                  <span className=" text-gray-500">Label</span>
                 </span>
               )}
             </Combobox.Button>
@@ -100,10 +100,10 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
                 className={`absolute z-10 max-h-52 min-w-[8rem] mt-1 px-2 py-2 text-xs
                 rounded-md shadow-md overflow-auto border-none bg-white focus:outline-none`}
               >
-                <div className="flex justify-start items-center rounded-sm border-[0.6px] bg-[#FAFAFA] border-[#E2E2E2] w-full px-2">
+                <div className="flex justify-start items-center rounded-sm border-[0.6px] bg-gray-100 border-gray-200 w-full px-2">
                   <MagnifyingGlassIcon className="h-3 w-3 text-gray-500" />
                   <Combobox.Input
-                    className="w-full  bg-transparent py-1 px-2 text-xs text-[#888888] focus:outline-none"
+                    className="w-full  bg-transparent py-1 px-2 text-xs text-gray-500 focus:outline-none"
                     onChange={(event) => setQuery(event.target.value)}
                     placeholder="Search for label..."
                     displayValue={(assigned: any) => assigned?.name}
@@ -122,8 +122,8 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
                                 key={label.id}
                                 className={({ active }) =>
                                   `${
-                                    active ? "bg-[#E9ECEF]" : ""
-                                  } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-[#495057]`
+                                    active ? "bg-gray-200" : ""
+                                  } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-gray-600`
                                 }
                                 value={label.id}
                               >
@@ -164,8 +164,8 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
                                     key={child.id}
                                     className={({ active }) =>
                                       `${
-                                        active ? "bg-[#E9ECEF]" : ""
-                                      } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-[#495057]`
+                                        active ? "bg-gray-200" : ""
+                                      } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-gray-600`
                                     }
                                     value={child.id}
                                   >
@@ -203,12 +203,12 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
                   )}
                   <button
                     type="button"
-                    className="flex select-none w-full items-center py-2 px-1 rounded hover:bg-[#E9ECEF]"
+                    className="flex select-none w-full items-center py-2 px-1 rounded hover:bg-gray-200"
                     onClick={() => setIsOpen(true)}
                   >
                     <span className="flex justify-start items-center gap-1">
-                      <PlusIcon className="h-4 w-4 text-[#495057]" aria-hidden="true" />
-                      <span className="text-[#495057]">Create New Label</span>
+                      <PlusIcon className="h-4 w-4 text-gray-600" aria-hidden="true" />
+                      <span className="text-gray-600">Create New Label</span>
                     </span>
                   </button>
                 </div>
diff --git a/apps/app/components/issues/select/priority.tsx b/apps/app/components/issues/select/priority.tsx
index bfdda5b74..4a3c5fdba 100644
--- a/apps/app/components/issues/select/priority.tsx
+++ b/apps/app/components/issues/select/priority.tsx
@@ -21,17 +21,15 @@ export const IssuePrioritySelect: React.FC<Props> = ({ value, onChange }) => (
           className={({ open }) =>
             `flex items-center text-xs cursor-pointer border rounded-md shadow-sm duration-200 
             ${
-              open
-                ? "outline-none border-[#3F76FF] bg-[rgba(63,118,255,0.05)] ring-1 ring-[#3F76FF] "
-                : "hover:bg-[rgba(63,118,255,0.05)]"
+              open ? "outline-none border-theme bg-theme/5 ring-1 ring-theme " : "hover:bg-theme/5"
             }`
           }
         >
           <span className="flex items-center justify-center text-xs gap-2 px-3 py-1.5">
             <span className="flex items-center">
-              {getPriorityIcon(value, `${value ? "text-xs" : "text-xs text-[#858E96]"}`)}
+              {getPriorityIcon(value, `${value ? "text-xs" : "text-xs text-gray-500"}`)}
             </span>
-            <span className={`${value ? "text-[#495057]" : "text-[#858E96]"} capitalize`}>
+            <span className={`${value ? "text-gray-600" : "text-gray-500"} capitalize`}>
               {value ?? "Priority"}
             </span>
           </span>
@@ -57,8 +55,8 @@ export const IssuePrioritySelect: React.FC<Props> = ({ value, onChange }) => (
                   key={priority}
                   className={({ active }) =>
                     `${
-                      active ? "bg-[#E9ECEF]" : ""
-                    } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-[#495057]`
+                      active ? "bg-gray-200" : ""
+                    } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-gray-600`
                   }
                   value={priority}
                 >
diff --git a/apps/app/components/issues/select/state.tsx b/apps/app/components/issues/select/state.tsx
index e94a24999..41f498ec0 100644
--- a/apps/app/components/issues/select/state.tsx
+++ b/apps/app/components/issues/select/state.tsx
@@ -69,9 +69,7 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
             className={({ open }) =>
               `flex items-center text-xs cursor-pointer border rounded-md shadow-sm duration-200 
             ${
-              open
-                ? "outline-none border-[#3F76FF] bg-[rgba(63,118,255,0.05)] ring-1 ring-[#3F76FF] "
-                : "hover:bg-[rgba(63,118,255,0.05)]"
+              open ? "outline-none border-theme bg-theme/5 ring-1 ring-theme " : "hover:bg-theme/5"
             }`
             }
           >
@@ -80,12 +78,12 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
                 {currentOption && currentOption.group
                   ? getStateGroupIcon(currentOption.group, "16", "16", currentOption.color)
                   : ""}
-                <span className=" text-[#495057]">{currentOption?.display}</span>
+                <span className=" text-gray-600">{currentOption?.display}</span>
               </span>
             ) : (
               <span className="flex items-center justify-center  text-xs  gap-2  px-3 py-1.5">
                 <Squares2X2Icon className="h-4 w-4 text-gray-500 " />
-                <span className=" text-[#858E96]">{currentOption?.display || "State"}</span>
+                <span className=" text-gray-500">{currentOption?.display || "State"}</span>
               </span>
             )}
           </Combobox.Button>
@@ -104,10 +102,10 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
               className={`absolute z-10 max-h-52 min-w-[8rem] mt-1 px-2 py-2 text-xs 
               rounded-md shadow-md overflow-auto border-none bg-white focus:outline-none`}
             >
-              <div className="flex justify-start items-center rounded-sm border-[0.6px] bg-[#FAFAFA] border-[#E2E2E2] w-full px-2">
+              <div className="flex justify-start items-center rounded-sm border-[0.6px] bg-gray-100 border-gray-200 w-full px-2">
                 <MagnifyingGlassIcon className="h-3 w-3 text-gray-500" />
                 <Combobox.Input
-                  className="w-full  bg-transparent py-1 px-2  text-xs text-[#888888] focus:outline-none"
+                  className="w-full  bg-transparent py-1 px-2  text-xs text-gray-500 focus:outline-none"
                   onChange={(event) => setQuery(event.target.value)}
                   placeholder="Search States"
                   displayValue={(assigned: any) => assigned?.name}
@@ -121,8 +119,8 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
                         key={option.value}
                         className={({ active }) =>
                           `${
-                            active ? "bg-[#E9ECEF]" : ""
-                          } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-[#495057]`
+                            active ? "bg-gray-200" : ""
+                          } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-gray-600`
                         }
                         value={option.value}
                       >
@@ -151,12 +149,12 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
                 )}
                 <button
                   type="button"
-                  className="flex select-none w-full items-center py-2 px-1 rounded hover:bg-[#E9ECEF]"
+                  className="flex select-none w-full items-center py-2 px-1 rounded hover:bg-gray-200"
                   onClick={() => setIsOpen(true)}
                 >
                   <span className="flex justify-start items-center gap-1">
-                    <PlusIcon className="h-4 w-4 text-[#495057]" aria-hidden="true" />
-                    <span className="text-[#495057]">Create New State</span>
+                    <PlusIcon className="h-4 w-4 text-gray-600" aria-hidden="true" />
+                    <span className="text-gray-600">Create New State</span>
                   </span>
                 </button>
               </div>

From c6d54a0ad20544c395fdbb28e7817c964b914763 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@caravel.tech>
Date: Thu, 2 Mar 2023 15:43:50 +0530
Subject: [PATCH 14/14] chore: labels list file and function rename

---
 apps/app/components/issues/select/label.tsx                | 4 ++--
 apps/app/components/ui/index.ts                            | 2 +-
 apps/app/components/ui/{label-list.tsx => labels-list.tsx} | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)
 rename apps/app/components/ui/{label-list.tsx => labels-list.tsx} (87%)

diff --git a/apps/app/components/issues/select/label.tsx b/apps/app/components/issues/select/label.tsx
index a1300b712..d762b2bc0 100644
--- a/apps/app/components/issues/select/label.tsx
+++ b/apps/app/components/issues/select/label.tsx
@@ -20,7 +20,7 @@ import issuesServices from "services/issues.service";
 import type { IIssueLabels } from "types";
 // fetch-keys
 import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
-import { IssueLabelList } from "components/ui";
+import { IssueLabelsList } from "components/ui";
 
 type Props = {
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
@@ -71,7 +71,7 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
             >
               {value && value.length > 0 ? (
                 <span className="flex items-center justify-center text-xs gap-2 px-3 py-1">
-                  <IssueLabelList
+                  <IssueLabelsList
                     labels={value.map((v) => issueLabels?.find((l) => l.id === v)?.color) ?? []}
                     length={3}
                     showLength
diff --git a/apps/app/components/ui/index.ts b/apps/app/components/ui/index.ts
index 3c35734eb..ca610a71c 100644
--- a/apps/app/components/ui/index.ts
+++ b/apps/app/components/ui/index.ts
@@ -15,4 +15,4 @@ export * from "./progress-bar";
 export * from "./select";
 export * from "./spinner";
 export * from "./tooltip";
-export * from "./label-list";
+export * from "./labels-list";
diff --git a/apps/app/components/ui/label-list.tsx b/apps/app/components/ui/labels-list.tsx
similarity index 87%
rename from apps/app/components/ui/label-list.tsx
rename to apps/app/components/ui/labels-list.tsx
index 3c5459e14..26257549b 100644
--- a/apps/app/components/ui/label-list.tsx
+++ b/apps/app/components/ui/labels-list.tsx
@@ -1,12 +1,12 @@
 import React from "react";
 
-type IssueLabelListProps = {
+type IssueLabelsListProps = {
   labels?: (string | undefined)[];
   length?: number;
   showLength?: boolean;
 };
 
-export const IssueLabelList: React.FC<IssueLabelListProps> = ({
+export const IssueLabelsList: React.FC<IssueLabelsListProps> = ({
   labels,
   length = 5,
   showLength = true,