fix: inconsistency for create label, select label getting closed on select (#1085)

apps/app/components/labels/create-label-modal.tsx

@@ -30,7 +30,7 @@ type Props = {
 
 const defaultValues: Partial<IState> = {
   name: "",
-  color: "#000000",
+  color: "#858E96",
 };
 
 export const CreateLabelModal: React.FC<Props> = ({ isOpen, projectId, handleClose }) => {
@@ -44,7 +44,6 @@ export const CreateLabelModal: React.FC<Props> = ({ isOpen, projectId, handleClo
     watch,
     control,
     reset,
-    setError,
   } = useForm<IIssueLabels>({
     defaultValues,
   });
@@ -109,13 +108,13 @@ export const CreateLabelModal: React.FC<Props> = ({ isOpen, projectId, handleClo
                         {({ open, close }) => (
                           <>
                             <Popover.Button
-                              className={`group inline-flex items-center rounded-sm bg-brand-surface-2 text-base font-medium hover:text-brand-base focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 ${
+                              className={`group inline-flex items-center rounded-sm py-2 text-base font-medium hover:text-brand-base focus:outline-none ${
                                 open ? "text-brand-base" : "text-brand-secondary"
                               }`}
                             >
                               {watch("color") && watch("color") !== "" && (
                                 <span
-                                  className="ml-2 h-4 w-4 rounded"
+                                  className="ml-2 h-5 w-5 rounded"
                                   style={{
                                     backgroundColor: watch("color") ?? "black",
                                   }}
@@ -161,7 +160,7 @@ export const CreateLabelModal: React.FC<Props> = ({ isOpen, projectId, handleClo
                         type="text"
                         id="name"
                         name="name"
-                        placeholder="Enter name"
+                        placeholder="Label title"
                         autoComplete="off"
                         error={errors.name}
                         register={register}

apps/app/components/labels/create-update-label-inline.tsx

@@ -14,6 +14,8 @@ import { Popover, Transition } from "@headlessui/react";
 import issuesService from "services/issues.service";
 // ui
 import { Input, PrimaryButton, SecondaryButton } from "components/ui";
+// icons
+import { ChevronDownIcon } from "@heroicons/react/24/outline";
 // types
 import { IIssueLabels } from "types";
 // fetch-keys
@@ -28,7 +30,7 @@ type Props = {
 
 const defaultValues: Partial<IIssueLabels> = {
   name: "",
-  color: "#ff0000",
+  color: "#858E96",
 };
 
 type Ref = HTMLDivElement;
@@ -113,7 +115,7 @@ export const CreateUpdateLabelInline = forwardRef<Ref, Props>(function CreateUpd
       }`}
       ref={ref}
     >
-      <div className="h-8 w-8 flex-shrink-0">
+      <div className="flex-shrink-0">
         <Popover className="relative z-10 flex h-full w-full items-center justify-center">
           {({ open }) => (
             <>
@@ -128,6 +130,12 @@ export const CreateUpdateLabelInline = forwardRef<Ref, Props>(function CreateUpd
                     backgroundColor: watch("color"),
                   }}
                 />
+                <ChevronDownIcon
+                  className={`ml-2 h-5 w-5 group-hover:text-brand-secondary ${
+                    open ? "text-gray-600" : "text-gray-400"
+                  }`}
+                  aria-hidden="true"
+                />
               </Popover.Button>
 
               <Transition
@@ -153,7 +161,7 @@ export const CreateUpdateLabelInline = forwardRef<Ref, Props>(function CreateUpd
           )}
         </Popover>
       </div>
-      <div className="flex w-full flex-col justify-center">
+      <div className="flex flex-1 flex-col justify-center">
         <Input
           type="text"
           id="labelName"

apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx

@@ -329,7 +329,7 @@ const SinglePage: NextPage = () => {
                 </div>
 
                 <div className="flex w-full flex-wrap gap-1">
-                  {pageDetails.labels.length > 0 ? (
+                  {pageDetails.labels.length > 0 && (
                     <>
                       {pageDetails.labels.map((labelId) => {
                         const label = labels?.find((label) => label.id === labelId);
@@ -362,54 +362,38 @@ const SinglePage: NextPage = () => {
                           </div>
                         );
                       })}
-                      <CustomSearchSelect
-                        customButton={
-                          <button
-                            type="button"
-                            className="flex items-center gap-1 rounded-sm bg-brand-surface-2 p-1.5 text-xs"
-                          >
-                            <PlusIcon className="h-3.5 w-3.5" />
-                          </button>
-                        }
-                        value={pageDetails.labels}
-                        onChange={(val: string[]) => partialUpdatePage({ labels_list: val })}
-                        options={options}
-                        multiple
-                        noChevron
-                      />
                     </>
-                  ) : (
-                    <CustomSearchSelect
-                      customButton={
-                        <button
-                          type="button"
-                          className="flex items-center gap-1 rounded-sm bg-brand-surface-2 px-3 py-1.5 text-xs"
-                        >
-                          <PlusIcon className="h-3 w-3" />
-                          Add label
-                        </button>
-                      }
-                      value={pageDetails.labels}
-                      onChange={(val: string[]) => partialUpdatePage({ labels_list: val })}
-                      footerOption={
-                        <button
-                          type="button"
-                          className="flex w-full select-none items-center rounded py-2 px-1 hover:bg-brand-surface-2"
-                          onClick={() => {
-                            setLabelModal(true);
-                          }}
-                        >
-                          <span className="flex items-center justify-start gap-1 text-brand-secondary">
-                            <PlusIcon className="h-4 w-4" aria-hidden="true" />
-                            <span>Create New Label</span>
-                          </span>
-                        </button>
-                      }
-                      options={options}
-                      multiple
-                      noChevron
-                    />
                   )}
+                  <CustomSearchSelect
+                    customButton={
+                      <button
+                        type="button"
+                        className="flex items-center gap-1 rounded-sm bg-brand-surface-2 p-1.5 text-xs"
+                      >
+                        <PlusIcon className="h-3.5 w-3.5" />
+                        {pageDetails.labels.length <= 0 && <span>Add Label</span>}
+                      </button>
+                    }
+                    value={pageDetails.labels}
+                    footerOption={
+                      <button
+                        type="button"
+                        className="flex w-full select-none items-center rounded py-2 px-1 hover:bg-brand-surface-2"
+                        onClick={() => {
+                          setLabelModal(true);
+                        }}
+                      >
+                        <span className="flex items-center justify-start gap-1 text-brand-secondary">
+                          <PlusIcon className="h-4 w-4" aria-hidden="true" />
+                          <span>Create New Label</span>
+                        </span>
+                      </button>
+                    }
+                    onChange={(val: string[]) => partialUpdatePage({ labels_list: val })}
+                    options={options}
+                    multiple
+                    noChevron
+                  />
                 </div>
               </div>
               <div className="flex items-center">