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] 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>