From 0fbdc0b157328ebe64d48acae14d54e4df44310a Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Fri, 18 Aug 2023 18:42:04 +0530
Subject: [PATCH] style: consistent ui for create update issue modal (#1907)

---
 .../app/components/issues/select/assignee.tsx |  2 +-
 apps/app/components/issues/select/date.tsx    |  2 +-
 apps/app/components/issues/select/label.tsx   |  8 +++---
 apps/app/components/ui/labels-list.tsx        | 26 ++++++++++---------
 4 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/apps/app/components/issues/select/assignee.tsx b/apps/app/components/issues/select/assignee.tsx
index 603483f0f..30c5cfc8d 100644
--- a/apps/app/components/issues/select/assignee.tsx
+++ b/apps/app/components/issues/select/assignee.tsx
@@ -49,7 +49,7 @@ export const IssueAssigneeSelect: React.FC<Props> = ({ projectId, value = [], on
               <AssigneesList userIds={value} length={3} showLength={true} />
             </div>
           ) : (
-            <div className="flex items-center justify-center gap-2 px-1.5 py-1 rounded shadow-sm border border-custom-border-300">
+            <div className="flex items-center justify-center gap-2 px-1.5 py-1 rounded shadow-sm border border-custom-border-300 hover:bg-custom-background-80">
               <Icon iconName="person" className="!text-base !leading-4" />
               <span className="text-custom-text-200">Assignee</span>
             </div>
diff --git a/apps/app/components/issues/select/date.tsx b/apps/app/components/issues/select/date.tsx
index fb88a8937..2b601f5dc 100644
--- a/apps/app/components/issues/select/date.tsx
+++ b/apps/app/components/issues/select/date.tsx
@@ -20,7 +20,7 @@ export const IssueDateSelect: React.FC<Props> = ({ label, maxDate, minDate, onCh
     {({ open }) => (
       <>
         <Popover.Button className="flex cursor-pointer items-center rounded-md border border-custom-border-200 text-xs shadow-sm duration-200">
-          <span className="flex items-center justify-center gap-2 px-2 py-1 text-xs text-custom-text-200">
+          <span className="flex items-center justify-center gap-2 px-2 py-1 text-xs text-custom-text-200 hover:bg-custom-background-80">
             {value ? (
               <>
                 <span className="text-custom-text-100">{renderShortDateWithYearFormat(value)}</span>
diff --git a/apps/app/components/issues/select/label.tsx b/apps/app/components/issues/select/label.tsx
index b15a6f9c6..cf960b3a0 100644
--- a/apps/app/components/issues/select/label.tsx
+++ b/apps/app/components/issues/select/label.tsx
@@ -59,17 +59,17 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
     >
       {({ open }: any) => (
         <>
-          <Combobox.Button className="flex cursor-pointer items-center text-xs">
+          <Combobox.Button className="flex items-center gap-2 cursor-pointer text-xs text-custom-text-200">
             {value && value.length > 0 ? (
-              <span className="flex items-center justify-center gap-2 px-2 py-1 text-xs">
+              <span className="flex items-center justify-center gap-2 text-xs">
                 <IssueLabelsList
-                  labels={value.map((v) => issueLabels?.find((l) => l.id === v)?.color) ?? []}
+                  labels={value.map((v) => issueLabels?.find((l) => l.id === v)) ?? []}
                   length={3}
                   showLength={true}
                 />
               </span>
             ) : (
-              <span className="flex items-center justify-center gap-2 px-2.5 py-1 text-xs rounded-md border border-custom-border-200 shadow-sm duration-200 hover:bg-custom-background-80">
+              <span className="flex items-center justify-center gap-2 px-2 py-1 text-xs rounded shadow-sm border border-custom-border-300 hover:bg-custom-background-80">
                 <TagIcon className="h-3.5 w-3.5 text-custom-text-200" />
                 <span className=" text-custom-text-200">Label</span>
               </span>
diff --git a/apps/app/components/ui/labels-list.tsx b/apps/app/components/ui/labels-list.tsx
index 90658dd62..ba130acca 100644
--- a/apps/app/components/ui/labels-list.tsx
+++ b/apps/app/components/ui/labels-list.tsx
@@ -1,7 +1,11 @@
 import React from "react";
+// ui
+import { Tooltip } from "components/ui";
+// types
+import { IIssueLabels } from "types";
 
 type IssueLabelsListProps = {
-  labels?: (string | undefined)[];
+  labels?: (IIssueLabels | undefined)[];
   length?: number;
   showLength?: boolean;
 };
@@ -14,18 +18,16 @@ export const IssueLabelsList: React.FC<IssueLabelsListProps> = ({
   <>
     {labels && (
       <>
-        {labels.slice(0, length).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-custom-border-200
-              `}
-              style={{
-                backgroundColor: color && color !== "" ? color : "#000000",
-              }}
-            />
+        <Tooltip
+          position="top"
+          tooltipHeading="Labels"
+          tooltipContent={labels.map((l) => l?.name).join(", ")}
+        >
+          <div className="flex items-center gap-1.5 px-2 py-1 text-custom-text-200 rounded shadow-sm border border-custom-border-300">
+            <span className="h-2 w-2 flex-shrink-0 rounded-full bg-custom-primary" />
+            {`${labels.length} Labels`}
           </div>
-        ))}
-        {labels.length > length ? <span>+{labels.length - length}</span> : null}
+        </Tooltip>
       </>
     )}
   </>