style: peek overview and issue details properties (#3447)

* style: peek overview and issue details properties

* fix: cycle and module remove function

* style: update placeholder text color

* fix: relation constant

* chore: added todos to fix later

packages/ui/src/dropdowns/custom-search-select.tsx

@@ -118,7 +118,7 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
               <Combobox.Options className="fixed z-10" static>
                 <div
                   className={cn(
-                    "my-1 overflow-y-scroll rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap",
+                    "my-1 overflow-y-scroll rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none min-w-[12rem] whitespace-nowrap",
                     optionsClassName
                   )}
                   ref={setPopperElement}

web/components/core/modals/existing-issues-list-modal.tsx

@@ -22,13 +22,9 @@ type Props = {
 
 const projectService = new ProjectService();
 
-export const ExistingIssuesListModal: React.FC<Props> = ({
+export const ExistingIssuesListModal: React.FC<Props> = (props) => {
-  isOpen,
+  const { isOpen, handleClose: onClose, searchParams, handleOnSubmit, workspaceLevelToggle = false } = props;
-  handleClose: onClose,
+  // states
-  searchParams,
-  handleOnSubmit,
-  workspaceLevelToggle = false,
-}) => {
   const [searchTerm, setSearchTerm] = useState("");
   const [issues, setIssues] = useState<ISearchIssueResponse[]>([]);
   const [isSearching, setIsSearching] = useState(false);
@@ -92,7 +88,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
   return (
     <>
       <Transition.Root show={isOpen} as={React.Fragment} afterLeave={() => setSearchTerm("")} appear>
-        <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <Dialog as="div" className="relative z-20" onClose={() => {}}>
           <Transition.Child
             as={React.Fragment}
             enter="ease-out duration-300"
@@ -260,16 +256,16 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
                     )}
                   </Combobox.Options>
                 </Combobox>
-                {selectedIssues.length > 0 && (
+                <div className="flex items-center justify-end gap-2 p-3">
-                  <div className="flex items-center justify-end gap-2 p-3">
+                  <Button variant="neutral-primary" size="sm" onClick={handleClose}>
-                    <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+                    Cancel
-                      Cancel
+                  </Button>
-                    </Button>
+                  {selectedIssues.length > 0 && (
                     <Button variant="primary" size="sm" onClick={onSubmit} loading={isSubmitting}>
                       {isSubmitting ? "Adding..." : "Add selected issues"}
                     </Button>
-                  </div>
+                  )}
-                )}
+                </div>
               </Dialog.Panel>
             </Transition.Child>
           </div>

web/components/dropdowns/cycle.tsx

@@ -18,6 +18,7 @@ import { TDropdownProps } from "./types";
 type Props = TDropdownProps & {
   button?: ReactNode;
   dropdownArrow?: boolean;
+  dropdownArrowClassName?: string;
   onChange: (val: string | null) => void;
   projectId: string;
   value: string | null;
@@ -26,8 +27,11 @@ type Props = TDropdownProps & {
 type ButtonProps = {
   className?: string;
   cycle: ICycle | null;
+  hideIcon: boolean;
   hideText?: boolean;
   dropdownArrow: boolean;
+  dropdownArrowClassName: string;
+  placeholder: string;
 };
 
 type DropdownOptions =
@@ -39,7 +43,15 @@ type DropdownOptions =
   | undefined;
 
 const BorderButton = (props: ButtonProps) => {
-  const { className, cycle, dropdownArrow, hideText = false } = props;
+  const {
+    className,
+    cycle,
+    dropdownArrow,
+    dropdownArrowClassName,
+    hideIcon = false,
+    hideText = false,
+    placeholder,
+  } = props;
 
   return (
     <div
@@ -48,29 +60,49 @@ const BorderButton = (props: ButtonProps) => {
         className
       )}
     >
-      <ContrastIcon className="h-3 w-3 flex-shrink-0" />
+      {!hideIcon && <ContrastIcon className="h-3 w-3 flex-shrink-0" />}{" "}
-      {!hideText && <span className="flex-grow truncate">{cycle?.name ?? "Cycle"}</span>}
+      {!hideText && <span className="flex-grow truncate">{cycle?.name ?? placeholder}</span>}
-      {dropdownArrow && <ChevronDown className="h-2.5 w-2.5 flex-shrink-0" aria-hidden="true" />}
+      {dropdownArrow && (
+        <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+      )}
     </div>
   );
 };
 
 const BackgroundButton = (props: ButtonProps) => {
-  const { className, cycle, dropdownArrow, hideText = false } = props;
+  const {
+    className,
+    cycle,
+    dropdownArrow,
+    dropdownArrowClassName,
+    hideIcon = false,
+    hideText = false,
+    placeholder,
+  } = props;
 
   return (
     <div
       className={cn("h-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5 bg-custom-background-80", className)}
     >
-      <ContrastIcon className="h-3 w-3 flex-shrink-0" />
+      {!hideIcon && <ContrastIcon className="h-3 w-3 flex-shrink-0" />}
-      {!hideText && <span className="flex-grow truncate">{cycle?.name ?? "Cycle"}</span>}
+      {!hideText && <span className="flex-grow truncate">{cycle?.name ?? placeholder}</span>}
-      {dropdownArrow && <ChevronDown className="h-2.5 w-2.5 flex-shrink-0" aria-hidden="true" />}
+      {dropdownArrow && (
+        <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+      )}
     </div>
   );
 };
 
 const TransparentButton = (props: ButtonProps) => {
-  const { className, cycle, dropdownArrow, hideText = false } = props;
+  const {
+    className,
+    cycle,
+    dropdownArrow,
+    dropdownArrowClassName,
+    hideIcon = false,
+    hideText = false,
+    placeholder,
+  } = props;
 
   return (
     <div
@@ -79,9 +111,11 @@ const TransparentButton = (props: ButtonProps) => {
         className
       )}
     >
-      <ContrastIcon className="h-3 w-3 flex-shrink-0" />
+      {!hideIcon && <ContrastIcon className="h-3 w-3 flex-shrink-0" />}
-      {!hideText && <span className="flex-grow truncate">{cycle?.name ?? "Cycle"}</span>}
+      {!hideText && <span className="flex-grow truncate">{cycle?.name ?? placeholder}</span>}
-      {dropdownArrow && <ChevronDown className="h-2.5 w-2.5 flex-shrink-0" aria-hidden="true" />}
+      {dropdownArrow && (
+        <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+      )}
     </div>
   );
 };
@@ -95,7 +129,10 @@ export const CycleDropdown: React.FC<Props> = observer((props) => {
     className = "",
     disabled = false,
     dropdownArrow = false,
+    dropdownArrowClassName = "",
+    hideIcon = false,
     onChange,
+    placeholder = "Cycle",
     placement,
     projectId,
     value,
@@ -178,9 +215,7 @@ export const CycleDropdown: React.FC<Props> = observer((props) => {
       as="div"
       ref={dropdownRef}
       tabIndex={tabIndex}
-      className={cn("h-full flex-shrink-0", {
+      className={cn("h-full", className)}
-        className,
-      })}
       value={value}
       onChange={onChange}
       disabled={disabled}
@@ -210,44 +245,63 @@ export const CycleDropdown: React.FC<Props> = observer((props) => {
             )}
             onClick={openDropdown}
           >
+            {/* TODO: move button components to a single file for each dropdown */}
             {buttonVariant === "border-with-text" ? (
               <BorderButton
                 cycle={selectedCycle}
                 className={buttonClassName}
                 dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
+                placeholder={placeholder}
               />
             ) : buttonVariant === "border-without-text" ? (
               <BorderButton
                 cycle={selectedCycle}
                 className={buttonClassName}
                 dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
                 hideText
+                placeholder={placeholder}
               />
             ) : buttonVariant === "background-with-text" ? (
               <BackgroundButton
                 cycle={selectedCycle}
                 className={buttonClassName}
                 dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
+                placeholder={placeholder}
               />
             ) : buttonVariant === "background-without-text" ? (
               <BackgroundButton
                 cycle={selectedCycle}
                 className={buttonClassName}
                 dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
                 hideText
+                placeholder={placeholder}
               />
             ) : buttonVariant === "transparent-with-text" ? (
               <TransparentButton
                 cycle={selectedCycle}
                 className={buttonClassName}
                 dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
+                placeholder={placeholder}
               />
             ) : buttonVariant === "transparent-without-text" ? (
               <TransparentButton
                 cycle={selectedCycle}
                 className={buttonClassName}
                 dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
                 hideText
+                placeholder={placeholder}
               />
             ) : null}
           </button>

web/components/dropdowns/date.tsx

@@ -13,28 +13,40 @@ import { cn } from "helpers/common.helper";
 import { TDropdownProps } from "./types";
 
 type Props = TDropdownProps & {
+  clearIconClassName?: string;
   icon?: React.ReactNode;
   isClearable?: boolean;
   minDate?: Date;
   maxDate?: Date;
   onChange: (val: Date | null) => void;
-  placeholder: string;
   value: Date | string | null;
   closeOnSelect?: boolean;
 };
 
 type ButtonProps = {
   className?: string;
+  clearIconClassName: string;
   date: string | Date | null;
   icon: React.ReactNode;
   isClearable: boolean;
+  hideIcon?: boolean;
   hideText?: boolean;
   onClear: () => void;
   placeholder: string;
 };
 
 const BorderButton = (props: ButtonProps) => {
-  const { className, date, icon, isClearable, hideText = false, onClear, placeholder } = props;
+  const {
+    className,
+    clearIconClassName,
+    date,
+    icon,
+    isClearable,
+    hideIcon = false,
+    hideText = false,
+    onClear,
+    placeholder,
+  } = props;
 
   return (
     <div
@@ -43,11 +55,11 @@ const BorderButton = (props: ButtonProps) => {
         className
       )}
     >
-      {icon}
+      {!hideIcon && icon}
       {!hideText && <span className="flex-grow truncate">{date ? renderFormattedDate(date) : placeholder}</span>}
       {isClearable && (
         <X
-          className="h-2 w-2 flex-shrink-0"
+          className={cn("h-2 w-2 flex-shrink-0", clearIconClassName)}
           onClick={(e) => {
             e.stopPropagation();
             onClear();
@@ -59,17 +71,27 @@ const BorderButton = (props: ButtonProps) => {
 };
 
 const BackgroundButton = (props: ButtonProps) => {
-  const { className, date, icon, isClearable, hideText = false, onClear, placeholder } = props;
+  const {
+    className,
+    clearIconClassName,
+    date,
+    icon,
+    isClearable,
+    hideIcon = false,
+    hideText = false,
+    onClear,
+    placeholder,
+  } = props;
 
   return (
     <div
       className={cn("h-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5 bg-custom-background-80", className)}
     >
-      {icon}
+      {!hideIcon && icon}
       {!hideText && <span className="flex-grow truncate">{date ? renderFormattedDate(date) : placeholder}</span>}
       {isClearable && (
         <X
-          className="h-2 w-2 flex-shrink-0"
+          className={cn("h-2 w-2 flex-shrink-0", clearIconClassName)}
           onClick={(e) => {
             e.stopPropagation();
             onClear();
@@ -81,7 +103,17 @@ const BackgroundButton = (props: ButtonProps) => {
 };
 
 const TransparentButton = (props: ButtonProps) => {
-  const { className, date, icon, isClearable, hideText = false, onClear, placeholder } = props;
+  const {
+    className,
+    clearIconClassName,
+    date,
+    icon,
+    isClearable,
+    hideIcon = false,
+    hideText = false,
+    onClear,
+    placeholder,
+  } = props;
 
   return (
     <div
@@ -90,11 +122,11 @@ const TransparentButton = (props: ButtonProps) => {
         className
       )}
     >
-      {icon}
+      {!hideIcon && icon}
       {!hideText && <span className="flex-grow truncate">{date ? renderFormattedDate(date) : placeholder}</span>}
       {isClearable && (
         <X
-          className="h-2 w-2 flex-shrink-0"
+          className={cn("h-2 w-2 flex-shrink-0", clearIconClassName)}
           onClick={(e) => {
             e.stopPropagation();
             onClear();
@@ -111,13 +143,15 @@ export const DateDropdown: React.FC<Props> = (props) => {
     buttonContainerClassName,
     buttonVariant,
     className = "",
+    clearIconClassName = "",
     disabled = false,
+    hideIcon = false,
     icon = <CalendarDays className="h-3 w-3 flex-shrink-0" />,
     isClearable = true,
     minDate,
     maxDate,
     onChange,
-    placeholder,
+    placeholder = "Date",
     placement,
     value,
     closeOnSelect = true,
@@ -157,7 +191,7 @@ export const DateDropdown: React.FC<Props> = (props) => {
       as="div"
       ref={dropdownRef}
       tabIndex={tabIndex}
-      className={cn("h-full flex-shrink-0", className)}
+      className={cn("h-full", className)}
       onKeyDown={handleKeyDown}
     >
       <Combobox.Button as={React.Fragment}>
@@ -178,6 +212,8 @@ export const DateDropdown: React.FC<Props> = (props) => {
             <BorderButton
               date={value}
               className={buttonClassName}
+              clearIconClassName={clearIconClassName}
+              hideIcon={hideIcon}
               icon={icon}
               placeholder={placeholder}
               isClearable={isClearable && isDateSelected}
@@ -187,6 +223,8 @@ export const DateDropdown: React.FC<Props> = (props) => {
             <BorderButton
               date={value}
               className={buttonClassName}
+              clearIconClassName={clearIconClassName}
+              hideIcon={hideIcon}
               icon={icon}
               placeholder={placeholder}
               isClearable={isClearable && isDateSelected}
@@ -197,6 +235,8 @@ export const DateDropdown: React.FC<Props> = (props) => {
             <BackgroundButton
               date={value}
               className={buttonClassName}
+              clearIconClassName={clearIconClassName}
+              hideIcon={hideIcon}
               icon={icon}
               placeholder={placeholder}
               isClearable={isClearable && isDateSelected}
@@ -206,6 +246,8 @@ export const DateDropdown: React.FC<Props> = (props) => {
             <BackgroundButton
               date={value}
               className={buttonClassName}
+              clearIconClassName={clearIconClassName}
+              hideIcon={hideIcon}
               icon={icon}
               placeholder={placeholder}
               isClearable={isClearable && isDateSelected}
@@ -216,6 +258,8 @@ export const DateDropdown: React.FC<Props> = (props) => {
             <TransparentButton
               date={value}
               className={buttonClassName}
+              clearIconClassName={clearIconClassName}
+              hideIcon={hideIcon}
               icon={icon}
               placeholder={placeholder}
               isClearable={isClearable && isDateSelected}
@@ -225,6 +269,8 @@ export const DateDropdown: React.FC<Props> = (props) => {
             <TransparentButton
               date={value}
               className={buttonClassName}
+              clearIconClassName={clearIconClassName}
+              hideIcon={hideIcon}
               icon={icon}
               placeholder={placeholder}
               isClearable={isClearable && isDateSelected}

web/components/dropdowns/estimate.tsx

@@ -1,4 +1,4 @@
-import { Fragment, ReactNode, useEffect, useRef, useState } from "react";
+import { Fragment, ReactNode, useRef, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { Combobox } from "@headlessui/react";
 import { usePopper } from "react-popper";
@@ -16,6 +16,7 @@ import { TDropdownProps } from "./types";
 type Props = TDropdownProps & {
   button?: ReactNode;
   dropdownArrow?: boolean;
+  dropdownArrowClassName?: string;
   onChange: (val: number | null) => void;
   projectId: string;
   value: number | null;
@@ -25,7 +26,10 @@ type ButtonProps = {
   className?: string;
   estimatePoint: string | null;
   dropdownArrow: boolean;
+  dropdownArrowClassName: string;
+  hideIcon?: boolean;
   hideText?: boolean;
+  placeholder: string;
 };
 
 type DropdownOptions =
@@ -37,7 +41,15 @@ type DropdownOptions =
   | undefined;
 
 const BorderButton = (props: ButtonProps) => {
-  const { className, estimatePoint, dropdownArrow, hideText = false } = props;
+  const {
+    className,
+    estimatePoint,
+    dropdownArrow,
+    dropdownArrowClassName,
+    hideIcon = false,
+    hideText = false,
+    placeholder,
+  } = props;
 
   return (
     <div
@@ -46,29 +58,49 @@ const BorderButton = (props: ButtonProps) => {
         className
       )}
     >
-      <Triangle className="h-3 w-3 flex-shrink-0" />
+      {!hideIcon && <Triangle className="h-3 w-3 flex-shrink-0" />}
-      {!hideText && <span className="flex-grow truncate">{estimatePoint !== null ? estimatePoint : "Estimate"}</span>}
+      {!hideText && <span className="flex-grow truncate">{estimatePoint !== null ? estimatePoint : placeholder}</span>}
-      {dropdownArrow && <ChevronDown className="h-2.5 w-2.5 flex-shrink-0" aria-hidden="true" />}
+      {dropdownArrow && (
+        <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+      )}
     </div>
   );
 };
 
 const BackgroundButton = (props: ButtonProps) => {
-  const { className, estimatePoint, dropdownArrow, hideText = false } = props;
+  const {
+    className,
+    estimatePoint,
+    dropdownArrow,
+    dropdownArrowClassName,
+    hideIcon = false,
+    hideText = false,
+    placeholder,
+  } = props;
 
   return (
     <div
       className={cn("h-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5 bg-custom-background-80", className)}
     >
-      <Triangle className="h-3 w-3 flex-shrink-0" />
+      {!hideIcon && <Triangle className="h-3 w-3 flex-shrink-0" />}
-      {!hideText && <span className="flex-grow truncate">{estimatePoint !== null ? estimatePoint : "Estimate"}</span>}
+      {!hideText && <span className="flex-grow truncate">{estimatePoint !== null ? estimatePoint : placeholder}</span>}
-      {dropdownArrow && <ChevronDown className="h-2.5 w-2.5 flex-shrink-0" aria-hidden="true" />}
+      {dropdownArrow && (
+        <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+      )}
     </div>
   );
 };
 
 const TransparentButton = (props: ButtonProps) => {
-  const { className, estimatePoint, dropdownArrow, hideText = false } = props;
+  const {
+    className,
+    estimatePoint,
+    dropdownArrow,
+    dropdownArrowClassName,
+    hideIcon = false,
+    hideText = false,
+    placeholder,
+  } = props;
 
   return (
     <div
@@ -77,9 +109,11 @@ const TransparentButton = (props: ButtonProps) => {
         className
       )}
     >
-      <Triangle className="h-3 w-3 flex-shrink-0" />
+      {!hideIcon && <Triangle className="h-3 w-3 flex-shrink-0" />}
-      {!hideText && <span className="flex-grow truncate">{estimatePoint !== null ? estimatePoint : "Estimate"}</span>}
+      {!hideText && <span className="flex-grow truncate">{estimatePoint !== null ? estimatePoint : placeholder}</span>}
-      {dropdownArrow && <ChevronDown className="h-2.5 w-2.5 flex-shrink-0" aria-hidden="true" />}
+      {dropdownArrow && (
+        <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+      )}
     </div>
   );
 };
@@ -93,7 +127,10 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
     className = "",
     disabled = false,
     dropdownArrow = false,
+    dropdownArrowClassName = "",
+    hideIcon = false,
     onChange,
+    placeholder = "Estimate",
     placement,
     projectId,
     value,
@@ -167,9 +204,7 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
       as="div"
       ref={dropdownRef}
       tabIndex={tabIndex}
-      className={cn("h-full flex-shrink-0", {
+      className={cn("h-full w-full", className)}
-        className,
-      })}
       value={value}
       onChange={onChange}
       disabled={disabled}
@@ -204,39 +239,57 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
                 estimatePoint={selectedEstimate}
                 className={buttonClassName}
                 dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
+                placeholder={placeholder}
               />
             ) : buttonVariant === "border-without-text" ? (
               <BorderButton
                 estimatePoint={selectedEstimate}
                 className={buttonClassName}
                 dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
                 hideText
+                placeholder={placeholder}
               />
             ) : buttonVariant === "background-with-text" ? (
               <BackgroundButton
                 estimatePoint={selectedEstimate}
                 className={buttonClassName}
                 dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
+                placeholder={placeholder}
               />
             ) : buttonVariant === "background-without-text" ? (
               <BackgroundButton
                 estimatePoint={selectedEstimate}
                 className={buttonClassName}
                 dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
                 hideText
+                placeholder={placeholder}
               />
             ) : buttonVariant === "transparent-with-text" ? (
               <TransparentButton
                 estimatePoint={selectedEstimate}
                 className={buttonClassName}
                 dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
+                placeholder={placeholder}
               />
             ) : buttonVariant === "transparent-without-text" ? (
               <TransparentButton
                 estimatePoint={selectedEstimate}
                 className={buttonClassName}
                 dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
                 hideText
+                placeholder={placeholder}
               />
             ) : null}
           </button>

web/components/dropdowns/member/buttons.tsx

@@ -10,7 +10,9 @@ import { cn } from "helpers/common.helper";
 type ButtonProps = {
   className?: string;
   dropdownArrow: boolean;
+  dropdownArrowClassName: string;
   placeholder: string;
+  hideIcon?: boolean;
   hideText?: boolean;
   userIds: string | string[] | null;
 };
@@ -41,7 +43,15 @@ const ButtonAvatars = observer(({ userIds }: { userIds: string | string[] | null
 });
 
 export const BorderButton = observer((props: ButtonProps) => {
-  const { className, dropdownArrow, hideText = false, placeholder, userIds } = props;
+  const {
+    className,
+    dropdownArrow,
+    dropdownArrowClassName,
+    hideIcon = false,
+    hideText = false,
+    placeholder,
+    userIds,
+  } = props;
   // store hooks
   const { getUserDetails } = useMember();
 
@@ -54,19 +64,29 @@ export const BorderButton = observer((props: ButtonProps) => {
         className
       )}
     >
-      <ButtonAvatars userIds={userIds} />
+      {!hideIcon && <ButtonAvatars userIds={userIds} />}
       {!hideText && (
         <span className="flex-grow truncate">
           {userIds ? (isMultiple ? placeholder : getUserDetails(userIds)?.display_name) : placeholder}
         </span>
       )}
-      {dropdownArrow && <ChevronDown className="h-2.5 w-2.5 flex-shrink-0" aria-hidden="true" />}
+      {dropdownArrow && (
+        <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+      )}
     </div>
   );
 });
 
 export const BackgroundButton = observer((props: ButtonProps) => {
-  const { className, dropdownArrow, hideText = false, placeholder, userIds } = props;
+  const {
+    className,
+    dropdownArrow,
+    dropdownArrowClassName,
+    hideIcon = false,
+    hideText = false,
+    placeholder,
+    userIds,
+  } = props;
   // store hooks
   const { getUserDetails } = useMember();
 
@@ -76,19 +96,29 @@ export const BackgroundButton = observer((props: ButtonProps) => {
     <div
       className={cn("h-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5 bg-custom-background-80", className)}
     >
-      <ButtonAvatars userIds={userIds} />
+      {!hideIcon && <ButtonAvatars userIds={userIds} />}
       {!hideText && (
         <span className="flex-grow truncate">
           {userIds ? (isMultiple ? placeholder : getUserDetails(userIds)?.display_name) : placeholder}
         </span>
       )}
-      {dropdownArrow && <ChevronDown className="h-2.5 w-2.5 flex-shrink-0" aria-hidden="true" />}
+      {dropdownArrow && (
+        <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+      )}
     </div>
   );
 });
 
 export const TransparentButton = observer((props: ButtonProps) => {
-  const { className, dropdownArrow, hideText = false, placeholder, userIds } = props;
+  const {
+    className,
+    dropdownArrow,
+    dropdownArrowClassName,
+    hideIcon = false,
+    hideText = false,
+    placeholder,
+    userIds,
+  } = props;
   // store hooks
   const { getUserDetails } = useMember();
 
@@ -101,13 +131,15 @@ export const TransparentButton = observer((props: ButtonProps) => {
         className
       )}
     >
-      <ButtonAvatars userIds={userIds} />
+      {!hideIcon && <ButtonAvatars userIds={userIds} />}
       {!hideText && (
         <span className="flex-grow truncate">
           {userIds ? (isMultiple ? placeholder : getUserDetails(userIds)?.display_name) : placeholder}
         </span>
       )}
-      {dropdownArrow && <ChevronDown className="h-2.5 w-2.5 flex-shrink-0" aria-hidden="true" />}
+      {dropdownArrow && (
+        <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+      )}
     </div>
   );
 });

web/components/dropdowns/member/project-member.tsx

@@ -1,4 +1,4 @@
-import { Fragment, useEffect, useRef, useState } from "react";
+import { Fragment, useRef, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { Combobox } from "@headlessui/react";
 import { usePopper } from "react-popper";
@@ -29,6 +29,8 @@ export const ProjectMemberDropdown: React.FC<Props> = observer((props) => {
     className = "",
     disabled = false,
     dropdownArrow = false,
+    dropdownArrowClassName = "",
+    hideIcon = false,
     multiple,
     onChange,
     placeholder = "Members",
@@ -108,9 +110,7 @@ export const ProjectMemberDropdown: React.FC<Props> = observer((props) => {
       as="div"
       ref={dropdownRef}
       tabIndex={tabIndex}
-      className={cn("h-full flex-shrink-0", {
+      className={cn("h-full", className)}
-        className,
-      })}
       onKeyDown={handleKeyDown}
       {...comboboxProps}
     >
@@ -143,6 +143,8 @@ export const ProjectMemberDropdown: React.FC<Props> = observer((props) => {
                 userIds={value}
                 className={buttonClassName}
                 dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
                 placeholder={placeholder}
               />
             ) : buttonVariant === "border-without-text" ? (
@@ -150,6 +152,8 @@ export const ProjectMemberDropdown: React.FC<Props> = observer((props) => {
                 userIds={value}
                 className={buttonClassName}
                 dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
                 placeholder={placeholder}
                 hideText
               />
@@ -158,6 +162,8 @@ export const ProjectMemberDropdown: React.FC<Props> = observer((props) => {
                 userIds={value}
                 className={buttonClassName}
                 dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
                 placeholder={placeholder}
               />
             ) : buttonVariant === "background-without-text" ? (
@@ -165,6 +171,8 @@ export const ProjectMemberDropdown: React.FC<Props> = observer((props) => {
                 userIds={value}
                 className={buttonClassName}
                 dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
                 placeholder={placeholder}
                 hideText
               />
@@ -173,6 +181,8 @@ export const ProjectMemberDropdown: React.FC<Props> = observer((props) => {
                 userIds={value}
                 className={buttonClassName}
                 dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
                 placeholder={placeholder}
               />
             ) : buttonVariant === "transparent-without-text" ? (
@@ -180,6 +190,8 @@ export const ProjectMemberDropdown: React.FC<Props> = observer((props) => {
                 userIds={value}
                 className={buttonClassName}
                 dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
                 placeholder={placeholder}
                 hideText
               />

web/components/dropdowns/member/types.d.ts

@@ -3,6 +3,7 @@ import { TDropdownProps } from "../types";
 export type MemberDropdownProps = TDropdownProps & {
   button?: ReactNode;
   dropdownArrow?: boolean;
+  dropdownArrowClassName?: string;
   placeholder?: string;
 } & (
     | {

web/components/dropdowns/member/workspace-member.tsx

@@ -5,6 +5,8 @@ import { usePopper } from "react-popper";
 import { Check, Search } from "lucide-react";
 // hooks
 import { useMember, useUser } from "hooks/store";
+import { useDropdownKeyDown } from "hooks/use-dropdown-key-down";
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // components
 import { BackgroundButton, BorderButton, TransparentButton } from "components/dropdowns";
 // icons
@@ -13,8 +15,6 @@ import { Avatar } from "@plane/ui";
 import { cn } from "helpers/common.helper";
 // types
 import { MemberDropdownProps } from "./types";
-import { useDropdownKeyDown } from "hooks/use-dropdown-key-down";
-import useOutsideClickDetector from "hooks/use-outside-click-detector";
 
 export const WorkspaceMemberDropdown: React.FC<MemberDropdownProps> = observer((props) => {
   const {
@@ -25,6 +25,8 @@ export const WorkspaceMemberDropdown: React.FC<MemberDropdownProps> = observer((
     className = "",
     disabled = false,
     dropdownArrow = false,
+    dropdownArrowClassName = "",
+    hideIcon = false,
     multiple,
     onChange,
     placeholder = "Members",
@@ -97,9 +99,7 @@ export const WorkspaceMemberDropdown: React.FC<MemberDropdownProps> = observer((
       as="div"
       ref={dropdownRef}
       tabIndex={tabIndex}
-      className={cn("h-full flex-shrink-0", {
+      className={cn("h-full", className)}
-        className,
-      })}
       {...comboboxProps}
       handleKeyDown={handleKeyDown}
     >
@@ -130,6 +130,8 @@ export const WorkspaceMemberDropdown: React.FC<MemberDropdownProps> = observer((
                 userIds={value}
                 className={buttonClassName}
                 dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
                 placeholder={placeholder}
               />
             ) : buttonVariant === "border-without-text" ? (
@@ -137,6 +139,8 @@ export const WorkspaceMemberDropdown: React.FC<MemberDropdownProps> = observer((
                 userIds={value}
                 className={buttonClassName}
                 dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
                 placeholder={placeholder}
                 hideText
               />
@@ -145,6 +149,8 @@ export const WorkspaceMemberDropdown: React.FC<MemberDropdownProps> = observer((
                 userIds={value}
                 className={buttonClassName}
                 dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
                 placeholder={placeholder}
               />
             ) : buttonVariant === "background-without-text" ? (
@@ -152,6 +158,8 @@ export const WorkspaceMemberDropdown: React.FC<MemberDropdownProps> = observer((
                 userIds={value}
                 className={buttonClassName}
                 dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
                 placeholder={placeholder}
                 hideText
               />
@@ -160,6 +168,8 @@ export const WorkspaceMemberDropdown: React.FC<MemberDropdownProps> = observer((
                 userIds={value}
                 className={buttonClassName}
                 dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
                 placeholder={placeholder}
               />
             ) : buttonVariant === "transparent-without-text" ? (
@@ -167,6 +177,8 @@ export const WorkspaceMemberDropdown: React.FC<MemberDropdownProps> = observer((
                 userIds={value}
                 className={buttonClassName}
                 dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
                 placeholder={placeholder}
                 hideText
               />

web/components/dropdowns/module.tsx

@@ -18,6 +18,7 @@ import { TDropdownProps } from "./types";
 type Props = TDropdownProps & {
   button?: ReactNode;
   dropdownArrow?: boolean;
+  dropdownArrowClassName?: string;
   onChange: (val: string | null) => void;
   projectId: string;
   value: string | null;
@@ -34,12 +35,23 @@ type DropdownOptions =
 type ButtonProps = {
   className?: string;
   dropdownArrow: boolean;
+  dropdownArrowClassName: string;
+  hideIcon?: boolean;
   hideText?: boolean;
   module: IModule | null;
+  placeholder: string;
 };
 
 const BorderButton = (props: ButtonProps) => {
-  const { className, dropdownArrow, hideText = false, module } = props;
+  const {
+    className,
+    dropdownArrow,
+    dropdownArrowClassName,
+    hideIcon = false,
+    hideText = false,
+    module,
+    placeholder,
+  } = props;
 
   return (
     <div
@@ -48,29 +60,49 @@ const BorderButton = (props: ButtonProps) => {
         className
       )}
     >
-      <DiceIcon className="h-3 w-3 flex-shrink-0" />
+      {!hideIcon && <DiceIcon className="h-3 w-3 flex-shrink-0" />}
-      {!hideText && <span className="flex-grow truncate">{module?.name ?? "Module"}</span>}
+      {!hideText && <span className="flex-grow truncate">{module?.name ?? placeholder}</span>}
-      {dropdownArrow && <ChevronDown className="h-2.5 w-2.5 flex-shrink-0" aria-hidden="true" />}
+      {dropdownArrow && (
+        <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+      )}
     </div>
   );
 };
 
 const BackgroundButton = (props: ButtonProps) => {
-  const { className, dropdownArrow, hideText = false, module } = props;
+  const {
+    className,
+    dropdownArrow,
+    dropdownArrowClassName,
+    hideIcon = false,
+    hideText = false,
+    module,
+    placeholder,
+  } = props;
 
   return (
     <div
       className={cn("h-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5 bg-custom-background-80", className)}
     >
-      <DiceIcon className="h-3 w-3 flex-shrink-0" />
+      {!hideIcon && <DiceIcon className="h-3 w-3 flex-shrink-0" />}
-      {!hideText && <span className="flex-grow truncate">{module?.name ?? "Module"}</span>}
+      {!hideText && <span className="flex-grow truncate">{module?.name ?? placeholder}</span>}
-      {dropdownArrow && <ChevronDown className="h-2.5 w-2.5 flex-shrink-0" aria-hidden="true" />}
+      {dropdownArrow && (
+        <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+      )}
     </div>
   );
 };
 
 const TransparentButton = (props: ButtonProps) => {
-  const { className, dropdownArrow, hideText = false, module } = props;
+  const {
+    className,
+    dropdownArrow,
+    dropdownArrowClassName,
+    hideIcon = false,
+    hideText = false,
+    module,
+    placeholder,
+  } = props;
 
   return (
     <div
@@ -79,9 +111,11 @@ const TransparentButton = (props: ButtonProps) => {
         className
       )}
     >
-      <DiceIcon className="h-3 w-3 flex-shrink-0" />
+      {!hideIcon && <DiceIcon className="h-3 w-3 flex-shrink-0" />}
-      {!hideText && <span className="flex-grow truncate">{module?.name ?? "Module"}</span>}
+      {!hideText && <span className="flex-grow truncate">{module?.name ?? placeholder}</span>}
-      {dropdownArrow && <ChevronDown className="h-2.5 w-2.5 flex-shrink-0" aria-hidden="true" />}
+      {dropdownArrow && (
+        <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+      )}
     </div>
   );
 };
@@ -95,7 +129,10 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
     className = "",
     disabled = false,
     dropdownArrow = false,
+    dropdownArrowClassName = "",
+    hideIcon = false,
     onChange,
+    placeholder = "Module",
     placement,
     projectId,
     value,
@@ -178,7 +215,7 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
       as="div"
       ref={dropdownRef}
       tabIndex={tabIndex}
-      className={cn("h-full flex-shrink-0", className)}
+      className={cn("h-full", className)}
       value={value}
       onChange={onChange}
       disabled={disabled}
@@ -213,39 +250,57 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
                 module={selectedModule}
                 className={buttonClassName}
                 dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
+                placeholder={placeholder}
               />
             ) : buttonVariant === "border-without-text" ? (
               <BorderButton
                 module={selectedModule}
                 className={buttonClassName}
                 dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
                 hideText
+                placeholder={placeholder}
               />
             ) : buttonVariant === "background-with-text" ? (
               <BackgroundButton
                 module={selectedModule}
                 className={buttonClassName}
                 dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
+                placeholder={placeholder}
               />
             ) : buttonVariant === "background-without-text" ? (
               <BackgroundButton
                 module={selectedModule}
                 className={buttonClassName}
                 dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
                 hideText
+                placeholder={placeholder}
               />
             ) : buttonVariant === "transparent-with-text" ? (
               <TransparentButton
                 module={selectedModule}
                 className={buttonClassName}
                 dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
+                placeholder={placeholder}
               />
             ) : buttonVariant === "transparent-without-text" ? (
               <TransparentButton
                 module={selectedModule}
                 className={buttonClassName}
                 dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
                 hideText
+                placeholder={placeholder}
               />
             ) : null}
           </button>

web/components/dropdowns/priority.tsx

@@ -19,6 +19,7 @@ import { useTheme } from "next-themes";
 type Props = TDropdownProps & {
   button?: ReactNode;
   dropdownArrow?: boolean;
+  dropdownArrowClassName?: string;
   highlightUrgent?: boolean;
   onChange: (val: TIssuePriorities) => void;
   value: TIssuePriorities;
@@ -27,13 +28,23 @@ type Props = TDropdownProps & {
 type ButtonProps = {
   className?: string;
   dropdownArrow: boolean;
+  dropdownArrowClassName: string;
+  hideIcon?: boolean;
   hideText?: boolean;
   highlightUrgent: boolean;
   priority: TIssuePriorities;
 };
 
 const BorderButton = (props: ButtonProps) => {
-  const { className, dropdownArrow, hideText = false, highlightUrgent, priority } = props;
+  const {
+    className,
+    dropdownArrow,
+    dropdownArrowClassName,
+    hideIcon = false,
+    hideText = false,
+    highlightUrgent,
+    priority,
+  } = props;
 
   const priorityDetails = ISSUE_PRIORITIES.find((p) => p.key === priority);
 
@@ -59,35 +70,47 @@ const BorderButton = (props: ButtonProps) => {
         className
       )}
     >
-      <div
+      {!hideIcon && (
-        className={cn({
+        <div
-          // highlight just the icon if text is visible and priority is urgent
+          className={cn({
-          "bg-red-500 p-1 rounded": priority === "urgent" && !hideText && highlightUrgent,
+            // highlight just the icon if text is visible and priority is urgent
-        })}
+            "bg-red-500 p-1 rounded": priority === "urgent" && !hideText && highlightUrgent,
-      >
-        <PriorityIcon
-          priority={priority}
-          size={12}
-          className={cn("flex-shrink-0", {
-            // increase the icon size if text is hidden
-            "h-3.5 w-3.5": hideText,
-            // centre align the icons if text is hidden
-            "translate-x-[0.0625rem]": hideText && priority === "high",
-            "translate-x-0.5": hideText && priority === "medium",
-            "translate-x-1": hideText && priority === "low",
-            // highlight the icon if priority is urgent
-            "text-white": priority === "urgent" && highlightUrgent,
           })}
-        />
+        >
-      </div>
+          <PriorityIcon
+            priority={priority}
+            size={12}
+            className={cn("flex-shrink-0", {
+              // increase the icon size if text is hidden
+              "h-3.5 w-3.5": hideText,
+              // centre align the icons if text is hidden
+              "translate-x-[0.0625rem]": hideText && priority === "high",
+              "translate-x-0.5": hideText && priority === "medium",
+              "translate-x-1": hideText && priority === "low",
+              // highlight the icon if priority is urgent
+              "text-white": priority === "urgent" && highlightUrgent,
+            })}
+          />
+        </div>
+      )}
       {!hideText && <span className="flex-grow truncate">{priorityDetails?.title}</span>}
-      {dropdownArrow && <ChevronDown className="h-2.5 w-2.5 flex-shrink-0" aria-hidden="true" />}
+      {dropdownArrow && (
+        <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+      )}
     </div>
   );
 };
 
 const BackgroundButton = (props: ButtonProps) => {
-  const { className, dropdownArrow, hideText = false, highlightUrgent, priority } = props;
+  const {
+    className,
+    dropdownArrow,
+    dropdownArrowClassName,
+    hideIcon = false,
+    hideText = false,
+    highlightUrgent,
+    priority,
+  } = props;
 
   const priorityDetails = ISSUE_PRIORITIES.find((p) => p.key === priority);
 
@@ -113,35 +136,47 @@ const BackgroundButton = (props: ButtonProps) => {
         className
       )}
     >
-      <div
+      {!hideIcon && (
-        className={cn({
+        <div
-          // highlight just the icon if text is visible and priority is urgent
+          className={cn({
-          "bg-red-500 p-1 rounded": priority === "urgent" && !hideText && highlightUrgent,
+            // highlight just the icon if text is visible and priority is urgent
-        })}
+            "bg-red-500 p-1 rounded": priority === "urgent" && !hideText && highlightUrgent,
-      >
-        <PriorityIcon
-          priority={priority}
-          size={12}
-          className={cn("flex-shrink-0", {
-            // increase the icon size if text is hidden
-            "h-3.5 w-3.5": hideText,
-            // centre align the icons if text is hidden
-            "translate-x-[0.0625rem]": hideText && priority === "high",
-            "translate-x-0.5": hideText && priority === "medium",
-            "translate-x-1": hideText && priority === "low",
-            // highlight the icon if priority is urgent
-            "text-white": priority === "urgent" && highlightUrgent,
           })}
-        />
+        >
-      </div>
+          <PriorityIcon
+            priority={priority}
+            size={12}
+            className={cn("flex-shrink-0", {
+              // increase the icon size if text is hidden
+              "h-3.5 w-3.5": hideText,
+              // centre align the icons if text is hidden
+              "translate-x-[0.0625rem]": hideText && priority === "high",
+              "translate-x-0.5": hideText && priority === "medium",
+              "translate-x-1": hideText && priority === "low",
+              // highlight the icon if priority is urgent
+              "text-white": priority === "urgent" && highlightUrgent,
+            })}
+          />
+        </div>
+      )}
       {!hideText && <span className="flex-grow truncate">{priorityDetails?.title}</span>}
-      {dropdownArrow && <ChevronDown className="h-2.5 w-2.5 flex-shrink-0" aria-hidden="true" />}
+      {dropdownArrow && (
+        <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+      )}
     </div>
   );
 };
 
 const TransparentButton = (props: ButtonProps) => {
-  const { className, dropdownArrow, hideText = false, highlightUrgent, priority } = props;
+  const {
+    className,
+    dropdownArrow,
+    dropdownArrowClassName,
+    hideIcon = false,
+    hideText = false,
+    highlightUrgent,
+    priority,
+  } = props;
 
   const priorityDetails = ISSUE_PRIORITIES.find((p) => p.key === priority);
 
@@ -167,29 +202,33 @@ const TransparentButton = (props: ButtonProps) => {
         className
       )}
     >
-      <div
+      {!hideIcon && (
-        className={cn({
+        <div
-          // highlight just the icon if text is visible and priority is urgent
+          className={cn({
-          "bg-red-500 p-1 rounded": priority === "urgent" && !hideText && highlightUrgent,
+            // highlight just the icon if text is visible and priority is urgent
-        })}
+            "bg-red-500 p-1 rounded": priority === "urgent" && !hideText && highlightUrgent,
-      >
-        <PriorityIcon
-          priority={priority}
-          size={12}
-          className={cn("flex-shrink-0", {
-            // increase the icon size if text is hidden
-            "h-3.5 w-3.5": hideText,
-            // centre align the icons if text is hidden
-            "translate-x-[0.0625rem]": hideText && priority === "high",
-            "translate-x-0.5": hideText && priority === "medium",
-            "translate-x-1": hideText && priority === "low",
-            // highlight the icon if priority is urgent
-            "text-white": priority === "urgent" && highlightUrgent,
           })}
-        />
+        >
-      </div>
+          <PriorityIcon
+            priority={priority}
+            size={12}
+            className={cn("flex-shrink-0", {
+              // increase the icon size if text is hidden
+              "h-3.5 w-3.5": hideText,
+              // centre align the icons if text is hidden
+              "translate-x-[0.0625rem]": hideText && priority === "high",
+              "translate-x-0.5": hideText && priority === "medium",
+              "translate-x-1": hideText && priority === "low",
+              // highlight the icon if priority is urgent
+              "text-white": priority === "urgent" && highlightUrgent,
+            })}
+          />
+        </div>
+      )}
       {!hideText && <span className="flex-grow truncate">{priorityDetails?.title}</span>}
-      {dropdownArrow && <ChevronDown className="h-2.5 w-2.5 flex-shrink-0" aria-hidden="true" />}
+      {dropdownArrow && (
+        <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+      )}
     </div>
   );
 };
@@ -203,6 +242,8 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
     className = "",
     disabled = false,
     dropdownArrow = false,
+    dropdownArrowClassName = "",
+    hideIcon = false,
     highlightUrgent = true,
     onChange,
     placement,
@@ -260,9 +301,7 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
       as="div"
       ref={dropdownRef}
       tabIndex={tabIndex}
-      className={cn("h-full flex-shrink-0", {
+      className={cn("h-full", className)}
-        className,
-      })}
       value={value}
       onChange={onChange}
       disabled={disabled}
@@ -300,6 +339,8 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
                 })}
                 highlightUrgent={highlightUrgent}
                 dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
               />
             ) : buttonVariant === "border-without-text" ? (
               <BorderButton
@@ -309,6 +350,8 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
                 })}
                 highlightUrgent={highlightUrgent}
                 dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
                 hideText
               />
             ) : buttonVariant === "background-with-text" ? (
@@ -319,6 +362,8 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
                 })}
                 highlightUrgent={highlightUrgent}
                 dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
               />
             ) : buttonVariant === "background-without-text" ? (
               <BackgroundButton
@@ -328,6 +373,8 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
                 })}
                 highlightUrgent={highlightUrgent}
                 dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
                 hideText
               />
             ) : buttonVariant === "transparent-with-text" ? (
@@ -338,6 +385,8 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
                 })}
                 highlightUrgent={highlightUrgent}
                 dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
               />
             ) : buttonVariant === "transparent-without-text" ? (
               <TransparentButton
@@ -347,6 +396,8 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
                 })}
                 highlightUrgent={highlightUrgent}
                 dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
                 hideText
               />
             ) : null}

web/components/dropdowns/project.tsx

@@ -17,6 +17,7 @@ import { TDropdownProps } from "./types";
 type Props = TDropdownProps & {
   button?: ReactNode;
   dropdownArrow?: boolean;
+  dropdownArrowClassName?: string;
   onChange: (val: string) => void;
   value: string | null;
 };
@@ -24,12 +25,23 @@ type Props = TDropdownProps & {
 type ButtonProps = {
   className?: string;
   dropdownArrow: boolean;
+  dropdownArrowClassName: string;
+  hideIcon?: boolean;
   hideText?: boolean;
+  placeholder: string;
   project: IProject | null;
 };
 
 const BorderButton = (props: ButtonProps) => {
-  const { className, dropdownArrow, hideText = false, project } = props;
+  const {
+    className,
+    dropdownArrow,
+    dropdownArrowClassName,
+    hideIcon = false,
+    hideText = false,
+    placeholder,
+    project,
+  } = props;
 
   return (
     <div
@@ -38,33 +50,57 @@ const BorderButton = (props: ButtonProps) => {
         className
       )}
     >
-      <span className="grid place-items-center flex-shrink-0">
+      {!hideIcon && (
-        {project?.emoji ? renderEmoji(project?.emoji) : project?.icon_prop ? renderEmoji(project?.icon_prop) : null}
+        <span className="grid place-items-center flex-shrink-0">
-      </span>
+          {project?.emoji ? renderEmoji(project?.emoji) : project?.icon_prop ? renderEmoji(project?.icon_prop) : null}
-      {!hideText && <span className="flex-grow truncate">{project?.name ?? "Project"}</span>}
+        </span>
-      {dropdownArrow && <ChevronDown className="h-2.5 w-2.5 flex-shrink-0" aria-hidden="true" />}
+      )}
+      {!hideText && <span className="flex-grow truncate">{project?.name ?? placeholder}</span>}
+      {dropdownArrow && (
+        <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+      )}
     </div>
   );
 };
 
 const BackgroundButton = (props: ButtonProps) => {
-  const { className, dropdownArrow, hideText = false, project } = props;
+  const {
+    className,
+    dropdownArrow,
+    dropdownArrowClassName,
+    hideIcon = false,
+    hideText = false,
+    placeholder,
+    project,
+  } = props;
 
   return (
     <div
       className={cn("h-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5 bg-custom-background-80", className)}
     >
-      <span className="grid place-items-center flex-shrink-0">
+      {!hideIcon && (
-        {project?.emoji ? renderEmoji(project?.emoji) : project?.icon_prop ? renderEmoji(project?.icon_prop) : null}
+        <span className="grid place-items-center flex-shrink-0">
-      </span>
+          {project?.emoji ? renderEmoji(project?.emoji) : project?.icon_prop ? renderEmoji(project?.icon_prop) : null}
-      {!hideText && <span className="flex-grow truncate">{project?.name ?? "Project"}</span>}
+        </span>
-      {dropdownArrow && <ChevronDown className="h-2.5 w-2.5 flex-shrink-0" aria-hidden="true" />}
+      )}
+      {!hideText && <span className="flex-grow truncate">{project?.name ?? placeholder}</span>}
+      {dropdownArrow && (
+        <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+      )}
     </div>
   );
 };
 
 const TransparentButton = (props: ButtonProps) => {
-  const { className, dropdownArrow, hideText = false, project } = props;
+  const {
+    className,
+    dropdownArrow,
+    dropdownArrowClassName,
+    hideIcon = false,
+    hideText = false,
+    placeholder,
+    project,
+  } = props;
 
   return (
     <div
@@ -73,11 +109,15 @@ const TransparentButton = (props: ButtonProps) => {
         className
       )}
     >
-      <span className="grid place-items-center flex-shrink-0">
+      {!hideIcon && (
-        {project?.emoji ? renderEmoji(project?.emoji) : project?.icon_prop ? renderEmoji(project?.icon_prop) : null}
+        <span className="grid place-items-center flex-shrink-0">
-      </span>
+          {project?.emoji ? renderEmoji(project?.emoji) : project?.icon_prop ? renderEmoji(project?.icon_prop) : null}
-      {!hideText && <span className="flex-grow truncate">{project?.name ?? "Project"}</span>}
+        </span>
-      {dropdownArrow && <ChevronDown className="h-2.5 w-2.5 flex-shrink-0" aria-hidden="true" />}
+      )}
+      {!hideText && <span className="flex-grow truncate">{project?.name ?? placeholder}</span>}
+      {dropdownArrow && (
+        <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+      )}
     </div>
   );
 };
@@ -91,7 +131,10 @@ export const ProjectDropdown: React.FC<Props> = observer((props) => {
     className = "",
     disabled = false,
     dropdownArrow = false,
+    dropdownArrowClassName = "",
+    hideIcon = false,
     onChange,
+    placeholder = "Project",
     placement,
     value,
     tabIndex,
@@ -158,7 +201,7 @@ export const ProjectDropdown: React.FC<Props> = observer((props) => {
       as="div"
       ref={dropdownRef}
       tabIndex={tabIndex}
-      className={cn("h-full flex-shrink-0", className)}
+      className={cn("h-full", className)}
       value={value}
       onChange={onChange}
       disabled={disabled}
@@ -193,39 +236,57 @@ export const ProjectDropdown: React.FC<Props> = observer((props) => {
                 project={selectedProject}
                 className={buttonClassName}
                 dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
+                placeholder={placeholder}
               />
             ) : buttonVariant === "border-without-text" ? (
               <BorderButton
                 project={selectedProject}
                 className={buttonClassName}
                 dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
                 hideText
+                placeholder={placeholder}
               />
             ) : buttonVariant === "background-with-text" ? (
               <BackgroundButton
                 project={selectedProject}
                 className={buttonClassName}
                 dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
+                placeholder={placeholder}
               />
             ) : buttonVariant === "background-without-text" ? (
               <BackgroundButton
                 project={selectedProject}
                 className={buttonClassName}
                 dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
                 hideText
+                placeholder={placeholder}
               />
             ) : buttonVariant === "transparent-with-text" ? (
               <TransparentButton
                 project={selectedProject}
                 className={buttonClassName}
                 dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
+                placeholder={placeholder}
               />
             ) : buttonVariant === "transparent-without-text" ? (
               <TransparentButton
                 project={selectedProject}
                 className={buttonClassName}
                 dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
                 hideText
+                placeholder={placeholder}
               />
             ) : null}
           </button>

web/components/dropdowns/state.tsx

@@ -1,4 +1,4 @@
-import { Fragment, ReactNode, useEffect, useRef, useState } from "react";
+import { Fragment, ReactNode, useRef, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { Combobox } from "@headlessui/react";
 import { usePopper } from "react-popper";
@@ -18,6 +18,7 @@ import { TDropdownProps } from "./types";
 type Props = TDropdownProps & {
   button?: ReactNode;
   dropdownArrow?: boolean;
+  dropdownArrowClassName?: string;
   onChange: (val: string) => void;
   projectId: string;
   value: string;
@@ -26,12 +27,14 @@ type Props = TDropdownProps & {
 type ButtonProps = {
   className?: string;
   dropdownArrow: boolean;
+  dropdownArrowClassName: string;
+  hideIcon?: boolean;
   hideText?: boolean;
   state: IState | undefined;
 };
 
 const BorderButton = (props: ButtonProps) => {
-  const { className, dropdownArrow, hideText = false, state } = props;
+  const { className, dropdownArrow, dropdownArrowClassName, hideIcon = false, hideText = false, state } = props;
 
   return (
     <div
@@ -40,29 +43,37 @@ const BorderButton = (props: ButtonProps) => {
         className
       )}
     >
-      <StateGroupIcon stateGroup={state?.group ?? "backlog"} color={state?.color} className="h-3 w-3 flex-shrink-0" />
+      {!hideIcon && (
+        <StateGroupIcon stateGroup={state?.group ?? "backlog"} color={state?.color} className="h-3 w-3 flex-shrink-0" />
+      )}
       {!hideText && <span className="flex-grow truncate">{state?.name ?? "State"}</span>}
-      {dropdownArrow && <ChevronDown className="h-2.5 w-2.5 flex-shrink-0" aria-hidden="true" />}
+      {dropdownArrow && (
+        <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+      )}
     </div>
   );
 };
 
 const BackgroundButton = (props: ButtonProps) => {
-  const { className, dropdownArrow, hideText = false, state } = props;
+  const { className, dropdownArrow, dropdownArrowClassName, hideIcon = false, hideText = false, state } = props;
 
   return (
     <div
       className={cn("h-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5 bg-custom-background-80", className)}
     >
-      <StateGroupIcon stateGroup={state?.group ?? "backlog"} color={state?.color} className="h-3 w-3 flex-shrink-0" />
+      {!hideIcon && (
+        <StateGroupIcon stateGroup={state?.group ?? "backlog"} color={state?.color} className="h-3 w-3 flex-shrink-0" />
+      )}
       {!hideText && <span className="flex-grow truncate">{state?.name ?? "State"}</span>}
-      {dropdownArrow && <ChevronDown className="h-2.5 w-2.5 flex-shrink-0" aria-hidden="true" />}
+      {dropdownArrow && (
+        <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+      )}
     </div>
   );
 };
 
 const TransparentButton = (props: ButtonProps) => {
-  const { className, dropdownArrow, hideText = false, state } = props;
+  const { className, dropdownArrow, dropdownArrowClassName, hideIcon = false, hideText = false, state } = props;
 
   return (
     <div
@@ -71,9 +82,13 @@ const TransparentButton = (props: ButtonProps) => {
         className
       )}
     >
-      <StateGroupIcon stateGroup={state?.group ?? "backlog"} color={state?.color} className="h-3 w-3 flex-shrink-0" />
+      {!hideIcon && (
+        <StateGroupIcon stateGroup={state?.group ?? "backlog"} color={state?.color} className="h-3 w-3 flex-shrink-0" />
+      )}
       {!hideText && <span className="flex-grow truncate">{state?.name ?? "State"}</span>}
-      {dropdownArrow && <ChevronDown className="h-2.5 w-2.5 flex-shrink-0" aria-hidden="true" />}
+      {dropdownArrow && (
+        <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+      )}
     </div>
   );
 };
@@ -87,6 +102,8 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
     className = "",
     disabled = false,
     dropdownArrow = false,
+    dropdownArrowClassName = "",
+    hideIcon = false,
     onChange,
     placement,
     projectId,
@@ -134,7 +151,6 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
   const filteredOptions =
     query === "" ? options : options?.filter((o) => o.query.toLowerCase().includes(query.toLowerCase()));
 
-
   const selectedState = getStateById(value);
 
   const openDropdown = () => {
@@ -151,7 +167,7 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
       as="div"
       ref={dropdownRef}
       tabIndex={tabIndex}
-      className={cn("h-full flex-shrink-0", className)}
+      className={cn("h-full", className)}
       value={value}
       onChange={onChange}
       disabled={disabled}
@@ -186,12 +202,16 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
                 state={selectedState}
                 className={buttonClassName}
                 dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
               />
             ) : buttonVariant === "border-without-text" ? (
               <BorderButton
                 state={selectedState}
                 className={buttonClassName}
                 dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
                 hideText
               />
             ) : buttonVariant === "background-with-text" ? (
@@ -199,12 +219,16 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
                 state={selectedState}
                 className={buttonClassName}
                 dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
               />
             ) : buttonVariant === "background-without-text" ? (
               <BackgroundButton
                 state={selectedState}
                 className={buttonClassName}
                 dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
                 hideText
               />
             ) : buttonVariant === "transparent-with-text" ? (
@@ -212,12 +236,15 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
                 state={selectedState}
                 className={buttonClassName}
                 dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
+                hideIcon={hideIcon}
               />
             ) : buttonVariant === "transparent-without-text" ? (
               <TransparentButton
                 state={selectedState}
                 className={buttonClassName}
                 dropdownArrow={dropdownArrow && !disabled}
+                dropdownArrowClassName={dropdownArrowClassName}
                 hideText
               />
             ) : null}

web/components/dropdowns/types.d.ts

@@ -14,6 +14,8 @@ export type TDropdownProps = {
   buttonVariant: TButtonVariants;
   className?: string;
   disabled?: boolean;
+  hideIcon?: boolean;
+  placeholder?: string;
   placement?: Placement;
   tabIndex?: number;
 };

web/components/issues/issue-detail/cycle-select.tsx

@@ -1,14 +1,18 @@
-import React, { ReactNode, useState } from "react";
+import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
-import useSWR from "swr";
 // hooks
-import { useCycle, useIssueDetail } from "hooks/store";
+import { useIssueDetail } from "hooks/store";
+// components
+import { CycleDropdown } from "components/dropdowns";
 // ui
-import { ContrastIcon, CustomSearchSelect, Spinner, Tooltip } from "@plane/ui";
+import { Spinner } from "@plane/ui";
+// helpers
+import { cn } from "helpers/common.helper";
 // types
 import type { TIssueOperations } from "./root";
 
 type TIssueCycleSelect = {
+  className?: string;
   workspaceSlug: string;
   projectId: string;
   issueId: string;
@@ -17,84 +21,40 @@ type TIssueCycleSelect = {
 };
 
 export const IssueCycleSelect: React.FC<TIssueCycleSelect> = observer((props) => {
-  const { workspaceSlug, projectId, issueId, issueOperations, disabled = false } = props;
+  const { className = "", workspaceSlug, projectId, issueId, issueOperations, disabled = false } = props;
-  // hooks
+  // states
-  const { getCycleById, currentProjectIncompleteCycleIds, fetchAllCycles } = useCycle();
+  const [isUpdating, setIsUpdating] = useState(false);
+  // store hooks
   const {
     issue: { getIssueById },
   } = useIssueDetail();
-  // state
+  // derived values
-  const [isUpdating, setIsUpdating] = useState(false);
-
-  useSWR(workspaceSlug && projectId ? `PROJECT_${projectId}_ISSUE_${issueId}_CYCLES` : null, async () => {
-    if (workspaceSlug && projectId) await fetchAllCycles(workspaceSlug, projectId);
-  });
-
   const issue = getIssueById(issueId);
-  const projectCycleIds = currentProjectIncompleteCycleIds;
-  const issueCycle = (issue && issue.cycle_id && getCycleById(issue.cycle_id)) || undefined;
   const disableSelect = disabled || isUpdating;
 
-  const handleIssueCycleChange = async (cycleId: string) => {
+  const handleIssueCycleChange = async (cycleId: string | null) => {
-    if (!cycleId) return;
+    if (!issue || issue.cycle_id === cycleId) return;
     setIsUpdating(true);
-    if (issue && issue.cycle_id === cycleId)
+    if (cycleId) await issueOperations.addIssueToCycle(workspaceSlug, projectId, cycleId, [issueId]);
-      await issueOperations.removeIssueFromCycle(workspaceSlug, projectId, cycleId, issueId);
+    else await issueOperations.removeIssueFromCycle(workspaceSlug, projectId, issue.cycle_id ?? "", issueId);
-    else await issueOperations.addIssueToCycle(workspaceSlug, projectId, cycleId, [issueId]);
     setIsUpdating(false);
   };
 
-  type TDropdownOptions = { value: string; query: string; content: ReactNode }[];
-  const options: TDropdownOptions | undefined = projectCycleIds
-    ? (projectCycleIds
-        .map((cycleId) => {
-          const cycle = getCycleById(cycleId) || undefined;
-          if (!cycle) return undefined;
-          return {
-            value: cycle.id,
-            query: cycle.name,
-            content: (
-              <div className="flex items-center gap-1.5 truncate">
-                <span className="flex h-3.5 w-3.5 flex-shrink-0 items-center justify-center">
-                  <ContrastIcon />
-                </span>
-                <span className="flex-grow truncate">{cycle.name}</span>
-              </div>
-            ) as ReactNode,
-          };
-        })
-        .filter((cycle) => cycle !== undefined) as TDropdownOptions)
-    : undefined;
-
   return (
-    <div className="flex items-center gap-1">
+    <div className={cn("flex items-center gap-1 h-full", className)}>
-      <CustomSearchSelect
+      <CycleDropdown
-        value={issue?.cycle_id || undefined}
+        value={issue?.cycle_id ?? null}
-        onChange={(value: any) => handleIssueCycleChange(value)}
+        onChange={handleIssueCycleChange}
-        options={options}
+        projectId={projectId}
-        customButton={
-          <div>
-            <Tooltip position="left" tooltipContent={`${issueCycle ? issueCycle?.name : "No cycle"}`}>
-              <button
-                type="button"
-                className={`flex w-full items-center rounded bg-custom-background-80 px-2.5 py-0.5 text-xs ${
-                  disableSelect ? "cursor-not-allowed" : ""
-                } max-w-[10rem]`}
-              >
-                <span
-                  className={`flex items-center gap-1.5 truncate ${
-                    issueCycle ? "text-custom-text-100" : "text-custom-text-200"
-                  }`}
-                >
-                  <span className="flex-shrink-0">{issueCycle && <ContrastIcon className="h-3.5 w-3.5" />}</span>
-                  <span className="truncate">{issueCycle ? issueCycle?.name : "No cycle"}</span>
-                </span>
-              </button>
-            </Tooltip>
-          </div>
-        }
-        noChevron
         disabled={disableSelect}
+        buttonVariant="transparent-with-text"
+        className="w-full group"
+        buttonContainerClassName="w-full text-left"
+        buttonClassName={`text-sm ${issue?.cycle_id ? "" : "text-custom-text-400"}`}
+        placeholder="No cycle"
+        hideIcon
+        dropdownArrow
+        dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
       />
       {isUpdating && <Spinner className="h-4 w-4" />}
     </div>

web/components/issues/issue-detail/module-select.tsx

@@ -1,14 +1,18 @@
-import React, { ReactNode, useState } from "react";
+import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
-import useSWR from "swr";
 // hooks
-import { useModule, useIssueDetail } from "hooks/store";
+import { useIssueDetail } from "hooks/store";
+// components
+import { ModuleDropdown } from "components/dropdowns";
 // ui
-import { CustomSearchSelect, DiceIcon, Spinner, Tooltip } from "@plane/ui";
+import { Spinner } from "@plane/ui";
+// helpers
+import { cn } from "helpers/common.helper";
 // types
 import type { TIssueOperations } from "./root";
 
 type TIssueModuleSelect = {
+  className?: string;
   workspaceSlug: string;
   projectId: string;
   issueId: string;
@@ -17,58 +21,42 @@ type TIssueModuleSelect = {
 };
 
 export const IssueModuleSelect: React.FC<TIssueModuleSelect> = observer((props) => {
-  const { workspaceSlug, projectId, issueId, issueOperations, disabled = false } = props;
+  const { className = "", workspaceSlug, projectId, issueId, issueOperations, disabled = false } = props;
-  // hooks
+  // states
-  const { getModuleById, projectModuleIds, fetchModules } = useModule();
+  const [isUpdating, setIsUpdating] = useState(false);
+  // store hooks
   const {
     issue: { getIssueById },
   } = useIssueDetail();
-  // state
+  // derived values
-  const [isUpdating, setIsUpdating] = useState(false);
-
-  useSWR(workspaceSlug && projectId ? `PROJECT_${projectId}_ISSUE_${issueId}_MODULES` : null, async () => {
-    if (workspaceSlug && projectId) await fetchModules(workspaceSlug, projectId);
-  });
-
   const issue = getIssueById(issueId);
-  const issueModule = (issue && issue.module_id && getModuleById(issue.module_id)) || undefined;
   const disableSelect = disabled || isUpdating;
 
-  const handleIssueModuleChange = async (moduleId: string) => {
+  const handleIssueModuleChange = async (moduleId: string | null) => {
-    if (!moduleId) return;
+    if (!issue || issue.module_id === moduleId) return;
     setIsUpdating(true);
-    if (issue && issue.module_id === moduleId)
+    if (moduleId) await issueOperations.addIssueToModule(workspaceSlug, projectId, moduleId, [issueId]);
-      await issueOperations.removeIssueFromModule(workspaceSlug, projectId, moduleId, issueId);
+    else await issueOperations.removeIssueFromModule(workspaceSlug, projectId, issue.module_id ?? "", issueId);
-    else await issueOperations.addIssueToModule(workspaceSlug, projectId, moduleId, [issueId]);
     setIsUpdating(false);
   };
 
-  type TDropdownOptions = { value: string; query: string; content: ReactNode }[];
-  const options: TDropdownOptions | undefined = projectModuleIds
-    ? (projectModuleIds
-        .map((moduleId) => {
-          const _module = getModuleById(moduleId);
-          if (!_module) return undefined;
-
-          return {
-            value: _module.id,
-            query: _module.name,
-            content: (
-              <div className="flex items-center gap-1.5 truncate">
-                <span className="flex h-3.5 w-3.5 flex-shrink-0 items-center justify-center">
-                  <DiceIcon />
-                </span>
-                <span className="flex-grow truncate">{_module.name}</span>
-              </div>
-            ) as ReactNode,
-          };
-        })
-        .filter((_module) => _module !== undefined) as TDropdownOptions)
-    : undefined;
-
   return (
-    <div className="flex items-center gap-1">
+    <div className={cn("flex items-center gap-1 h-full", className)}>
-      <CustomSearchSelect
+      <ModuleDropdown
+        value={issue?.module_id ?? null}
+        onChange={handleIssueModuleChange}
+        buttonVariant="transparent-with-text"
+        projectId={projectId}
+        disabled={disableSelect}
+        className="w-full group"
+        buttonContainerClassName="w-full text-left"
+        buttonClassName={`text-sm ${issue?.module_id ? "" : "text-custom-text-400"}`}
+        placeholder="No module"
+        hideIcon
+        dropdownArrow
+        dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
+      />
+      {/* <CustomSearchSelect
         value={issue?.module_id}
         onChange={(value: any) => handleIssueModuleChange(value)}
         options={options}
@@ -95,7 +83,7 @@ export const IssueModuleSelect: React.FC<TIssueModuleSelect> = observer((props)
         }
         noChevron
         disabled={disableSelect}
-      />
+      /> */}
       {isUpdating && <Spinner className="h-4 w-4" />}
     </div>
   );

web/components/issues/issue-detail/parent-select.tsx

@@ -1,86 +1,103 @@
-import React, { useState } from "react";
+import React from "react";
+import Link from "next/link";
 import { observer } from "mobx-react-lite";
-import { X } from "lucide-react";
+import { Pencil, X } from "lucide-react";
 // hooks
 import { useIssueDetail, useProject } from "hooks/store";
-import { Spinner } from "@plane/ui";
 // components
 import { ParentIssuesListModal } from "components/issues";
+// ui
+import { Tooltip } from "@plane/ui";
+// helpers
+import { cn } from "helpers/common.helper";
+// types
 import { TIssueOperations } from "./root";
 
 type TIssueParentSelect = {
-  workspaceSlug: string;
+  className?: string;
-  projectId: string;
+  disabled?: boolean;
   issueId: string;
   issueOperations: TIssueOperations;
-
+  projectId: string;
-  disabled?: boolean;
+  workspaceSlug: string;
 };
 
-export const IssueParentSelect: React.FC<TIssueParentSelect> = observer(
+export const IssueParentSelect: React.FC<TIssueParentSelect> = observer((props) => {
-  ({ workspaceSlug, projectId, issueId, issueOperations, disabled = false }) => {
+  const { className = "", disabled = false, issueId, issueOperations, projectId, workspaceSlug } = props;
-    // hooks
+  // store hooks
-    const { getProjectById } = useProject();
+  const { getProjectById } = useProject();
-    const {
+  const {
-      issue: { getIssueById },
+    issue: { getIssueById },
-    } = useIssueDetail();
+  } = useIssueDetail();
-    // state
+  const { isParentIssueModalOpen, toggleParentIssueModal } = useIssueDetail();
-    const { isParentIssueModalOpen, toggleParentIssueModal } = useIssueDetail();
+  // derived values
-    const [updating, setUpdating] = useState(false);
+  const issue = getIssueById(issueId);
+  const parentIssue = issue?.parent_id ? getIssueById(issue.parent_id) : undefined;
+  const parentIssueProjectDetails =
+    parentIssue && parentIssue.project_id ? getProjectById(parentIssue.project_id) : undefined;
 
-    const issue = getIssueById(issueId);
+  const handleParentIssue = async (_issueId: string | null = null) => {
+    try {
+      await issueOperations.update(workspaceSlug, projectId, issueId, { parent_id: _issueId });
+      await issueOperations.fetch(workspaceSlug, projectId, issueId);
+      toggleParentIssueModal(false);
+    } catch (error) {
+      console.error("something went wrong while fetching the issue");
+    }
+  };
 
-    const parentIssue = issue?.parent_id ? getIssueById(issue.parent_id) : undefined;
+  if (!issue) return <></>;
-    const parentIssueProjectDetails =
-      parentIssue && parentIssue.project_id ? getProjectById(parentIssue.project_id) : undefined;
 
-    const handleParentIssue = async (_issueId: string | null = null) => {
+  return (
-      setUpdating(true);
+    <>
-      try {
+      <ParentIssuesListModal
-        await issueOperations.update(workspaceSlug, projectId, issueId, { parent_id: _issueId });
+        projectId={projectId}
-        await issueOperations.fetch(workspaceSlug, projectId, issueId);
+        issueId={issueId}
-        toggleParentIssueModal(false);
+        isOpen={isParentIssueModalOpen}
-        setUpdating(false);
+        handleClose={() => toggleParentIssueModal(false)}
-      } catch (error) {
+        onChange={(issue: any) => handleParentIssue(issue?.id)}
-        console.error("something went wrong while fetching the issue");
+      />
-      }
+      <button
-    };
+        type="button"
+        className={cn(
+          "group flex items-center justify-between gap-2 px-2 py-0.5 rounded outline-none",
+          {
+            "cursor-not-allowed": disabled,
+            "hover:bg-custom-background-80": !disabled,
+          },
+          className
+        )}
+        onClick={() => toggleParentIssueModal(true)}
+        disabled={disabled}
+      >
+        {issue.parent_id && parentIssue ? (
+          <div className="flex items-center gap-1 bg-green-500/20 text-green-700 rounded px-1.5 py-1">
+            <Link
+              href={`/${workspaceSlug}/projects/${projectId}/issues/${parentIssue?.id}`}
+              className="text-xs font-medium"
+            >
+              {parentIssueProjectDetails?.identifier}-{parentIssue.sequence_id}
+            </Link>
 
-    if (!issue) return <></>;
+            {!disabled && (
-
+              <Tooltip tooltipContent="Remove">
-    return (
+                <span
-      <div className="relative flex items-center gap-2">
+                  onClick={(e) => {
-        <ParentIssuesListModal
+                    e.preventDefault();
-          projectId={projectId}
+                    e.stopPropagation();
-          issueId={issueId}
+                    handleParentIssue(null);
-          isOpen={isParentIssueModalOpen}
+                  }}
-          handleClose={() => toggleParentIssueModal(false)}
+                >
-          onChange={(issue: any) => handleParentIssue(issue?.id)}
+                  <X className="h-2.5 w-2.5 text-custom-text-300 hover:text-red-500" />
-        />
+                </span>
-
+              </Tooltip>
-        <button
-          className={`flex items-center gap-2 rounded bg-custom-background-80 px-2.5 py-0.5 text-xs w-max max-w-max" ${
-            disabled ? "cursor-not-allowed" : "cursor-pointer "
-          }`}
-          disabled={disabled}
-        >
-          <div onClick={() => toggleParentIssueModal(true)}>
-            {issue?.parent_id && parentIssue ? (
-              `${parentIssueProjectDetails?.identifier}-${parentIssue.sequence_id}`
-            ) : (
-              <span className="text-custom-text-200">Select issue</span>
             )}
           </div>
-
+        ) : (
-          {issue?.parent_id && parentIssue && !disabled && (
+          <span className="text-sm text-custom-text-400">Add parent issue</span>
-            <div onClick={() => handleParentIssue(null)}>
+        )}
-              <X className="h-2.5 w-2.5" />
+        {!disabled && <Pencil className="h-4 w-4 flex-shrink-0 hidden group-hover:inline" />}
-            </div>
+      </button>
-          )}
+    </>
-        </button>
+  );
-
+});
-        {updating && <Spinner className="h-4 w-4" />}
-      </div>
-    );
-  }
-);

web/components/issues/issue-detail/relation-select.tsx

@@ -1,42 +1,45 @@
-import React, { useState } from "react";
+import React from "react";
 import { observer } from "mobx-react-lite";
-import { X, CopyPlus } from "lucide-react";
+import { CircleDot, CopyPlus, Pencil, X, XCircle } from "lucide-react";
 // hooks
-import { useIssueDetail, useIssues, useProject, useUser } from "hooks/store";
+import { useIssueDetail, useIssues, useProject } from "hooks/store";
 import useToast from "hooks/use-toast";
 // components
 import { ExistingIssuesListModal } from "components/core";
-// icons
+// ui
-import { BlockerIcon, BlockedIcon, RelatedIcon } from "@plane/ui";
+import { RelatedIcon, Tooltip } from "@plane/ui";
+// helpers
+import { cn } from "helpers/common.helper";
 // types
 import { TIssueRelationTypes, ISearchIssueResponse } from "@plane/types";
 
-export type TRelationObject = { name: string; icon: (size: number) => any; className: string };
+export type TRelationObject = { className: string; icon: (size: number) => React.ReactElement; placeholder: string };
 
 export const issueRelationObject: Record<TIssueRelationTypes, TRelationObject> = {
+  relates_to: {
+    className: "bg-custom-background-80 text-custom-text-200",
+    icon: (size) => <RelatedIcon height={size} width={size} />,
+    placeholder: "Add related issues",
+  },
   blocking: {
-    name: "Blocking",
+    className: "bg-yellow-500/20 text-yellow-700",
-    icon: (size: number = 16) => <BlockerIcon height={size} width={size} />,
+    icon: (size) => <XCircle size={size} />,
-    className: "text-yellow-500 duration-300 hover:border-yellow-500/20 hover:bg-yellow-500/20",
+    placeholder: "None",
   },
   blocked_by: {
-    name: "Blocked by",
+    className: "bg-red-500/20 text-red-700",
-    icon: (size: number = 16) => <BlockedIcon height={size} width={size} />,
+    icon: (size) => <CircleDot size={size} />,
-    className: "border-custom-border-200 text-red-500 hover:border-red-500/20 hover:bg-red-500/20",
+    placeholder: "None",
   },
   duplicate: {
-    name: "Duplicate",
+    className: "bg-custom-background-80 text-custom-text-200",
-    icon: (size: number = 16) => <CopyPlus height={size} width={size} />,
+    icon: (size) => <CopyPlus size={size} />,
-    className: "border-custom-border-200",
+    placeholder: "None",
-  },
-  relates_to: {
-    name: "Relates to",
-    icon: (size: number = 16) => <RelatedIcon height={size} width={size} />,
-    className: "border-custom-border-200",
   },
 };
 
 type TIssueRelationSelect = {
+  className?: string;
   workspaceSlug: string;
   projectId: string;
   issueId: string;
@@ -45,22 +48,21 @@ type TIssueRelationSelect = {
 };
 
 export const IssueRelationSelect: React.FC<TIssueRelationSelect> = observer((props) => {
-  const { workspaceSlug, projectId, issueId, relationKey, disabled = false } = props;
+  const { className = "", workspaceSlug, projectId, issueId, relationKey, disabled = false } = props;
   // hooks
-  const { currentUser } = useUser();
   const { getProjectById } = useProject();
   const {
     createRelation,
     removeRelation,
     relation: { getRelationByIssueIdRelationType },
+    isRelationModalOpen,
+    toggleRelationModal,
   } = useIssueDetail();
   const { issueMap } = useIssues();
-  // states
-  const [isRelationModalOpen, setIsRelationModalOpen] = useState(false);
   // toast alert
   const { setToastAlert } = useToast();
 
-  const relationIssueIds = getRelationByIssueIdRelationType(issueId as string, relationKey);
+  const relationIssueIds = getRelationByIssueIdRelationType(issueId, relationKey);
 
   const onSubmit = async (data: ISearchIssueResponse[]) => {
     if (data.length === 0) {
@@ -73,95 +75,84 @@ export const IssueRelationSelect: React.FC<TIssueRelationSelect> = observer((pro
     }
 
     await createRelation(
-      workspaceSlug as string,
+      workspaceSlug,
-      projectId as string,
+      projectId,
-      issueId as string,
+      issueId,
       relationKey,
       data.map((i) => i.id)
     );
 
-    setIsRelationModalOpen(false);
+    toggleRelationModal(null);
   };
 
+  if (!relationIssueIds) return null;
+
   return (
     <>
       <ExistingIssuesListModal
-        isOpen={isRelationModalOpen}
+        isOpen={isRelationModalOpen === relationKey}
-        handleClose={() => setIsRelationModalOpen(false)}
+        handleClose={() => toggleRelationModal(null)}
         searchParams={{ issue_relation: true, issue_id: issueId }}
         handleOnSubmit={onSubmit}
         workspaceLevelToggle
       />
+      <button
+        type="button"
+        className={cn(
+          "group flex items-center justify-between gap-2 px-2 py-0.5 rounded outline-none",
+          {
+            "cursor-not-allowed": disabled,
+            "hover:bg-custom-background-80": !disabled,
+          },
+          className
+        )}
+        onClick={() => toggleRelationModal(relationKey)}
+        disabled={disabled}
+      >
+        {relationIssueIds.length > 0 ? (
+          <div className="flex items-center gap-2 flex-wrap">
+            {relationIssueIds.map((relationIssueId) => {
+              const currentIssue = issueMap[relationIssueId];
+              if (!currentIssue) return;
 
-      <div className="flex flex-wrap items-start py-2">
+              const projectDetails = getProjectById(currentIssue.project_id);
-        <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
-          {relationKey && issueRelationObject[relationKey] && (
-            <>
-              {issueRelationObject[relationKey].icon(16)}
-              <p>{issueRelationObject[relationKey].name}</p>
-            </>
-          )}
-        </div>
 
-        <div className="space-y-1 sm:basis-1/2">
+              return (
-          <div className="flex flex-wrap gap-1">
+                <div
-            {relationIssueIds && relationIssueIds.length > 0
+                  key={relationIssueId}
-              ? relationIssueIds.map((relationIssueId: any) => {
+                  className={`group flex items-center gap-1 rounded px-1.5 py-1 ${issueRelationObject[relationKey].className}`}
-                  const currentIssue = issueMap[relationIssueId];
+                >
-                  if (!currentIssue) return;
+                  <a
-
+                    href={`/${workspaceSlug}/projects/${projectDetails?.id}/issues/${currentIssue.id}`}
-                  const projectDetails = getProjectById(currentIssue.project_id);
+                    target="_blank"
-
+                    rel="noopener noreferrer"
-                  return (
+                    className="text-xs font-medium"
-                    <div
+                    onClick={(e) => e.stopPropagation()}
-                      key={relationIssueId}
+                  >
-                      className={`group flex cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-200 px-1.5 py-0.5 text-xs duration-300 ${issueRelationObject[relationKey].className}`}
+                    {`${projectDetails?.identifier}-${currentIssue?.sequence_id}`}
-                    >
+                  </a>
-                      <a
+                  {!disabled && (
-                        href={`/${workspaceSlug}/projects/${projectDetails?.id}/issues/${relationIssueId}`}
+                    <Tooltip tooltipContent="Remove">
-                        target="_blank"
+                      <span
-                        rel="noopener noreferrer"
+                        onClick={(e) => {
-                        className="flex items-center gap-1"
+                          e.preventDefault();
+                          e.stopPropagation();
+                          removeRelation(workspaceSlug, projectId, issueId, relationKey, relationIssueId);
+                        }}
                       >
-                        {issueRelationObject[relationKey].icon(10)}
+                        <X className="h-2.5 w-2.5 text-custom-text-300 hover:text-red-500" />
-                        {`${projectDetails?.identifier}-${currentIssue?.sequence_id}`}
+                      </span>
-                      </a>
+                    </Tooltip>
-                      {!disabled && (
+                  )}
-                        <button
+                </div>
-                          type="button"
+              );
-                          className="opacity-0 duration-300 group-hover:opacity-100"
+            })}
-                          onClick={() => {
-                            if (!currentUser) return;
-                            removeRelation(
-                              workspaceSlug as string,
-                              projectId as string,
-                              issueId,
-                              relationKey,
-                              relationIssueId
-                            );
-                          }}
-                        >
-                          <X className="h-2 w-2" />
-                        </button>
-                      )}
-                    </div>
-                  );
-                })
-              : null}
           </div>
-
+        ) : (
-          <button
+          <span className="text-sm text-custom-text-400">{issueRelationObject[relationKey].placeholder}</span>
-            type="button"
+        )}
-            className={`rounded bg-custom-background-80 px-2.5 py-0.5 text-xs text-custom-text-200 ${
+        {!disabled && <Pencil className="h-4 w-4 flex-shrink-0 hidden group-hover:inline" />}
-              disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-80"
+      </button>
-            }`}
-            onClick={() => setIsRelationModalOpen(true)}
-            disabled={disabled}
-          >
-            Select issues
-          </button>
-        </div>
-      </div>
     </>
   );
 });

web/components/issues/issue-detail/sidebar.tsx

@@ -1,7 +1,19 @@
 import React, { useState } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
-import { CalendarDays, LinkIcon, Signal, Tag, Trash2, Triangle, LayoutPanelTop } from "lucide-react";
+import {
+  LinkIcon,
+  Signal,
+  Tag,
+  Trash2,
+  Triangle,
+  LayoutPanelTop,
+  XCircle,
+  CircleDot,
+  CopyPlus,
+  CalendarClock,
+  CalendarCheck2,
+} from "lucide-react";
 // hooks
 import { useEstimate, useIssueDetail, useProject, useProjectState, useUser } from "hooks/store";
 import useToast from "hooks/use-toast";
@@ -16,12 +28,17 @@ import {
   IssueLabel,
 } from "components/issues";
 import { IssueSubscription } from "./subscription";
-import { EstimateDropdown, PriorityDropdown, ProjectMemberDropdown, StateDropdown } from "components/dropdowns";
+import {
-// ui
+  DateDropdown,
-import { CustomDatePicker } from "components/ui";
+  EstimateDropdown,
+  PriorityDropdown,
+  ProjectMemberDropdown,
+  StateDropdown,
+} from "components/dropdowns";
 // icons
-import { ContrastIcon, DiceIcon, DoubleCircleIcon, StateGroupIcon, UserGroupIcon } from "@plane/ui";
+import { ContrastIcon, DiceIcon, DoubleCircleIcon, RelatedIcon, StateGroupIcon, UserGroupIcon } from "@plane/ui";
 // helpers
+import { renderFormattedPayloadDate } from "helpers/date-time.helper";
 import { copyTextToClipboard } from "helpers/string.helper";
 // types
 import type { TIssueOperations } from "./root";
@@ -96,23 +113,6 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
 
   const projectDetails = issue ? getProjectById(issue.project_id) : null;
 
-  const showFirstSection =
-    fieldsToShow.includes("all") ||
-    fieldsToShow.includes("state") ||
-    fieldsToShow.includes("assignee") ||
-    fieldsToShow.includes("priority") ||
-    fieldsToShow.includes("estimate");
-
-  const showSecondSection =
-    fieldsToShow.includes("all") ||
-    fieldsToShow.includes("parent") ||
-    fieldsToShow.includes("blocker") ||
-    fieldsToShow.includes("blocked") ||
-    fieldsToShow.includes("dueDate");
-
-  const showThirdSection =
-    fieldsToShow.includes("all") || fieldsToShow.includes("cycle") || fieldsToShow.includes("module");
-
   const minDate = issue.start_date ? new Date(issue.start_date) : null;
   minDate?.setDate(minDate.getDate());
 
@@ -180,248 +180,279 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
         </div>
 
         <div className="h-full w-full overflow-y-auto px-5">
-          <div className={`divide-y-2 divide-custom-border-200 ${!is_editable ? "opacity-60" : ""}`}>
+          <h5 className="text-sm font-medium mt-6">Properties</h5>
-            {showFirstSection && (
+          {/* TODO: render properties using a common component */}
-              <div className="py-1">
+          <div className={`mt-3 space-y-2 ${!is_editable ? "opacity-60" : ""}`}>
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("state")) && (
+            {(fieldsToShow.includes("all") || fieldsToShow.includes("state")) && (
-                  <div className="flex flex-wrap items-center py-2">
+              <div className="flex items-center gap-2 h-8">
-                    <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:w-1/2">
+                <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
-                      <DoubleCircleIcon className="h-4 w-4 flex-shrink-0" />
+                  <DoubleCircleIcon className="h-4 w-4 flex-shrink-0" />
-                      <p>State</p>
+                  <span>State</span>
-                    </div>
+                </div>
-
+                <StateDropdown
-                    <div className="h-5 sm:w-1/2">
+                  value={issue?.state_id ?? undefined}
-                      <StateDropdown
+                  onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { state_id: val })}
-                        value={issue?.state_id ?? undefined}
+                  projectId={projectId?.toString() ?? ""}
-                        onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { state_id: val })}
+                  disabled={!is_editable}
-                        projectId={projectId?.toString() ?? ""}
+                  buttonVariant="transparent-with-text"
-                        disabled={!is_editable}
+                  className="w-3/5 flex-grow group"
-                        buttonVariant="background-with-text"
+                  buttonContainerClassName="w-full text-left"
-                      />
+                  buttonClassName="text-sm"
-                    </div>
+                  dropdownArrow
-                  </div>
+                  dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
-                )}
+                />
-
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("assignee")) && (
-                  <div className="flex flex-wrap items-center py-2">
-                    <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:w-1/2">
-                      <UserGroupIcon className="h-4 w-4 flex-shrink-0" />
-                      <p>Assignees</p>
-                    </div>
-
-                    <div className="h-5 sm:w-1/2">
-                      <ProjectMemberDropdown
-                        value={issue?.assignee_ids ?? undefined}
-                        onChange={(val) =>
-                          issueOperations.update(workspaceSlug, projectId, issueId, { assignee_ids: val })
-                        }
-                        disabled={!is_editable}
-                        projectId={projectId?.toString() ?? ""}
-                        placeholder="Assignees"
-                        multiple
-                        buttonVariant={
-                          issue?.assignee_ids?.length > 0 ? "transparent-without-text" : "background-with-text"
-                        }
-                        buttonClassName={issue?.assignee_ids?.length > 0 ? "hover:bg-transparent px-0" : ""}
-                      />
-                    </div>
-                  </div>
-                )}
-
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("priority")) && (
-                  <div className="flex flex-wrap items-center py-2">
-                    <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:w-1/2">
-                      <Signal className="h-4 w-4 flex-shrink-0" />
-                      <p>Priority</p>
-                    </div>
-
-                    <div className="h-5 sm:w-1/2">
-                      <PriorityDropdown
-                        value={issue?.priority || undefined}
-                        onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { priority: val })}
-                        disabled={!is_editable}
-                        buttonVariant="background-with-text"
-                      />
-                    </div>
-                  </div>
-                )}
-
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("estimate")) &&
-                  areEstimatesEnabledForCurrentProject && (
-                    <div className="flex flex-wrap items-center py-2">
-                      <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:w-1/2">
-                        <Triangle className="h-4 w-4 flex-shrink-0 " />
-                        <p>Estimate</p>
-                      </div>
-
-                      <div className="h-5 sm:w-1/2">
-                        <EstimateDropdown
-                          value={issue?.estimate_point || null}
-                          onChange={(val) =>
-                            issueOperations.update(workspaceSlug, projectId, issueId, { estimate_point: val })
-                          }
-                          projectId={projectId}
-                          disabled={!is_editable}
-                          buttonVariant="background-with-text"
-                        />
-                      </div>
-                    </div>
-                  )}
               </div>
             )}
 
-            {showSecondSection && (
+            {(fieldsToShow.includes("all") || fieldsToShow.includes("assignee")) && (
-              <div className="py-1">
+              <div className="flex items-center gap-2 h-8">
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("parent")) && (
+                <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
-                  <div className="flex flex-wrap items-center py-2">
+                  <UserGroupIcon className="h-4 w-4 flex-shrink-0" />
-                    <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
+                  <span>Assignees</span>
-                      <LayoutPanelTop className="h-4 w-4 flex-shrink-0" />
+                </div>
-                      <p>Parent</p>
+                <ProjectMemberDropdown
-                    </div>
+                  value={issue?.assignee_ids ?? undefined}
-                    <div className="sm:basis-1/2">
+                  onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { assignee_ids: val })}
-                      <IssueParentSelect
+                  disabled={!is_editable}
-                        workspaceSlug={workspaceSlug}
+                  projectId={projectId?.toString() ?? ""}
-                        projectId={projectId}
+                  placeholder="Add assignees"
-                        issueId={issueId}
+                  multiple
-                        issueOperations={issueOperations}
+                  buttonVariant={issue?.assignee_ids?.length > 0 ? "transparent-without-text" : "transparent-with-text"}
-                        disabled={!is_editable}
+                  className="w-3/5 flex-grow group"
-                      />
+                  buttonContainerClassName="w-full text-left"
-                    </div>
+                  buttonClassName={`text-sm justify-between ${
-                  </div>
+                    issue?.assignee_ids.length > 0 ? "" : "text-custom-text-400"
-                )}
+                  }`}
-
+                  hideIcon={issue.assignee_ids?.length === 0}
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("blocker")) && (
+                  dropdownArrow
-                  <IssueRelationSelect
+                  dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
-                    workspaceSlug={workspaceSlug}
+                />
-                    projectId={projectId}
-                    issueId={issueId}
-                    relationKey="blocking"
-                    disabled={!is_editable}
-                  />
-                )}
-
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("blocked")) && (
-                  <IssueRelationSelect
-                    workspaceSlug={workspaceSlug}
-                    projectId={projectId}
-                    issueId={issueId}
-                    relationKey="blocked_by"
-                    disabled={!is_editable}
-                  />
-                )}
-
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("duplicate")) && (
-                  <IssueRelationSelect
-                    workspaceSlug={workspaceSlug}
-                    projectId={projectId}
-                    issueId={issueId}
-                    relationKey="duplicate"
-                    disabled={!is_editable}
-                  />
-                )}
-
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("relates_to")) && (
-                  <IssueRelationSelect
-                    workspaceSlug={workspaceSlug}
-                    projectId={projectId}
-                    issueId={issueId}
-                    relationKey="relates_to"
-                    disabled={!is_editable}
-                  />
-                )}
-
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("startDate")) && (
-                  <div className="flex flex-wrap items-center py-2">
-                    <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
-                      <CalendarDays className="h-4 w-4 flex-shrink-0" />
-                      <p>Start date</p>
-                    </div>
-                    <div className="sm:basis-1/2">
-                      <CustomDatePicker
-                        placeholder="Start date"
-                        value={issue.start_date || undefined}
-                        onChange={(val) =>
-                          issueOperations.update(workspaceSlug, projectId, issueId, { start_date: val })
-                        }
-                        className="border-none bg-custom-background-80"
-                        maxDate={maxDate ?? undefined}
-                        disabled={!is_editable}
-                      />
-                    </div>
-                  </div>
-                )}
-
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("dueDate")) && (
-                  <div className="flex flex-wrap items-center py-2">
-                    <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
-                      <CalendarDays className="h-4 w-4 flex-shrink-0" />
-                      <p>Due date</p>
-                    </div>
-                    <div className="sm:basis-1/2">
-                      <CustomDatePicker
-                        placeholder="Due date"
-                        value={issue.target_date || undefined}
-                        onChange={(val) =>
-                          issueOperations.update(workspaceSlug, projectId, issueId, { target_date: val })
-                        }
-                        className="border-none bg-custom-background-80"
-                        minDate={minDate ?? undefined}
-                        disabled={!is_editable}
-                      />
-                    </div>
-                  </div>
-                )}
               </div>
             )}
 
-            {showThirdSection && (
+            {(fieldsToShow.includes("all") || fieldsToShow.includes("priority")) && (
-              <div className="py-1">
+              <div className="flex items-center gap-2 h-8">
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("cycle")) && projectDetails?.cycle_view && (
+                <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
-                  <div className="flex flex-wrap items-center py-2">
+                  <Signal className="h-4 w-4 flex-shrink-0" />
-                    <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:w-1/2">
+                  <span>Priority</span>
-                      <ContrastIcon className="h-4 w-4 flex-shrink-0" />
+                </div>
-                      <p>Cycle</p>
+                <PriorityDropdown
-                    </div>
+                  value={issue?.priority || undefined}
-                    <div className="space-y-1">
+                  onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { priority: val })}
-                      <IssueCycleSelect
+                  disabled={!is_editable}
-                        workspaceSlug={workspaceSlug}
+                  buttonVariant="border-with-text"
-                        projectId={projectId}
+                  className="w-3/5 flex-grow rounded px-2 hover:bg-custom-background-80"
-                        issueId={issueId}
+                  buttonContainerClassName="w-full text-left"
-                        issueOperations={issueOperations}
+                  buttonClassName="w-min h-auto whitespace-nowrap"
-                        disabled={!is_editable}
+                />
-                      />
+              </div>
-                    </div>
+            )}
-                  </div>
-                )}
 
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("module")) && projectDetails?.module_view && (
+            {(fieldsToShow.includes("all") || fieldsToShow.includes("startDate")) && (
-                  <div className="flex flex-wrap items-center py-2">
+              <div className="flex items-center gap-2 h-8">
-                    <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:w-1/2">
+                <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
-                      <DiceIcon className="h-4 w-4 flex-shrink-0" />
+                  <CalendarClock className="h-4 w-4 flex-shrink-0" />
-                      <p>Module</p>
+                  <span>Start date</span>
-                    </div>
+                </div>
-                    <div className="space-y-1">
+                <DateDropdown
-                      <IssueModuleSelect
+                  placeholder="Add start date"
-                        workspaceSlug={workspaceSlug}
+                  value={issue.start_date}
-                        projectId={projectId}
+                  onChange={(val) =>
-                        issueId={issueId}
+                    issueOperations.update(workspaceSlug, projectId, issueId, {
-                        issueOperations={issueOperations}
+                      start_date: val ? renderFormattedPayloadDate(val) : null,
-                        disabled={!is_editable}
+                    })
-                      />
+                  }
-                    </div>
+                  maxDate={maxDate ?? undefined}
+                  disabled={!is_editable}
+                  buttonVariant="transparent-with-text"
+                  className="w-3/5 flex-grow group"
+                  buttonContainerClassName="w-full text-left"
+                  buttonClassName={`text-sm ${issue?.start_date ? "" : "text-custom-text-400"}`}
+                  hideIcon
+                  clearIconClassName="h-3 w-3 hidden group-hover:inline"
+                />
+              </div>
+            )}
+
+            {(fieldsToShow.includes("all") || fieldsToShow.includes("dueDate")) && (
+              <div className="flex items-center gap-2 h-8">
+                <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
+                  <CalendarCheck2 className="h-4 w-4 flex-shrink-0" />
+                  <span>Due date</span>
+                </div>
+                <DateDropdown
+                  placeholder="Add due date"
+                  value={issue.target_date}
+                  onChange={(val) =>
+                    issueOperations.update(workspaceSlug, projectId, issueId, {
+                      target_date: val ? renderFormattedPayloadDate(val) : null,
+                    })
+                  }
+                  minDate={minDate ?? undefined}
+                  disabled={!is_editable}
+                  buttonVariant="transparent-with-text"
+                  className="w-3/5 flex-grow group"
+                  buttonContainerClassName="w-full text-left"
+                  buttonClassName={`text-sm ${issue?.target_date ? "" : "text-custom-text-400"}`}
+                  hideIcon
+                  clearIconClassName="h-3 w-3 hidden group-hover:inline"
+                />
+              </div>
+            )}
+
+            {(fieldsToShow.includes("all") || fieldsToShow.includes("estimate")) &&
+              areEstimatesEnabledForCurrentProject && (
+                <div className="flex items-center gap-2 h-8">
+                  <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
+                    <Triangle className="h-4 w-4 flex-shrink-0" />
+                    <span>Estimate</span>
                   </div>
-                )}
+                  <EstimateDropdown
+                    value={issue?.estimate_point !== null ? issue.estimate_point : null}
+                    onChange={(val) =>
+                      issueOperations.update(workspaceSlug, projectId, issueId, { estimate_point: val })
+                    }
+                    projectId={projectId}
+                    disabled={!is_editable}
+                    buttonVariant="transparent-with-text"
+                    className="w-3/5 flex-grow group"
+                    buttonContainerClassName="w-full text-left"
+                    buttonClassName={`text-sm ${issue?.estimate_point !== null ? "" : "text-custom-text-400"}`}
+                    placeholder="None"
+                    hideIcon
+                    dropdownArrow
+                    dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
+                  />
+                </div>
+              )}
+
+            {(fieldsToShow.includes("all") || fieldsToShow.includes("module")) && projectDetails?.module_view && (
+              <div className="flex items-center gap-2 h-8">
+                <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
+                  <DiceIcon className="h-4 w-4 flex-shrink-0" />
+                  <span>Module</span>
+                </div>
+                <IssueModuleSelect
+                  className="w-3/5 flex-grow"
+                  workspaceSlug={workspaceSlug}
+                  projectId={projectId}
+                  issueId={issueId}
+                  issueOperations={issueOperations}
+                  disabled={!is_editable}
+                />
+              </div>
+            )}
+
+            {(fieldsToShow.includes("all") || fieldsToShow.includes("cycle")) && projectDetails?.cycle_view && (
+              <div className="flex items-center gap-2 h-8">
+                <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
+                  <ContrastIcon className="h-4 w-4 flex-shrink-0" />
+                  <span>Cycle</span>
+                </div>
+                <IssueCycleSelect
+                  className="w-3/5 flex-grow"
+                  workspaceSlug={workspaceSlug}
+                  projectId={projectId}
+                  issueId={issueId}
+                  issueOperations={issueOperations}
+                  disabled={!is_editable}
+                />
+              </div>
+            )}
+
+            {(fieldsToShow.includes("all") || fieldsToShow.includes("parent")) && (
+              <div className="flex items-center gap-2 h-8">
+                <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
+                  <LayoutPanelTop className="h-4 w-4 flex-shrink-0" />
+                  <span>Parent</span>
+                </div>
+                <IssueParentSelect
+                  className="w-3/5 flex-grow h-full"
+                  workspaceSlug={workspaceSlug}
+                  projectId={projectId}
+                  issueId={issueId}
+                  issueOperations={issueOperations}
+                  disabled={!is_editable}
+                />
+              </div>
+            )}
+
+            {(fieldsToShow.includes("all") || fieldsToShow.includes("relates_to")) && (
+              <div className="flex items-center gap-2 min-h-8">
+                <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
+                  <RelatedIcon className="h-4 w-4 flex-shrink-0" />
+                  <span>Relates to</span>
+                </div>
+                <IssueRelationSelect
+                  className="w-3/5 flex-grow min-h-8 h-full"
+                  workspaceSlug={workspaceSlug}
+                  projectId={projectId}
+                  issueId={issueId}
+                  relationKey="relates_to"
+                  disabled={!is_editable}
+                />
+              </div>
+            )}
+
+            {(fieldsToShow.includes("all") || fieldsToShow.includes("blocker")) && (
+              <div className="flex items-center gap-2 min-h-8">
+                <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
+                  <XCircle className="h-4 w-4 flex-shrink-0" />
+                  <span>Blocking</span>
+                </div>
+                <IssueRelationSelect
+                  className="w-3/5 flex-grow min-h-8 h-full"
+                  workspaceSlug={workspaceSlug}
+                  projectId={projectId}
+                  issueId={issueId}
+                  relationKey="blocking"
+                  disabled={!is_editable}
+                />
+              </div>
+            )}
+
+            {(fieldsToShow.includes("all") || fieldsToShow.includes("blocked")) && (
+              <div className="flex items-center gap-2 min-h-8">
+                <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
+                  <CircleDot className="h-4 w-4 flex-shrink-0" />
+                  <span>Blocked by</span>
+                </div>
+                <IssueRelationSelect
+                  className="w-3/5 flex-grow min-h-8 h-full"
+                  workspaceSlug={workspaceSlug}
+                  projectId={projectId}
+                  issueId={issueId}
+                  relationKey="blocked_by"
+                  disabled={!is_editable}
+                />
+              </div>
+            )}
+
+            {(fieldsToShow.includes("all") || fieldsToShow.includes("duplicate")) && (
+              <div className="flex items-center gap-2 min-h-8">
+                <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
+                  <CopyPlus className="h-4 w-4 flex-shrink-0" />
+                  <span>Duplicate of</span>
+                </div>
+                <IssueRelationSelect
+                  className="w-3/5 flex-grow min-h-8 h-full"
+                  workspaceSlug={workspaceSlug}
+                  projectId={projectId}
+                  issueId={issueId}
+                  relationKey="duplicate"
+                  disabled={!is_editable}
+                />
               </div>
             )}
           </div>
 
           {(fieldsToShow.includes("all") || fieldsToShow.includes("label")) && (
-            <div className={`flex flex-wrap items-start py-2 ${!is_editable ? "opacity-60" : ""}`}>
+            <div className="flex items-center gap-2 min-h-8 py-2">
-              <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:w-1/2">
+              <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
                 <Tag className="h-4 w-4 flex-shrink-0" />
-                <p>Label</p>
+                <span>Labels</span>
               </div>
-              <div className="space-y-1 sm:w-1/2">
+              <div className="w-3/5 flex-grow min-h-8 h-full">
                 <IssueLabel
                   workspaceSlug={workspaceSlug}
                   projectId={projectId}

web/components/issues/issue-layouts/properties/all-properties.tsx

@@ -63,6 +63,12 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
 
   const defaultLabelOptions = issue?.label_ids?.map((id) => labelMap[id]) || [];
 
+  const minDate = issue.start_date ? new Date(issue.start_date) : null;
+  minDate?.setDate(minDate.getDate());
+
+  const maxDate = issue.target_date ? new Date(issue.target_date) : null;
+  maxDate?.setDate(maxDate.getDate());
+
   return (
     <div className={className}>
       {/* basic properties */}
@@ -111,6 +117,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
             value={issue.start_date ?? null}
             onChange={handleStartDate}
             icon={<CalendarClock className="h-3 w-3 flex-shrink-0" />}
+            maxDate={maxDate ?? undefined}
             placeholder="Start date"
             buttonVariant={issue.start_date ? "border-with-text" : "border-without-text"}
             disabled={isReadOnly}
@@ -122,10 +129,10 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
       <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="due_date">
         <div className="h-5">
           <DateDropdown
-            minDate={issue.start_date ? new Date(issue.start_date) : undefined}
             value={issue?.target_date ?? null}
             onChange={handleTargetDate}
             icon={<CalendarCheck2 className="h-3 w-3 flex-shrink-0" />}
+            minDate={minDate ?? undefined}
             placeholder="Due date"
             buttonVariant={issue.target_date ? "border-with-text" : "border-without-text"}
             disabled={isReadOnly}

web/components/issues/peek-overview/properties.tsx

@@ -1,10 +1,20 @@
 import { FC } from "react";
 import { observer } from "mobx-react-lite";
-import { CalendarDays, Signal, Tag, Triangle, LayoutPanelTop } from "lucide-react";
+import {
+  Signal,
+  Tag,
+  Triangle,
+  LayoutPanelTop,
+  CircleDot,
+  CopyPlus,
+  XCircle,
+  CalendarClock,
+  CalendarCheck2,
+} from "lucide-react";
 // hooks
 import { useIssueDetail, useProject } from "hooks/store";
 // ui icons
-import { DiceIcon, DoubleCircleIcon, UserGroupIcon, ContrastIcon } from "@plane/ui";
+import { DiceIcon, DoubleCircleIcon, UserGroupIcon, ContrastIcon, RelatedIcon } from "@plane/ui";
 import {
   IssueLinkRoot,
   IssueCycleSelect,
@@ -12,10 +22,17 @@ import {
   IssueParentSelect,
   IssueLabel,
   TIssueOperations,
+  IssueRelationSelect,
 } from "components/issues";
-import { EstimateDropdown, PriorityDropdown, ProjectMemberDropdown, StateDropdown } from "components/dropdowns";
+import {
+  DateDropdown,
+  EstimateDropdown,
+  PriorityDropdown,
+  ProjectMemberDropdown,
+  StateDropdown,
+} from "components/dropdowns";
 // components
-import { CustomDatePicker } from "components/ui";
+import { renderFormattedPayloadDate } from "helpers/date-time.helper";
 
 interface IPeekOverviewProperties {
   workspaceSlug: string;
@@ -45,191 +62,272 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
   maxDate?.setDate(maxDate.getDate());
 
   return (
-    <>
+    <div className="mt-1">
-      <div className="flex flex-col">
+      <h6 className="text-sm font-medium">Properties</h6>
-        <div className={`flex w-full flex-col gap-5 py-5 ${disabled ? "opacity-60" : ""}`}>
+      {/* TODO: render properties using a common component */}
-          {/* state */}
+      <div className={`w-full space-y-2 mt-3 ${disabled ? "opacity-60" : ""}`}>
-          <div className="flex w-full items-center gap-2">
+        {/* state */}
-            <div className="flex w-40 flex-shrink-0 items-center gap-2 text-sm">
+        <div className="flex w-full items-center gap-3 h-8">
-              <DoubleCircleIcon className="h-4 w-4 flex-shrink-0" />
+          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
-              <p>State</p>
+            <DoubleCircleIcon className="h-4 w-4 flex-shrink-0" />
-            </div>
+            <span>State</span>
-            <div>
-              <StateDropdown
-                value={issue?.state_id ?? undefined}
-                onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { state_id: val })}
-                projectId={projectId?.toString() ?? ""}
-                disabled={disabled}
-                buttonVariant="background-with-text"
-              />
-            </div>
-          </div>
-
-          {/* assignee */}
-          <div className="flex w-full items-center gap-2">
-            <div className="flex w-40 flex-shrink-0 items-center gap-2 text-sm">
-              <UserGroupIcon className="h-4 w-4 flex-shrink-0" />
-              <p>Assignees</p>
-            </div>
-            <div className="h-5 sm:w-1/2">
-              <ProjectMemberDropdown
-                value={issue?.assignee_ids ?? undefined}
-                onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { assignee_ids: val })}
-                disabled={disabled}
-                projectId={projectId?.toString() ?? ""}
-                placeholder="Assignees"
-                multiple
-                buttonVariant={issue?.assignee_ids?.length > 0 ? "transparent-without-text" : "background-with-text"}
-                buttonClassName={issue?.assignee_ids?.length > 0 ? "hover:bg-transparent px-0" : ""}
-              />
-            </div>
-          </div>
-
-          {/* priority */}
-          <div className="flex w-full items-center gap-2">
-            <div className="flex w-40 flex-shrink-0 items-center gap-2 text-sm">
-              <Signal className="h-4 w-4 flex-shrink-0" />
-              <p>Priority</p>
-            </div>
-            <div className="h-5">
-              <PriorityDropdown
-                value={issue?.priority || undefined}
-                onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { priority: val })}
-                disabled={disabled}
-                buttonVariant="background-with-text"
-              />
-            </div>
-          </div>
-
-          {/* estimate */}
-          {isEstimateEnabled && (
-            <div className="flex w-full items-center gap-2">
-              <div className="flex w-40 flex-shrink-0 items-center gap-2 text-sm">
-                <Triangle className="h-4 w-4 flex-shrink-0 " />
-                <p>Estimate</p>
-              </div>
-              <div>
-                <EstimateDropdown
-                  value={issue?.estimate_point || null}
-                  onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { estimate_point: val })}
-                  projectId={projectId}
-                  disabled={disabled}
-                  buttonVariant="background-with-text"
-                />
-              </div>
-            </div>
-          )}
-
-          {/* start date */}
-          <div className="flex w-full items-center gap-2">
-            <div className="flex w-40 flex-shrink-0 items-center gap-2 text-sm">
-              <CalendarDays className="h-4 w-4 flex-shrink-0" />
-              <p>Start date</p>
-            </div>
-            <div>
-              <CustomDatePicker
-                placeholder="Start date"
-                value={issue.start_date || undefined}
-                onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { start_date: val })}
-                className="border-none bg-custom-background-80"
-                maxDate={maxDate ?? undefined}
-                disabled={disabled}
-              />
-            </div>
-          </div>
-
-          {/* due date */}
-          <div className="flex w-full items-center gap-2">
-            <div className="flex w-40 flex-shrink-0 items-center gap-2 text-sm">
-              <CalendarDays className="h-4 w-4 flex-shrink-0" />
-              <p>Due date</p>
-            </div>
-            <div>
-              <CustomDatePicker
-                placeholder="Due date"
-                value={issue.target_date || undefined}
-                onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { target_date: val })}
-                className="border-none bg-custom-background-80"
-                minDate={minDate ?? undefined}
-                disabled={disabled}
-              />
-            </div>
-          </div>
-
-          {/* parent */}
-          <div className="flex w-full items-center gap-2">
-            <div className="flex w-40 flex-shrink-0 items-center gap-2 text-sm">
-              <LayoutPanelTop className="h-4 w-4 flex-shrink-0" />
-              <p>Parent</p>
-            </div>
-            <div>
-              <IssueParentSelect
-                workspaceSlug={workspaceSlug}
-                projectId={projectId}
-                issueId={issueId}
-                issueOperations={issueOperations}
-                disabled={disabled}
-              />
-            </div>
           </div>
+          <StateDropdown
+            value={issue?.state_id ?? undefined}
+            onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { state_id: val })}
+            projectId={projectId}
+            disabled={disabled}
+            buttonVariant="transparent-with-text"
+            className="w-3/4 flex-grow group"
+            buttonContainerClassName="w-full text-left"
+            buttonClassName="text-sm"
+            dropdownArrow
+            dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
+          />
         </div>
 
-        <span className="border-t border-custom-border-200" />
+        {/* assignee */}
-
+        <div className="flex w-full items-center gap-3 h-8">
-        <div className={`flex w-full flex-col gap-5 py-5 ${disabled ? "opacity-60" : ""}`}>
+          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
-          {projectDetails?.cycle_view && (
+            <UserGroupIcon className="h-4 w-4 flex-shrink-0" />
-            <div className="flex w-full items-center gap-2">
+            <span>Assignees</span>
-              <div className="flex w-40 flex-shrink-0 items-center gap-2 text-sm">
-                <ContrastIcon className="h-4 w-4 flex-shrink-0" />
-                <p>Cycle</p>
-              </div>
-              <div>
-                <IssueCycleSelect
-                  workspaceSlug={workspaceSlug}
-                  projectId={projectId}
-                  issueId={issueId}
-                  issueOperations={issueOperations}
-                  disabled={disabled}
-                />
-              </div>
-            </div>
-          )}
-
-          {projectDetails?.module_view && (
-            <div className="flex w-full items-center gap-2">
-              <div className="flex w-40 flex-shrink-0 items-center gap-2 text-sm">
-                <DiceIcon className="h-4 w-4 flex-shrink-0" />
-                <p>Module</p>
-              </div>
-              <div>
-                <IssueModuleSelect
-                  workspaceSlug={workspaceSlug}
-                  projectId={projectId}
-                  issueId={issueId}
-                  issueOperations={issueOperations}
-                  disabled={disabled}
-                />
-              </div>
-            </div>
-          )}
-
-          <div className="flex w-full items-start gap-2">
-            <div className="flex w-40 flex-shrink-0 items-center gap-2 text-sm">
-              <Tag className="h-4 w-4 flex-shrink-0" />
-              <p>Label</p>
-            </div>
-            <div className="flex w-full flex-col gap-3">
-              <IssueLabel workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} disabled={disabled} />
-            </div>
           </div>
+          <ProjectMemberDropdown
+            value={issue?.assignee_ids ?? undefined}
+            onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { assignee_ids: val })}
+            disabled={disabled}
+            projectId={projectId}
+            placeholder="Add assignees"
+            multiple
+            buttonVariant={issue?.assignee_ids?.length > 0 ? "transparent-without-text" : "transparent-with-text"}
+            className="w-3/4 flex-grow group"
+            buttonContainerClassName="w-full text-left"
+            buttonClassName={`text-sm justify-between ${issue?.assignee_ids.length > 0 ? "" : "text-custom-text-400"}`}
+            hideIcon={issue.assignee_ids?.length === 0}
+            dropdownArrow
+            dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
+          />
         </div>
 
-        <span className="border-t border-custom-border-200" />
+        {/* priority */}
+        <div className="flex w-full items-center gap-3 h-8">
+          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
+            <Signal className="h-4 w-4 flex-shrink-0" />
+            <span>Priority</span>
+          </div>
+          <PriorityDropdown
+            value={issue?.priority}
+            onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { priority: val })}
+            disabled={disabled}
+            buttonVariant="border-with-text"
+            className="w-3/4 flex-grow rounded px-2 hover:bg-custom-background-80 group"
+            buttonContainerClassName="w-full text-left"
+            buttonClassName="w-min h-auto whitespace-nowrap"
+          />
+        </div>
 
-        <div className="w-full pt-3">
+        {/* start date */}
-          <IssueLinkRoot workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} disabled={disabled} />
+        <div className="flex w-full items-center gap-3 h-8">
+          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
+            <CalendarClock className="h-4 w-4 flex-shrink-0" />
+            <span>Start date</span>
+          </div>
+          <DateDropdown
+            value={issue.start_date}
+            onChange={(val) =>
+              issueOperations.update(workspaceSlug, projectId, issueId, {
+                start_date: val ? renderFormattedPayloadDate(val) : null,
+              })
+            }
+            placeholder="Add start date"
+            buttonVariant="transparent-with-text"
+            maxDate={maxDate ?? undefined}
+            disabled={disabled}
+            className="w-3/4 flex-grow group"
+            buttonContainerClassName="w-full text-left"
+            buttonClassName={`text-sm ${issue?.start_date ? "" : "text-custom-text-400"}`}
+            hideIcon
+            clearIconClassName="h-3 w-3 hidden group-hover:inline"
+          />
+        </div>
+
+        {/* due date */}
+        <div className="flex w-full items-center gap-3 h-8">
+          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
+            <CalendarCheck2 className="h-4 w-4 flex-shrink-0" />
+            <span>Due date</span>
+          </div>
+          <DateDropdown
+            value={issue.target_date}
+            onChange={(val) =>
+              issueOperations.update(workspaceSlug, projectId, issueId, {
+                target_date: val ? renderFormattedPayloadDate(val) : null,
+              })
+            }
+            placeholder="Add due date"
+            buttonVariant="transparent-with-text"
+            minDate={minDate ?? undefined}
+            disabled={disabled}
+            className="w-3/4 flex-grow group"
+            buttonContainerClassName="w-full text-left"
+            buttonClassName={`text-sm ${issue?.target_date ? "" : "text-custom-text-400"}`}
+            hideIcon
+            clearIconClassName="h-3 w-3 hidden group-hover:inline"
+          />
+        </div>
+
+        {/* estimate */}
+        {isEstimateEnabled && (
+          <div className="flex w-full items-center gap-3 h-8">
+            <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
+              <Triangle className="h-4 w-4 flex-shrink-0" />
+              <span>Estimate</span>
+            </div>
+            <EstimateDropdown
+              value={issue?.estimate_point !== null ? issue.estimate_point : null}
+              onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { estimate_point: val })}
+              projectId={projectId}
+              disabled={disabled}
+              buttonVariant="transparent-with-text"
+              className="w-3/4 flex-grow group"
+              buttonContainerClassName="w-full text-left"
+              buttonClassName={`text-sm ${issue?.estimate_point !== null ? "" : "text-custom-text-400"}`}
+              placeholder="None"
+              hideIcon
+              dropdownArrow
+              dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
+            />
+          </div>
+        )}
+
+        {projectDetails?.module_view && (
+          <div className="flex w-full items-center gap-3 h-8">
+            <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
+              <DiceIcon className="h-4 w-4 flex-shrink-0" />
+              <span>Module</span>
+            </div>
+            <IssueModuleSelect
+              className="w-3/4 flex-grow"
+              workspaceSlug={workspaceSlug}
+              projectId={projectId}
+              issueId={issueId}
+              issueOperations={issueOperations}
+              disabled={disabled}
+            />
+          </div>
+        )}
+
+        {projectDetails?.cycle_view && (
+          <div className="flex w-full items-center gap-3 h-8">
+            <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
+              <ContrastIcon className="h-4 w-4 flex-shrink-0" />
+              <span>Cycle</span>
+            </div>
+            <IssueCycleSelect
+              className="w-3/4 flex-grow"
+              workspaceSlug={workspaceSlug}
+              projectId={projectId}
+              issueId={issueId}
+              issueOperations={issueOperations}
+              disabled={disabled}
+            />
+          </div>
+        )}
+
+        {/* parent */}
+        <div className="flex w-full items-center gap-3 h-8">
+          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
+            <LayoutPanelTop className="h-4 w-4 flex-shrink-0" />
+            <p>Parent</p>
+          </div>
+          <IssueParentSelect
+            className="w-3/4 flex-grow h-full"
+            disabled={disabled}
+            issueId={issueId}
+            issueOperations={issueOperations}
+            projectId={projectId}
+            workspaceSlug={workspaceSlug}
+          />
+        </div>
+
+        {/* relates to */}
+        <div className="flex items-center gap-3 min-h-8">
+          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
+            <RelatedIcon className="h-4 w-4 flex-shrink-0" />
+            <span>Relates to</span>
+          </div>
+          <IssueRelationSelect
+            className="w-3/4 flex-grow min-h-8 h-full"
+            workspaceSlug={workspaceSlug}
+            projectId={projectId}
+            issueId={issueId}
+            relationKey="relates_to"
+            disabled={disabled}
+          />
+        </div>
+
+        {/* blocking */}
+        <div className="flex items-center gap-3 min-h-8">
+          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
+            <XCircle className="h-4 w-4 flex-shrink-0" />
+            <span>Blocking</span>
+          </div>
+          <IssueRelationSelect
+            className="w-3/4 flex-grow min-h-8 h-full"
+            workspaceSlug={workspaceSlug}
+            projectId={projectId}
+            issueId={issueId}
+            relationKey="blocking"
+            disabled={disabled}
+          />
+        </div>
+
+        {/* blocked by */}
+        <div className="flex items-center gap-3 min-h-8">
+          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
+            <CircleDot className="h-4 w-4 flex-shrink-0" />
+            <span>Blocked by</span>
+          </div>
+          <IssueRelationSelect
+            className="w-3/4 flex-grow min-h-8 h-full"
+            workspaceSlug={workspaceSlug}
+            projectId={projectId}
+            issueId={issueId}
+            relationKey="blocked_by"
+            disabled={disabled}
+          />
+        </div>
+
+        {/* duplicate of */}
+        <div className="flex items-center gap-3 min-h-8">
+          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
+            <CopyPlus className="h-4 w-4 flex-shrink-0" />
+            <span>Duplicate of</span>
+          </div>
+          <IssueRelationSelect
+            className="w-3/4 flex-grow min-h-8 h-full"
+            workspaceSlug={workspaceSlug}
+            projectId={projectId}
+            issueId={issueId}
+            relationKey="duplicate"
+            disabled={disabled}
+          />
+        </div>
+
+        {/* label */}
+        <div className="flex w-full items-center gap-3 min-h-8">
+          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
+            <Tag className="h-4 w-4 flex-shrink-0" />
+            <span>Labels</span>
+          </div>
+          <div className="flex w-full flex-col gap-3">
+            <IssueLabel workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} disabled={disabled} />
+          </div>
         </div>
       </div>
-    </>
+      <div className="w-full pt-3">
+        <IssueLinkRoot workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} disabled={disabled} />
+      </div>
+    </div>
   );
 });

web/components/issues/view-select/estimate.tsx

@@ -42,7 +42,6 @@ export const ViewEstimateSelect: React.FC<Props> = observer((props) => {
       maxHeight="md"
       noChevron
       disabled={disabled}
-      optionsClassName="w-full"
     >
       <CustomSelect.Option value={null}>
         <>

web/store/issue/issue-details/root.store.ts

@@ -40,6 +40,7 @@ export interface IIssueDetail
   isIssueLinkModalOpen: boolean;
   isParentIssueModalOpen: boolean;
   isDeleteIssueModalOpen: boolean;
+  isRelationModalOpen: TIssueRelationTypes | null;
   // computed
   isAnyModalOpen: boolean;
   // actions
@@ -47,6 +48,7 @@ export interface IIssueDetail
   toggleIssueLinkModal: (value: boolean) => void;
   toggleParentIssueModal: (value: boolean) => void;
   toggleDeleteIssueModal: (value: boolean) => void;
+  toggleRelationModal: (value: TIssueRelationTypes | null) => void;
   // store
   rootIssueStore: IIssueRootStore;
   issue: IIssueStore;
@@ -67,6 +69,7 @@ export class IssueDetail implements IIssueDetail {
   isIssueLinkModalOpen: boolean = false;
   isParentIssueModalOpen: boolean = false;
   isDeleteIssueModalOpen: boolean = false;
+  isRelationModalOpen: TIssueRelationTypes | null = null;
   // store
   rootIssueStore: IIssueRootStore;
   issue: IIssueStore;
@@ -87,6 +90,7 @@ export class IssueDetail implements IIssueDetail {
       isIssueLinkModalOpen: observable.ref,
       isParentIssueModalOpen: observable.ref,
       isDeleteIssueModalOpen: observable.ref,
+      isRelationModalOpen: observable.ref,
       // computed
       isAnyModalOpen: computed,
       // action
@@ -94,6 +98,7 @@ export class IssueDetail implements IIssueDetail {
       toggleIssueLinkModal: action,
       toggleParentIssueModal: action,
       toggleDeleteIssueModal: action,
+      toggleRelationModal: action,
     });
 
     // store
@@ -112,7 +117,12 @@ export class IssueDetail implements IIssueDetail {
 
   // computed
   get isAnyModalOpen() {
-    return this.isIssueLinkModalOpen || this.isParentIssueModalOpen || this.isDeleteIssueModalOpen;
+    return (
+      this.isIssueLinkModalOpen ||
+      this.isParentIssueModalOpen ||
+      this.isDeleteIssueModalOpen ||
+      Boolean(this.isRelationModalOpen)
+    );
   }
 
   // actions
@@ -120,6 +130,7 @@ export class IssueDetail implements IIssueDetail {
   toggleIssueLinkModal = (value: boolean) => (this.isIssueLinkModalOpen = value);
   toggleParentIssueModal = (value: boolean) => (this.isParentIssueModalOpen = value);
   toggleDeleteIssueModal = (value: boolean) => (this.isDeleteIssueModalOpen = value);
+  toggleRelationModal = (value: TIssueRelationTypes | null) => (this.isRelationModalOpen = value);
 
   // issue
   fetchIssue = async (workspaceSlug: string, projectId: string, issueId: string) =>