binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-5188 | WEB-5190] chore: layout and properties icon revamp (#7980)

Browse source
This commit is contained in:
Anmol Singh Bhatia 2025-10-24 19:53:36 +05:30 • committed by GitHub
parent 33b6405695
commit d71dfe8f86
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
115 changed files with 1362 additions and 618 deletions
Download patch file Download diff file Expand all files Collapse all files

6
apps/web/core/components/issues/issue-detail-widgets/action-buttons.tsx
View file

@ -2,9 +2,9 @@
import type { FC } from "react";
import React from "react";
import { Link, Paperclip, Waypoints } from "lucide-react";
import { Link, Paperclip } from "lucide-react";
import { useTranslation } from "@plane/i18n";
import { ViewsIcon } from "@plane/propel/icons";
import { ViewsIcon, RelationPropertyIcon } from "@plane/propel/icons";
// plane imports
import type { TIssueServiceType, TWorkItemWidgets } from "@plane/types";
// plane web imports
@ -52,7 +52,7 @@ export const IssueDetailWidgetActionButtons: FC<Props> = (props) => {
customButton={
<IssueDetailWidgetButton
title={t("issue.add.relation")}
icon={<Waypoints className="h-3.5 w-3.5 flex-shrink-0" strokeWidth={2} />}
icon={<RelationPropertyIcon className="h-3.5 w-3.5 flex-shrink-0" />}
disabled={disabled}
/>
}

6
apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/properties.tsx
View file

@ -2,8 +2,8 @@
import type { SyntheticEvent } from "react";
import { useMemo } from "react";
import { observer } from "mobx-react";
import { CalendarCheck2, CalendarClock } from "lucide-react";
import { useTranslation } from "@plane/i18n";
import { StartDatePropertyIcon, DueDatePropertyIcon } from "@plane/propel/icons";
import type { IIssueDisplayProperties, TIssue } from "@plane/types";
import { getDate, renderFormattedPayloadDate, shouldHighlightIssueDueDate } from "@plane/utils";
// components
@ -165,7 +165,7 @@ export const SubIssuesListItemProperties: React.FC<Props> = observer((props) =>
onChange={handleStartDate}
maxDate={maxDate}
placeholder={t("common.order_by.start_date")}
icon={<CalendarClock className="h-3 w-3 flex-shrink-0" />}
icon={<StartDatePropertyIcon className="h-3 w-3 flex-shrink-0" />}
buttonVariant={issue.start_date ? "border-with-text" : "border-without-text"}
optionsClassName="z-30"
disabled={!canEdit}
@ -186,7 +186,7 @@ export const SubIssuesListItemProperties: React.FC<Props> = observer((props) =>
onChange={handleTargetDate}
minDate={minDate}
placeholder={t("common.order_by.due_date")}
icon={<CalendarCheck2 className="h-3 w-3 flex-shrink-0" />}
icon={<DueDatePropertyIcon className="h-3 w-3 flex-shrink-0" />}
buttonVariant={issue.target_date ? "border-with-text" : "border-without-text"}
buttonClassName={shouldHighlight ? "text-red-500" : ""}
clearIconClassName="text-custom-text-100"

4
apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/assignee.tsx
View file

@ -1,7 +1,7 @@
import type { FC } from "react";
import { observer } from "mobx-react";
// icons
import { Users } from "lucide-react";
import { MembersPropertyIcon } from "@plane/propel/icons";
// hooks;
import { useIssueDetail } from "@/hooks/store/use-issue-detail";
// components
@ -21,7 +21,7 @@ export const IssueAssigneeActivity: FC<TIssueAssigneeActivity> = observer((props
if (!activity) return <></>;
return (
<IssueActivityBlockComponent
icon={<Users className="h-3.5 w-3.5 flex-shrink-0 text-custom-text-200" />}
icon={<MembersPropertyIcon className="h-3.5 w-3.5 flex-shrink-0 text-custom-text-200" />}
activityId={activityId}
ends={ends}
>

4
apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/estimate.tsx
View file

@ -1,6 +1,6 @@
import type { FC } from "react";
import { observer } from "mobx-react";
import { Triangle } from "lucide-react";
import { EstimatePropertyIcon } from "@plane/propel/icons";
// hooks
import { useIssueDetail } from "@/hooks/store/use-issue-detail";
// components
@ -21,7 +21,7 @@ export const IssueEstimateActivity: FC<TIssueEstimateActivity> = observer((props
return (
<IssueActivityBlockComponent
icon={<Triangle size={14} className="text-custom-text-200" aria-hidden="true" />}
icon={<EstimatePropertyIcon className="h-3.5 w-3.5 text-custom-text-200" aria-hidden="true" />}
activityId={activityId}
ends={ends}
>

4
apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/label.tsx
View file

@ -1,6 +1,6 @@
import type { FC } from "react";
import { observer } from "mobx-react";
import { Tag } from "lucide-react";
import { LabelPropertyIcon } from "@plane/propel/icons";
// hooks
import { useIssueDetail } from "@/hooks/store/use-issue-detail";
import { useLabel } from "@/hooks/store/use-label";
@ -24,7 +24,7 @@ export const IssueLabelActivity: FC<TIssueLabelActivity> = observer((props) => {
if (!activity) return <></>;
return (
<IssueActivityBlockComponent
icon={<Tag size={14} className="text-custom-text-200" aria-hidden="true" />}
icon={<LabelPropertyIcon height={14} width={14} className="text-custom-text-200" />}
activityId={activityId}
ends={ends}
>

4
apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/parent.tsx
View file

@ -1,6 +1,6 @@
import type { FC } from "react";
import { observer } from "mobx-react";
import { LayoutPanelTop } from "lucide-react";
import { ParentPropertyIcon } from "@plane/propel/icons";
// hooks
import { useIssueDetail } from "@/hooks/store/use-issue-detail";
// components
@ -20,7 +20,7 @@ export const IssueParentActivity: FC<TIssueParentActivity> = observer((props) =>
if (!activity) return <></>;
return (
<IssueActivityBlockComponent
icon={<LayoutPanelTop size={14} className="text-custom-text-200" aria-hidden="true" />}
icon={<ParentPropertyIcon className="h-3.5 w-3.5 text-custom-text-200" aria-hidden="true" />}
activityId={activityId}
ends={ends}
>

4
apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/priority.tsx
View file

@ -1,6 +1,6 @@
import type { FC } from "react";
import { observer } from "mobx-react";
import { Signal } from "lucide-react";
import { PriorityPropertyIcon } from "@plane/propel/icons";
// hooks
import { useIssueDetail } from "@/hooks/store/use-issue-detail";
// components
@ -20,7 +20,7 @@ export const IssuePriorityActivity: FC<TIssuePriorityActivity> = observer((props
if (!activity) return <></>;
return (
<IssueActivityBlockComponent
icon={<Signal size={14} className="text-custom-text-200" aria-hidden="true" />}
icon={<PriorityPropertyIcon className="h-3.5 w-3.5 text-custom-text-200" aria-hidden="true" />}
activityId={activityId}
ends={ends}
>

4
apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/state.tsx
View file

@ -3,7 +3,7 @@
import type { FC } from "react";
import { observer } from "mobx-react";
// hooks
import { DoubleCircleIcon } from "@plane/propel/icons";
import { StatePropertyIcon } from "@plane/propel/icons";
import { useIssueDetail } from "@/hooks/store/use-issue-detail";
// components
import { IssueActivityBlockComponent, IssueLink } from "./";
@ -23,7 +23,7 @@ export const IssueStateActivity: FC<TIssueStateActivity> = observer((props) => {
if (!activity) return <></>;
return (
<IssueActivityBlockComponent
icon={<DoubleCircleIcon className="h-4 w-4 flex-shrink-0 text-custom-text-200" />}
icon={<StatePropertyIcon className="h-4 w-4 flex-shrink-0 text-custom-text-200" />}
activityId={activityId}
ends={ends}
>

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

@ -1,11 +1,12 @@
import { Fragment, useState } from "react";
import { observer } from "mobx-react";
import { usePopper } from "react-popper";
import { Check, Loader, Search, Tag } from "lucide-react";
import { Check, Loader, Search } from "lucide-react";
import { Combobox } from "@headlessui/react";
// plane imports
import { EUserPermissionsLevel, getRandomLabelColor } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { LabelPropertyIcon } from "@plane/propel/icons";
import type { IIssueLabel } from "@plane/types";
import { EUserProjectRoles } from "@plane/types";
// helpers
@ -89,7 +90,7 @@ export const IssueLabelSelect: React.FC<IIssueLabelSelect> = observer((props) =>
className={`relative flex flex-shrink-0 cursor-pointer items-center gap-1 rounded-full border border-custom-border-100 p-0.5 px-2 py-0.5 text-xs text-custom-text-300 transition-all hover:bg-custom-background-90 hover:text-custom-text-200`}
>
<div className="flex-shrink-0">
<Tag className="h-2.5 w-2.5" />
<LabelPropertyIcon className="h-2.5 w-2.5" />
</div>
<div className="flex-shrink-0">{t("label.select")}</div>
</div>

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

@ -2,11 +2,22 @@
import React from "react";
import { observer } from "mobx-react";
import { CalendarCheck2, CalendarClock, LayoutPanelTop, Signal, Tag, Triangle, UserCircle2, Users } from "lucide-react";
// i18n
import { useTranslation } from "@plane/i18n";
// ui
import { CycleIcon, DoubleCircleIcon, ModuleIcon } from "@plane/propel/icons";
import {
CycleIcon,
StatePropertyIcon,
ModuleIcon,
MembersPropertyIcon,
PriorityPropertyIcon,
StartDatePropertyIcon,
DueDatePropertyIcon,
LabelPropertyIcon,
UserCirclePropertyIcon,
EstimatePropertyIcon,
ParentPropertyIcon,
} from "@plane/propel/icons";
import { cn, getDate, renderFormattedPayloadDate, shouldHighlightIssueDueDate } from "@plane/utils";
// components
import { DateDropdown } from "@/components/dropdowns/date";
@ -74,7 +85,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
<div className={`mb-2 mt-3 space-y-2.5 ${!isEditable ? "opacity-60" : ""}`}>
<div className="flex h-8 items-center gap-2">
<div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
<DoubleCircleIcon className="h-4 w-4 flex-shrink-0" />
<StatePropertyIcon className="h-4 w-4 flex-shrink-0" />
<span>{t("common.state")}</span>
</div>
<StateDropdown
@ -93,7 +104,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
<div className="flex h-8 items-center gap-2">
<div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
<Users className="h-4 w-4 flex-shrink-0" />
<MembersPropertyIcon className="h-4 w-4 flex-shrink-0" />
<span>{t("common.assignees")}</span>
</div>
<MemberDropdown
@ -117,7 +128,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
<div className="flex h-8 items-center gap-2">
<div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
<Signal className="h-4 w-4 flex-shrink-0" />
<PriorityPropertyIcon className="h-4 w-4 flex-shrink-0" />
<span>{t("common.priority")}</span>
</div>
<PriorityDropdown
@ -134,7 +145,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
{createdByDetails && (
<div className="flex h-8 items-center gap-2">
<div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
<UserCircle2 className="h-4 w-4 flex-shrink-0" />
<UserCirclePropertyIcon className="h-4 w-4 flex-shrink-0" />
<span>{t("common.created_by")}</span>
</div>
<div className="w-full h-full flex items-center gap-1.5 rounded px-2 py-0.5 text-sm justify-between cursor-not-allowed">
@ -146,7 +157,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
<div className="flex h-8 items-center gap-2">
<div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
<CalendarClock className="h-4 w-4 flex-shrink-0" />
<StartDatePropertyIcon className="h-4 w-4 flex-shrink-0" />
<span>{t("common.order_by.start_date")}</span>
</div>
<DateDropdown
@ -172,7 +183,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
<div className="flex h-8 items-center gap-2">
<div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
<CalendarCheck2 className="h-4 w-4 flex-shrink-0" />
<DueDatePropertyIcon className="h-4 w-4 flex-shrink-0" />
<span>{t("common.order_by.due_date")}</span>
</div>
<DateDropdown
@ -202,7 +213,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
{projectId && areEstimateEnabledByProjectId(projectId) && (
<div className="flex h-8 items-center gap-2">
<div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
<Triangle className="h-4 w-4 flex-shrink-0" />
<EstimatePropertyIcon className="h-4 w-4 flex-shrink-0" />
<span>{t("common.estimate")}</span>
</div>
<EstimateDropdown
@ -260,7 +271,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
<div className="flex h-8 items-center gap-2">
<div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
<LayoutPanelTop className="h-4 w-4 flex-shrink-0" />
<ParentPropertyIcon className="h-4 w-4 flex-shrink-0" />
<span>{t("common.parent")}</span>
</div>
<IssueParentSelectRoot
@ -275,7 +286,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
<div className="flex min-h-8 gap-2">
<div className="flex w-2/5 flex-shrink-0 gap-1 pt-2 text-sm text-custom-text-300">
<Tag className="h-4 w-4 flex-shrink-0" />
<LabelPropertyIcon className="h-4 w-4 flex-shrink-0" />
<span>{t("common.labels")}</span>
</div>
<div className="h-full min-h-8 w-3/5 flex-grow">

31
apps/web/core/components/issues/issue-layouts/layout-icon.tsx
View file

@ -1,19 +1,34 @@
import type { LucideProps } from "lucide-react";
import { List, Kanban, Calendar, Sheet, GanttChartSquare } from "lucide-react";
import {
ListLayoutIcon,
BoardLayoutIcon,
CalendarLayoutIcon,
SheetLayoutIcon,
TimelineLayoutIcon,
} from "@plane/propel/icons";
import type { ISvgIcons } from "@plane/propel/icons";
import { EIssueLayoutTypes } from "@plane/types";
export const IssueLayoutIcon = ({ layout, ...props }: { layout: EIssueLayoutTypes } & LucideProps) => {
export const IssueLayoutIcon = ({
layout,
size,
...props
}: { layout: EIssueLayoutTypes; size?: number } & Omit<ISvgIcons, "width" | "height">) => {
const iconProps = {
...props,
...(size && { width: size, height: size }),
};
switch (layout) {
case EIssueLayoutTypes.LIST:
return <List {...props} />;
return <ListLayoutIcon {...iconProps} />;
case EIssueLayoutTypes.KANBAN:
return <Kanban {...props} />;
return <BoardLayoutIcon {...iconProps} />;
case EIssueLayoutTypes.CALENDAR:
return <Calendar {...props} />;
return <CalendarLayoutIcon {...iconProps} />;
case EIssueLayoutTypes.SPREADSHEET:
return <Sheet {...props} />;
return <SheetLayoutIcon {...iconProps} />;
case EIssueLayoutTypes.GANTT:
return <GanttChartSquare {...props} />;
return <TimelineLayoutIcon {...iconProps} />;
default:
return null;
}

8
apps/web/core/components/issues/issue-layouts/properties/all-properties.tsx
View file

@ -6,12 +6,12 @@ import { xor } from "lodash-es";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
// icons
import { CalendarCheck2, CalendarClock, Link, Paperclip } from "lucide-react";
import { Link, Paperclip } from "lucide-react";
// types
import { WORK_ITEM_TRACKER_EVENTS } from "@plane/constants";
// i18n
import { useTranslation } from "@plane/i18n";
import { ViewsIcon } from "@plane/propel/icons";
import { StartDatePropertyIcon, ViewsIcon, DueDatePropertyIcon } from "@plane/propel/icons";
import { Tooltip } from "@plane/propel/tooltip";
import type { TIssue, IIssueDisplayProperties, TIssuePriorities } from "@plane/types";
// ui
@ -324,7 +324,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
onChange={handleStartDate}
maxDate={maxDate}
placeholder={t("common.order_by.start_date")}
icon={<CalendarClock className="h-3 w-3 flex-shrink-0" />}
icon={<StartDatePropertyIcon className="h-3 w-3 flex-shrink-0" />}
buttonVariant={issue.start_date ? "border-with-text" : "border-without-text"}
optionsClassName="z-10"
disabled={isReadOnly}
@ -346,7 +346,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
onChange={handleTargetDate}
minDate={minDate}
placeholder={t("common.order_by.due_date")}
icon={<CalendarCheck2 className="h-3 w-3 flex-shrink-0" />}
icon={<DueDatePropertyIcon className="h-3 w-3 flex-shrink-0" />}
buttonVariant={issue.target_date ? "border-with-text" : "border-without-text"}
buttonClassName={shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group) ? "text-red-500" : ""}
clearIconClassName="!text-custom-text-100"

4
apps/web/core/components/issues/issue-layouts/properties/labels.tsx
View file

@ -3,11 +3,11 @@
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import type { Placement } from "@popperjs/core";
import { observer } from "mobx-react";
import { Tags } from "lucide-react";
// plane helpers
import { useOutsideClickDetector } from "@plane/hooks";
// i18n
import { useTranslation } from "@plane/i18n";
import { LabelPropertyIcon } from "@plane/propel/icons";
// types
import { Tooltip } from "@plane/propel/tooltip";
import type { IIssueLabel } from "@plane/types";
@ -101,7 +101,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
fullWidth && "w-full"
)}
>
<Tags className="h-3.5 w-3.5" strokeWidth={2} />
<LabelPropertyIcon className="h-3.5 w-3.5" />
{placeholderText}
</div>
</Tooltip>

4
apps/web/core/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
View file

@ -1,6 +1,6 @@
import React from "react";
import { observer } from "mobx-react";
import { CalendarCheck2 } from "lucide-react";
import { DueDatePropertyIcon } from "@plane/propel/icons";
// types
import type { TIssue } from "@plane/types";
import { cn, getDate, renderFormattedPayloadDate, shouldHighlightIssueDueDate } from "@plane/utils";
@ -42,7 +42,7 @@ export const SpreadsheetDueDateColumn: React.FC<Props> = observer((props: Props)
}}
disabled={disabled}
placeholder="Due date"
icon={<CalendarCheck2 className="h-3 w-3 flex-shrink-0" />}
icon={<DueDatePropertyIcon className="h-3 w-3 flex-shrink-0" />}
buttonVariant="transparent-with-text"
buttonContainerClassName="w-full"
buttonClassName={cn(

4
apps/web/core/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
View file

@ -1,6 +1,6 @@
import React from "react";
import { observer } from "mobx-react";
import { CalendarClock } from "lucide-react";
import { StartDatePropertyIcon } from "@plane/propel/icons";
// types
import type { TIssue } from "@plane/types";
// components
@ -36,7 +36,7 @@ export const SpreadsheetStartDateColumn: React.FC<Props> = observer((props: Prop
}}
disabled={disabled}
placeholder="Start date"
icon={<CalendarClock className="h-3 w-3 flex-shrink-0" />}
icon={<StartDatePropertyIcon className="h-3 w-3 flex-shrink-0" />}
buttonVariant="transparent-with-text"
buttonClassName="text-left rounded-none group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10 px-page-x"
buttonContainerClassName="w-full"

5
apps/web/core/components/issues/issue-modal/components/default-properties.tsx
View file

@ -4,10 +4,9 @@ import React, { useState } from "react";
import { observer } from "mobx-react";
import type { Control } from "react-hook-form";
import { Controller } from "react-hook-form";
import { LayoutPanelTop } from "lucide-react";
// plane imports
import { ETabIndices, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { ParentPropertyIcon } from "@plane/propel/icons";
// types
import type { ISearchIssueResponse, TIssue } from "@plane/types";
// ui
@ -313,7 +312,7 @@ export const IssueDefaultProperties: React.FC<TIssueDefaultPropertiesProps> = ob
className="flex cursor-pointer items-center justify-between gap-1 h-full rounded border-[0.5px] border-custom-border-300 px-2 py-0.5 text-xs hover:bg-custom-background-80"
onClick={() => setParentIssueListModalOpen(true)}
>
<LayoutPanelTop className="h-3 w-3 flex-shrink-0" />
<ParentPropertyIcon className="h-3 w-3 flex-shrink-0" />
<span className="whitespace-nowrap">{t("add_parent")}</span>
</button>
)}

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

@ -2,11 +2,22 @@
import type { FC } from "react";
import { observer } from "mobx-react";
import { Signal, Tag, Triangle, LayoutPanelTop, CalendarClock, CalendarCheck2, Users, UserCircle2 } from "lucide-react";
// i18n
import { useTranslation } from "@plane/i18n";
// ui icons
import { CycleIcon, DoubleCircleIcon, ModuleIcon } from "@plane/propel/icons";
import {
CycleIcon,
StatePropertyIcon,
ModuleIcon,
MembersPropertyIcon,
PriorityPropertyIcon,
StartDatePropertyIcon,
DueDatePropertyIcon,
LabelPropertyIcon,
UserCirclePropertyIcon,
EstimatePropertyIcon,
ParentPropertyIcon,
} from "@plane/propel/icons";
import { cn, getDate, renderFormattedPayloadDate, shouldHighlightIssueDueDate } from "@plane/utils";
// components
import { DateDropdown } from "@/components/dropdowns/date";
@ -69,7 +80,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
{/* state */}
<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">
<DoubleCircleIcon className="h-4 w-4 flex-shrink-0" />
<StatePropertyIcon className="h-4 w-4 flex-shrink-0" />
<span>{t("common.state")}</span>
</div>
<StateDropdown
@ -89,7 +100,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
{/* assignee */}
<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">
<Users className="h-4 w-4 flex-shrink-0" />
<MembersPropertyIcon className="h-4 w-4 flex-shrink-0" />
<span>{t("common.assignees")}</span>
</div>
<MemberDropdown
@ -112,7 +123,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
{/* 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" />
<PriorityPropertyIcon className="h-4 w-4 flex-shrink-0" />
<span>{t("common.priority")}</span>
</div>
<PriorityDropdown
@ -130,7 +141,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
{createdByDetails && (
<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">
<UserCircle2 className="h-4 w-4 flex-shrink-0" />
<UserCirclePropertyIcon className="h-4 w-4 flex-shrink-0" />
<span>{t("common.created_by")}</span>
</div>
<div className="w-full h-full flex items-center gap-1.5 rounded px-2 py-0.5 text-sm justify-between cursor-not-allowed">
@ -148,7 +159,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
{/* start 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">
<CalendarClock className="h-4 w-4 flex-shrink-0" />
<StartDatePropertyIcon className="h-4 w-4 flex-shrink-0" />
<span>{t("common.order_by.start_date")}</span>
</div>
<DateDropdown
@ -175,7 +186,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
{/* 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" />
<DueDatePropertyIcon className="h-4 w-4 flex-shrink-0" />
<span>{t("common.order_by.due_date")}</span>
</div>
<DateDropdown
@ -206,7 +217,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
{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" />
<EstimatePropertyIcon className="h-4 w-4 flex-shrink-0" />
<span>{t("common.estimate")}</span>
</div>
<EstimateDropdown
@ -263,7 +274,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
{/* 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" />
<ParentPropertyIcon className="h-4 w-4 flex-shrink-0" />
<p>{t("common.parent")}</p>
</div>
<IssueParentSelectRoot
@ -279,7 +290,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
{/* 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" />
<LabelPropertyIcon className="h-4 w-4 flex-shrink-0" />
<span>{t("common.labels")}</span>
</div>
<div className="flex w-full flex-col gap-3 truncate">

5
apps/web/core/components/issues/select/base.tsx
View file

@ -2,12 +2,13 @@ import React, { useEffect, useRef, useState } from "react";
import type { Placement } from "@popperjs/core";
import { observer } from "mobx-react";
import { usePopper } from "react-popper";
import { Check, Component, Loader, Search, Tag } from "lucide-react";
import { Check, Component, Loader, Search } from "lucide-react";
import { Combobox } from "@headlessui/react";
import { getRandomLabelColor } from "@plane/constants";
// plane imports
import { useOutsideClickDetector } from "@plane/hooks";
import { useTranslation } from "@plane/i18n";
import { LabelPropertyIcon } from "@plane/propel/icons";
import type { IIssueLabel } from "@plane/types";
import { cn } from "@plane/utils";
// components
@ -181,7 +182,7 @@ export const WorkItemLabelSelectBase: React.FC<TWorkItemLabelSelectBaseProps> =
buttonClassName
)}
>
<Tag className="h-3 w-3 flex-shrink-0" />
<LabelPropertyIcon className="h-3 w-3 flex-shrink-0" />
<span>{t("labels")}</span>
</div>
)}

6
apps/web/core/components/issues/workspace-draft/draft-issue-properties.tsx
View file

@ -4,7 +4,7 @@ import { useCallback, useMemo } from "react";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
// icons
import { CalendarCheck2, CalendarClock } from "lucide-react";
import { DueDatePropertyIcon, StartDatePropertyIcon } from "@plane/propel/icons";
// types
import type { TIssuePriorities, TWorkspaceDraftIssue } from "@plane/types";
import { getDate, renderFormattedPayloadDate, shouldHighlightIssueDueDate } from "@plane/utils";
@ -177,7 +177,7 @@ export const DraftIssueProperties: React.FC<IIssueProperties> = observer((props)
onChange={handleStartDate}
maxDate={maxDate}
placeholder="Start date"
icon={<CalendarClock className="h-3 w-3 flex-shrink-0" />}
icon={<StartDatePropertyIcon className="h-3 w-3 flex-shrink-0" />}
buttonVariant={issue.start_date ? "border-with-text" : "border-without-text"}
optionsClassName="z-10"
renderByDefault={isMobile}
@ -192,7 +192,7 @@ export const DraftIssueProperties: React.FC<IIssueProperties> = observer((props)
onChange={handleTargetDate}
minDate={minDate}
placeholder="Due date"
icon={<CalendarCheck2 className="h-3 w-3 flex-shrink-0" />}
icon={<DueDatePropertyIcon className="h-3 w-3 flex-shrink-0" />}
buttonVariant={issue.target_date ? "border-with-text" : "border-without-text"}
buttonClassName={
shouldHighlightIssueDueDate(issue?.target_date || null, stateDetails?.group) ? "text-red-500" : ""