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

refactor: actions icon migration (#8219)

Browse source 
* chore: gitignore updated

* chore: check icon added to propel package

* feat: search icon migration

* chore: check icon migration

* chore: plus icon added to propel package

* chore: code refactor

* chore: plus icon migration and code refactor

* chore: trash icon added to propel package

* chore: code refactor

* chore: trash icon migration

* chore: edit icon added to propel package

* chore: new tab icon added to propel package

* chore: edit icon migration

* chore: newtab icon migration

* chore: lock icon added to propel package

* chore: lock icon migration

* chore: globe icon added to propel package

* chore: globe icon migration

* chore: copy icon added to propel package

* chore: copy icon migration

* chore: link icon added to propel package

* chore: link icon migration

* chore: link icon migration

* chore: info icon added to propel package

* chore: code refactor

* chore: code refactor

* chore: code refactor

* chore: code refactor
This commit is contained in:
Anmol Singh Bhatia 2025-12-26 17:19:15 +05:30 • committed by GitHub
parent 92ac28fcb8
commit 2980c2d76b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
215 changed files with 932 additions and 729 deletions
Download patch file Download diff file Expand all files Collapse all files

8
apps/admin/app/(all)/(dashboard)/sidebar-help-section.tsx
View file

@ -1,11 +1,11 @@
import { useState, useRef } from "react";
import { observer } from "mobx-react";
import Link from "next/link";
import { ExternalLink, HelpCircle, MoveLeft } from "lucide-react";
import { HelpCircle, MoveLeft } from "lucide-react";
import { Transition } from "@headlessui/react";
// plane internal packages
import { WEB_BASE_URL } from "@plane/constants";
import { DiscordIcon, GithubIcon, PageIcon } from "@plane/propel/icons";
// plane internal packages
import { DiscordIcon, GithubIcon, NewTabIcon, PageIcon } from "@plane/propel/icons";
import { Tooltip } from "@plane/propel/tooltip";
import { cn } from "@plane/utils";
// hooks
@ -56,7 +56,7 @@ export const AdminSidebarHelpSection = observer(function AdminSidebarHelpSection
href={redirectionLink}
className={`relative px-2 py-1 flex items-center gap-1 rounded-sm bg-layer-1 text-body-xs-medium text-secondary whitespace-nowrap`}
>
<ExternalLink size={16} />
<NewTabIcon width={14} height={14} />
{!isSidebarCollapsed && "Redirect to Plane"}
</a>
</Tooltip>

4
apps/admin/core/components/common/copy-field.tsx
View file

@ -1,7 +1,7 @@
import React from "react";
// ui
import { Copy } from "lucide-react";
import { Button } from "@plane/propel/button";
import { CopyIcon } from "@plane/propel/icons";
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
type Props = {
@ -37,7 +37,7 @@ export function CopyField(props: Props) {
}}
>
<p className="text-13 font-medium">{url}</p>
<Copy size={18} color="#B9B9B9" />
<CopyIcon width={18} height={18} color="#B9B9B9" />
</Button>
<div className="text-11 text-tertiary">{description}</div>
</div>

5
apps/admin/core/components/workspace/list-item.tsx
View file

@ -1,7 +1,8 @@
import { observer } from "mobx-react";
import { ExternalLink } from "lucide-react";
// plane internal packages
import { WEB_BASE_URL } from "@plane/constants";
import { NewTabIcon } from "@plane/propel/icons";
import { Tooltip } from "@plane/propel/tooltip";
import { getFileURL } from "@plane/utils";
// hooks
@ -75,7 +76,7 @@ export const WorkspaceListItem = observer(function WorkspaceListItem({ workspace
</div>
</div>
<div className="flex-shrink-0">
<ExternalLink size={16} className="text-placeholder group-hover:text-secondary" />
<NewTabIcon width={14} height={16} className="text-placeholder group-hover:text-secondary" />
</div>
</a>
);

6
apps/admin/core/hooks/use-sidebar-menu/core.ts
View file

@ -1,6 +1,6 @@
import { Image, BrainCog, Cog, Lock, Mail } from "lucide-react";
import { Image, BrainCog, Cog, Mail } from "lucide-react";
// plane imports
import { WorkspaceIcon } from "@plane/propel/icons";
import { LockIcon, WorkspaceIcon } from "@plane/propel/icons";
// types
import type { TSidebarMenuItem } from "./types";
@ -26,7 +26,7 @@ export const coreSidebarMenuLinks: Record<TCoreSidebarMenuKey, TSidebarMenuItem>
href: `/workspace/`,
},
authentication: {
Icon: Lock,
Icon: LockIcon,
name: "Authentication",
description: "Configure authentication modes.",
href: `/authentication/`,

6
apps/space/core/components/issues/filters/helpers/filter-option.tsx
View file

@ -1,6 +1,6 @@
import React from "react";
// lucide icons
import { Check } from "lucide-react";
// plane imports
import { CheckIcon } from "@plane/propel/icons";
type Props = {
icon?: React.ReactNode;
@ -24,7 +24,7 @@ export function FilterOption(props: Props) {
isChecked ? "border-accent-strong bg-accent-primary text-on-color" : "border-strong"
} ${multiple ? "rounded-xs" : "rounded-full"}`}
>
{isChecked && <Check size={10} strokeWidth={3} />}
{isChecked && <CheckIcon width={10} height={10} strokeWidth={3} />}
</div>
<div className="flex items-center gap-2 truncate">
{icon && <div className="grid w-5 shrink-0 place-items-center">{icon}</div>}

5
apps/space/core/components/issues/filters/selection.tsx
View file

@ -1,7 +1,6 @@
import React, { useState } from "react";
import { observer } from "mobx-react";
import { Search } from "lucide-react";
import { CloseIcon } from "@plane/propel/icons";
import { SearchIcon, CloseIcon } from "@plane/propel/icons";
// types
import type { IIssueFilterOptions, TIssueFilterKeys } from "@/types/issue";
// local imports
@ -25,7 +24,7 @@ export const FilterSelection = observer(function FilterSelection(props: Props) {
<div className="flex h-full w-full flex-col overflow-hidden">
<div className="p-2.5 pb-0">
<div className="flex items-center gap-1.5 rounded-sm border-[0.5px] border-subtle bg-surface-2 px-1.5 py-1 text-11">
<Search className="text-placeholder" size={12} strokeWidth={2} />
<SearchIcon className="text-placeholder" width={12} height={12} strokeWidth={2} />
<input
type="text"
className="w-full bg-surface-2 outline-none placeholder:text-placeholder"

6
apps/space/core/components/issues/issue-layouts/properties/all-properties.tsx
View file

@ -1,6 +1,6 @@
import { observer } from "mobx-react";
import { Link, Paperclip } from "lucide-react";
import { ViewsIcon } from "@plane/propel/icons";
import { Paperclip } from "lucide-react";
import { LinkIcon, ViewsIcon } from "@plane/propel/icons";
// plane imports
import { Tooltip } from "@plane/propel/tooltip";
import type { IIssueDisplayProperties } from "@plane/types";
@ -169,7 +169,7 @@ export const IssueProperties = observer(function IssueProperties(props: IIssuePr
>
<Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
<div className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded-sm border-[0.5px] border-strong px-2.5 py-1">
<Link className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
<LinkIcon className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
<div className="text-11">{issue.link_count}</div>
</div>
</Tooltip>

6
apps/space/core/components/issues/peek-overview/comment/comment-detail-card.tsx
View file

@ -1,11 +1,11 @@
import React, { useRef, useState } from "react";
import { observer } from "mobx-react";
import { Controller, useForm } from "react-hook-form";
import { Check, MessageSquare, MoreVertical } from "lucide-react";
import { MessageSquare, MoreVertical } from "lucide-react";
import { Menu, Transition } from "@headlessui/react";
// plane imports
import type { EditorRefApi } from "@plane/editor";
import { CloseIcon } from "@plane/propel/icons";
import { CheckIcon, CloseIcon } from "@plane/propel/icons";
import type { TIssuePublicComment } from "@plane/types";
import { getFileURL } from "@plane/utils";
// components
@ -134,7 +134,7 @@ export const CommentCard = observer(function CommentCard(props: Props) {
disabled={isSubmitting}
className="group rounded-sm border border-success-strong bg-success-primary p-2 shadow-md duration-300 hover:bg-green-500"
>
<Check
<CheckIcon
className="h-3 w-3 text-success-primary duration-300 group-hover:text-on-color"
strokeWidth={2}
/>

6
apps/space/core/components/issues/peek-overview/header.tsx
View file

@ -1,9 +1,9 @@
import React from "react";
import { observer } from "mobx-react";
import { Link2, MoveRight } from "lucide-react";
import { MoveRight } from "lucide-react";
import { Listbox, Transition } from "@headlessui/react";
// ui
import { CenterPanelIcon, FullScreenPanelIcon, SidePanelIcon } from "@plane/propel/icons";
import { LinkIcon, CenterPanelIcon, FullScreenPanelIcon, SidePanelIcon } from "@plane/propel/icons";
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
// helpers
import { copyTextToClipboard } from "@/helpers/string.helper";
@ -116,7 +116,7 @@ export const PeekOverviewHeader = observer(function PeekOverviewHeader(props: Pr
className="shrink-0 focus:outline-none text-tertiary hover:text-secondary"
tabIndex={1}
>
<Link2 className="h-4 w-4 -rotate-45" />
<LinkIcon className="h-4 w-4 -rotate-45" />
</button>
)}
</div>

6
apps/web/app/(all)/[workspaceSlug]/(projects)/extended-project-sidebar.tsx
View file

@ -2,10 +2,10 @@ import { useCallback, useRef, useState } from "react";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
// plane imports
import { Plus, Search } from "lucide-react";
import { EUserPermissions, EUserPermissionsLevel, PROJECT_TRACKER_ELEMENTS } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { EmptyStateCompact } from "@plane/propel/empty-state";
import { PlusIcon, SearchIcon } from "@plane/propel/icons";
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
import { Tooltip } from "@plane/propel/tooltip";
import { copyUrlToClipboard, orderJoinedProjects } from "@plane/utils";
@ -117,13 +117,13 @@ export const ExtendedProjectSidebar = observer(function ExtendedProjectSidebar()
setIsProjectModalOpen(true);
}}
>
<Plus className="size-3" />
<PlusIcon className="size-3" />
</button>
</Tooltip>
)}
</div>
<div className="ml-auto flex items-center gap-1.5 rounded-md border border-subtle bg-surface-1 px-2.5 py-1 w-full">
<Search className="h-3.5 w-3.5 text-placeholder" />
<SearchIcon className="h-3.5 w-3.5 text-placeholder" />
<input
className="w-full max-w-[234px] border-none bg-transparent text-13 outline-none placeholder:text-placeholder"
placeholder={t("search")}

6
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsx
View file

@ -1,7 +1,7 @@
import { useCallback, useRef } from "react";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
import { Lock } from "lucide-react";
// plane imports
import {
EIssueFilterType,
@ -11,7 +11,7 @@ import {
WORK_ITEM_TRACKER_ELEMENTS,
} from "@plane/constants";
import { Button } from "@plane/propel/button";
import { ViewsIcon } from "@plane/propel/icons";
import { LockIcon, ViewsIcon } from "@plane/propel/icons";
import { Tooltip } from "@plane/propel/tooltip";
import type { ICustomSearchSelectOption, IIssueDisplayFilterOptions, IIssueDisplayProperties } from "@plane/types";
import { EIssuesStoreType, EViewAccess, EIssueLayoutTypes } from "@plane/types";
@ -151,7 +151,7 @@ export const ProjectViewIssuesHeader = observer(function ProjectViewIssuesHeader
{viewDetails?.access === EViewAccess.PRIVATE ? (
<div className="cursor-default text-tertiary">
<Tooltip tooltipContent={"Private"}>
<Lock className="h-4 w-4" />
<LockIcon className="h-4 w-4" />
</Tooltip>
</div>
) : (

4
apps/web/app/(all)/[workspaceSlug]/(projects)/workspace-views/page.tsx
View file

@ -1,9 +1,9 @@
import React, { useState } from "react";
import { observer } from "mobx-react";
import { Search } from "lucide-react";
// plane imports
import { DEFAULT_GLOBAL_VIEWS_LIST } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { SearchIcon } from "@plane/propel/icons";
import { Input } from "@plane/ui";
// components
import { PageHead } from "@/components/core/page-title";
@ -25,7 +25,7 @@ function WorkspaceViewsPage() {
<PageHead title={pageTitle} />
<div className="flex flex-col h-full w-full overflow-hidden">
<div className="flex h-11 w-full items-center gap-2.5 px-5 py-3 overflow-hidden border-b border-subtle">
<Search className="text-secondary" size={14} strokeWidth={2} />
<SearchIcon className="text-secondary" width={14} height={14} strokeWidth={2} />
<Input
className="w-full bg-transparent !p-0 text-11 leading-5 text-secondary placeholder:text-placeholder focus:outline-none"
value={query}

4
apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/members/page.tsx
View file

@ -1,6 +1,5 @@
import { useState } from "react";
import { observer } from "mobx-react";
import { Search } from "lucide-react";
// types
import {
EUserPermissions,
@ -10,6 +9,7 @@ import {
} from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { Button } from "@plane/propel/button";
import { SearchIcon } from "@plane/propel/icons";
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
import type { IWorkspaceBulkInviteFormData } from "@plane/types";
import { cn } from "@plane/utils";
@ -137,7 +137,7 @@ const WorkspaceMembersSettingsPage = observer(function WorkspaceMembersSettingsP
</h4>
<div className="flex items-center gap-2">
<div className="flex items-center gap-1.5 rounded-md border border-subtle bg-surface-1 px-2.5 py-1.5">
<Search className="h-3.5 w-3.5 text-placeholder" />
<SearchIcon className="h-3.5 w-3.5 text-placeholder" />
<input
className="w-full max-w-[234px] border-none bg-transparent text-body-xs-regular outline-none placeholder:text-placeholder"
placeholder={`${t("search")}...`}

5
apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/sidebar.tsx
View file

@ -1,8 +1,9 @@
import { observer } from "mobx-react";
import { useParams, usePathname } from "next/navigation";
import { CircleUser, Activity, Bell, CircleUserRound, KeyRound, Settings2, Blocks, Lock } from "lucide-react";
import { CircleUser, Activity, Bell, CircleUserRound, KeyRound, Settings2, Blocks } from "lucide-react";
// plane imports
import { GROUPED_PROFILE_SETTINGS, PROFILE_SETTINGS_CATEGORIES } from "@plane/constants";
import { LockIcon } from "@plane/propel/icons";
import { getFileURL } from "@plane/utils";
// components
import { SettingsSidebar } from "@/components/settings/sidebar";
@ -11,7 +12,7 @@ import { useUser } from "@/hooks/store/user";
const ICONS = {
profile: CircleUser,
security: Lock,
security: LockIcon,
activity: Activity,
preferences: Settings2,
notifications: Bell,

6
apps/web/app/(all)/workspace-invitations/page.tsx
View file

@ -2,8 +2,8 @@ import React from "react";
import { observer } from "mobx-react";
import { useSearchParams } from "next/navigation";
import useSWR from "swr";
import { Boxes, Check, Share2, Star, User2 } from "lucide-react";
import { CloseIcon } from "@plane/propel/icons";
import { Boxes, Share2, Star, User2 } from "lucide-react";
import { CheckIcon, CloseIcon } from "@plane/propel/icons";
// components
import { LogoSpinner } from "@/components/common/logo-spinner";
import { EmptySpace, EmptySpaceItem } from "@/components/ui/empty-space";
@ -83,7 +83,7 @@ function WorkspaceInvitationPage() {
title={`You have been invited to ${invitationDetail.workspace.name}`}
description="Your workspace is where you'll create projects, collaborate on your work items, and organize different streams of work in your Plane account."
>
<EmptySpaceItem Icon={Check} title="Accept" action={handleAccept} />
<EmptySpaceItem Icon={CheckIcon} title="Accept" action={handleAccept} />
<EmptySpaceItem Icon={CloseIcon} title="Ignore" action={handleReject} />
</EmptySpace>
)

5
apps/web/ce/components/active-cycles/workspace-active-cycles-upgrade.tsx
View file

@ -1,9 +1,10 @@
import { observer } from "mobx-react";
import { AlertOctagon, BarChart4, CircleDashed, Folder, Microscope, Search } from "lucide-react";
import { AlertOctagon, BarChart4, CircleDashed, Folder, Microscope } from "lucide-react";
// plane imports
import { MARKETING_PRICING_PAGE_LINK } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { getButtonStyling } from "@plane/propel/button";
import { SearchIcon } from "@plane/propel/icons";
import { ContentWrapper } from "@plane/ui";
import { cn } from "@plane/utils";
// assets
@ -50,7 +51,7 @@ export const WORKSPACE_ACTIVE_CYCLES_DETAILS = [
key: "zoom_into_cycles_that_need_attention",
title: "Zoom into cycles that need attention. ",
description: "Investigate the state of any cycle that doesn’t conform to expectations in one click.",
icon: Search,
icon: SearchIcon,
},
{
key: "stay_ahead_of_blockers",

7
apps/web/ce/components/command-palette/actions/work-item-actions/change-state-list.tsx
View file

@ -1,9 +1,8 @@
import { Command } from "cmdk";
import { observer } from "mobx-react";
import { Check } from "lucide-react";
// plane imports
import { EIconSize } from "@plane/constants";
import { StateGroupIcon } from "@plane/propel/icons";
// plane imports
import { CheckIcon, StateGroupIcon } from "@plane/propel/icons";
import { Spinner } from "@plane/ui";
// store hooks
import { useProjectState } from "@/hooks/store/use-project-state";
@ -36,7 +35,7 @@ export const ChangeWorkItemStateList = observer(function ChangeWorkItemStateList
/>
<p>{state.name}</p>
</div>
<div>{state.id === currentStateId && <Check className="h-3 w-3" />}</div>
<div>{state.id === currentStateId && <CheckIcon className="h-3 w-3" />}</div>
</Command.Item>
))
) : (

6
apps/web/ce/components/command-palette/power-k/search/no-results-command.tsx
View file

@ -1,7 +1,7 @@
import { Command } from "cmdk";
import { Search } from "lucide-react";
// plane imports
import { useTranslation } from "@plane/i18n";
import { SearchIcon } from "@plane/propel/icons";
// plane imports
// components
import type { TPowerKContext } from "@/components/power-k/core/types";
// plane web imports
@ -21,7 +21,7 @@ export function PowerKModalNoSearchResultsCommand(props: TPowerKModalNoSearchRes
return (
<Command.Group>
<PowerKModalCommandItem
icon={Search}
icon={SearchIcon}
value="no-results"
label={
<p className="flex items-center gap-2">

4
apps/web/ce/components/estimates/estimate-list-item-buttons.tsx
View file

@ -1,6 +1,6 @@
import { observer } from "mobx-react";
import { Trash } from "lucide-react";
import { PROJECT_SETTINGS_TRACKER_ELEMENTS } from "@plane/constants";
import { TrashIcon } from "@plane/propel/icons";
type TEstimateListItem = {
estimateId: string;
@ -22,7 +22,7 @@ export const EstimateListItemButtons = observer(function EstimateListItemButtons
onClick={() => onDeleteClick && onDeleteClick(estimateId)}
data-ph-element={PROJECT_SETTINGS_TRACKER_ELEMENTS.ESTIMATES_LIST_ITEM}
>
<Trash size={12} />
<TrashIcon width={12} height={12} />
</button>
</div>
);

6
apps/web/ce/components/issues/header.tsx
View file

@ -1,7 +1,7 @@
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
// icons
import { Circle, ExternalLink } from "lucide-react";
import { Circle } from "lucide-react";
// plane imports
import {
EUserPermissions,
@ -12,7 +12,7 @@ import {
} from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { Button } from "@plane/propel/button";
import { WorkItemsIcon } from "@plane/propel/icons";
import { NewTabIcon, WorkItemsIcon } from "@plane/propel/icons";
import { Tooltip } from "@plane/propel/tooltip";
import { EIssuesStoreType } from "@plane/types";
import { Breadcrumbs, Header } from "@plane/ui";
@ -95,7 +95,7 @@ export const IssuesHeader = observer(function IssuesHeader() {
>
<Circle className="h-1.5 w-1.5 fill-accent-primary" strokeWidth={2} />
{t("workspace_projects.network.public.title")}
<ExternalLink className="hidden h-3 w-3 group-hover:block" strokeWidth={2} />
<NewTabIcon className="hidden h-3 w-3 group-hover:block" strokeWidth={2} />
</a>
) : (
<></>

4
apps/web/ce/components/issues/issue-layouts/quick-action-dropdowns/copy-menu-helper.tsx
View file

@ -1,11 +1,11 @@
import type { Copy } from "lucide-react";
import type { ISvgIcons } from "@plane/propel/icons";
import type { TContextMenuItem } from "@plane/ui";
export interface CopyMenuHelperProps {
baseItem: {
key: string;
title: string;
icon: typeof Copy;
icon: React.FC<ISvgIcons>;
action: () => void;
shouldRender: boolean;
};

5
apps/web/ce/components/issues/issue-layouts/utils.tsx
View file

@ -1,9 +1,10 @@
import type { FC } from "react";
import { CalendarDays, LayersIcon, Link2, Paperclip } from "lucide-react";
import { CalendarDays, LayersIcon, Paperclip } from "lucide-react";
// types
import { ISSUE_GROUP_BY_OPTIONS } from "@plane/constants";
import type { ISvgIcons } from "@plane/propel/icons";
import {
LinkIcon,
CycleIcon,
StatePropertyIcon,
ModuleIcon,
@ -82,7 +83,7 @@ export const SpreadSheetPropertyIconMap: Record<string, FC<ISvgIcons>> = {
PriorityPropertyIcon: PriorityPropertyIcon,
StartDatePropertyIcon: StartDatePropertyIcon,
StatePropertyIcon: StatePropertyIcon,
Link2: Link2,
Link2: LinkIcon,
Paperclip: Paperclip,
LayersIcon: LayersIcon,
};

4
apps/web/ce/components/workflow/state-option.tsx
View file

@ -1,6 +1,6 @@
import { observer } from "mobx-react";
import { Check } from "lucide-react";
import { Combobox } from "@headlessui/react";
import { CheckIcon } from "@plane/propel/icons";
import { cn } from "@plane/utils";
export type TStateOptionProps = {
@ -31,7 +31,7 @@ export const StateOption = observer(function StateOption(props: TStateOptionProp
{({ selected }) => (
<>
<span className="flex-grow truncate">{option.content}</span>
{selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
{selected && <CheckIcon className="h-3.5 w-3.5 flex-shrink-0" />}
</>
)}
</Combobox.Option>

4
apps/web/core/components/account/deactivate-account-modal.tsx
View file

@ -1,9 +1,9 @@
import { useState } from "react";
import { Trash2 } from "lucide-react";
import { PROFILE_SETTINGS_TRACKER_EVENTS } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
// ui
import { Button } from "@plane/propel/button";
import { TrashIcon } from "@plane/propel/icons";
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
// hooks
@ -68,7 +68,7 @@ export function DeactivateAccountModal(props: Props) {
<div className="">
<div className="flex items-start gap-x-4">
<div className="mt-3 grid place-items-center rounded-full bg-danger-primary p-2 sm:mt-3 sm:p-2 md:mt-0 md:p-4 lg:mt-0 lg:p-4 ">
<Trash2
<TrashIcon
className="h-4 w-4 text-danger-primary sm:h-4 sm:w-4 md:h-6 md:w-6 lg:h-6 lg:w-6"
aria-hidden="true"
/>

8
apps/web/core/components/analytics/insight-table/data-table.tsx
View file

@ -15,10 +15,10 @@ import {
getSortedRowModel,
useReactTable,
} from "@tanstack/react-table";
import { Search } from "lucide-react";
import { useTranslation } from "@plane/i18n";
import { EmptyStateCompact } from "@plane/propel/empty-state";
import { CloseIcon } from "@plane/propel/icons";
import { SearchIcon, CloseIcon } from "@plane/propel/icons";
// plane package imports
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@plane/propel/table";
import { cn } from "@plane/utils";
@ -76,7 +76,7 @@ export function DataTable<TData, TValue>({ columns, data, searchPlaceholder, act
inputRef.current?.focus();
}}
>
<Search className="h-3.5 w-3.5" />
<SearchIcon className="h-3.5 w-3.5" />
</button>
)}
<div
@ -87,7 +87,7 @@ export function DataTable<TData, TValue>({ columns, data, searchPlaceholder, act
}
)}
>
<Search className="h-3.5 w-3.5" />
<SearchIcon className="h-3.5 w-3.5" />
<input
ref={inputRef}
className="w-full max-w-[234px] border-none bg-transparent text-13 text-primary placeholder:text-placeholder focus:outline-none"

4
apps/web/core/components/api-token/modal/generated-token-details.tsx
View file

@ -1,6 +1,6 @@
import { Copy } from "lucide-react";
import { useTranslation } from "@plane/i18n";
import { Button } from "@plane/propel/button";
import { CopyIcon } from "@plane/propel/icons";
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
import { Tooltip } from "@plane/propel/tooltip";
import type { IApiToken } from "@plane/types";
@ -43,7 +43,7 @@ export function GeneratedTokenDetails(props: Props) {
>
<span className="truncate pr-2">{tokenDetails.token}</span>
<Tooltip tooltipContent="Copy secret key" isMobile={isMobile}>
<Copy className="h-4 w-4 text-placeholder flex-shrink-0" />
<CopyIcon className="h-4 w-4 text-placeholder flex-shrink-0" />
</Tooltip>
</button>
<div className="mt-6 flex items-center justify-between">

6
apps/web/core/components/comments/card/display.tsx
View file

@ -2,10 +2,10 @@ import type { ReactNode } from "react";
import { useCallback, useEffect, useState } from "react";
import { observer } from "mobx-react";
import { usePathname } from "next/navigation";
import { Globe2, Lock } from "lucide-react";
// plane imports
import type { EditorRefApi } from "@plane/editor";
import { useHashScroll } from "@plane/hooks";
import { GlobeIcon, LockIcon } from "@plane/propel/icons";
import { EIssueCommentAccessSpecifier } from "@plane/types";
import type { TCommentsOperations, TIssueComment } from "@plane/types";
import { calculateTimeAgo, cn, getFileURL, renderFormattedDate, renderFormattedTime } from "@plane/utils";
@ -104,9 +104,9 @@ export const CommentCardDisplay = observer(function CommentCardDisplay(props: TC
{showAccessSpecifier && (
<div className="absolute right-2.5 top-2.5 z-[1] text-tertiary">
{comment.access === EIssueCommentAccessSpecifier.INTERNAL ? (
<Lock className="size-3" />
<LockIcon className="size-3" />
) : (
<Globe2 className="size-3" />
<GlobeIcon className="size-3" />
)}
</div>
)}

5
apps/web/core/components/comments/card/edit-form.tsx
View file

@ -1,9 +1,8 @@
import React, { useEffect, useRef } from "react";
import { observer } from "mobx-react";
import { useForm } from "react-hook-form";
import { Check } from "lucide-react";
import type { EditorRefApi } from "@plane/editor";
import { CloseIcon } from "@plane/propel/icons";
import { CheckIcon, CloseIcon } from "@plane/propel/icons";
// plane imports
import type { TCommentsOperations, TIssueComment } from "@plane/types";
import { cn, isCommentEmpty } from "@plane/utils";
@ -118,7 +117,7 @@ export const CommentCardEditForm = observer(function CommentCardEditForm(props:
: "border-success-strong bg-success-primary hover:bg-green-500"
)}
>
<Check
<CheckIcon
className={cn(
"size-4 duration-300",
isDisabled ? "text-success-primary/50" : "text-success-primary group-hover:text-on-color"

11
apps/web/core/components/comments/quick-actions.tsx
View file

@ -1,10 +1,11 @@
import { useMemo } from "react";
import { observer } from "mobx-react";
import { Globe2, Link, Lock, Pencil, Trash2, MoreHorizontal } from "lucide-react";
import { MoreHorizontal } from "lucide-react";
// plane imports
import { EIssueCommentAccessSpecifier } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { IconButton } from "@plane/propel/icon-button";
import { LinkIcon, GlobeIcon, LockIcon, EditIcon, TrashIcon } from "@plane/propel/icons";
import type { TIssueComment, TCommentsOperations } from "@plane/types";
import type { TContextMenuItem } from "@plane/ui";
import { CustomMenu } from "@plane/ui";
@ -38,14 +39,14 @@ export const CommentQuickActions = observer(function CommentQuickActions(props:
key: "edit",
action: setEditMode,
title: t("common.actions.edit"),
icon: Pencil,
icon: EditIcon,
shouldRender: canEdit,
},
{
key: "copy_link",
action: () => activityOperations.copyCommentLink(comment.id),
title: t("common.actions.copy_link"),
icon: Link,
icon: LinkIcon,
shouldRender: showCopyLinkOption,
},
{
@ -61,14 +62,14 @@ export const CommentQuickActions = observer(function CommentQuickActions(props:
comment.access === EIssueCommentAccessSpecifier.INTERNAL
? t("issue.comments.switch.public")
: t("issue.comments.switch.private"),
icon: comment.access === EIssueCommentAccessSpecifier.INTERNAL ? Globe2 : Lock,
icon: comment.access === EIssueCommentAccessSpecifier.INTERNAL ? GlobeIcon : LockIcon,
shouldRender: showAccessSpecifier,
},
{
key: "delete",
action: () => activityOperations.removeComment(comment.id),
title: t("common.actions.delete"),
icon: Trash2,
icon: TrashIcon,
shouldRender: canDelete,
},
];

3
apps/web/core/components/common/access-field.tsx
View file

@ -1,6 +1,7 @@
import type { LucideIcon } from "lucide-react";
// plane ui
import { useTranslation } from "@plane/i18n";
import type { ISvgIcons } from "@plane/propel/icons";
import { Tooltip } from "@plane/propel/tooltip";
// plane utils
import { cn } from "@plane/utils";
@ -12,7 +13,7 @@ type Props = {
key: number;
i18n_label?: string;
label?: string;
icon: LucideIcon;
icon: LucideIcon | React.FC<ISvgIcons>;
}[];
isMobile?: boolean;
};

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

@ -2,13 +2,11 @@ import type { FC, ReactNode } from "react";
import {
RotateCcw,
Network,
Link as LinkIcon,
Inbox,
AlignLeft,
Paperclip,
Type,
FileText,
Globe,
Hash,
Clock,
Bell,
@ -17,11 +15,13 @@ import {
ListTodo,
Layers,
} from "lucide-react";
// components
import {
LinkIcon,
ArchiveIcon,
CycleIcon,
GlobeIcon,
DueDatePropertyIcon,
EstimatePropertyIcon,
GridLayoutIcon,
@ -57,7 +57,7 @@ export const iconsMap: ActivityIconMap = {
cycle: CycleIcon,
module: ModuleIcon,
page: FileText,
network: Globe,
network: GlobeIcon,
identifier: Hash,
timezone: Clock,
is_project_updates_enabled: Bell,

5
apps/web/core/components/common/page-access-icon.tsx
View file

@ -1,5 +1,6 @@
import { ArchiveIcon, Earth, Lock } from "lucide-react";
import { ArchiveIcon, Earth } from "lucide-react";
import { EPageAccess } from "@plane/constants";
import { LockIcon } from "@plane/propel/icons";
import type { TPage } from "@plane/types";
export function PageAccessIcon(page: TPage) {
@ -10,7 +11,7 @@ export function PageAccessIcon(page: TPage) {
) : page.access === EPageAccess.PUBLIC ? (
<Earth className="h-2.5 w-2.5 text-tertiary" />
) : (
<Lock className="h-2.5 w-2.5 text-tertiary" />
<LockIcon className="h-2.5 w-2.5 text-tertiary" />
)}
</div>
);

5
apps/web/core/components/core/description-versions/modal.tsx
View file

@ -1,11 +1,10 @@
import { useCallback, useRef } from "react";
import { observer } from "mobx-react";
import { Copy } from "lucide-react";
// plane imports
import type { EditorRefApi } from "@plane/editor";
import { useTranslation } from "@plane/i18n";
import { Button } from "@plane/propel/button";
import { ChevronLeftIcon, ChevronRightIcon } from "@plane/propel/icons";
import { CopyIcon, ChevronLeftIcon, ChevronRightIcon } from "@plane/propel/icons";
import { setToast, TOAST_TYPE } from "@plane/propel/toast";
import { Tooltip } from "@plane/propel/tooltip";
import type { TDescriptionVersion } from "@plane/types";
@ -152,7 +151,7 @@ export const DescriptionVersionsModal = observer(function DescriptionVersionsMod
{/* Footer */}
<div className="flex items-center justify-between gap-2 pt-4 border-t-[0.5px] border-subtle">
<Tooltip tooltipContent={t("common.actions.copy_markdown")}>
<IconButton type="button" variant="ghost" size="base" onClick={handleCopyMarkdown} icon={Copy} />
<IconButton type="button" variant="ghost" size="base" onClick={handleCopyMarkdown} icon={CopyIcon} />
</Tooltip>
<div className="flex items-center gap-2">
<Button variant="secondary" size="lg" onClick={handleClose} tabIndex={1}>

4
apps/web/core/components/core/modals/bulk-delete-issues-modal.tsx
View file

@ -4,11 +4,11 @@ import { useParams } from "next/navigation";
import { useTheme } from "next-themes";
import type { SubmitHandler } from "react-hook-form";
import { useForm } from "react-hook-form";
import { Search } from "lucide-react";
import { Combobox } from "@headlessui/react";
// plane imports
import { useTranslation } from "@plane/i18n";
import { Button } from "@plane/propel/button";
import { SearchIcon } from "@plane/propel/icons";
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
import type { ISearchIssueResponse, IUser } from "@plane/types";
import { EIssuesStoreType } from "@plane/types";
@ -164,7 +164,7 @@ export const BulkDeleteIssuesModal = observer(function BulkDeleteIssuesModal(pro
}}
>
<div className="relative m-1">
<Search
<SearchIcon
className="pointer-events-none absolute left-4 top-3.5 h-5 w-5 text-primary text-opacity-40"
aria-hidden="true"
/>

6
apps/web/core/components/core/modals/existing-issues-list-modal.tsx
View file

@ -1,11 +1,11 @@
import { useEffect, useState, useRef } from "react";
import { Rocket, Search } from "lucide-react";
import { Rocket } from "lucide-react";
import { Combobox } from "@headlessui/react";
// i18n
import { useTranslation } from "@plane/i18n";
// types
import { Button } from "@plane/propel/button";
import { CloseIcon } from "@plane/propel/icons";
import { SearchIcon, CloseIcon } from "@plane/propel/icons";
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
import { Tooltip } from "@plane/propel/tooltip";
import type { ISearchIssueResponse, TProjectIssuesSearchParams } from "@plane/types";
@ -141,7 +141,7 @@ export function ExistingIssuesListModal(props: Props) {
}}
>
<div className="relative m-1">
<Search
<SearchIcon
className="pointer-events-none absolute left-4 top-3.5 h-5 w-5 text-primary text-opacity-40"
aria-hidden="true"
/>

9
apps/web/core/components/cycles/archived-cycles/header.tsx
View file

@ -1,11 +1,10 @@
import type { FC } from "react";
import { useCallback, useRef, useState } from "react";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
// icons
import { ListFilter, Search } from "lucide-react";
import { ListFilter } from "lucide-react";
import { useOutsideClickDetector } from "@plane/hooks";
import { CloseIcon } from "@plane/propel/icons";
import { SearchIcon, CloseIcon } from "@plane/propel/icons";
// plane helpers
// types
import type { TCycleFilters } from "@plane/types";
@ -81,7 +80,7 @@ export const ArchivedCyclesHeader = observer(function ArchivedCyclesHeader() {
inputRef.current?.focus();
}}
>
<Search className="h-3.5 w-3.5" />
<SearchIcon className="h-3.5 w-3.5" />
</button>
)}
<div
@ -92,7 +91,7 @@ export const ArchivedCyclesHeader = observer(function ArchivedCyclesHeader() {
}
)}
>
<Search className="h-3.5 w-3.5" />
<SearchIcon className="h-3.5 w-3.5" />
<input
ref={inputRef}
className="w-full max-w-[234px] border-none bg-transparent text-13 text-primary placeholder:text-placeholder focus:outline-none"

8
apps/web/core/components/cycles/cycles-view-header.tsx
View file

@ -1,11 +1,11 @@
import { useCallback, useEffect, useRef, useState } from "react";
import { observer } from "mobx-react";
import { ListFilter, Search } from "lucide-react";
import { ListFilter } from "lucide-react";
// plane imports
import { useOutsideClickDetector } from "@plane/hooks";
import { IconButton } from "@plane/propel/icon-button";
import { useTranslation } from "@plane/i18n";
import { CloseIcon } from "@plane/propel/icons";
import { SearchIcon, CloseIcon } from "@plane/propel/icons";
import type { TCycleFilters } from "@plane/types";
import { cn, calculateTotalFilters } from "@plane/utils";
// components
@ -79,7 +79,7 @@ export const CyclesViewHeader = observer(function CyclesViewHeader(props: Props)
setIsSearchOpen(true);
inputRef.current?.focus();
}}
icon={Search}
icon={SearchIcon}
/>
) : (
<div
@ -90,7 +90,7 @@ export const CyclesViewHeader = observer(function CyclesViewHeader(props: Props)
}
)}
>
<Search className="h-3.5 w-3.5" />
<SearchIcon className="h-3.5 w-3.5" />
<input
ref={inputRef}
className="w-full max-w-[234px] border-none bg-transparent text-13 text-primary placeholder:text-placeholder focus:outline-none"

5
apps/web/core/components/cycles/dropdowns/filters/root.tsx
View file

@ -1,7 +1,6 @@
import { useState } from "react";
import { observer } from "mobx-react";
import { Search } from "lucide-react";
import { CloseIcon } from "@plane/propel/icons";
import { SearchIcon, CloseIcon } from "@plane/propel/icons";
// plane imports
import type { TCycleFilters, TCycleGroups } from "@plane/types";
// hooks
@ -28,7 +27,7 @@ export const CycleFiltersSelection = observer(function CycleFiltersSelection(pro
<div className="flex h-full w-full flex-col overflow-hidden">
<div className="bg-surface-1 p-2.5 pb-0">
<div className="flex items-center gap-1.5 rounded-sm border-[0.5px] border-subtle bg-surface-2 px-1.5 py-1 text-11">
<Search className="text-placeholder" size={12} strokeWidth={2} />
<SearchIcon className="text-placeholder" width={12} height={12} strokeWidth={2} />
<input
type="text"
className="w-full bg-surface-2 outline-none placeholder:text-placeholder"

4
apps/web/core/components/cycles/list/cycles-list-item.tsx
View file

@ -2,7 +2,7 @@ import type { MouseEvent } from "react";
import { useRef } from "react";
import { observer } from "mobx-react";
import { usePathname, useSearchParams } from "next/navigation";
import { Check } from "lucide-react";
import { CheckIcon } from "@plane/propel/icons";
// plane imports
import type { TCycleGroups } from "@plane/types";
import { CircularProgressIndicator } from "@plane/ui";
@ -82,7 +82,7 @@ export const CyclesListItem = observer(function CyclesListItem(props: TCyclesLis
prependTitleElement={
<CircularProgressIndicator size={30} percentage={progress} strokeWidth={3}>
{progress === 100 ? (
<Check className="h-3 w-3 stroke-2" />
<CheckIcon className="h-3 w-3 stroke-2" />
) : (
<span className="text-9 text-primary">{`${progress}%`}</span>
)}

6
apps/web/core/components/cycles/transfer-issues-modal.tsx
View file

@ -1,8 +1,8 @@
import { useState } from "react";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
import { AlertCircle, Search } from "lucide-react";
import { CycleIcon, TransferIcon, CloseIcon } from "@plane/propel/icons";
import { AlertCircle } from "lucide-react";
import { SearchIcon, CycleIcon, TransferIcon, CloseIcon } from "@plane/propel/icons";
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
import { EIssuesStoreType } from "@plane/types";
import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
@ -83,7 +83,7 @@ export const TransferIssuesModal = observer(function TransferIssuesModal(props:
</button>
</div>
<div className="flex items-center gap-2 border-b border-subtle px-5 pb-3">
<Search className="h-4 w-4 text-secondary" />
<SearchIcon className="h-4 w-4 text-secondary" />
<input
className="outline-none text-13"
placeholder="Search for a cycle..."

8
apps/web/core/components/dropdowns/cycle/cycle-options.tsx
View file

@ -1,16 +1,14 @@
import type { FC } from "react";
import { useEffect, useRef, useState } from "react";
import type { Placement } from "@popperjs/core";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
import { usePopper } from "react-popper";
// components
import { Check, Search } from "lucide-react";
import { Combobox } from "@headlessui/react";
// i18n
import { useTranslation } from "@plane/i18n";
// icon
import { CycleGroupIcon, CycleIcon } from "@plane/propel/icons";
import { CheckIcon, CycleGroupIcon, CycleIcon, SearchIcon } from "@plane/propel/icons";
import type { TCycleGroups } from "@plane/types";
// ui
// store hooks
@ -128,7 +126,7 @@ export const CycleOptions = observer(function CycleOptions(props: CycleOptionsPr
{...attributes.popper}
>
<div className="flex items-center gap-1.5 rounded-sm border border-subtle bg-surface-2 px-2">
<Search className="h-3.5 w-3.5 text-placeholder" strokeWidth={1.5} />
<SearchIcon className="h-3.5 w-3.5 text-placeholder" strokeWidth={1.5} />
<Combobox.Input
as="input"
ref={inputRef}
@ -156,7 +154,7 @@ export const CycleOptions = observer(function CycleOptions(props: CycleOptionsPr
{({ selected }) => (
<>
<span className="flex-grow truncate">{option.content}</span>
{selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
{selected && <CheckIcon className="h-3.5 w-3.5 flex-shrink-0" />}
</>
)}
</Combobox.Option>

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

@ -3,11 +3,10 @@ import { useRef, useState } from "react";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
import { usePopper } from "react-popper";
import { Check, Search } from "lucide-react";
import { Combobox } from "@headlessui/react";
// plane imports
import { useTranslation } from "@plane/i18n";
import { EstimatePropertyIcon, ChevronDownIcon } from "@plane/propel/icons";
import { CheckIcon, SearchIcon, EstimatePropertyIcon, ChevronDownIcon } from "@plane/propel/icons";
import { EEstimateSystem } from "@plane/types";
import { ComboDropDown } from "@plane/ui";
import { convertMinutesToHoursMinutesString, cn } from "@plane/utils";
@ -235,7 +234,7 @@ export const EstimateDropdown = observer(function EstimateDropdown(props: Props)
{...attributes.popper}
>
<div className="flex items-center gap-1.5 rounded-sm border border-subtle bg-surface-2 px-2">
<Search className="h-3.5 w-3.5 text-placeholder" strokeWidth={1.5} />
<SearchIcon className="h-3.5 w-3.5 text-placeholder" strokeWidth={1.5} />
<Combobox.Input
as="input"
ref={inputRef}
@ -276,7 +275,7 @@ export const EstimateDropdown = observer(function EstimateDropdown(props: Props)
)}
>
<span className="flex-grow truncate">{option.content}</span>
{selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
{selected && <CheckIcon className="h-3.5 w-3.5 flex-shrink-0" />}
</div>
)}
</Combobox.Option>

5
apps/web/core/components/dropdowns/intake-state/base.tsx
View file

@ -2,11 +2,10 @@ import type { ReactNode } from "react";
import { useRef, useState } from "react";
import { observer } from "mobx-react";
import { usePopper } from "react-popper";
import { Search } from "lucide-react";
import { Combobox } from "@headlessui/react";
// plane imports
import { useTranslation } from "@plane/i18n";
import { IntakeStateGroupIcon, ChevronDownIcon } from "@plane/propel/icons";
import { SearchIcon, IntakeStateGroupIcon, ChevronDownIcon } from "@plane/propel/icons";
import type { IIntakeState } from "@plane/types";
import { ComboDropDown, Spinner } from "@plane/ui";
import { cn } from "@plane/utils";
@ -217,7 +216,7 @@ export const WorkItemStateDropdownBase = observer(function WorkItemStateDropdown
{...attributes.popper}
>
<div className="flex items-center gap-1.5 rounded-sm border border-subtle bg-surface-2 px-2">
<Search className="h-3.5 w-3.5 text-placeholder" strokeWidth={1.5} />
<SearchIcon className="h-3.5 w-3.5 text-placeholder" strokeWidth={1.5} />
<Combobox.Input
as="input"
ref={inputRef}

4
apps/web/core/components/dropdowns/layout.tsx
View file

@ -1,9 +1,9 @@
import { useCallback, useMemo } from "react";
import { observer } from "mobx-react";
import { Check } from "lucide-react";
// plane imports
import { ISSUE_LAYOUT_MAP } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { CheckIcon } from "@plane/propel/icons";
import { EIssueLayoutTypes } from "@plane/types";
import { Dropdown } from "@plane/ui";
import { cn } from "@plane/utils";
@ -55,7 +55,7 @@ export const LayoutDropDown = observer(function LayoutDropDown(props: TLayoutDro
<IssueLayoutIcon layout={dropdownValue.key} strokeWidth={2} className={`size-3 text-secondary`} />
<span className="font-medium text-11">{t(dropdownValue.i18n_label)}</span>
</div>
{props.selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
{props.selected && <CheckIcon className="h-3.5 w-3.5 flex-shrink-0" />}
</div>
);
}, []);

7
apps/web/core/components/dropdowns/member/member-options.tsx
View file

@ -4,11 +4,10 @@ import { observer } from "mobx-react";
import { useParams } from "next/navigation";
import { createPortal } from "react-dom";
import { usePopper } from "react-popper";
import { Check, Search } from "lucide-react";
import { Combobox } from "@headlessui/react";
// plane imports
import { useTranslation } from "@plane/i18n";
import { SuspendedUserIcon } from "@plane/propel/icons";
import { CheckIcon, SearchIcon, SuspendedUserIcon } from "@plane/propel/icons";
import { EPillSize, EPillVariant, Pill } from "@plane/propel/pill";
import type { IUserLite } from "@plane/types";
import { Avatar } from "@plane/ui";
@ -129,7 +128,7 @@ export const MemberOptions = observer(function MemberOptions(props: Props) {
{...attributes.popper}
>
<div className="flex items-center gap-1.5 rounded-sm border border-subtle bg-surface-2 px-2">
<Search className="h-3.5 w-3.5 text-placeholder" strokeWidth={1.5} />
<SearchIcon className="h-3.5 w-3.5 text-placeholder" strokeWidth={1.5} />
<Combobox.Input
as="input"
ref={inputRef}
@ -165,7 +164,7 @@ export const MemberOptions = observer(function MemberOptions(props: Props) {
{({ selected }) => (
<>
<span className="flex-grow truncate">{option.content}</span>
{selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
{selected && <CheckIcon className="h-3.5 w-3.5 flex-shrink-0" />}
{isUserSuspended(option.value, workspaceSlug?.toString()) && (
<Pill variant={EPillVariant.DEFAULT} size={EPillSize.XS} className="border-none">
Suspended

7
apps/web/core/components/dropdowns/module/module-options.tsx
View file

@ -2,11 +2,10 @@ import { useEffect, useRef, useState } from "react";
import type { Placement } from "@popperjs/core";
import { observer } from "mobx-react";
import { usePopper } from "react-popper";
import { Check, Search } from "lucide-react";
import { Combobox } from "@headlessui/react";
// plane imports
import { useTranslation } from "@plane/i18n";
import { ModuleIcon } from "@plane/propel/icons";
import { CheckIcon, SearchIcon, ModuleIcon } from "@plane/propel/icons";
import type { IModule } from "@plane/types";
import { cn } from "@plane/utils";
// hooks
@ -113,7 +112,7 @@ export const ModuleOptions = observer(function ModuleOptions(props: Props) {
{...attributes.popper}
>
<div className="flex items-center gap-1.5 rounded-sm border border-subtle bg-surface-2 px-2">
<Search className="h-3.5 w-3.5 text-placeholder" strokeWidth={1.5} />
<SearchIcon className="h-3.5 w-3.5 text-placeholder" strokeWidth={1.5} />
<Combobox.Input
as="input"
ref={inputRef}
@ -146,7 +145,7 @@ export const ModuleOptions = observer(function ModuleOptions(props: Props) {
{({ selected }) => (
<>
<span className="flex-grow truncate">{option.content}</span>
{selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
{selected && <CheckIcon className="h-3.5 w-3.5 flex-shrink-0" />}
</>
)}
</Combobox.Option>

8
apps/web/core/components/dropdowns/priority.tsx
View file

@ -1,12 +1,12 @@
import type { ReactNode } from "react";
import { useRef, useState } from "react";
import { usePopper } from "react-popper";
import { Check, Search, SignalHigh } from "lucide-react";
import { SignalHigh } from "lucide-react";
import { Combobox } from "@headlessui/react";
import { ISSUE_PRIORITIES } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
// types
import { PriorityIcon, ChevronDownIcon } from "@plane/propel/icons";
import { CheckIcon, PriorityIcon, ChevronDownIcon, SearchIcon } from "@plane/propel/icons";
import { Tooltip } from "@plane/propel/tooltip";
import type { TIssuePriorities } from "@plane/types";
// ui
@ -465,7 +465,7 @@ export function PriorityDropdown(props: Props) {
{...attributes.popper}
>
<div className="flex items-center gap-1.5 rounded-sm border border-subtle bg-surface-2 px-2">
<Search className="h-3.5 w-3.5 text-placeholder" strokeWidth={1.5} />
<SearchIcon className="h-3.5 w-3.5 text-placeholder" strokeWidth={1.5} />
<Combobox.Input
as="input"
ref={inputRef}
@ -494,7 +494,7 @@ export function PriorityDropdown(props: Props) {
{({ selected }) => (
<>
<span className="flex-grow truncate">{option.content}</span>
{selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
{selected && <CheckIcon className="h-3.5 w-3.5 flex-shrink-0" />}
</>
)}
</Combobox.Option>

7
apps/web/core/components/dropdowns/project/base.tsx
View file

@ -2,12 +2,11 @@ import type { ReactNode } from "react";
import { useRef, useState } from "react";
import { observer } from "mobx-react";
import { usePopper } from "react-popper";
import { Check, Search } from "lucide-react";
import { Combobox } from "@headlessui/react";
// plane imports
import { useTranslation } from "@plane/i18n";
import { Logo } from "@plane/propel/emoji-icon-picker";
import { ProjectIcon, ChevronDownIcon } from "@plane/propel/icons";
import { CheckIcon, SearchIcon, ProjectIcon, ChevronDownIcon } from "@plane/propel/icons";
import { ComboDropDown } from "@plane/ui";
import { cn } from "@plane/utils";
// components
@ -238,7 +237,7 @@ export const ProjectDropdownBase = observer(function ProjectDropdownBase(props:
{...attributes.popper}
>
<div className="flex items-center gap-1.5 rounded-sm border border-subtle bg-surface-2 px-2">
<Search className="h-3.5 w-3.5 text-placeholder" strokeWidth={1.5} />
<SearchIcon className="h-3.5 w-3.5 text-placeholder" strokeWidth={1.5} />
<Combobox.Input
as="input"
ref={inputRef}
@ -268,7 +267,7 @@ export const ProjectDropdownBase = observer(function ProjectDropdownBase(props:
{({ selected }) => (
<>
<span className="flex-grow truncate">{option.content}</span>
{selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
{selected && <CheckIcon className="h-3.5 w-3.5 flex-shrink-0" />}
</>
)}
</Combobox.Option>

5
apps/web/core/components/dropdowns/state/base.tsx
View file

@ -2,11 +2,10 @@ import type { ReactNode } from "react";
import { useRef, useState } from "react";
import { observer } from "mobx-react";
import { usePopper } from "react-popper";
import { Search } from "lucide-react";
import { Combobox } from "@headlessui/react";
// plane imports
import { useTranslation } from "@plane/i18n";
import { StateGroupIcon, ChevronDownIcon } from "@plane/propel/icons";
import { SearchIcon, StateGroupIcon, ChevronDownIcon } from "@plane/propel/icons";
import type { IState } from "@plane/types";
import { ComboDropDown, Spinner } from "@plane/ui";
import { cn } from "@plane/utils";
@ -219,7 +218,7 @@ export const WorkItemStateDropdownBase = observer(function WorkItemStateDropdown
{...attributes.popper}
>
<div className="flex items-center gap-1.5 rounded-sm border border-subtle bg-surface-2 px-2">
<Search className="h-3.5 w-3.5 text-placeholder" strokeWidth={1.5} />
<SearchIcon className="h-3.5 w-3.5 text-placeholder" strokeWidth={1.5} />
<Combobox.Input
as="input"
ref={inputRef}

10
apps/web/core/components/editor/lite-text/toolbar.tsx
View file

@ -1,6 +1,6 @@
import React, { useEffect, useState, useCallback } from "react";
import type { LucideIcon } from "lucide-react";
import { Globe2, Lock } from "lucide-react";
import { EIssueCommentAccessSpecifier } from "@plane/constants";
// editor
import type { EditorRefApi } from "@plane/editor";
@ -8,6 +8,8 @@ import type { EditorRefApi } from "@plane/editor";
import { useTranslation } from "@plane/i18n";
// ui
import { Button } from "@plane/propel/button";
import { GlobeIcon, LockIcon } from "@plane/propel/icons";
import type { ISvgIcons } from "@plane/propel/icons";
import { Tooltip } from "@plane/propel/tooltip";
// constants
import { cn } from "@plane/utils";
@ -29,19 +31,19 @@ type Props = {
};
type TCommentAccessType = {
icon: LucideIcon;
icon: LucideIcon | React.FC<ISvgIcons>;
key: EIssueCommentAccessSpecifier;
label: "Private" | "Public";
};
const COMMENT_ACCESS_SPECIFIERS: TCommentAccessType[] = [
{
icon: Lock,
icon: LockIcon,
key: EIssueCommentAccessSpecifier.INTERNAL,
label: "Private",
},
{
icon: Globe2,
icon: GlobeIcon,
key: EIssueCommentAccessSpecifier.EXTERNAL,
label: "Public",
},

5
apps/web/core/components/editor/sticky-editor/toolbar.tsx
View file

@ -1,9 +1,10 @@
import React, { useEffect, useState, useCallback } from "react";
import { Palette, Trash2 } from "lucide-react";
import { Palette } from "lucide-react";
// editor
import type { EditorRefApi } from "@plane/editor";
// ui
import { useOutsideClickDetector } from "@plane/hooks";
import { TrashIcon } from "@plane/propel/icons";
import { Tooltip } from "@plane/propel/tooltip";
import type { TSticky } from "@plane/types";
// constants
@ -119,7 +120,7 @@ export function StickyEditorToolbar(props: Props) {
}
>
<button type="button" onClick={handleDelete} className="my-auto text-primary/50">
<Trash2 className="size-4" />
<TrashIcon className="size-4" />
</button>
</Tooltip>
</div>

4
apps/web/core/components/estimates/points/create-root.tsx
View file

@ -1,10 +1,10 @@
import type { Dispatch, FC, SetStateAction } from "react";
import { useCallback, useState } from "react";
import { observer } from "mobx-react";
import { Plus } from "lucide-react";
// plane imports
import { estimateCount } from "@plane/constants";
import { Button } from "@plane/propel/button";
import { PlusIcon } from "@plane/propel/icons";
import type { TEstimatePointsObject, TEstimateSystemKeys, TEstimateTypeError } from "@plane/types";
import { Sortable } from "@plane/ui";
// local imports
@ -165,7 +165,7 @@ export const EstimatePointCreateRoot = observer(function EstimatePointCreateRoot
/>
))}
{estimatePoints && estimatePoints.length + (estimatePointCreate?.length || 0) <= estimateCount.max - 1 && (
<Button variant="link" prependIcon={<Plus />} onClick={handleCreate}>
<Button variant="link" prependIcon={<PlusIcon />} onClick={handleCreate}>
Add {estimateType}
</Button>
)}

8
apps/web/core/components/estimates/points/create.tsx
View file

@ -1,10 +1,10 @@
import type { FC, FormEvent } from "react";
import type { FormEvent } from "react";
import { useState } from "react";
import { observer } from "mobx-react";
import { Check, Info } from "lucide-react";
import { Info } from "lucide-react";
import { EEstimateSystem, MAX_ESTIMATE_POINT_INPUT_LENGTH } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { CloseIcon } from "@plane/propel/icons";
import { CheckIcon, CloseIcon } from "@plane/propel/icons";
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
import { Tooltip } from "@plane/propel/tooltip";
import type { TEstimatePointsObject, TEstimateSystemKeys, TEstimateTypeErrorObject } from "@plane/types";
@ -194,7 +194,7 @@ export const EstimatePointCreate = observer(function EstimatePointCreate(props:
className="rounded-xs w-6 h-6 flex-shrink-0 relative flex justify-center items-center hover:bg-layer-1 transition-colors cursor-pointer text-success-primary"
disabled={loader}
>
{loader ? <Spinner className="w-4 h-4" /> : <Check size={14} />}
{loader ? <Spinner className="w-4 h-4" /> : <CheckIcon width={14} height={14} />}
</button>
)}
<button

7
apps/web/core/components/estimates/points/preview.tsx
View file

@ -1,10 +1,11 @@
import type { FC } from "react";
import { useEffect, useRef, useState } from "react";
import { observer } from "mobx-react";
import { GripVertical, Pencil, Trash2 } from "lucide-react";
import { GripVertical } from "lucide-react";
// plane imports
import { EEstimateSystem, estimateCount } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { EditIcon, TrashIcon } from "@plane/propel/icons";
import type { TEstimatePointsObject, TEstimateSystemKeys, TEstimateTypeErrorObject } from "@plane/types";
import { convertMinutesToHoursMinutesString } from "@plane/utils";
// plane web imports
@ -71,7 +72,7 @@ export const EstimatePointItemPreview = observer(function EstimatePointItemPrevi
className="rounded-xs w-6 h-6 flex-shrink-0 relative flex justify-center items-center hover:bg-layer-1 transition-colors cursor-pointer"
onClick={() => setEstimatePointEditToggle(true)}
>
<Pencil size={14} className="text-secondary" />
<EditIcon width={14} height={14} className="text-secondary" />
</div>
{estimatePoints.length > estimateCount.min && (
<div
@ -82,7 +83,7 @@ export const EstimatePointItemPreview = observer(function EstimatePointItemPrevi
: handleEstimatePointValueRemove && handleEstimatePointValueRemove()
}
>
<Trash2 size={14} className="text-secondary" />
<TrashIcon width={14} height={14} className="text-secondary" />
</div>
)}
</div>

8
apps/web/core/components/estimates/points/update.tsx
View file

@ -1,10 +1,10 @@
import type { FC, FormEvent } from "react";
import type { FormEvent } from "react";
import { useEffect, useState } from "react";
import { observer } from "mobx-react";
import { Check, Info } from "lucide-react";
import { Info } from "lucide-react";
import { EEstimateSystem, MAX_ESTIMATE_POINT_INPUT_LENGTH } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { CloseIcon } from "@plane/propel/icons";
import { CheckIcon, CloseIcon } from "@plane/propel/icons";
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
import { Tooltip } from "@plane/propel/tooltip";
import type { TEstimatePointsObject, TEstimateSystemKeys, TEstimateTypeErrorObject } from "@plane/types";
@ -202,7 +202,7 @@ export const EstimatePointUpdate = observer(function EstimatePointUpdate(props:
className="rounded-xs w-6 h-6 flex-shrink-0 relative flex justify-center items-center hover:bg-layer-1 transition-colors cursor-pointer text-success-primary"
disabled={loader}
>
{loader ? <Spinner className="w-4 h-4" /> : <Check size={14} />}
{loader ? <Spinner className="w-4 h-4" /> : <CheckIcon width={14} height={14} />}
</button>
)}
<button

4
apps/web/core/components/gantt-chart/helpers/add-block.tsx
View file

@ -1,7 +1,7 @@
import { useEffect, useRef, useState } from "react";
import { addDays } from "date-fns";
import { observer } from "mobx-react";
import { Plus } from "lucide-react";
import { PlusIcon } from "@plane/propel/icons";
// ui
import { Tooltip } from "@plane/propel/tooltip";
import type { IBlockUpdateData, IGanttBlock } from "@plane/types";
@ -91,7 +91,7 @@ export const ChartAddBlock = observer(function ChartAddBlock(props: Props) {
}}
onClick={handleButtonClick}
>
<Plus className="h-3.5 w-3.5" />
<PlusIcon className="h-3.5 w-3.5" />
</button>
</Tooltip>
)}

6
apps/web/core/components/home/widgets/empty-states/no-projects.tsx
View file

@ -3,12 +3,12 @@ import React from "react";
import { observer } from "mobx-react";
import Link from "next/link";
import { useParams } from "next/navigation";
import { Check, Hotel } from "lucide-react";
import { Hotel } from "lucide-react";
// plane ui
import { EUserPermissions, EUserPermissionsLevel, PROJECT_TRACKER_ELEMENTS } from "@plane/constants";
import { useLocalStorage } from "@plane/hooks";
import { useTranslation } from "@plane/i18n";
import { MembersPropertyIcon, ProjectIcon, CloseIcon } from "@plane/propel/icons";
import { MembersPropertyIcon, CheckIcon, ProjectIcon, CloseIcon } from "@plane/propel/icons";
import { cn, getFileURL } from "@plane/utils";
// helpers
// hooks
@ -162,7 +162,7 @@ export const NoProjectsEmptyState = observer(function NoProjectsEmptyState() {
<p className="text-11 text-tertiary mb-2">{t(item.description)}</p>
{isStateComplete ? (
<div className="flex items-center gap-2 bg-[#17a34a] rounded-full p-1 w-fit">
<Check className="size-3 text-accent-primary text-on-color" />
<CheckIcon className="size-3 text-accent-primary text-on-color" />
</div>
) : (
!item.cta.disabled &&

2
apps/web/core/components/home/widgets/links/action.tsx
View file

@ -1,5 +1,5 @@
import { PlusIcon } from "lucide-react";
import { useTranslation } from "@plane/i18n";
import { PlusIcon } from "@plane/propel/icons";
type TProps = {
onClick: () => void;

11
apps/web/core/components/home/widgets/links/link-detail.tsx
View file

@ -1,7 +1,8 @@
import { useCallback, useMemo } from "react";
import { observer } from "mobx-react";
import { Pencil, ExternalLink, Link, Trash2 } from "lucide-react";
import { useTranslation } from "@plane/i18n";
import { LinkIcon, NewTabIcon, EditIcon, TrashIcon } from "@plane/propel/icons";
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
import type { TContextMenuItem } from "@plane/ui";
import { LinkItemBlock } from "@plane/ui";
@ -64,25 +65,25 @@ export const ProjectLinkDetail = observer(function ProjectLinkDetail(props: TPro
key: "edit",
action: () => handleEdit(true),
title: t("edit"),
icon: Pencil,
icon: EditIcon,
},
{
key: "open-new-tab",
action: handleOpenInNewTab,
title: t("open_in_new_tab"),
icon: ExternalLink,
icon: NewTabIcon,
},
{
key: "copy-link",
action: handleCopyText,
title: t("copy_link"),
icon: Link,
icon: LinkIcon,
},
{
key: "delete",
action: handleDelete,
title: t("delete"),
icon: Trash2,
icon: TrashIcon,
},
],
[handleEdit, handleOpenInNewTab, handleCopyText, handleDelete, t]

5
apps/web/core/components/home/widgets/links/root.tsx
View file

@ -1,8 +1,9 @@
import { useCallback } from "react";
import { observer } from "mobx-react";
import useSWR from "swr";
import { Plus } from "lucide-react";
import { useTranslation } from "@plane/i18n";
import { PlusIcon } from "@plane/propel/icons";
import type { THomeWidgetProps } from "@plane/types";
import { useHome } from "@/hooks/store/use-home";
import { LinkCreateUpdateModal } from "./create-update-link-modal";
@ -46,7 +47,7 @@ export const DashboardQuickLinks = observer(function DashboardQuickLinks(props:
onClick={handleCreateLinkModal}
className="flex gap-1 text-13 font-medium text-accent-primary my-auto"
>
<Plus className="size-4 my-auto" /> <span>{t("home.quick_links.add")}</span>
<PlusIcon className="size-4 my-auto" /> <span>{t("home.quick_links.add")}</span>
</button>
</div>
<div className="flex flex-wrap w-full">

4
apps/web/core/components/icons/locked-component.tsx
View file

@ -1,11 +1,11 @@
import { Lock } from "lucide-react";
import { LockIcon } from "@plane/propel/icons";
import { Tooltip } from "@plane/propel/tooltip";
export function LockedComponent(props: { toolTipContent?: string }) {
const { toolTipContent } = props;
const lockedComponent = (
<div className="flex-shrink-0 flex h-7 items-center gap-2 rounded-full bg-layer-1 px-3 py-0.5 text-11 font-medium text-tertiary">
<Lock className="h-3 w-3" />
<LockIcon className="h-3 w-3" />
<span>Locked</span>
</div>
);

12
apps/web/core/components/inbox/content/inbox-issue-header.tsx
View file

@ -1,12 +1,12 @@
import type { FC } from "react";
import { useCallback, useEffect, useState } from "react";
import { observer } from "mobx-react";
import { CircleCheck, CircleX, Clock, ExternalLink, FileStack, Link, Trash2, MoveRight, Copy } from "lucide-react";
import { CircleCheck, CircleX, Clock, FileStack, MoveRight } from "lucide-react";
// plane imports
import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { Button } from "@plane/propel/button";
import { ChevronDownIcon, ChevronUpIcon } from "@plane/propel/icons";
import { LinkIcon, CopyIcon, NewTabIcon, TrashIcon, ChevronDownIcon, ChevronUpIcon } from "@plane/propel/icons";
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
import type { TNameDescriptionLoader } from "@plane/types";
import { EInboxIssueStatus } from "@plane/types";
@ -351,13 +351,13 @@ export const InboxIssueActionsHeader = observer(function InboxIssueActionsHeader
<div className="flex items-center gap-2">
<Button
variant="secondary"
prependIcon={<Link className="h-2.5 w-2.5" />}
prependIcon={<LinkIcon className="h-2.5 w-2.5" />}
onClick={() => handleCopyIssueLink(workItemLink)}
>
{t("inbox_issue.actions.copy")}
</Button>
<ControlLink href={workItemLink} onClick={() => router.push(workItemLink)} target="_self">
<Button variant="secondary" prependIcon={<ExternalLink className="h-2.5 w-2.5" />}>
<Button variant="secondary" prependIcon={<NewTabIcon className="h-2.5 w-2.5" />}>
{t("inbox_issue.actions.open")}
</Button>
</ControlLink>
@ -402,14 +402,14 @@ export const InboxIssueActionsHeader = observer(function InboxIssueActionsHeader
)}
<CustomMenu.MenuItem onClick={() => handleCopyIssueLink(workItemLink)}>
<div className="flex items-center gap-2">
<Copy size={14} strokeWidth={2} />
<CopyIcon width={14} height={14} strokeWidth={2} />
{t("inbox_issue.actions.copy")}
</div>
</CustomMenu.MenuItem>
{canDelete && (
<CustomMenu.MenuItem onClick={() => setDeleteIssueModal(true)}>
<div className="flex items-center gap-2">
<Trash2 size={14} strokeWidth={2} />
<TrashIcon width={14} height={14} strokeWidth={2} />
{t("inbox_issue.actions.delete")}
</div>
</CustomMenu.MenuItem>

10
apps/web/core/components/inbox/content/inbox-issue-mobile-header.tsx
View file

@ -1,7 +1,7 @@
import React from "react";
import { observer } from "mobx-react";
import { CircleCheck, CircleX, Clock, ExternalLink, FileStack, Link, Trash2, PanelLeft, MoveRight } from "lucide-react";
import { ChevronDownIcon, ChevronUpIcon } from "@plane/propel/icons";
import { CircleCheck, CircleX, Clock, FileStack, PanelLeft, MoveRight } from "lucide-react";
import { LinkIcon, NewTabIcon, TrashIcon, ChevronDownIcon, ChevronUpIcon } from "@plane/propel/icons";
import type { TNameDescriptionLoader } from "@plane/types";
import { Header, CustomMenu, EHeaderVariant } from "@plane/ui";
import { cn, findHowManyDaysLeft, generateWorkItemLink } from "@plane/utils";
@ -122,7 +122,7 @@ export const InboxIssueActionsMobileHeader = observer(function InboxIssueActions
{isAcceptedOrDeclined && (
<CustomMenu.MenuItem onClick={handleCopyIssueLink}>
<div className="flex items-center gap-2">
<Link size={14} strokeWidth={2} />
<LinkIcon width={14} height={14} strokeWidth={2} />
Copy work item link
</div>
</CustomMenu.MenuItem>
@ -130,7 +130,7 @@ export const InboxIssueActionsMobileHeader = observer(function InboxIssueActions
{isAcceptedOrDeclined && (
<CustomMenu.MenuItem onClick={() => router.push(workItemLink)}>
<div className="flex items-center gap-2">
<ExternalLink size={14} strokeWidth={2} />
<NewTabIcon width={14} height={14} strokeWidth={2} />
Open work item
</div>
</CustomMenu.MenuItem>
@ -202,7 +202,7 @@ export const InboxIssueActionsMobileHeader = observer(function InboxIssueActions
{canDelete && !isAcceptedOrDeclined && (
<CustomMenu.MenuItem onClick={() => setDeleteIssueModal(true)}>
<div className="flex items-center gap-2 text-danger-primary">
<Trash2 size={14} strokeWidth={2} />
<TrashIcon width={14} height={14} strokeWidth={2} />
Delete
</div>
</CustomMenu.MenuItem>

5
apps/web/core/components/inbox/inbox-filter/filters/filter-selection.tsx
View file

@ -1,8 +1,7 @@
import type { FC } from "react";
import { useState } from "react";
import { observer } from "mobx-react";
import { Search } from "lucide-react";
import { CloseIcon } from "@plane/propel/icons";
import { SearchIcon, CloseIcon } from "@plane/propel/icons";
// hooks
import { useLabel } from "@/hooks/store/use-label";
import { useMember } from "@/hooks/store/use-member";
@ -31,7 +30,7 @@ export const InboxIssueFilterSelection = observer(function InboxIssueFilterSelec
<div className="flex h-full w-full flex-col overflow-hidden">
<div className="bg-surface-1 p-2.5 pb-0">
<div className="flex items-center gap-1.5 rounded-sm border-[0.5px] border-subtle bg-surface-2 px-1.5 py-1 text-11">
<Search className="text-placeholder" size={12} strokeWidth={2} />
<SearchIcon className="text-placeholder" width={12} height={12} strokeWidth={2} />
<input
type="text"
className="w-full bg-surface-2 outline-none placeholder:text-placeholder"

8
apps/web/core/components/inbox/inbox-filter/sorting/order-by.tsx
View file

@ -1,10 +1,10 @@
import type { FC } from "react";
import { observer } from "mobx-react";
import { ArrowDownWideNarrow, ArrowUpWideNarrow, Check } from "lucide-react";
import { ArrowDownWideNarrow, ArrowUpWideNarrow } from "lucide-react";
import { INBOX_ISSUE_ORDER_BY_OPTIONS, INBOX_ISSUE_SORT_BY_OPTIONS } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { getButtonStyling } from "@plane/propel/button";
import { ChevronDownIcon } from "@plane/propel/icons";
import { CheckIcon, ChevronDownIcon } from "@plane/propel/icons";
import type { TInboxIssueSortingOrderByKeys, TInboxIssueSortingSortByKeys } from "@plane/types";
import { CustomMenu } from "@plane/ui";
// constants
@ -52,7 +52,7 @@ export const InboxIssueOrderByDropdown = observer(function InboxIssueOrderByDrop
onClick={() => handleInboxIssueSorting("order_by", option.key as TInboxIssueSortingOrderByKeys)}
>
{t(option.i18n_label)}
{inboxSorting?.order_by?.includes(option.key) && <Check className="size-3" />}
{inboxSorting?.order_by?.includes(option.key) && <CheckIcon className="size-3" />}
</CustomMenu.MenuItem>
))}
<hr className="my-2 border-subtle" />
@ -63,7 +63,7 @@ export const InboxIssueOrderByDropdown = observer(function InboxIssueOrderByDrop
onClick={() => handleInboxIssueSorting("sort_by", option.key as TInboxIssueSortingSortByKeys)}
>
{t(option.i18n_label)}
{inboxSorting?.sort_by?.includes(option.key) && <Check className="size-3" />}
{inboxSorting?.sort_by?.includes(option.key) && <CheckIcon className="size-3" />}
</CustomMenu.MenuItem>
))}
</CustomMenu>

5
apps/web/core/components/inbox/inbox-status-icon.tsx
View file

@ -1,4 +1,5 @@
import { AlertTriangle, CheckCircle2, Clock, Copy, XCircle } from "lucide-react";
import { AlertTriangle, CheckCircle2, Clock, XCircle } from "lucide-react";
import { CopyIcon } from "@plane/propel/icons";
import type { TInboxIssueStatus } from "@plane/types";
import { EInboxIssueStatus } from "@plane/types";
import { cn } from "@plane/utils";
@ -25,7 +26,7 @@ export const ICON_PROPERTIES = {
bgColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "bg-[#E9F6E9]"),
},
[EInboxIssueStatus.DUPLICATE]: {
icon: Copy,
icon: CopyIcon,
textColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "text-secondary"),
bgColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "bg-gray-500/10"),
},

4
apps/web/core/components/inbox/modals/select-duplicate.tsx
View file

@ -1,10 +1,10 @@
import { useEffect, useState } from "react";
import { useParams } from "next/navigation";
import { useTheme } from "next-themes";
import { Search } from "lucide-react";
import { Combobox } from "@headlessui/react";
// plane imports
import { useTranslation } from "@plane/i18n";
import { SearchIcon } from "@plane/propel/icons";
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
import type { ISearchIssueResponse } from "@plane/types";
import { Loader, EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
@ -128,7 +128,7 @@ export function SelectDuplicateInboxIssueModal(props: Props) {
<ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
<Combobox value={value} onChange={handleSubmit}>
<div className="relative m-1">
<Search
<SearchIcon
className="pointer-events-none absolute left-4 top-3.5 h-5 w-5 text-primary text-opacity-40"
aria-hidden="true"
/>

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

@ -3,8 +3,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 } from "lucide-react";
import { MembersPropertyIcon } from "@plane/propel/icons";
import { ArrowLeft, List, Settings, UploadCloud } from "lucide-react";
import { CheckIcon, MembersPropertyIcon } from "@plane/propel/icons";
// types
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
import type { IGithubRepoCollaborator, IGithubServiceImportFormData } from "@plane/types";
@ -70,7 +70,7 @@ const integrationWorkflowData = [
{
title: "Confirm",
key: "import-confirm",
icon: Check,
icon: CheckIcon,
},
];

5
apps/web/core/components/integration/jira/give-details.tsx
View file

@ -2,8 +2,9 @@ import React from "react";
import { observer } from "mobx-react";
import Link from "next/link";
import { useFormContext, Controller } from "react-hook-form";
import { Plus } from "lucide-react";
import { PROJECT_TRACKER_ELEMENTS } from "@plane/constants";
import { PlusIcon } from "@plane/propel/icons";
import type { IJiraImporterForm } from "@plane/types";
// hooks
// components
@ -205,7 +206,7 @@ export const JiraGetImportDetail = observer(function JiraGetImportDetail() {
}}
className="flex cursor-pointer select-none items-center space-x-2 truncate rounded-sm px-1 py-1.5 text-secondary"
>
<Plus className="h-4 w-4 text-secondary" />
<PlusIcon className="h-4 w-4 text-secondary" />
<span>Create new project</span>
</button>
</div>

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

@ -4,9 +4,9 @@ import { useParams } from "next/navigation";
import { FormProvider, useForm } from "react-hook-form";
import { mutate } from "swr";
// icons
import { ArrowLeft, Check, List, Settings } from "lucide-react";
import { ArrowLeft, List, Settings } from "lucide-react";
import { Button } from "@plane/propel/button";
import { MembersPropertyIcon } from "@plane/propel/icons";
import { CheckIcon, MembersPropertyIcon } from "@plane/propel/icons";
// types
import type { IJiraImporterForm } from "@plane/types";
// assets
@ -44,7 +44,7 @@ const integrationWorkflowData: Array<{
{
title: "Confirm",
key: "import-confirmation",
icon: Check,
icon: CheckIcon,
},
];

5
apps/web/core/components/integration/single-import.tsx
View file

@ -1,8 +1,9 @@
import { observer } from "mobx-react";
import { Trash2 } from "lucide-react";
// plane imports
import { IMPORTERS_LIST } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { TrashIcon } from "@plane/propel/icons";
import type { IImporterService } from "@plane/types";
import { CustomMenu } from "@plane/ui";
// icons
@ -54,7 +55,7 @@ export const SingleImport = observer(function SingleImport({ service, refreshing
<CustomMenu ellipsis>
<CustomMenu.MenuItem onClick={handleDelete}>
<span className="flex items-center justify-start gap-2">
<Trash2 className="h-3.5 w-3.5" />
<TrashIcon className="h-3.5 w-3.5" />
Delete import
</span>
</CustomMenu.MenuItem>

5
apps/web/core/components/issues/attachment/attachment-list-item.tsx
View file

@ -1,7 +1,8 @@
import type { FC } from "react";
import { observer } from "mobx-react";
import { Trash } from "lucide-react";
import { useTranslation } from "@plane/i18n";
import { TrashIcon } from "@plane/propel/icons";
import { Tooltip } from "@plane/propel/tooltip";
import type { TIssueServiceType } from "@plane/types";
import { EIssueServiceType } from "@plane/types";
@ -87,7 +88,7 @@ export const IssueAttachmentsListItem = observer(function IssueAttachmentsListIt
}}
>
<div className="flex items-center gap-2">
<Trash className="h-3.5 w-3.5" strokeWidth={2} />
<TrashIcon className="h-3.5 w-3.5" strokeWidth={2} />
<span>{t("common.actions.delete")}</span>
</div>
</CustomMenu.MenuItem>

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

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

4
apps/web/core/components/issues/issue-detail-widgets/attachments/quick-action-button.tsx
View file

@ -3,7 +3,7 @@ import React, { useCallback, useState } from "react";
import { observer } from "mobx-react";
import type { FileRejection } from "react-dropzone";
import { useDropzone } from "react-dropzone";
import { Plus } from "lucide-react";
import { PlusIcon } from "@plane/propel/icons";
// plane imports
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
import type { TIssueServiceType } from "@plane/types";
@ -98,7 +98,7 @@ export const IssueAttachmentActionButton = observer(function IssueAttachmentActi
>
<button {...getRootProps()} type="button" disabled={disabled}>
<input {...getInputProps()} />
{customButton ? customButton : <Plus className="h-4 w-4" />}
{customButton ? customButton : <PlusIcon className="h-4 w-4" />}
</button>
</div>
);

4
apps/web/core/components/issues/issue-detail-widgets/links/quick-action-button.tsx
View file

@ -1,7 +1,7 @@
import type { FC } from "react";
import React from "react";
import { observer } from "mobx-react";
import { Plus } from "lucide-react";
import { PlusIcon } from "@plane/propel/icons";
// plane imports
import type { TIssueServiceType } from "@plane/types";
// hooks
@ -27,7 +27,7 @@ export const IssueLinksActionButton = observer(function IssueLinksActionButton(p
return (
<button type="button" onClick={handleOnClick} disabled={disabled}>
{customButton ? customButton : <Plus className="h-4 w-4" />}
{customButton ? customButton : <PlusIcon className="h-4 w-4" />}
</button>
);
});

7
apps/web/core/components/issues/issue-detail-widgets/relations/quick-action-button.tsx
View file

@ -1,9 +1,10 @@
import type { FC } from "react";
import React from "react";
import { observer } from "mobx-react";
import { Plus } from "lucide-react";
// plane imports
import { useTranslation } from "@plane/i18n";
import { PlusIcon } from "@plane/propel/icons";
// plane imports
import type { TIssueServiceType } from "@plane/types";
import { CustomMenu } from "@plane/ui";
// hooks
@ -34,7 +35,7 @@ export const RelationActionButton = observer(function RelationActionButton(props
};
// button element
const customButtonElement = customButton ? <>{customButton}</> : <Plus className="h-4 w-4" />;
const customButtonElement = customButton ? <>{customButton}</> : <PlusIcon className="h-4 w-4" />;
return (
<CustomMenu

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

@ -1,9 +1,9 @@
import type { FC } from "react";
import { useMemo, useState } from "react";
import { observer } from "mobx-react";
import { ListFilter, Search } from "lucide-react";
import { ListFilter } from "lucide-react";
import { useTranslation } from "@plane/i18n";
import { CloseIcon } from "@plane/propel/icons";
import { SearchIcon, CloseIcon } from "@plane/propel/icons";
import type { IIssueFilterOptions, IState } from "@plane/types";
import { cn } from "@plane/utils";
import {
@ -56,7 +56,7 @@ export const SubIssueFilters = observer(function SubIssueFilters(props: TSubIssu
<div className="flex max-h-[350px] flex-col overflow-hidden">
<div className="bg-surface-1 p-2.5 pb-0">
<div className="flex items-center gap-1.5 rounded-sm border-[0.5px] border-subtle bg-surface-2 px-1.5 py-1 text-11">
<Search className="text-placeholder" size={12} strokeWidth={2} />
<SearchIcon className="text-placeholder" width={12} height={12} strokeWidth={2} />
<input
type="text"
className="w-full bg-surface-2 outline-none placeholder:text-placeholder"

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

@ -1,7 +1,7 @@
import { observer } from "mobx-react";
import { Pencil, Trash, Link as LinkIcon, Loader } from "lucide-react";
import { Link as Loader } from "lucide-react";
import { useTranslation } from "@plane/i18n";
import { CloseIcon, ChevronRightIcon } from "@plane/propel/icons";
import { LinkIcon, EditIcon, TrashIcon, CloseIcon, ChevronRightIcon } from "@plane/propel/icons";
// plane imports
import { Tooltip } from "@plane/propel/tooltip";
import type { TIssue, TIssueServiceType, TSubIssueOperations } from "@plane/types";
@ -192,7 +192,7 @@ export const SubIssuesListItem = observer(function SubIssuesListItem(props: Prop
}}
>
<div className="flex items-center gap-2">
<Pencil className="h-3.5 w-3.5" strokeWidth={2} />
<EditIcon className="h-3.5 w-3.5" strokeWidth={2} />
<span>{t("issue.edit")}</span>
</div>
</CustomMenu.MenuItem>
@ -233,7 +233,7 @@ export const SubIssuesListItem = observer(function SubIssuesListItem(props: Prop
}}
>
<div className="flex items-center gap-2">
<Trash className="h-3.5 w-3.5" strokeWidth={2} />
<TrashIcon className="h-3.5 w-3.5" strokeWidth={2} />
<span>{t("issue.delete.label")}</span>
</div>
</CustomMenu.MenuItem>

8
apps/web/core/components/issues/issue-detail-widgets/sub-issues/quick-action-button.tsx
View file

@ -1,11 +1,11 @@
import type { FC } from "react";
import React from "react";
import { observer } from "mobx-react";
import { Plus } from "lucide-react";
// plane imports
import { WORK_ITEM_TRACKER_EVENTS } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { WorkItemsIcon } from "@plane/propel/icons";
import { PlusIcon, WorkItemsIcon } from "@plane/propel/icons";
import type { TIssue, TIssueServiceType } from "@plane/types";
import { CustomMenu } from "@plane/ui";
// hooks
@ -69,7 +69,7 @@ export const SubIssuesActionButton = observer(function SubIssuesActionButton(pro
const optionItems = [
{
i18n_label: "common.create_new",
icon: <Plus className="h-3 w-3" />,
icon: <PlusIcon className="h-3 w-3" />,
onClick: handleCreateNew,
},
{
@ -80,7 +80,7 @@ export const SubIssuesActionButton = observer(function SubIssuesActionButton(pro
];
// button element
const customButtonElement = customButton ? <>{customButton}</> : <Plus className="h-4 w-4" />;
const customButtonElement = customButton ? <>{customButton}</> : <PlusIcon className="h-4 w-4" />;
return (
<CustomMenu customButton={customButtonElement} placement="bottom-start" disabled={disabled} closeOnSelect>

5
apps/web/core/components/issues/issue-detail/issue-activity/activity-filter.tsx
View file

@ -1,9 +1,10 @@
import { observer } from "mobx-react";
import { Check, ListFilter } from "lucide-react";
import { ListFilter } from "lucide-react";
// plane imports
import type { TActivityFilters, TActivityFilterOption } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { IconButton } from "@plane/propel/icon-button";
import { CheckIcon } from "@plane/propel/icons";
import { PopoverMenu } from "@plane/ui";
// helper
import { cn } from "@plane/utils";
@ -50,7 +51,7 @@ export const ActivityFilter = observer(function ActivityFilter(props: TActivityF
}
)}
>
{item.isSelected && <Check className="h-2.5 w-2.5" />}
{item.isSelected && <CheckIcon className="h-2.5 w-2.5" />}
</div>
<div className={cn("whitespace-nowrap", item.isSelected ? "text-primary" : "text-secondary")}>
{t(item.labelTranslationKey)}

1
apps/web/core/components/issues/issue-detail/issue-detail-quick-actions.tsx
View file

@ -5,6 +5,7 @@ import { WORK_ITEM_TRACKER_EVENTS } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { CopyLinkIcon } from "@plane/propel/icons";
import { IconButton } from "@plane/propel/icon-button";
import { LinkIcon } from "@plane/propel/icons";
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
import { Tooltip } from "@plane/propel/tooltip";
import { EIssuesStoreType } from "@plane/types";

8
apps/web/core/components/issues/issue-detail/label/create-label.tsx
View file

@ -2,9 +2,9 @@ import { useState, Fragment, useEffect } from "react";
import { TwitterPicker } from "react-color";
import { Controller, useForm } from "react-hook-form";
import { usePopper } from "react-popper";
import { Plus, Loader } from "lucide-react";
import { Loader } from "lucide-react";
import { Popover } from "@headlessui/react";
import { CloseIcon } from "@plane/propel/icons";
import { PlusIcon, CloseIcon } from "@plane/propel/icons";
import type { IIssueLabel } from "@plane/types";
// hooks
import { Input } from "@plane/ui";
@ -80,7 +80,7 @@ export function LabelCreate(props: ILabelCreate) {
onClick={handleIsCreateToggle}
>
<div className="flex-shrink-0">
{isCreateToggle ? <CloseIcon className="h-2.5 w-2.5" /> : <Plus className="h-2.5 w-2.5" />}
{isCreateToggle ? <CloseIcon className="h-2.5 w-2.5" /> : <PlusIcon className="h-2.5 w-2.5" />}
</div>
<div className="flex-shrink-0">{isCreateToggle ? "Cancel" : "New"}</div>
</div>
@ -154,7 +154,7 @@ export function LabelCreate(props: ILabelCreate) {
{isSubmitting ? (
<Loader className="spin h-3.5 w-3.5 text-on-color" />
) : (
<Plus className="h-3.5 w-3.5 text-on-color" />
<PlusIcon className="h-3.5 w-3.5 text-on-color" />
)}
</button>
</form>

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

@ -1,12 +1,13 @@
import { Fragment, useState } from "react";
import { observer } from "mobx-react";
import { usePopper } from "react-popper";
import { Check, Loader, Plus, Search } from "lucide-react";
import { Loader } from "lucide-react";
import { Combobox } from "@headlessui/react";
// plane imports
import { EUserPermissionsLevel, getRandomLabelColor } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { Button } from "@plane/propel/button";
import { CheckIcon, SearchIcon, PlusIcon } from "@plane/propel/icons";
import type { IIssueLabel } from "@plane/types";
import { EUserProjectRoles } from "@plane/types";
// helpers
@ -125,7 +126,7 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue
type="button"
variant="tertiary"
size="sm"
prependIcon={<Plus />}
prependIcon={<PlusIcon />}
onClick={() => !projectLabels && fetchLabels()}
>
{label}
@ -141,7 +142,7 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue
>
<div className="px-2">
<div className="flex w-full items-center justify-start rounded-sm border border-subtle bg-surface-2 px-2">
<Search className="h-3.5 w-3.5 text-tertiary" />
<SearchIcon className="h-3.5 w-3.5 text-tertiary" />
<Combobox.Input
className="w-full bg-transparent px-2 py-1 text-11 text-secondary placeholder:text-placeholder focus:outline-none"
value={query}
@ -172,7 +173,7 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue
{option.content}
{selected && (
<div className="flex-shrink-0">
<Check className={`h-3.5 w-3.5`} />
<CheckIcon className={`h-3.5 w-3.5`} />
</div>
)}
</>

8
apps/web/core/components/issues/issue-detail/links/link-detail.tsx
View file

@ -1,4 +1,4 @@
import { Pencil, Trash2, ExternalLink } from "lucide-react";
import { NewTabIcon, EditIcon, TrashIcon } from "@plane/propel/icons";
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
import { Tooltip } from "@plane/propel/tooltip";
import { getIconForLink, copyTextToClipboard, calculateTimeAgo } from "@plane/utils";
@ -77,7 +77,7 @@ export function IssueLinkDetail(props: TIssueLinkDetail) {
toggleIssueLinkModal(true);
}}
>
<Pencil className="h-3 w-3 stroke-[1.5] text-secondary" />
<EditIcon className="h-3 w-3 stroke-[1.5] text-secondary" />
</button>
<a
href={linkDetail.url}
@ -85,7 +85,7 @@ export function IssueLinkDetail(props: TIssueLinkDetail) {
rel="noopener noreferrer"
className="flex items-center justify-center p-1 hover:bg-layer-1"
>
<ExternalLink className="h-3 w-3 stroke-[1.5] text-secondary" />
<NewTabIcon className="h-3 w-3 stroke-[1.5] text-secondary" />
</a>
<button
type="button"
@ -96,7 +96,7 @@ export function IssueLinkDetail(props: TIssueLinkDetail) {
linkOperations.remove(linkDetail.id);
}}
>
<Trash2 className="h-3 w-3" />
<TrashIcon className="h-3 w-3" />
</button>
</div>
)}

11
apps/web/core/components/issues/issue-detail/links/link-item.tsx
View file

@ -1,6 +1,7 @@
import { observer } from "mobx-react";
import { Pencil, Trash2, Copy, Link } from "lucide-react";
import { useTranslation } from "@plane/i18n";
import { LinkIcon, CopyIcon, EditIcon, TrashIcon } from "@plane/propel/icons";
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
import { Tooltip } from "@plane/propel/tooltip";
import type { TIssueServiceType } from "@plane/types";
@ -53,7 +54,7 @@ export const IssueLinkItem = observer(function IssueLinkItem(props: TIssueLinkIt
{faviconUrl ? (
<img src={faviconUrl} alt="favicon" className="size-4 flex-shrink-0" />
) : (
<Link className="size-4 text-tertiary group-hover:text-primary flex-shrink-0" />
<LinkIcon className="size-4 text-tertiary group-hover:text-primary flex-shrink-0" />
)}
<Tooltip tooltipContent={linkDetail.url} isMobile={isMobile}>
<a
@ -86,7 +87,7 @@ export const IssueLinkItem = observer(function IssueLinkItem(props: TIssueLinkIt
}}
className="relative grid place-items-center rounded-sm p-1 text-placeholder outline-none group-hover:text-secondary cursor-pointer hover:bg-layer-1"
>
<Copy className="h-3.5 w-3.5 stroke-[1.5]" />
<CopyIcon className="h-3.5 w-3.5 stroke-[1.5]" />
</span>
<CustomMenu
ellipsis
@ -101,7 +102,7 @@ export const IssueLinkItem = observer(function IssueLinkItem(props: TIssueLinkIt
toggleIssueLinkModal(true);
}}
>
<Pencil className="h-3 w-3 stroke-[1.5] text-secondary" />
<EditIcon className="h-3 w-3 stroke-[1.5] text-secondary" />
{t("common.actions.edit")}
</CustomMenu.MenuItem>
<CustomMenu.MenuItem
@ -110,7 +111,7 @@ export const IssueLinkItem = observer(function IssueLinkItem(props: TIssueLinkIt
linkOperations.remove(linkDetail.id);
}}
>
<Trash2 className="h-3 w-3" />
<TrashIcon className="h-3 w-3" />
{t("common.actions.delete")}
</CustomMenu.MenuItem>
</CustomMenu>

5
apps/web/core/components/issues/issue-detail/links/root.tsx
View file

@ -1,5 +1,6 @@
import { useCallback, useMemo, useState } from "react";
import { Plus } from "lucide-react";
import { PlusIcon } from "@plane/propel/icons";
// plane imports
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
import type { TIssueLink } from "@plane/types";
@ -125,7 +126,7 @@ export function IssueLinkRoot(props: TIssueLinkRoot) {
onClick={() => toggleIssueLinkModal(true)}
disabled={disabled}
>
<Plus className="h-4 w-4" />
<PlusIcon className="h-4 w-4" />
</button>
)}
</div>

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

@ -1,9 +1,9 @@
import React from "react";
import { observer } from "mobx-react";
import Link from "next/link";
import { Pencil } from "lucide-react";
import { useTranslation } from "@plane/i18n";
import { CloseIcon } from "@plane/propel/icons";
import { EditIcon, CloseIcon } from "@plane/propel/icons";
// plane imports
import { Tooltip } from "@plane/propel/tooltip";
import { cn } from "@plane/utils";
@ -123,7 +123,7 @@ export const IssueParentSelect = observer(function IssueParentSelect(props: TIss
"text-placeholder": !issue.parent_id && !parentIssue,
})}
>
<Pencil className="h-2.5 w-2.5 flex-shrink-0" />
<EditIcon className="h-2.5 w-2.5 flex-shrink-0" />
</span>
)}
</button>

6
apps/web/core/components/issues/issue-detail/relation-select.tsx
View file

@ -1,8 +1,8 @@
import React from "react";
import { observer } from "mobx-react";
import Link from "next/link";
import { Pencil } from "lucide-react";
import { CloseIcon } from "@plane/propel/icons";
import { EditIcon, CloseIcon } from "@plane/propel/icons";
// Plane
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
import { Tooltip } from "@plane/propel/tooltip";
@ -156,7 +156,7 @@ export const IssueRelationSelect = observer(function IssueRelationSelect(props:
"text-placeholder": relationIssueIds.length === 0,
})}
>
<Pencil className="h-2.5 w-2.5 flex-shrink-0" />
<EditIcon className="h-2.5 w-2.5 flex-shrink-0" />
</span>
)}
</div>

6
apps/web/core/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx
View file

@ -2,7 +2,7 @@ import React, { useState } from "react";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
import { usePopper } from "react-popper";
import { Check, MoreVerticalIcon } from "lucide-react";
import { MoreVerticalIcon } from "lucide-react";
import { Popover, Transition } from "@headlessui/react";
// hooks
// ui
@ -10,7 +10,7 @@ import { Popover, Transition } from "@headlessui/react";
import type { TSupportedFilterTypeForUpdate } from "@plane/constants";
import { EIssueFilterType } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { ChevronUpIcon } from "@plane/propel/icons";
import { CheckIcon, ChevronUpIcon } from "@plane/propel/icons";
import type { TCalendarLayouts, TSupportedFilterForUpdate } from "@plane/types";
import { ToggleSwitch } from "@plane/ui";
// types
@ -140,7 +140,7 @@ export const CalendarOptionsDropdown = observer(function CalendarOptionsDropdown
onClick={() => handleLayoutChange(layoutDetails.key, closePopover)}
>
{layoutDetails.title}
{calendarLayout === layout && <Check size={12} strokeWidth={2} />}
{calendarLayout === layout && <CheckIcon width={12} height={12} strokeWidth={2} />}
</button>
))}
<button

5
apps/web/core/components/issues/issue-layouts/calendar/quick-add-issue-actions.tsx
View file

@ -2,9 +2,10 @@ import { useState } from "react";
import { differenceInCalendarDays } from "date-fns/differenceInCalendarDays";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
import { PlusIcon } from "lucide-react";
// plane imports
import { useTranslation } from "@plane/i18n";
// plane imports
import { PlusIcon } from "@plane/propel/icons";
import { setPromiseToast } from "@plane/propel/toast";
import type { ISearchIssueResponse, TIssue } from "@plane/types";
import { EIssueLayoutTypes } from "@plane/types";

4
apps/web/core/components/issues/issue-layouts/filters/header/helpers/filter-option.tsx
View file

@ -1,4 +1,4 @@
import { Check } from "lucide-react";
import { CheckIcon } from "@plane/propel/icons";
type Props = {
icon?: React.ReactNode;
@ -23,7 +23,7 @@ export function FilterOption(props: Props) {
isChecked ? "border-accent-strong bg-accent-primary text-on-color" : "border-strong"
} ${multiple ? "rounded-xs" : "rounded-full"}`}
>
{isChecked && <Check size={10} strokeWidth={3} />}
{isChecked && <CheckIcon width={10} height={10} strokeWidth={3} />}
</div>
<div className="flex items-center gap-2 truncate">
{icon && <div className="grid w-5 flex-shrink-0 place-items-center">{icon}</div>}

7
apps/web/core/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
View file

@ -2,8 +2,9 @@ import React from "react";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
// lucide icons
import { Minimize2, Maximize2, Circle, Plus } from "lucide-react";
import { Minimize2, Maximize2, Circle } from "lucide-react";
import { WORK_ITEM_TRACKER_EVENTS } from "@plane/constants";
import { PlusIcon } from "@plane/propel/icons";
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
import type { TIssue, ISearchIssueResponse, TIssueKanbanFilters, TIssueGroupByOptions } from "@plane/types";
// ui
@ -154,7 +155,7 @@ export const HeaderGroupByCard = observer(function HeaderGroupByCard(props: IHea
<CustomMenu
customButton={
<span className="flex h-[20px] w-[20px] flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden transition-all hover:bg-layer-transparent-hover bg-layer-transparent rounded-sm">
<Plus height={14} width={14} strokeWidth={2} />
<PlusIcon height={14} width={14} strokeWidth={2} />
</span>
}
placement="bottom-end"
@ -184,7 +185,7 @@ export const HeaderGroupByCard = observer(function HeaderGroupByCard(props: IHea
setIsOpen(true);
}}
>
<Plus width={14} strokeWidth={2} />
<PlusIcon width={14} strokeWidth={2} />
</button>
))}
</div>

9
apps/web/core/components/issues/issue-layouts/list/headers/group-by-card.tsx
View file

@ -1,9 +1,10 @@
import { useState } from "react";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
import { CircleDashed, Plus } from "lucide-react";
// types
import { CircleDashed } from "lucide-react";
import { WORK_ITEM_TRACKER_EVENTS } from "@plane/constants";
import { PlusIcon } from "@plane/propel/icons";
// types
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
import type { TIssue, ISearchIssueResponse, TIssueGroupByOptions } from "@plane/types";
// ui
@ -125,7 +126,7 @@ export const HeaderGroupByCard = observer(function HeaderGroupByCard(props: IHea
<CustomMenu
customButton={
<span className="flex h-5 w-5 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-xs transition-all hover:bg-layer-1">
<Plus className="h-3.5 w-3.5" strokeWidth={2} />
<PlusIcon className="h-3.5 w-3.5" strokeWidth={2} />
</span>
}
>
@ -154,7 +155,7 @@ export const HeaderGroupByCard = observer(function HeaderGroupByCard(props: IHea
setIsOpen(true);
}}
>
<Plus width={14} strokeWidth={2} />
<PlusIcon width={14} strokeWidth={2} />
</div>
))}

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

@ -4,12 +4,12 @@ import { xor } from "lodash-es";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
// icons
import { Link, Paperclip } from "lucide-react";
import { Paperclip } from "lucide-react";
// types
import { WORK_ITEM_TRACKER_EVENTS } from "@plane/constants";
// i18n
import { useTranslation } from "@plane/i18n";
import { StartDatePropertyIcon, ViewsIcon, DueDatePropertyIcon } from "@plane/propel/icons";
import { LinkIcon, StartDatePropertyIcon, ViewsIcon, DueDatePropertyIcon } from "@plane/propel/icons";
import { Tooltip } from "@plane/propel/tooltip";
import type { TIssue, IIssueDisplayProperties, TIssuePriorities } from "@plane/types";
// ui
@ -517,7 +517,7 @@ export const IssueProperties = observer(function IssueProperties(props: IIssuePr
onFocus={handleEventPropagation}
onClick={handleEventPropagation}
>
<Link className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
<LinkIcon className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
<div className="text-caption-sm-regular">{issue.link_count}</div>
</div>
</Tooltip>

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

@ -2,13 +2,13 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import type { Placement } from "@popperjs/core";
import { useParams } from "next/navigation";
import { usePopper } from "react-popper";
import { Check, Loader, Search } from "lucide-react";
import { Loader } from "lucide-react";
import { Combobox } from "@headlessui/react";
// plane imports
import { EUserPermissionsLevel, getRandomLabelColor } from "@plane/constants";
import { useOutsideClickDetector } from "@plane/hooks";
import { useTranslation } from "@plane/i18n";
import { ChevronDownIcon } from "@plane/propel/icons";
import { CheckIcon, SearchIcon, ChevronDownIcon } from "@plane/propel/icons";
// types
import type { IIssueLabel } from "@plane/types";
import { EUserProjectRoles } from "@plane/types";
@ -250,7 +250,7 @@ export function LabelDropdown(props: ILabelDropdownProps) {
{...attributes.popper}
>
<div className="flex w-full items-center justify-start rounded-sm border border-subtle bg-surface-2 px-2">
<Search className="h-3.5 w-3.5 text-tertiary" />
<SearchIcon className="h-3.5 w-3.5 text-tertiary" />
<Combobox.Input
ref={inputRef}
className="w-full bg-transparent px-2 py-1 text-caption-sm-regular text-secondary placeholder:text-placeholder focus:outline-none"
@ -286,7 +286,7 @@ export function LabelDropdown(props: ILabelDropdownProps) {
{option.content}
{selected && (
<div className="flex-shrink-0">
<Check className={`h-3.5 w-3.5`} />
<CheckIcon className={`h-3.5 w-3.5`} />
</div>
)}
</>

14
apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/helper.tsx
View file

@ -1,8 +1,8 @@
import { useMemo } from "react";
import { Copy, ExternalLink, Link, Pencil, Trash2, XCircle, ArchiveRestoreIcon } from "lucide-react";
import { XCircle, ArchiveRestoreIcon } from "lucide-react";
// plane imports
import { useTranslation } from "@plane/i18n";
import { ArchiveIcon } from "@plane/propel/icons";
import { LinkIcon, CopyIcon, NewTabIcon, EditIcon, ArchiveIcon, TrashIcon } from "@plane/propel/icons";
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
import type { EIssuesStoreType, TIssue } from "@plane/types";
import type { TContextMenuItem } from "@plane/ui";
@ -155,7 +155,7 @@ export const useMenuItemFactory = (props: MenuItemFactoryProps) => {
const createEditMenuItem = (customEditAction?: () => void): TContextMenuItem => ({
key: "edit",
title: t("common.actions.edit"),
icon: Pencil,
icon: EditIcon,
action:
customEditAction ||
(() => {
@ -169,7 +169,7 @@ export const useMenuItemFactory = (props: MenuItemFactoryProps) => {
const baseItem = {
key: "make-a-copy",
title: t("common.actions.make_a_copy"),
icon: Copy,
icon: CopyIcon,
action: () => {
setCreateUpdateIssueModal(true);
},
@ -188,14 +188,14 @@ export const useMenuItemFactory = (props: MenuItemFactoryProps) => {
const createOpenInNewTabMenuItem = (): TContextMenuItem => ({
key: "open-in-new-tab",
title: t("common.actions.open_in_new_tab"),
icon: ExternalLink,
icon: NewTabIcon,
action: actionHandlers.handleOpenInNewTab,
});
const createCopyLinkMenuItem = (): TContextMenuItem => ({
key: "copy-link",
title: t("common.actions.copy_link"),
icon: Link,
icon: LinkIcon,
action: actionHandlers.handleCopyIssueLink,
});
@ -238,7 +238,7 @@ export const useMenuItemFactory = (props: MenuItemFactoryProps) => {
const createDeleteMenuItem = (): TContextMenuItem => ({
key: "delete",
title: t("common.actions.delete"),
icon: Trash2,
icon: TrashIcon,
action: () => {
setDeleteIssueModal(true);
},

3
apps/web/core/components/issues/issue-layouts/quick-add/button/gantt.tsx
View file

@ -1,7 +1,8 @@
import type { FC } from "react";
import { observer } from "mobx-react";
import { PlusIcon } from "lucide-react";
import { useTranslation } from "@plane/i18n";
import { PlusIcon } from "@plane/propel/icons";
import { Row } from "@plane/ui";
import type { TQuickAddIssueButton } from "../root";

3
apps/web/core/components/issues/issue-layouts/quick-add/button/kanban.tsx
View file

@ -1,7 +1,8 @@
import type { FC } from "react";
import { observer } from "mobx-react";
import { PlusIcon } from "lucide-react";
import { useTranslation } from "@plane/i18n";
import { PlusIcon } from "@plane/propel/icons";
import type { TQuickAddIssueButton } from "../root";
export const KanbanQuickAddIssueButton = observer(function KanbanQuickAddIssueButton(props: TQuickAddIssueButton) {

3
apps/web/core/components/issues/issue-layouts/quick-add/button/list.tsx
View file

@ -1,7 +1,8 @@
import type { FC } from "react";
import { observer } from "mobx-react";
import { PlusIcon } from "lucide-react";
import { useTranslation } from "@plane/i18n";
import { PlusIcon } from "@plane/propel/icons";
import { Row } from "@plane/ui";
import type { TQuickAddIssueButton } from "../root";

3
apps/web/core/components/issues/issue-layouts/quick-add/button/spreadsheet.tsx
View file

@ -1,7 +1,8 @@
import type { FC } from "react";
import { observer } from "mobx-react";
import { PlusIcon } from "lucide-react";
import { useTranslation } from "@plane/i18n";
import { PlusIcon } from "@plane/propel/icons";
import type { TQuickAddIssueButton } from "../root";
export const SpreadsheetAddIssueButton = observer(function SpreadsheetAddIssueButton(props: TQuickAddIssueButton) {

Some files were not shown because too many files have changed in this diff Show more