style: create issue modal inputs

web/components/custom-attributes/objects-select.tsx

@@ -34,8 +34,6 @@ export const ObjectsSelect: React.FC<Props> = observer(({ onChange, projectId, v
   }));
   options?.unshift({ value: null, query: "default", content: "Default" });
 
-  console.log("entities", entities);
-
   useEffect(() => {
     if (!workspaceSlug) return;
 

web/components/issues/form.tsx

@@ -14,7 +14,7 @@ import useToast from "hooks/use-toast";
 import useLocalStorage from "hooks/use-local-storage";
 // components
 import { GptAssistantModal } from "components/core";
-import { ParentIssuesListModal } from "components/issues";
+import { ParentIssuesListModal, TIssueFormAttributes } from "components/issues";
 import {
   IssueAssigneeSelect,
   IssueDateSelect,
@@ -67,21 +67,7 @@ export interface IssueFormProps {
   handleFormDirty: (payload: Partial<IIssue> | null) => void;
   customAttributesList: { [key: string]: string[] };
   handleCustomAttributesChange: (attributeId: string, val: string[]) => void;
-  fieldsToShow: (
-    | "project"
-    | "name"
-    | "description"
-    | "entity"
-    | "state"
-    | "priority"
-    | "assignee"
-    | "label"
-    | "startDate"
-    | "dueDate"
-    | "estimate"
-    | "parent"
-    | "all"
-  )[];
+  fieldsToShow: TIssueFormAttributes[];
 }
 
 export const IssueForm: FC<IssueFormProps> = observer((props) => {

web/components/issues/modal.tsx

@@ -4,6 +4,9 @@ import { useRouter } from "next/router";
 
 import { mutate } from "swr";
 
+// mobx
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // services
@@ -39,42 +42,41 @@ import {
 } from "constants/fetch-keys";
 // constants
 import { INBOX_ISSUE_SOURCE } from "constants/inbox";
-import { observer } from "mobx-react-lite";
-import { useMobxStore } from "lib/mobx/store-provider";
+
+export type TIssueFormAttributes =
+  | "project"
+  | "name"
+  | "description"
+  | "entity"
+  | "state"
+  | "priority"
+  | "assignee"
+  | "label"
+  | "startDate"
+  | "dueDate"
+  | "estimate"
+  | "parent"
+  | "all";
 
 export interface IssuesModalProps {
   data?: IIssue | null;
+  fieldsToShow?: TIssueFormAttributes[];
   handleClose: () => void;
   isOpen: boolean;
   isUpdatingSingleIssue?: boolean;
-  prePopulateData?: Partial<IIssue>;
-  fieldsToShow?: (
-    | "project"
-    | "name"
-    | "description"
-    | "entity"
-    | "state"
-    | "priority"
-    | "assignee"
-    | "label"
-    | "startDate"
-    | "dueDate"
-    | "estimate"
-    | "parent"
-    | "all"
-  )[];
   onSubmit?: (data: Partial<IIssue>) => Promise<void>;
+  prePopulateData?: Partial<IIssue>;
 }
 
 export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer(
   ({
     data,
+    fieldsToShow = ["all"],
     handleClose,
     isOpen,
     isUpdatingSingleIssue = false,
-    prePopulateData,
-    fieldsToShow = ["all"],
     onSubmit,
+    prePopulateData,
   }) => {
     // states
     const [createMore, setCreateMore] = useState(false);

web/components/issues/select/date.tsx

@@ -19,22 +19,20 @@ export const IssueDateSelect: React.FC<Props> = ({ label, maxDate, minDate, onCh
   <Popover className="relative flex items-center justify-center  rounded-lg">
     {({ close }) => (
       <>
-        <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 hover:bg-custom-background-80">
-            {value ? (
-              <>
-                <span className="text-custom-text-100">{renderShortDateWithYearFormat(value)}</span>
-                <button onClick={() => onChange(null)}>
-                  <XMarkIcon className="h-3 w-3" />
-                </button>
-              </>
-            ) : (
-              <>
-                <CalendarDaysIcon className="h-3.5 w-3.5 flex-shrink-0" />
-                <span>{label}</span>
-              </>
-            )}
-          </span>
+        <Popover.Button className="flex items-center gap-1 rounded text-xs bg-custom-background-80 px-2.5 py-0.5">
+          {value ? (
+            <>
+              <span className="text-custom-text-100">{renderShortDateWithYearFormat(value)}</span>
+              <button onClick={() => onChange(null)}>
+                <XMarkIcon className="h-3 w-3" />
+              </button>
+            </>
+          ) : (
+            <>
+              <CalendarDaysIcon className="h-3.5 w-3.5 flex-shrink-0" />
+              <span>{label}</span>
+            </>
+          )}
         </Popover.Button>
 
         <Transition

web/components/issues/select/label.tsx

@@ -69,9 +69,9 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
                 />
               </span>
             ) : (
-              <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 className="flex items-center justify-center gap-2 px-2.5 py-0.5 text-xs rounded bg-custom-background-80">
+                <TagIcon className="h-3.5 w-3.5" />
+                <span>Label</span>
               </span>
             )}
           </Combobox.Button>

web/components/issues/select/priority.tsx

@@ -17,8 +17,11 @@ type Props = {
 export const IssuePrioritySelect: React.FC<Props> = ({ value, onChange }) => (
   <CustomSelect
     value={value}
-    label={
-      <div className="flex items-center justify-center gap-2 text-xs">
+    customButton={
+      <button
+        type="button"
+        className="flex items-center justify-center gap-2 text-xs bg-custom-background-80 rounded px-2.5 py-0.5"
+      >
         <span className="flex items-center">
           <PriorityIcon
             priority={value}
@@ -28,7 +31,7 @@ export const IssuePrioritySelect: React.FC<Props> = ({ value, onChange }) => (
         <span className={`${value ? "" : "text-custom-text-200"} capitalize`}>
           {value ?? "Priority"}
         </span>
-      </div>
+      </button>
     }
     onChange={onChange}
     noChevron

web/components/issues/select/state.tsx

@@ -55,8 +55,11 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
       value={value}
       onChange={onChange}
       options={options}
-      label={
-        <div className="flex items-center gap-2">
+      customButton={
+        <button
+          type="button"
+          className="flex items-center gap-2 bg-custom-background-80 rounded text-xs px-2.5 py-0.5"
+        >
           {selectedOption ? (
             <StateGroupIcon stateGroup={selectedOption.group} color={selectedOption.color} />
           ) : currentDefaultState ? (
@@ -70,7 +73,7 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
           {selectedOption?.name
             ? selectedOption.name
             : currentDefaultState?.name ?? <span className="text-custom-text-200">State</span>}
-        </div>
+        </button>
       }
       footerOption={
         <button