style: update work item detail properties UI (#5133)

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

@@ -14,7 +14,6 @@ import { getTabIndex } from "@plane/utils";
 import { useLabel } from "@/hooks/store/use-label";
 import { useUserPermissions } from "@/hooks/store/user";
 import { usePlatformOS } from "@/hooks/use-platform-os";
-import { Button } from "@plane/propel/button";
 //constants
 export interface IIssueLabelSelect {
   workspaceSlug: string;

apps/web/ee/components/epics/details/sidebar/properties-tab-root.tsx

@@ -105,7 +105,7 @@ export const EpicSidebarPropertiesRoot = observer(function EpicSidebarProperties
             disabled={disabled}
             buttonVariant="transparent-with-text"
             className="group w-full grow"
-            buttonContainerClassName="w-full text-left"
+            buttonContainerClassName="w-full text-left h-7.5"
             buttonClassName="text-13"
             dropdownArrow
             dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
@@ -122,7 +122,7 @@ export const EpicSidebarPropertiesRoot = observer(function EpicSidebarProperties
             multiple
             buttonVariant={epicDetails?.assignee_ids?.length > 1 ? "transparent-without-text" : "transparent-with-text"}
             className="group w-full grow"
-            buttonContainerClassName="w-full text-left"
+            buttonContainerClassName="w-full text-left h-7.5"
             buttonClassName={`text-13 justify-between ${epicDetails?.assignee_ids?.length > 0 ? "" : "text-placeholder"}`}
             hideIcon={epicDetails.assignee_ids?.length === 0}
             dropdownArrow
@@ -135,10 +135,10 @@ export const EpicSidebarPropertiesRoot = observer(function EpicSidebarProperties
             value={epicDetails?.priority}
             onChange={(val) => epicOperations.update(workspaceSlug, projectId, epicId, { priority: val })}
             disabled={disabled}
-            buttonVariant="border-with-text"
-            className="w-full grow"
-            buttonContainerClassName="w-full text-left"
-            buttonClassName="w-min h-auto whitespace-nowrap"
+            buttonVariant="transparent-with-text"
+            className="w-full h-7.5 grow rounded-sm"
+            buttonContainerClassName="size-full text-left"
+            buttonClassName="size-full px-2 py-0.5 whitespace-nowrap [&_svg]:size-3.5"
           />
         </SidebarPropertyListItem>
 
@@ -149,9 +149,10 @@ export const EpicSidebarPropertiesRoot = observer(function EpicSidebarProperties
           </SidebarPropertyListItem>
         )}
         <SidebarPropertyListItem icon={InitiativeIcon} label="Initiatives">
-          <div
+          <button
+            type="button"
             className={cn(
-              "p-2 rounded-xs text-13 text-secondary hover:bg-layer-1 justify-start flex items-start cursor-pointer",
+              "w-full h-7.5 text-left px-2 py-0.5 rounded text-13 text-secondary hover:bg-layer-transparent-hover",
               {
                 "text-placeholder": !epicDetails.initiative_ids?.length,
               }
@@ -161,7 +162,7 @@ export const EpicSidebarPropertiesRoot = observer(function EpicSidebarProperties
             {epicDetails.initiative_ids?.length
               ? t("initiatives.placeholder", { count: epicDetails.initiative_ids?.length })
               : t("initiatives.add_initiative")}
-          </div>
+          </button>
         </SidebarPropertyListItem>
         <SidebarPropertyListItem icon={StartDatePropertyIcon} label="Start date">
           <DateDropdown
@@ -176,7 +177,7 @@ export const EpicSidebarPropertiesRoot = observer(function EpicSidebarProperties
             disabled={disabled}
             buttonVariant="transparent-with-text"
             className="group w-full grow"
-            buttonContainerClassName="w-full text-left"
+            buttonContainerClassName="w-full text-left h-7.5"
             buttonClassName={`text-13 ${epicDetails?.start_date ? "" : "text-placeholder"}`}
             hideIcon
             clearIconClassName="h-3 w-3 hidden group-hover:inline"
@@ -184,7 +185,7 @@ export const EpicSidebarPropertiesRoot = observer(function EpicSidebarProperties
         </SidebarPropertyListItem>
 
         <SidebarPropertyListItem icon={DueDatePropertyIcon} label="Due date">
-          <div className="flex items-center gap-2">
+          <div className="flex items-center gap-2 w-full">
             <DateDropdown
               placeholder="Add due date"
               value={epicDetails.target_date}
@@ -197,8 +198,8 @@ export const EpicSidebarPropertiesRoot = observer(function EpicSidebarProperties
               disabled={disabled}
               buttonVariant="transparent-with-text"
               className="group w-full grow"
-              buttonContainerClassName="w-full text-left"
-              buttonClassName={cn("text-13", {
+              buttonContainerClassName="w-full text-left h-7.5"
+              buttonClassName={cn("w-full text-body-xs-regular", {
                 "text-placeholder": !epicDetails.target_date,
                 "text-red-500": shouldHighlightIssueDueDate(epicDetails.target_date, stateDetails?.group),
               })}

apps/web/ee/components/issue-types/values/value-select.tsx

@@ -26,6 +26,7 @@ import { NumberValueInput } from "./components/number-input";
 import { OptionValueSelect } from "./components/option-select";
 import { TextValueInput } from "./components/text-input";
 import { UrlValueInput } from "./components/url-input";
+import { SidebarPropertyListItem } from "@/components/common/layout/sidebar/property-list-item";
 
 type TPropertyValueSelectProps = {
   propertyDetail: Partial<TIssueProperty<EIssuePropertyType>>;
@@ -208,24 +209,14 @@ export const PropertyValueSelect = observer(function PropertyValueSelect(props:
         </div>
       )}
       {variant === "update" && (
-        <div className={cn("flex w-full items-start gap-y-1 min-h-8")}>
-          <div
-            className={cn(
-              "flex items-center h-8 gap-1 flex-shrink-0 text-sm text-tertiary",
-              isPeekOverview ? "w-1/4" : "w-2/5"
-            )}
-          >
-            <IssuePropertyDetail />
-          </div>
-          <div
-            className={cn("relative h-full min-h-8 flex flex-col gap-0.5 pl-3", {
-              "w-3/4": isPeekOverview,
-              "w-3/5": !isPeekOverview,
-            })}
+        <>
+          <SidebarPropertyListItem
+            icon={<IssuePropertyLogo icon_props={propertyDetail?.logo_props?.icon} colorClassName="text-tertiary" />}
+            label={propertyDetail?.display_name ?? ""}
           >
             {CurrentPropertyAttribute}
-          </div>
-        </div>
+          </SidebarPropertyListItem>
+        </>
       )}
     </>
   );

apps/web/ee/components/issues/issue-details/sidebar/customer-select.tsx

@@ -1,28 +1,25 @@
-import type { FC } from "react";
-import React from "react";
 import { difference } from "lodash-es";
 import { observer } from "mobx-react";
 import { mutate } from "swr";
-import { PlusIcon } from "lucide-react";
 // plane imports
 import { CUSTOMER_TRACKER_EVENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
-import { CustomersIcon } from "@plane/propel/icons";
 import { setToast, TOAST_TYPE } from "@plane/propel/toast";
+import { cn } from "@plane/utils";
 // plane web imports
 import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 import { CustomerDropDown } from "@/plane-web/components/customers";
 import { useCustomers } from "@/plane-web/hooks/store";
-import { IconButton } from "@plane/propel/icon-button";
+
 type TProps = {
+  customButtonClassName?: string;
   workItemId: string;
   value: string[] | null;
   workspaceSlug: string;
 };
 
 export const CustomerSelect = observer(function CustomerSelect(props: TProps) {
-  const { workItemId, value, workspaceSlug } = props;
+  const { workItemId, value, workspaceSlug, customButtonClassName } = props;
   // hooks
   const {
     workItems: { addWorkItemsToCustomer, removeWorkItemFromCustomer },
@@ -96,12 +93,15 @@ export const CustomerSelect = observer(function CustomerSelect(props: TProps) {
       customButton={
         <button
           type="button"
-          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"
+          className={cn(
+            "w-full rounded-sm px-2 py-0.5 bg-layer-transparent hover:bg-layer-transparent-hover text-body-xs-regular text-tertiary",
+            customButtonClassName
+          )}
         >
-          <PlusIcon className="size-4" />
-          <span className="flex-shrink-0 text-body-xs-regular">{t("customers.dropdown.placeholder")}</span>
+          {t("customers.dropdown.placeholder")}
         </button>
       }
+      className="w-full"
       customButtonClassName="hover:bg-transparent"
       value={value || []}
       multiple

apps/web/ee/components/issues/issue-details/sidebar/customers-list.tsx

@@ -30,13 +30,20 @@ export const SidebarCustomersList = observer(function SidebarCustomersList(props
   const customerIds = getWorkItemCustomerIds(workItemId);
   const isAdmin = allowPermissions([EUserWorkspaceRoles.ADMIN], EUserPermissionsLevel.WORKSPACE);
   return (
-    <SidebarPropertyListItem icon={CustomersIcon} label={t("customers.label", { count: 2 })} childrenClassName="px-2">
+    <SidebarPropertyListItem icon={CustomersIcon} label={t("customers.label", { count: 2 })}>
       {customerIds?.length
         ? customerIds?.map((id) => (
             <CustomerSidebarListitem workspaceSlug={workspaceSlug} isPeekView={isPeekView} key={id} customerId={id} />
           ))
         : !isAdmin && <span className="text-13 text-placeholder px-2">{t("customers.dropdown.no_selection")}</span>}
-      {isAdmin && <CustomerSelect workspaceSlug={workspaceSlug} value={customerIds || null} workItemId={workItemId} />}
+      {isAdmin && (
+        <CustomerSelect
+          customButtonClassName="w-full h-7.5 text-left"
+          workspaceSlug={workspaceSlug}
+          value={customerIds || null}
+          workItemId={workItemId}
+        />
+      )}
     </SidebarPropertyListItem>
   );
 });

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

@@ -2349,7 +2349,7 @@ export default {
     label: "{count, plural, one {Customer} other {Customers}}",
     open: "Open customer",
     dropdown: {
-      placeholder: "Select customer",
+      placeholder: "Add customer",
       required: "Please select a customer",
       no_selection: "No customers",
     },