[WEB-5732] style: update work item detail properties UI (#8357)

apps/web/core/components/common/layout/sidebar/property-list-item.tsx

@@ -2,7 +2,7 @@ import type { ReactNode } from "react";
 import { cn } from "@plane/utils";
 
 type TSidebarPropertyListItemProps = {
-  icon: React.FC<{ className?: string }>;
+  icon: React.FC<{ className?: string }> | React.ReactNode;
   label: string;
   children: ReactNode;
   appendElement?: ReactNode;
@@ -14,8 +14,8 @@ export function SidebarPropertyListItem(props: TSidebarPropertyListItemProps) {
 
   return (
     <div className="flex items-center gap-2">
-      <div className="flex shrink-0 items-center gap-1 w-30 text-body-xs-regular text-tertiary h-7.5">
+      <div className="flex shrink-0 items-center gap-1.5 w-30 text-body-xs-regular text-tertiary h-7.5">
-        <Icon className="h-4 w-4 shrink-0" />
+        {typeof Icon === "function" ? <Icon className="size-4 shrink-0" /> : Icon}
         <span>{label}</span>
         {appendElement}
       </div>

apps/web/core/components/dropdowns/priority.tsx

@@ -1,6 +1,5 @@
 import type { ReactNode } from "react";
-import { Fragment, useRef, useState } from "react";
+import { useRef, useState } from "react";
-import { useTheme } from "next-themes";
 import { usePopper } from "react-popper";
 import { Check, Search, SignalHigh } from "lucide-react";
 import { Combobox } from "@headlessui/react";
@@ -341,10 +340,6 @@ export function PriorityDropdown(props: Props) {
     ],
   });
 
-  // next-themes
-  // TODO: remove this after new theming implementation
-  const { resolvedTheme } = useTheme();
-
   const options = ISSUE_PRIORITIES.map((priority) => ({
     value: priority.key,
     query: priority.key,

apps/web/core/components/issues/issue-detail/label/label-list-item.tsx

@@ -35,7 +35,7 @@ export const LabelListItem = observer(function LabelListItem(props: TLabelListIt
       key={labelId}
       type="button"
       className={cn(
-        "h-full w-min flex items-center gap-1.5 rounded-lg px-2 py-0.5 bg-layer-transparent-active  group text-body-xs-regular text-tertiary",
+        "h-full w-min flex items-center gap-1.5 rounded-sm px-2 py-0.5 bg-layer-transparent-active group text-body-xs-regular text-tertiary",
         {
           "cursor-pointer": !disabled,
         }
@@ -43,7 +43,7 @@ export const LabelListItem = observer(function LabelListItem(props: TLabelListIt
       onClick={handleLabel}
       disabled={disabled}
     >
-      <LabelFilledIcon className="size-4" color={label.color ?? "#000000"} />
+      <LabelFilledIcon className="size-3" color={label.color ?? "#000000"} />
       <div className="flex-shrink-0 text-body-xs-regular">{label.name}</div>
       {!disabled && (
         <div className="flex-shrink-0">

apps/web/core/components/issues/issue-detail/label/root.tsx

@@ -92,7 +92,7 @@ export const IssueLabel = observer(function IssueLabel(props: TIssueLabel) {
   );
 
   return (
-    <div className="relative flex flex-wrap items-center gap-1 px-2">
+    <div className="relative flex flex-wrap items-center gap-1 min-h-7.5 w-full">
       <LabelList
         workspaceSlug={workspaceSlug}
         projectId={projectId}

apps/web/core/components/issues/issue-detail/label/select/label-select.tsx

@@ -6,7 +6,6 @@ import { Combobox } from "@headlessui/react";
 // plane imports
 import { EUserPermissionsLevel, getRandomLabelColor } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { LabelFilledIcon, LabelPropertyIcon } from "@plane/propel/icons";
 import type { IIssueLabel } from "@plane/types";
 import { EUserProjectRoles } from "@plane/types";
 // helpers
@@ -86,15 +85,9 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue
   const issueLabels = values ?? [];
 
   const label = (
-    <button
+    <span className="size-full flex items-center rounded-sm px-2 py-0.5 bg-layer-transparent hover:bg-layer-transparent-hover text-body-xs-regular text-tertiary">
-      type="button"
+      {t("label.select")}
-      className="h-full w-full flex items-center gap-1.5 rounded-lg px-2 py-0.5 bg-layer-transparent-active  hover:bg-layer-transparent-hover text-body-xs-regular text-tertiary"
+    </span>
-    >
-      <div className="flex-shrink-0">
-        <LabelFilledIcon className="size-3.5" />
-      </div>
-      <div className="flex-shrink-0">{t("label.select")}</div>
-    </button>
   );
 
   const searchInputKeyDown = async (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -121,10 +114,9 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue
   if (!issueId || !values) return <></>;
 
   return (
-    <>
     <Combobox
       as="div"
-        className={`w-auto max-w-full flex-shrink-0 text-left`}
+      className="size-full flex-shrink-0 text-left"
       value={issueLabels}
       onChange={(value) => onSelect(value)}
       multiple
@@ -133,13 +125,12 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue
         <button
           ref={setReferenceElement}
           type="button"
-            className="cursor-pointer"
+          className="cursor-pointer size-full"
           onClick={() => !projectLabels && fetchLabels()}
         >
           {label}
         </button>
       </Combobox.Button>
-
       <Combobox.Options className="fixed z-10">
         <div
           className={`z-10 my-1 w-48 whitespace-nowrap rounded-sm border border-strong bg-surface-1 py-2.5 text-11 shadow-raised-200 focus:outline-none`}
@@ -214,8 +205,58 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue
             )}
           </div>
         </div>
+        <div className={`vertical-scrollbar scrollbar-sm mt-2 max-h-48 space-y-1 overflow-y-scroll px-2 pr-0`}>
+          {isLoading ? (
+            <p className="text-center text-secondary">{t("common.loading")}</p>
+          ) : filteredOptions.length > 0 ? (
+            filteredOptions.map((option) => (
+              <Combobox.Option
+                key={option.value}
+                value={option.value}
+                className={({ selected }) =>
+                  `flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 hover:bg-layer-1 ${
+                    selected ? "text-primary" : "text-secondary"
+                  }`
+                }
+              >
+                {({ selected }) => (
+                  <>
+                    {option.content}
+                    {selected && (
+                      <div className="flex-shrink-0">
+                        <Check className={`h-3.5 w-3.5`} />
+                      </div>
+                    )}
+                  </>
+                )}
+              </Combobox.Option>
+            ))
+          ) : submitting ? (
+            <Loader className="spin  h-3.5 w-3.5" />
+          ) : canCreateLabel ? (
+            <Combobox.Option
+              value={query}
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                if (!query.length) return;
+                handleAddLabel(query);
+              }}
+              className={`text-left text-secondary ${query.length ? "cursor-pointer" : "cursor-default"}`}
+            >
+              {query.length ? (
+                <>
+                  {/* TODO: Translate here */}+ Add <span className="text-primary">&quot;{query}&quot;</span> to labels
+                </>
+              ) : (
+                t("label.create.type")
+              )}
+            </Combobox.Option>
+          ) : (
+            <p className="text-left text-secondary ">{t("common.search.no_matching_results")}</p>
+          )}
+        </div>
       </Combobox.Options>
     </Combobox>
-    </>
   );
 });

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

@@ -75,8 +75,8 @@ export const IssueParentSelect = observer(function IssueParentSelect(props: TIss
           "group flex items-center justify-between gap-2 px-2 py-0.5 rounded-sm outline-none",
           {
             "cursor-not-allowed": disabled,
-            "hover:bg-layer-1": !disabled,
+            "hover:bg-layer-transparent-hover": !disabled,
-            "bg-layer-1": isParentIssueModalOpen,
+            "bg-layer-transparent-selected": isParentIssueModalOpen,
           },
           className
         )}

apps/web/core/components/issues/issue-detail/root.tsx

@@ -301,7 +301,7 @@ export const IssueDetailRoot = observer(function IssueDetailRoot(props: TIssueDe
         />
       ) : (
         <div className="flex h-full w-full overflow-hidden">
-          <div className="max-w-2/3 h-full w-full space-y-6 overflow-y-auto px-9 py-5">
+          <div className="h-full w-full space-y-6 overflow-y-auto px-9 py-5">
             <IssueMainContent
               workspaceSlug={workspaceSlug}
               projectId={projectId}
@@ -312,7 +312,7 @@ export const IssueDetailRoot = observer(function IssueDetailRoot(props: TIssueDe
             />
           </div>
           <div
-            className="fixed right-0 z-[5] h-full w-full min-w-[300px] border-l border-subtle bg-surface-1 sm:w-1/2 md:relative md:w-1/3 lg:min-w-80 xl:min-w-96"
+            className="fixed right-0 z-[5] h-full w-full min-w-[300px] border-l border-subtle bg-surface-1 sm:w-1/2 md:relative md:w-1/4 lg:min-w-80 xl:min-w-96"
             style={issueDetailSidebarCollapsed ? { right: `-${window?.innerWidth || 0}px` } : {}}
           >
             <IssueDetailsSidebar

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { observer } from "mobx-react";
 // i18n
 import { useTranslation } from "@plane/i18n";
@@ -81,8 +80,8 @@ export const IssueDetailsSidebar = observer(function IssueDetailsSidebar(props:
     <>
       <div className="flex items-center h-full w-full flex-col divide-y-2 divide-subtle-1 overflow-hidden">
         <div className="h-full w-full overflow-y-auto px-6">
-          <h5 className="mt-6 text-body-xs-medium">{t("common.properties")}</h5>
+          <h5 className="mt-5 text-body-xs-medium">{t("common.properties")}</h5>
-          <div className={`mb-2 mt-3 space-y-2.5 ${!isEditable ? "opacity-60" : ""}`}>
+          <div className={`mb-2 mt-4 space-y-2.5 ${!isEditable ? "opacity-60" : ""}`}>
             <SidebarPropertyListItem icon={StatePropertyIcon} label={t("common.state")}>
               <StateDropdown
                 value={issue?.state_id}
@@ -121,10 +120,10 @@ export const IssueDetailsSidebar = observer(function IssueDetailsSidebar(props:
                 value={issue?.priority}
                 onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { priority: val })}
                 disabled={!isEditable}
-                buttonVariant="border-with-text"
+                buttonVariant="transparent-with-text"
-                className="w-full grow rounded-lg"
+                className="w-full h-7.5 grow rounded-sm"
-                buttonContainerClassName="w-full text-left px-2 h-7.5"
+                buttonContainerClassName="size-full text-left"
-                buttonClassName="w-min h-6 whitespace-nowrap"
+                buttonClassName="size-full px-2 py-0.5 whitespace-nowrap [&_svg]:size-3.5"
               />
             </SidebarPropertyListItem>
 
@@ -236,7 +235,7 @@ export const IssueDetailsSidebar = observer(function IssueDetailsSidebar(props:
 
             <SidebarPropertyListItem icon={ParentPropertyIcon} label={t("common.parent")}>
               <IssueParentSelectRoot
-                className="h-full w-full grow"
+                className="w-full h-7.5 grow"
                 workspaceSlug={workspaceSlug}
                 projectId={projectId}
                 issueId={issueId}

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

@@ -1,4 +1,3 @@
-import type { FC } from "react";
 import { observer } from "mobx-react";
 // i18n
 import { useTranslation } from "@plane/i18n";
@@ -115,10 +114,10 @@ export const PeekOverviewProperties = observer(function PeekOverviewProperties(p
             value={issue?.priority}
             onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { priority: val })}
             disabled={disabled}
-            buttonVariant="border-with-text"
+            buttonVariant="transparent-with-text"
-            className="w-full grow group rounded-lg px-2"
+            className="w-full h-7.5 grow rounded-sm"
-            buttonContainerClassName="w-full text-left"
+            buttonContainerClassName="size-full text-left"
-            buttonClassName="w-min h-auto whitespace-nowrap"
+            buttonClassName="size-full px-2 py-0.5 whitespace-nowrap [&_svg]:size-3.5"
           />
         </SidebarPropertyListItem>
 
@@ -155,7 +154,7 @@ export const PeekOverviewProperties = observer(function PeekOverviewProperties(p
         </SidebarPropertyListItem>
 
         <SidebarPropertyListItem icon={DueDatePropertyIcon} label={t("common.order_by.due_date")}>
-          <div className="flex items-center gap-2">
+          <div className="flex items-center gap-2 w-full">
             <DateDropdown
               value={issue.target_date}
               onChange={(val) =>
@@ -231,7 +230,7 @@ export const PeekOverviewProperties = observer(function PeekOverviewProperties(p
 
         <SidebarPropertyListItem icon={ParentPropertyIcon} label={t("common.parent")}>
           <IssueParentSelectRoot
-            className="w-full grow h-full"
+            className="w-full h-7.5 grow"
             disabled={disabled}
             issueId={issueId}
             issueOperations={issueOperations}

packages/i18n/src/locales/en/translations.ts

@@ -980,7 +980,7 @@ export default {
     delete: "Delete attachment",
   },
   label: {
-    select: "Select label",
+    select: "Add labels",
     create: {
       success: "Label created successfully",
       failed: "Label creation failed",