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

4
apps/web/core/components/automation/auto-close-automation.tsx
View file

@ -15,7 +15,7 @@ import {
PROJECT_SETTINGS_TRACKER_EVENTS,
} from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { StateGroupIcon, DoubleCircleIcon } from "@plane/propel/icons";
import { StateGroupIcon, StatePropertyIcon } from "@plane/propel/icons";
import type { IProject } from "@plane/types";
// ui
import { CustomSelect, CustomSearchSelect, ToggleSwitch, Loader } from "@plane/ui";
@ -188,7 +188,7 @@ export const AutoCloseAutomation: React.FC<Props> = observer((props) => {
size={EIconSize.LG}
/>
) : (
<DoubleCircleIcon className="h-3.5 w-3.5 text-custom-text-200" />
<StatePropertyIcon className="h-3.5 w-3.5 text-custom-text-200" />
)}
{selectedOption?.name
? selectedOption.name

10
apps/web/core/components/command-palette/actions/issue-actions/actions-list.tsx
View file

@ -3,8 +3,8 @@
import { Command } from "cmdk";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
import { LinkIcon, Signal, Trash2, UserMinus2, UserPlus2, Users } from "lucide-react";
import { DoubleCircleIcon } from "@plane/propel/icons";
import { LinkIcon, Trash2, UserMinus2, UserPlus2 } from "lucide-react";
import { StatePropertyIcon, PriorityPropertyIcon, MembersPropertyIcon } from "@plane/propel/icons";
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
import type { TIssue } from "@plane/types";
import { EIssueServiceType } from "@plane/types";
@ -90,7 +90,7 @@ export const CommandPaletteIssueActions: React.FC<Props> = observer((props) => {
className="focus:outline-none"
>
<div className="flex items-center gap-2 text-custom-text-200">
<DoubleCircleIcon className="h-3.5 w-3.5" />
<StatePropertyIcon className="h-3.5 w-3.5" />
Change state...
</div>
</Command.Item>
@ -103,7 +103,7 @@ export const CommandPaletteIssueActions: React.FC<Props> = observer((props) => {
className="focus:outline-none"
>
<div className="flex items-center gap-2 text-custom-text-200">
<Signal className="h-3.5 w-3.5" />
<PriorityPropertyIcon className="h-3.5 w-3.5" />
Change priority...
</div>
</Command.Item>
@ -116,7 +116,7 @@ export const CommandPaletteIssueActions: React.FC<Props> = observer((props) => {
className="focus:outline-none"
>
<div className="flex items-center gap-2 text-custom-text-200">
<Users className="h-3.5 w-3.5" />
<MembersPropertyIcon className="h-3.5 w-3.5" />
Assign to...
</div>
</Command.Item>

32
apps/web/core/components/common/activity/helper.tsx
View file

@ -1,17 +1,13 @@
import type { ReactNode } from "react";
import {
Signal,
RotateCcw,
Network,
Link as LinkIcon,
Calendar,
Tag,
Inbox,
AlignLeft,
Users,
Paperclip,
Type,
Triangle,
FileText,
Globe,
Hash,
@ -25,7 +21,19 @@ import {
} from "lucide-react";
// components
import { ArchiveIcon, CycleIcon, DoubleCircleIcon, IntakeIcon, ModuleIcon } from "@plane/propel/icons";
import {
ArchiveIcon,
CycleIcon,
StatePropertyIcon,
IntakeIcon,
ModuleIcon,
PriorityPropertyIcon,
StartDatePropertyIcon,
DueDatePropertyIcon,
LabelPropertyIcon,
MembersPropertyIcon,
EstimatePropertyIcon,
} from "@plane/propel/icons";
import { store } from "@/lib/store-context";
import type { TProjectActivity } from "@/plane-web/types";
@ -33,20 +41,20 @@ type ActivityIconMap = {
[key: string]: ReactNode;
};
export const iconsMap: ActivityIconMap = {
priority: <Signal size={14} className="text-custom-text-200" />,
priority: <PriorityPropertyIcon className="h-3.5 w-3.5 text-custom-text-200" />,
archived_at: <ArchiveIcon className="h-3.5 w-3.5 text-custom-text-200" />,
restored: <RotateCcw className="h-3.5 w-3.5 text-custom-text-200" />,
link: <LinkIcon className="h-3.5 w-3.5 text-custom-text-200" />,
start_date: <Calendar className="h-3.5 w-3.5 text-custom-text-200" />,
target_date: <Calendar className="h-3.5 w-3.5 text-custom-text-200" />,
label: <Tag className="h-3.5 w-3.5 text-custom-text-200" />,
start_date: <StartDatePropertyIcon className="h-3.5 w-3.5 text-custom-text-200" />,
target_date: <DueDatePropertyIcon className="h-3.5 w-3.5 text-custom-text-200" />,
label: <LabelPropertyIcon className="h-3.5 w-3.5 text-custom-text-200" />,
inbox: <Inbox className="h-3.5 w-3.5 text-custom-text-200" />,
description: <AlignLeft className="h-3.5 w-3.5 text-custom-text-200" />,
assignee: <Users className="h-3.5 w-3.5 text-custom-text-200" />,
assignee: <MembersPropertyIcon className="h-3.5 w-3.5 text-custom-text-200" />,
attachment: <Paperclip className="h-3.5 w-3.5 text-custom-text-200" />,
name: <Type className="h-3.5 w-3.5 text-custom-text-200" />,
state: <DoubleCircleIcon className="h-4 w-4 flex-shrink-0 text-custom-text-200" />,
estimate: <Triangle size={14} className="text-custom-text-200" />,
state: <StatePropertyIcon className="h-4 w-4 flex-shrink-0 text-custom-text-200" />,
estimate: <EstimatePropertyIcon className="h-3.5 w-3.5 text-custom-text-200" />,
cycle: <CycleIcon className="h-4 w-4 flex-shrink-0 text-custom-text-200" />,
module: <ModuleIcon className="h-4 w-4 flex-shrink-0 text-custom-text-200" />,
page: <FileText className="h-3.5 w-3.5 text-custom-text-200" />,

4
apps/web/core/components/core/modals/user-image-upload-modal.tsx
View file

@ -3,11 +3,11 @@
import React, { useState } from "react";
import { observer } from "mobx-react";
import { useDropzone } from "react-dropzone";
import { UserCircle2 } from "lucide-react";
import { Transition, Dialog } from "@headlessui/react";
// plane imports
import { ACCEPTED_AVATAR_IMAGE_MIME_TYPES_FOR_REACT_DROPZONE, MAX_FILE_SIZE } from "@plane/constants";
import { Button } from "@plane/propel/button";
import { UserCirclePropertyIcon } from "@plane/propel/icons";
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
import { EFileAssetType } from "@plane/types";
import { getAssetIdFromUrl, getFileURL, checkURLValidity } from "@plane/utils";
@ -146,7 +146,7 @@ export const UserImageUploadModal: React.FC<Props> = observer((props) => {
</>
) : (
<div>
<UserCircle2 className="mx-auto h-16 w-16 text-custom-text-200" />
<UserCirclePropertyIcon className="mx-auto h-16 w-16 text-custom-text-200" />
<span className="mt-2 block text-sm font-medium text-custom-text-200">
{isDragActive ? "Drop image here to upload" : "Drag & drop image here"}
</span>

4
apps/web/core/components/core/modals/workspace-image-upload-modal.tsx
View file

@ -3,11 +3,11 @@ import React, { useState } from "react";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
import { useDropzone } from "react-dropzone";
import { UserCircle2 } from "lucide-react";
import { Transition, Dialog } from "@headlessui/react";
// plane imports
import { ACCEPTED_AVATAR_IMAGE_MIME_TYPES_FOR_REACT_DROPZONE, MAX_FILE_SIZE } from "@plane/constants";
import { Button } from "@plane/propel/button";
import { UserCirclePropertyIcon } from "@plane/propel/icons";
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
import { EFileAssetType } from "@plane/types";
import { getAssetIdFromUrl, getFileURL, checkURLValidity } from "@plane/utils";
@ -158,7 +158,7 @@ export const WorkspaceImageUploadModal: React.FC<Props> = observer((props) => {
</>
) : (
<div>
<UserCircle2 className="mx-auto h-16 w-16 text-custom-text-200" />
<UserCirclePropertyIcon className="mx-auto h-16 w-16 text-custom-text-200" />
<span className="mt-2 block text-sm font-medium text-custom-text-200">
{isDragActive ? "Drop image here to upload" : "Drag & drop image here"}
</span>

6
apps/web/core/components/cycles/analytics-sidebar/sidebar-details.tsx
View file

@ -3,11 +3,11 @@ import type { FC } from "react";
import React from "react";
import { isEmpty } from "lodash-es";
import { observer } from "mobx-react";
import { SquareUser, Users } from "lucide-react";
import { SquareUser } from "lucide-react";
// plane types
import { EEstimateSystem } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { WorkItemsIcon } from "@plane/propel/icons";
import { MembersPropertyIcon, WorkItemsIcon } from "@plane/propel/icons";
import type { ICycle } from "@plane/types";
// plane ui
import { Avatar, AvatarGroup, TextArea } from "@plane/ui";
@ -87,7 +87,7 @@ export const CycleSidebarDetails: FC<Props> = observer((props) => {
<div className="flex items-center justify-start gap-1">
<div className="flex w-2/5 items-center justify-start gap-2 text-custom-text-300">
<Users className="h-4 w-4" />
<MembersPropertyIcon className="h-4 w-4" />
<span className="text-base">{t("members")}</span>
</div>
<div className="flex w-3/5 items-center rounded-sm">

6
apps/web/core/components/cycles/list/cycle-list-item-action.tsx
View file

@ -5,7 +5,7 @@ import React, { useEffect, useMemo, useState } from "react";
import { observer } from "mobx-react";
import { useParams, usePathname, useSearchParams } from "next/navigation";
import { useForm } from "react-hook-form";
import { Eye, Users, ArrowRight, CalendarDays } from "lucide-react";
import { Eye, ArrowRight, CalendarDays } from "lucide-react";
// plane imports
import {
CYCLE_TRACKER_EVENTS,
@ -16,7 +16,7 @@ import {
} from "@plane/constants";
import { useLocalStorage } from "@plane/hooks";
import { useTranslation } from "@plane/i18n";
import { TransferIcon, WorkItemsIcon } from "@plane/propel/icons";
import { TransferIcon, WorkItemsIcon, MembersPropertyIcon } from "@plane/propel/icons";
import { setPromiseToast } from "@plane/propel/toast";
import { Tooltip } from "@plane/propel/tooltip";
import type { ICycle, TCycleGroups } from "@plane/types";
@ -314,7 +314,7 @@ export const CycleListItemAction: FC<Props> = observer((props) => {
})}
</AvatarGroup>
) : (
<Users className="h-4 w-4 text-custom-text-300" />
<MembersPropertyIcon className="h-4 w-4 text-custom-text-300" />
)}
</div>
</Tooltip>

5
apps/web/core/components/dropdowns/date-range.tsx
View file

@ -5,13 +5,14 @@ import type { Placement } from "@popperjs/core";
import { observer } from "mobx-react";
import { createPortal } from "react-dom";
import { usePopper } from "react-popper";
import { ArrowRight, CalendarCheck2, CalendarDays, X } from "lucide-react";
import { ArrowRight, CalendarDays, X } from "lucide-react";
import { Combobox } from "@headlessui/react";
// plane imports
import { useTranslation } from "@plane/i18n";
// ui
import type { DateRange, Matcher } from "@plane/propel/calendar";
import { Calendar } from "@plane/propel/calendar";
import { DueDatePropertyIcon } from "@plane/propel/icons";
import { ComboDropDown } from "@plane/ui";
import { cn, renderFormattedDate } from "@plane/utils";
// helpers
@ -236,7 +237,7 @@ export const DateRangeDropdown: React.FC<Props> = observer((props) => {
buttonToDateClassName
)}
>
{!hideIcon.to && <CalendarCheck2 className="h-3 w-3 flex-shrink-0" />}
{!hideIcon.to && <DueDatePropertyIcon className="h-3 w-3 flex-shrink-0" />}
{dateRange.to ? renderFormattedDate(dateRange.to) : renderPlaceholder ? placeholder.to : ""}
</span>
{isClearable && !disabled && hasDisplayedDates && (

11
apps/web/core/components/dropdowns/estimate.tsx
View file

@ -3,10 +3,11 @@ import { useRef, useState } from "react";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
import { usePopper } from "react-popper";
import { Check, ChevronDown, Search, Triangle } from "lucide-react";
import { Check, ChevronDown, Search } from "lucide-react";
import { Combobox } from "@headlessui/react";
// plane imports
import { useTranslation } from "@plane/i18n";
import { EstimatePropertyIcon } from "@plane/propel/icons";
import { EEstimateSystem } from "@plane/types";
import { ComboDropDown } from "@plane/ui";
import { convertMinutesToHoursMinutesString, cn } from "@plane/utils";
@ -104,7 +105,7 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
query: `${currentEstimatePoint?.value}`,
content: (
<div className="flex items-center gap-2">
<Triangle className="h-3 w-3 flex-shrink-0" />
<EstimatePropertyIcon className="h-3 w-3 flex-shrink-0" />
<span className="flex-grow truncate">
{currentActiveEstimate?.type === EEstimateSystem.TIME
? convertMinutesToHoursMinutesString(Number(currentEstimatePoint.value))
@ -121,7 +122,7 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
query: t("project_settings.estimates.no_estimate"),
content: (
<div className="flex items-center gap-2">
<Triangle className="h-3 w-3 flex-shrink-0" />
<EstimatePropertyIcon className="h-3 w-3 flex-shrink-0" />
<span className="flex-grow truncate">{t("project_settings.estimates.no_estimate")}</span>
</div>
),
@ -189,7 +190,7 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
variant={buttonVariant}
renderToolTipByDefault={renderByDefault}
>
{!hideIcon && <Triangle className="h-3 w-3 flex-shrink-0" />}
{!hideIcon && <EstimatePropertyIcon className="h-3 w-3 flex-shrink-0" />}
{(selectedEstimate || placeholder) && BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (
<span className="flex-grow truncate">
{selectedEstimate
@ -249,7 +250,7 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
>
{/* NOTE: This condition renders when estimates are not enabled for the project */}
<div className="flex-grow flex items-center gap-2">
<Triangle className="h-3 w-3 flex-shrink-0" />
<EstimatePropertyIcon className="h-3 w-3 flex-shrink-0" />
<span className="flex-grow truncate">{t("project_settings.estimates.no_estimate")}</span>
</div>
</div>

8
apps/web/core/components/dropdowns/member/avatar.tsx
View file

@ -2,7 +2,7 @@
import { observer } from "mobx-react";
import type { LucideIcon } from "lucide-react";
import { Users } from "lucide-react";
import { MembersPropertyIcon } from "@plane/propel/icons";
// plane ui
import { Avatar, AvatarGroup } from "@plane/ui";
import { cn, getFileURL } from "@plane/utils";
@ -49,5 +49,9 @@ export const ButtonAvatars: React.FC<AvatarProps> = observer((props) => {
}
}
return Icon ? <Icon className="h-3 w-3 flex-shrink-0" /> : <Users className={cn("h-3 w-3 mx-[4px] flex-shrink-0")} />;
return Icon ? (
<Icon className="h-3 w-3 flex-shrink-0" />
) : (
<MembersPropertyIcon className={cn("h-3 w-3 mx-[4px] flex-shrink-0")} />
);
});

22
apps/web/core/components/inbox/content/issue-properties.tsx
View file

@ -2,8 +2,14 @@
import React from "react";
import { observer } from "mobx-react";
import { CalendarCheck2, CopyPlus, Signal, Tag, Users } from "lucide-react";
import { DoubleCircleIcon } from "@plane/propel/icons";
import {
StatePropertyIcon,
MembersPropertyIcon,
PriorityPropertyIcon,
DueDatePropertyIcon,
LabelPropertyIcon,
DuplicatePropertyIcon,
} from "@plane/propel/icons";
import { Tooltip } from "@plane/propel/tooltip";
import type { TInboxDuplicateIssueDetails, TIssue } from "@plane/types";
import { ControlLink } from "@plane/ui";
@ -56,7 +62,7 @@ export const InboxIssueContentProperties: React.FC<Props> = observer((props) =>
{/* State */}
<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>State</span>
</div>
{issue?.state_id && (
@ -79,7 +85,7 @@ export const InboxIssueContentProperties: React.FC<Props> = observer((props) =>
{/* Assignee */}
<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>Assignees</span>
</div>
<MemberDropdown
@ -107,7 +113,7 @@ export const InboxIssueContentProperties: React.FC<Props> = observer((props) =>
{/* Priority */}
<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>Priority</span>
</div>
<PriorityDropdown
@ -129,7 +135,7 @@ export const InboxIssueContentProperties: React.FC<Props> = observer((props) =>
{/* Due Date */}
<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>Due date</span>
</div>
<DateDropdown
@ -154,7 +160,7 @@ export const InboxIssueContentProperties: React.FC<Props> = observer((props) =>
{/* Labels */}
<div className="flex min-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">
<Tag className="h-4 w-4 flex-shrink-0" />
<LabelPropertyIcon className="h-4 w-4 flex-shrink-0" />
<span>Labels</span>
</div>
<div className="w-3/5 flex-grow min-h-8 h-full pt-1">
@ -177,7 +183,7 @@ export const InboxIssueContentProperties: React.FC<Props> = observer((props) =>
{duplicateIssueDetails && (
<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">
<CopyPlus className="h-4 w-4 flex-shrink-0" />
<DuplicatePropertyIcon className="h-4 w-4 flex-shrink-0" />
<span>Duplicate of</span>
</div>

7
apps/web/core/components/inbox/modals/create-modal/issue-properties.tsx
View file

@ -1,9 +1,8 @@
import type { FC } from "react";
import { useState } from "react";
import { observer } from "mobx-react";
import { LayoutPanelTop } from "lucide-react";
// plane imports
import { ETabIndices } from "@plane/constants";
import { ParentPropertyIcon } from "@plane/propel/icons";
import type { ISearchIssueResponse, TIssue } from "@plane/types";
import { CustomMenu } from "@plane/ui";
import { renderFormattedPayloadDate, getDate, getTabIndex } from "@plane/utils";
@ -177,7 +176,7 @@ export const InboxIssueProperties: FC<TInboxIssueProperties> = observer((props)
type="button"
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"
>
<LayoutPanelTop className="h-3 w-3 flex-shrink-0" />
<ParentPropertyIcon className="h-3 w-3 flex-shrink-0" />
<span className="whitespace-nowrap">
{selectedParentIssue
? `${selectedParentIssue.project__identifier}-${selectedParentIssue.sequence_id}`
@ -211,7 +210,7 @@ export const InboxIssueProperties: FC<TInboxIssueProperties> = observer((props)
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={() => setParentIssueModalOpen(true)}
>
<LayoutPanelTop className="h-3 w-3 flex-shrink-0" />
<ParentPropertyIcon className="h-3 w-3 flex-shrink-0" />
<span className="whitespace-nowrap">Add parent</span>
</button>
)}

5
apps/web/core/components/integration/github/root.tsx
View file

@ -6,7 +6,8 @@ import Link from "next/link";
import { useParams, useSearchParams } from "next/navigation";
import { useForm } from "react-hook-form";
import useSWR, { mutate } from "swr";
import { ArrowLeft, Check, List, Settings, UploadCloud, Users } from "lucide-react";
import { ArrowLeft, Check, List, Settings, UploadCloud } from "lucide-react";
import { MembersPropertyIcon } from "@plane/propel/icons";
// types
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
import type { IGithubRepoCollaborator, IGithubServiceImportFormData } from "@plane/types";
@ -68,7 +69,7 @@ const integrationWorkflowData = [
{
title: "Users",
key: "import-users",
icon: Users,
icon: MembersPropertyIcon,
},
{
title: "Confirm",

7
apps/web/core/components/integration/jira/root.tsx
View file

@ -7,9 +7,10 @@ import { useParams } from "next/navigation";
import { FormProvider, useForm } from "react-hook-form";
import { mutate } from "swr";
// icons
import { ArrowLeft, Check, List, Settings, Users } from "lucide-react";
// types
import { ArrowLeft, Check, List, Settings } from "lucide-react";
import { Button } from "@plane/propel/button";
import { MembersPropertyIcon } from "@plane/propel/icons";
// types
import type { IJiraImporterForm } from "@plane/types";
// ui
// fetch keys
@ -42,7 +43,7 @@ const integrationWorkflowData: Array<{
{
title: "Users",
key: "import-users",
icon: Users,
icon: MembersPropertyIcon,
},
{
title: "Confirm",

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" : ""

8
apps/web/core/components/modules/analytics-sidebar/root.tsx
View file

@ -4,7 +4,7 @@ import React, { useEffect, useState } from "react";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
import { Controller, useForm } from "react-hook-form";
import { CalendarClock, ChevronDown, ChevronRight, Info, Plus, SquareUser, Users } from "lucide-react";
import { ChevronDown, ChevronRight, Info, Plus, SquareUser } from "lucide-react";
import { Disclosure, Transition } from "@headlessui/react";
import {
MODULE_STATUS,
@ -16,7 +16,7 @@ import {
} from "@plane/constants";
// plane types
import { useTranslation } from "@plane/i18n";
import { ModuleStatusIcon, WorkItemsIcon } from "@plane/propel/icons";
import { MembersPropertyIcon, ModuleStatusIcon, WorkItemsIcon, StartDatePropertyIcon } from "@plane/propel/icons";
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
import type { ILinkDetails, IModule, ModuleLink } from "@plane/types";
// plane ui
@ -303,7 +303,7 @@ export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
<div className="flex flex-col gap-5 pb-6 pt-2.5">
<div className="flex items-center justify-start gap-1">
<div className="flex w-2/5 items-center justify-start gap-2 text-custom-text-300">
<CalendarClock className="h-4 w-4" />
<StartDatePropertyIcon className="h-4 w-4" />
<span className="text-base">{t("date_range")}</span>
</div>
<div className="h-7">
@ -371,7 +371,7 @@ export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
</div>
<div className="flex items-center justify-start gap-1">
<div className="flex w-2/5 items-center justify-start gap-2 text-custom-text-300">
<Users className="h-4 w-4" />
<MembersPropertyIcon className="h-4 w-4" />
<span className="text-base">{t("members")}</span>
</div>
<Controller

12
apps/web/core/components/modules/module-layout-icon.tsx
View file

@ -1,5 +1,5 @@
import * as React from "react";
import { GanttChartSquare, LayoutGrid, List } from "lucide-react";
import { TimelineLayoutIcon, GridLayoutIcon, ListLayoutIcon } from "@plane/propel/icons";
import type { TModuleLayoutOptions } from "@plane/types";
import { cn } from "@plane/utils";
@ -16,9 +16,9 @@ export const ModuleLayoutIcon: React.FC<ILayoutIcon> = (props) => {
// get Layout icon
const icons = {
list: List,
board: LayoutGrid,
gantt: GanttChartSquare,
list: ListLayoutIcon,
board: GridLayoutIcon,
gantt: TimelineLayoutIcon,
};
const Icon = icons[layoutType ?? "list"];
@ -28,10 +28,10 @@ export const ModuleLayoutIcon: React.FC<ILayoutIcon> = (props) => {
<>
{withContainer ? (
<div className={cn("flex items-center justify-center border rounded p-0.5 flex-shrink-0", containerClassName)}>
<Icon size={size} className={cn(className)} />
<Icon width={size} height={size} className={cn(className)} />
</div>
) : (
<Icon size={size} className={cn("flex-shrink-0", className)} />
<Icon width={size} height={size} className={cn("flex-shrink-0", className)} />
)}
</>
);

4
apps/web/core/components/modules/select/status.tsx
View file

@ -7,7 +7,7 @@ import type { FieldError, Control } from "react-hook-form";
import { Controller } from "react-hook-form";
import { MODULE_STATUS } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { DoubleCircleIcon, ModuleStatusIcon } from "@plane/propel/icons";
import { StatePropertyIcon, ModuleStatusIcon } from "@plane/propel/icons";
import type { IModule } from "@plane/types";
// ui
import { CustomSelect } from "@plane/ui";
@ -37,7 +37,7 @@ export const ModuleStatusSelect: React.FC<Props> = ({ control, error, tabIndex }
{value ? (
<ModuleStatusIcon status={value} />
) : (
<DoubleCircleIcon className={`h-3 w-3 ${error ? "text-red-500" : "text-custom-text-200"}`} />
<StatePropertyIcon className={`h-3 w-3 ${error ? "text-red-500" : "text-custom-text-200"}`} />
)}
{(selectedValue && t(selectedValue?.i18n_label)) ?? (
<span className={`${error ? "text-red-500" : "text-custom-text-200"}`}>Status</span>

4
apps/web/core/components/modules/sidebar-select/select-status.tsx
View file

@ -7,7 +7,7 @@ import type { Control, UseFormWatch } from "react-hook-form";
import { Controller } from "react-hook-form";
import { MODULE_STATUS } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { DoubleCircleIcon } from "@plane/propel/icons";
import { StatePropertyIcon } from "@plane/propel/icons";
import type { IModule } from "@plane/types";
// ui
import { CustomSelect } from "@plane/ui";
@ -26,7 +26,7 @@ export const SidebarStatusSelect: React.FC<Props> = ({ control, submitChanges, w
return (
<div className="flex flex-wrap items-center py-2">
<div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
<DoubleCircleIcon className="h-4 w-4 flex-shrink-0" />
<StatePropertyIcon className="h-4 w-4 flex-shrink-0" />
<p>Status</p>
</div>
<div className="sm:basis-1/2">

5
apps/web/core/components/profile/overview/stats.tsx
View file

@ -4,9 +4,8 @@ import Link from "next/link";
import { useParams } from "next/navigation";
// ui
import { UserCircle2 } from "lucide-react";
import { useTranslation } from "@plane/i18n";
import { CreateIcon, LayerStackIcon } from "@plane/propel/icons";
import { UserCirclePropertyIcon, CreateIcon, LayerStackIcon } from "@plane/propel/icons";
import type { IUserProfileData } from "@plane/types";
import { Loader, Card, ECardSpacing, ECardDirection } from "@plane/ui";
// types
@ -28,7 +27,7 @@ export const ProfileStats: React.FC<Props> = ({ userProfile }) => {
value: userProfile?.created_issues ?? "...",
},
{
icon: UserCircle2,
icon: UserCirclePropertyIcon,
route: "assigned",
i18n_title: "profile.stats.assigned",
value: userProfile?.assigned_issues ?? "...",

5
apps/web/core/components/readonly/estimate.tsx
View file

@ -2,9 +2,8 @@
import { useEffect } from "react";
import { observer } from "mobx-react";
import { Triangle } from "lucide-react";
// plane imports
import { useTranslation } from "@plane/i18n";
import { EstimatePropertyIcon } from "@plane/propel/icons";
import { EEstimateSystem } from "@plane/types";
import { cn, convertMinutesToHoursMinutesString } from "@plane/utils";
// hooks
@ -46,7 +45,7 @@ export const ReadonlyEstimate: React.FC<TReadonlyEstimateProps> = observer((prop
return (
<div className={cn("flex items-center gap-1 text-sm", className)}>
{!hideIcon && <Triangle className="size-4 flex-shrink-0" />}
{!hideIcon && <EstimatePropertyIcon className="size-4 flex-shrink-0" />}
<span className="flex-grow truncate">{displayValue ?? placeholder ?? t("common.none")}</span>
</div>
);