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

[WEB-5191 | WEB-5197] chore: actions and arrows icon revamp (#7984)

Browse source
This commit is contained in:
Anmol Singh Bhatia 2025-10-29 20:13:08 +05:30 • committed by GitHub
parent 350107d6c1
commit 0e8128594b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
199 changed files with 700 additions and 539 deletions
Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

@ -103,5 +103,4 @@ storybook-static
CLAUDE.md
AGENTS.md
temp/

6
apps/admin/app/(all)/(home)/auth-banner.tsx
View file

@ -1,7 +1,9 @@
import type { FC } from "react";
import { Info, X } from "lucide-react";
import { Info } from "lucide-react";
// plane constants
import type { TAdminAuthErrorInfo } from "@plane/constants";
// icons
import { CloseIcon } from "@plane/propel/icons";
type TAuthBanner = {
bannerData: TAdminAuthErrorInfo | undefined;
@ -22,7 +24,7 @@ export const AuthBanner: FC<TAuthBanner> = (props) => {
className="relative ml-auto w-6 h-6 rounded-sm flex justify-center items-center transition-all cursor-pointer hover:bg-custom-primary-100/20 text-custom-primary-100/80"
onClick={() => handleBannerData && handleBannerData(undefined)}
>
<X className="w-4 h-4 flex-shrink-0" />
<CloseIcon className="w-4 h-4 flex-shrink-0" />
</div>
</div>
);

5
apps/space/core/components/account/auth-forms/auth-banner.tsx
View file

@ -1,7 +1,8 @@
"use client";
import type { FC } from "react";
import { Info, X } from "lucide-react";
import { Info } from "lucide-react";
import { CloseIcon } from "@plane/propel/icons";
// helpers
import type { TAuthErrorInfo } from "@/helpers/authentication.helper";
@ -24,7 +25,7 @@ export const AuthBanner: FC<TAuthBanner> = (props) => {
className="relative ml-auto w-6 h-6 rounded-sm flex justify-center items-center transition-all cursor-pointer hover:bg-custom-primary-100/20 text-custom-primary-100/80"
onClick={() => handleBannerData && handleBannerData(undefined)}
>
<X className="w-4 h-4 flex-shrink-0" />
<CloseIcon className="w-4 h-4 flex-shrink-0" />
</div>
</div>
);

8
apps/space/core/components/issues/filters/applied-filters/filters-list.tsx
View file

@ -1,9 +1,9 @@
"use client";
import { observer } from "mobx-react";
import { X } from "lucide-react";
// types
import { useTranslation } from "@plane/i18n";
import { CloseIcon } from "@plane/propel/icons";
// types
import type { TFilters } from "@/types/issue";
// components
import { AppliedPriorityFilters } from "./priority";
@ -55,7 +55,7 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
onClick={() => handleRemoveFilter(filterKey, null)}
>
<X size={12} strokeWidth={2} />
<CloseIcon height={12} width={12} strokeWidth={2} />
</button>
</div>
</div>
@ -67,7 +67,7 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
className="flex items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1 text-xs text-custom-text-300 hover:text-custom-text-200"
>
{t("common.clear_all")}
<X size={12} strokeWidth={2} />
<CloseIcon height={12} width={12} strokeWidth={2} />
</button>
</div>
);

4
apps/space/core/components/issues/filters/applied-filters/label.tsx
View file

@ -1,6 +1,6 @@
"use client";
import { X } from "lucide-react";
import { CloseIcon } from "@plane/propel/icons";
// types
import type { IIssueLabel } from "@/types/issue";
@ -34,7 +34,7 @@ export const AppliedLabelsFilters: React.FC<Props> = (props) => {
className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
onClick={() => handleRemove(labelId)}
>
<X size={10} strokeWidth={2} />
<CloseIcon height={10} width={10} strokeWidth={2} />
</button>
</div>
);

5
apps/space/core/components/issues/filters/applied-filters/priority.tsx
View file

@ -1,7 +1,6 @@
"use client";
import { X } from "lucide-react";
import { PriorityIcon } from "@plane/propel/icons";
import { CloseIcon, PriorityIcon } from "@plane/propel/icons";
import type { TIssuePriorities } from "@plane/propel/icons";
type Props = {
@ -25,7 +24,7 @@ export const AppliedPriorityFilters: React.FC<Props> = (props) => {
className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
onClick={() => handleRemove(priority)}
>
<X size={10} strokeWidth={2} />
<CloseIcon height={10} width={10} strokeWidth={2} />
</button>
</div>
))}

5
apps/space/core/components/issues/filters/applied-filters/state.tsx
View file

@ -1,10 +1,9 @@
"use client";
import { observer } from "mobx-react";
import { X } from "lucide-react";
// plane imports
import { EIconSize } from "@plane/constants";
import { StateGroupIcon } from "@plane/propel/icons";
import { CloseIcon, StateGroupIcon } from "@plane/propel/icons";
// hooks
import { useStates } from "@/hooks/store/use-state";
@ -34,7 +33,7 @@ export const AppliedStateFilters: React.FC<Props> = observer((props) => {
className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
onClick={() => handleRemove(stateId)}
>
<X size={10} strokeWidth={2} />
<CloseIcon height={10} width={10} strokeWidth={2} />
</button>
</div>
);

7
apps/space/core/components/issues/filters/helpers/filter-header.tsx
View file

@ -1,8 +1,7 @@
"use client";
import React from "react";
// lucide icons
import { ChevronDown, ChevronUp } from "lucide-react";
// icons
import { ChevronDownIcon, ChevronUpIcon } from "@plane/propel/icons";
interface IFilterHeader {
title: string;
@ -18,7 +17,7 @@ export const FilterHeader = ({ title, isPreviewEnabled, handleIsPreviewEnabled }
className="grid h-5 w-5 flex-shrink-0 place-items-center rounded hover:bg-custom-background-80"
onClick={handleIsPreviewEnabled}
>
{isPreviewEnabled ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
{isPreviewEnabled ? <ChevronUpIcon height={14} width={14} /> : <ChevronDownIcon height={14} width={14} />}
</button>
</div>
);

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

@ -2,7 +2,8 @@
import React, { useState } from "react";
import { observer } from "mobx-react";
import { Search, X } from "lucide-react";
import { Search } from "lucide-react";
import { CloseIcon } from "@plane/propel/icons";
// types
import type { IIssueFilterOptions, TIssueFilterKeys } from "@/types/issue";
// local imports
@ -37,7 +38,7 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
/>
{filtersSearchQuery !== "" && (
<button type="button" className="grid place-items-center" onClick={() => setFiltersSearchQuery("")}>
<X className="text-custom-text-300" size={12} strokeWidth={2} />
<CloseIcon className="text-custom-text-300" height={12} width={12} strokeWidth={2} />
</button>
)}
</div>

5
apps/space/core/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx
View file

@ -1,7 +1,8 @@
import type { FC } from "react";
import React from "react";
import { observer } from "mobx-react";
import { Circle, ChevronDown, ChevronUp } from "lucide-react";
import { Circle } from "lucide-react";
import { ChevronDownIcon, ChevronUpIcon } from "@plane/propel/icons";
// mobx
interface IHeaderSubGroupByCard {
@ -20,7 +21,7 @@ export const HeaderSubGroupByCard: FC<IHeaderSubGroupByCard> = observer((props)
onClick={() => toggleExpanded()}
>
<div className="flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm transition-all hover:bg-custom-background-80">
{isExpanded ? <ChevronUp width={14} strokeWidth={2} /> : <ChevronDown width={14} strokeWidth={2} />}
{isExpanded ? <ChevronUpIcon width={14} strokeWidth={2} /> : <ChevronDownIcon width={14} strokeWidth={2} />}
</div>
<div className="flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm">

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

@ -1,10 +1,11 @@
import React, { useRef, useState } from "react";
import { observer } from "mobx-react";
import { Controller, useForm } from "react-hook-form";
import { Check, MessageSquare, MoreVertical, X } from "lucide-react";
import { Check, 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 type { TIssuePublicComment } from "@plane/types";
import { getFileURL } from "@plane/utils";
// components
@ -136,7 +137,7 @@ export const CommentCard: React.FC<Props> = observer((props) => {
className="group rounded border border-red-500 bg-red-500/20 p-2 shadow-md duration-300 hover:bg-red-500"
onClick={() => setIsEditing(false)}
>
<X className="h-3 w-3 text-red-500 duration-300 group-hover:text-white" strokeWidth={2} />
<CloseIcon className="h-3 w-3 text-red-500 duration-300 group-hover:text-white" strokeWidth={2} />
</button>
</div>
</form>

6
apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/header.tsx
View file

@ -4,10 +4,10 @@
import type { FC } from "react";
import { observer } from "mobx-react";
import { useParams, useRouter } from "next/navigation";
import { ChevronDown, PanelRight } from "lucide-react";
import { PanelRight } from "lucide-react";
import { PROFILE_VIEWER_TAB, PROFILE_ADMINS_TAB, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { YourWorkIcon } from "@plane/propel/icons";
import { YourWorkIcon, ChevronDownIcon } from "@plane/propel/icons";
import type { IUserProfileProjectSegregation } from "@plane/types";
import { Breadcrumbs, Header, CustomMenu } from "@plane/ui";
import { cn } from "@plane/utils";
@ -75,7 +75,7 @@ export const UserProfileHeader: FC<TUserProfileHeader> = observer((props) => {
customButton={
<div className="flex items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1.5">
<span className="flex flex-grow justify-center text-sm text-custom-text-200">{type}</span>
<ChevronDown className="h-4 w-4 text-custom-text-400" />
<ChevronDownIcon className="h-4 w-4 text-custom-text-400" />
</div>
}
customButtonClassName="flex flex-grow justify-center text-custom-text-200 text-sm"

8
apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/mobile-header.tsx
View file

@ -3,12 +3,12 @@
import { useCallback } from "react";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
// icons
import { ChevronDown } from "lucide-react";
// plane constants
import { EIssueFilterType, ISSUE_LAYOUTS, ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@plane/constants";
// plane i18n
import { useTranslation } from "@plane/i18n";
// icons
import { ChevronDownIcon } from "@plane/propel/icons";
// types
import type {
IIssueDisplayFilterOptions,
@ -88,7 +88,7 @@ export const ProfileIssuesMobileHeader = observer(() => {
customButton={
<div className="flex flex-center text-sm text-custom-text-200">
{t("common.layout")}
<ChevronDown className="ml-2 h-4 w-4 text-custom-text-200 my-auto" strokeWidth={2} />
<ChevronDownIcon className="ml-2 h-4 w-4 text-custom-text-200 my-auto" strokeWidth={2} />
</div>
}
customButtonClassName="flex flex-center text-custom-text-200 text-sm"
@ -117,7 +117,7 @@ export const ProfileIssuesMobileHeader = observer(() => {
menuButton={
<div className="flex flex-center text-sm text-custom-text-200">
{t("common.display")}
<ChevronDown className="ml-2 h-4 w-4 text-custom-text-200" strokeWidth={2} />
<ChevronDownIcon className="ml-2 h-4 w-4 text-custom-text-200" strokeWidth={2} />
</div>
}
>

6
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/mobile-header.tsx
View file

@ -3,12 +3,10 @@
import { useCallback, useState } from "react";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
// icons
import { ChevronDown } from "lucide-react";
// plane imports
import { EIssueFilterType, ISSUE_LAYOUTS, ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { CalendarLayoutIcon, BoardLayoutIcon, ListLayoutIcon } from "@plane/propel/icons";
import { CalendarLayoutIcon, BoardLayoutIcon, ListLayoutIcon, ChevronDownIcon } from "@plane/propel/icons";
import type { IIssueDisplayFilterOptions, IIssueDisplayProperties, EIssueLayoutTypes } from "@plane/types";
import { EIssuesStoreType } from "@plane/types";
import { CustomMenu } from "@plane/ui";
@ -125,7 +123,7 @@ export const CycleIssuesMobileHeader = observer(() => {
menuButton={
<span className="flex items-center text-custom-text-200 text-sm">
{t("common.display")}
<ChevronDown className="text-custom-text-200 h-4 w-4 ml-2" />
<ChevronDownIcon className="text-custom-text-200 h-4 w-4 ml-2" />
</span>
}
>

4
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/mobile-header.tsx
View file

@ -3,10 +3,10 @@
import { useCallback, useState } from "react";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
import { ChevronDown } from "lucide-react";
// plane imports
import { EIssueFilterType, ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { ChevronDownIcon } from "@plane/propel/icons";
import type { IIssueDisplayFilterOptions, IIssueDisplayProperties } from "@plane/types";
import { EIssuesStoreType, EIssueLayoutTypes } from "@plane/types";
// components
@ -79,7 +79,7 @@ export const ProjectIssuesMobileHeader = observer(() => {
menuButton={
<span className="flex items-center text-sm text-custom-text-200">
{t("common.display")}
<ChevronDown className="ml-2 h-4 w-4 text-custom-text-200" />
<ChevronDownIcon className="ml-2 h-4 w-4 text-custom-text-200" />
</span>
}
>

6
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/mobile-header.tsx
View file

@ -3,12 +3,10 @@
import { useCallback, useState } from "react";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
// icons
import { ChevronDown } from "lucide-react";
// plane imports
import { EIssueFilterType, ISSUE_LAYOUTS, ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { CalendarLayoutIcon, BoardLayoutIcon, ListLayoutIcon } from "@plane/propel/icons";
import { CalendarLayoutIcon, BoardLayoutIcon, ListLayoutIcon, ChevronDownIcon } from "@plane/propel/icons";
import type { IIssueDisplayFilterOptions, IIssueDisplayProperties, EIssueLayoutTypes } from "@plane/types";
import { EIssuesStoreType } from "@plane/types";
import { CustomMenu } from "@plane/ui";
@ -109,7 +107,7 @@ export const ModuleIssuesMobileHeader = observer(() => {
menuButton={
<span className="flex items-center text-sm text-custom-text-200">
Display
<ChevronDown className="ml-2 h-4 w-4 text-custom-text-200" />
<ChevronDownIcon className="ml-2 h-4 w-4 text-custom-text-200" />
</span>
}
>

4
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/mobile-header.tsx
View file

@ -1,9 +1,9 @@
"use client";
import { observer } from "mobx-react";
import { ChevronDown } from "lucide-react";
import { MODULE_VIEW_LAYOUTS } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { ChevronDownIcon } from "@plane/propel/icons";
import { CustomMenu, Row } from "@plane/ui";
import { ModuleLayoutIcon } from "@/components/modules";
import { useModuleFilter } from "@/hooks/store/use-module-filter";
@ -22,7 +22,7 @@ export const ModulesListMobileHeader = observer(() => {
// placement="bottom-start"
customButton={
<Row className="flex flex-grow justify-center text-custom-text-200 text-sm gap-2">
<span>Layout</span> <ChevronDown className="h-4 w-4 text-custom-text-200 my-auto" strokeWidth={1} />
<span>Layout</span> <ChevronDownIcon className="h-4 w-4 text-custom-text-200 my-auto" strokeWidth={1} />
</Row>
}
customButtonClassName="flex flex-grow justify-center items-center text-custom-text-200 text-sm"

5
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/mobile-header.tsx
View file

@ -2,7 +2,8 @@
import { observer } from "mobx-react";
// icons
import { ChevronDown, ListFilter } from "lucide-react";
import { ListFilter } from "lucide-react";
import { ChevronDownIcon } from "@plane/propel/icons";
// components
import { Row } from "@plane/ui";
import { FiltersDropdown } from "@/components/issues/issue-layouts/filters";
@ -42,7 +43,7 @@ export const ViewMobileHeader = observer(() => {
menuButton={
<Row className="flex items-center text-sm text-custom-text-200">
Filters
<ChevronDown className="ml-2 h-4 w-4 text-custom-text-200" strokeWidth={2} />
<ChevronDownIcon className="ml-2 h-4 w-4 text-custom-text-200" strokeWidth={2} />
</Row>
}
>

16
apps/web/app/(all)/profile/sidebar.tsx
View file

@ -5,22 +5,12 @@ import { observer } from "mobx-react";
import Link from "next/link";
import { usePathname } from "next/navigation";
// icons
import {
ChevronLeft,
LogOut,
MoveLeft,
Activity,
Bell,
CircleUser,
KeyRound,
Settings2,
CirclePlus,
Mails,
} from "lucide-react";
import { LogOut, MoveLeft, Activity, Bell, CircleUser, KeyRound, Settings2, CirclePlus, Mails } from "lucide-react";
// plane imports
import { PROFILE_ACTION_LINKS } from "@plane/constants";
import { useOutsideClickDetector } from "@plane/hooks";
import { useTranslation } from "@plane/i18n";
import { ChevronLeftIcon } from "@plane/propel/icons";
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
import { Tooltip } from "@plane/propel/tooltip";
import { cn, getFileURL } from "@plane/utils";
@ -141,7 +131,7 @@ export const ProfileLayoutSidebar = observer(() => {
}`}
>
<span className="grid h-5 w-5 flex-shrink-0 place-items-center">
<ChevronLeft className="h-5 w-5" strokeWidth={1} />
<ChevronLeftIcon className="h-5 w-5" strokeWidth={1} />
</span>
{!sidebarCollapsed && (
<h4 className="truncate text-lg font-semibold text-custom-text-200">{t("profile_settings")}</h4>

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

@ -4,7 +4,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, X } from "lucide-react";
import { Boxes, Check, Share2, Star, User2 } from "lucide-react";
import { CloseIcon } from "@plane/propel/icons";
// components
import { LogoSpinner } from "@/components/common/logo-spinner";
import { EmptySpace, EmptySpaceItem } from "@/components/ui/empty-space";
@ -85,7 +86,7 @@ const WorkspaceInvitationPage = observer(() => {
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={X} title="Ignore" action={handleReject} />
<EmptySpaceItem Icon={CloseIcon} title="Ignore" action={handleReject} />
</EmptySpace>
)
) : error || invitationDetail?.responded_at ? (

5
apps/web/ce/components/pages/editor/ai/menu.tsx
View file

@ -2,9 +2,10 @@
import React, { useEffect, useRef, useState } from "react";
import type { LucideIcon } from "lucide-react";
import { ChevronRight, CornerDownRight, RefreshCcw, Sparkles, TriangleAlert } from "lucide-react";
import { CornerDownRight, RefreshCcw, Sparkles, TriangleAlert } from "lucide-react";
// plane editor
import type { EditorRefApi } from "@plane/editor";
import { ChevronRightIcon } from "@plane/propel/icons";
// plane ui
import { Tooltip } from "@plane/propel/tooltip";
// components
@ -174,7 +175,7 @@ export const EditorAIMenu: React.FC<Props> = (props) => {
<item.icon className="flex-shrink-0 size-3" />
{item.label}
</span>
<ChevronRight
<ChevronRightIcon
className={cn("flex-shrink-0 size-3 opacity-0 pointer-events-none transition-opacity", {
"opacity-100 pointer-events-auto": isActiveTask,
})}

5
apps/web/ce/components/projects/mobile-header.tsx
View file

@ -2,9 +2,10 @@
import { useCallback } from "react";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
import { ChevronDown, ListFilter } from "lucide-react";
import { ListFilter } from "lucide-react";
// plane imports
import { useTranslation } from "@plane/i18n";
import { ChevronDownIcon } from "@plane/propel/icons";
import type { TProjectFilters } from "@plane/types";
import { calculateTotalFilters } from "@plane/utils";
// components
@ -72,7 +73,7 @@ export const ProjectsListMobileHeader = observer(() => {
<div className="flex text-sm items-center gap-2 neutral-primary text-custom-text-200">
<ListFilter className="h-3 w-3" />
{t("common.filters")}
<ChevronDown className="h-3 w-3" strokeWidth={2} />
<ChevronDownIcon className="h-3 w-3" strokeWidth={2} />
</div>
}
isFiltersApplied={isFiltersApplied}

4
apps/web/ce/components/workspace/delete-workspace-section.tsx
View file

@ -1,11 +1,11 @@
import type { FC } from "react";
import { useState } from "react";
import { observer } from "mobx-react";
import { ChevronDown, ChevronUp } from "lucide-react";
// types
import { WORKSPACE_TRACKER_ELEMENTS } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { Button } from "@plane/propel/button";
import { ChevronDownIcon, ChevronUpIcon } from "@plane/propel/icons";
import type { IWorkspace } from "@plane/types";
// ui
import { Collapsible } from "@plane/ui";
@ -42,7 +42,7 @@ export const DeleteWorkspaceSection: FC<TDeleteWorkspace> = observer((props) =>
<span className="text-lg tracking-tight">
{t("workspace_settings.settings.general.delete_workspace")}
</span>
{isOpen ? <ChevronUp className="h-5 w-5" /> : <ChevronDown className="h-5 w-5" />}
{isOpen ? <ChevronUpIcon className="h-5 w-5" /> : <ChevronDownIcon className="h-5 w-5" />}
</>
}
>

7
apps/web/core/components/account/auth-forms/auth-banner.tsx
View file

@ -1,7 +1,8 @@
import type { FC } from "react";
import { Info, X } from "lucide-react";
// plane imports
import { Info } from "lucide-react";
import { useTranslation } from "@plane/i18n";
import { CloseIcon } from "@plane/propel/icons";
// plane imports
// helpers
import type { TAuthErrorInfo } from "@/helpers/authentication.helper";
@ -32,7 +33,7 @@ export const AuthBanner: FC<TAuthBanner> = (props) => {
onClick={() => handleBannerData?.(undefined)}
aria-label={t("aria_labels.auth_forms.close_alert")}
>
<X className="size-4" />
<CloseIcon className="size-4" />
</button>
</div>
);

4
apps/web/core/components/account/auth-forms/forgot-password-popover.tsx
View file

@ -1,9 +1,9 @@
import { Fragment, useState } from "react";
import { usePopper } from "react-popper";
import { X } from "lucide-react";
import { Popover } from "@headlessui/react";
// plane imports
import { useTranslation } from "@plane/i18n";
import { CloseIcon } from "@plane/propel/icons";
export const ForgotPasswordPopover = () => {
// popper-js refs
@ -51,7 +51,7 @@ export const ForgotPasswordPopover = () => {
onClick={() => close()}
aria-label={t("aria_labels.auth_forms.close_popover")}
>
<X className="size-3 text-custom-text-200" />
<CloseIcon className="size-3 text-custom-text-200" />
</button>
</div>
)}

5
apps/web/core/components/account/auth-forms/password.tsx
View file

@ -4,11 +4,12 @@ import React, { useEffect, useMemo, useRef, useState } from "react";
import { observer } from "mobx-react";
import Link from "next/link";
// icons
import { Eye, EyeOff, Info, X, XCircle } from "lucide-react";
import { Eye, EyeOff, Info, XCircle } from "lucide-react";
// plane imports
import { API_BASE_URL, E_PASSWORD_STRENGTH, AUTH_TRACKER_EVENTS, AUTH_TRACKER_ELEMENTS } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { Button } from "@plane/propel/button";
import { CloseIcon } from "@plane/propel/icons";
import { Input, PasswordStrengthIndicator, Spinner } from "@plane/ui";
import { getPasswordStrength } from "@plane/utils";
// components
@ -134,7 +135,7 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
className="relative ml-auto w-6 h-6 rounded-sm flex justify-center items-center transition-all cursor-pointer hover:bg-red-500/20 text-custom-primary-100/80"
onClick={() => setBannerMessage(false)}
>
<X className="w-4 h-4 flex-shrink-0 text-red-500" />
<CloseIcon className="w-4 h-4 flex-shrink-0 text-red-500" />
</div>
</div>
)}

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

@ -17,10 +17,11 @@ import {
getSortedRowModel,
useReactTable,
} from "@tanstack/react-table";
import { Search, X } from "lucide-react";
// plane package imports
import { Search } from "lucide-react";
import { useTranslation } from "@plane/i18n";
import { EmptyStateCompact } from "@plane/propel/empty-state";
import { CloseIcon } from "@plane/propel/icons";
// plane package imports
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@plane/propel/table";
import { cn } from "@plane/utils";
// plane web components
@ -116,7 +117,7 @@ export function DataTable<TData, TValue>({ columns, data, searchPlaceholder, act
setIsSearchOpen(false);
}}
>
<X className="h-3 w-3" />
<CloseIcon className="h-3 w-3" />
</button>
)}
</div>

5
apps/web/core/components/analytics/work-items/modal/header.tsx
View file

@ -1,6 +1,7 @@
import { observer } from "mobx-react";
// plane package imports
import { Expand, Shrink, X } from "lucide-react";
import { Expand, Shrink } from "lucide-react";
import { CloseIcon } from "@plane/propel/icons";
import type { ICycle, IModule } from "@plane/types";
// icons
@ -34,7 +35,7 @@ export const WorkItemsModalHeader: React.FC<Props> = observer((props) => {
className="grid place-items-center p-1 text-custom-text-200 hover:text-custom-text-100"
onClick={handleClose}
>
<X size={14} strokeWidth={2} />
<CloseIcon height={14} width={14} strokeWidth={2} />
</button>
</div>
</div>

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

@ -1,9 +1,10 @@
import React, { useEffect, useRef } from "react";
import { observer } from "mobx-react";
import { useForm } from "react-hook-form";
import { Check, X } from "lucide-react";
// plane imports
import { Check } from "lucide-react";
import type { EditorRefApi } from "@plane/editor";
import { CloseIcon } from "@plane/propel/icons";
// plane imports
import type { TCommentsOperations, TIssueComment } from "@plane/types";
import { isCommentEmpty } from "@plane/utils";
// components
@ -123,7 +124,7 @@ export const CommentCardEditForm: React.FC<Props> = observer((props) => {
editorRef.current?.setEditorValue(comment.comment_html ?? "<p></p>");
}}
>
<X className="size-3 text-red-500 duration-300 group-hover:text-white" />
<CloseIcon className="size-3 text-red-500 duration-300 group-hover:text-white" />
</button>
</div>
</form>

6
apps/web/core/components/common/applied-filters/date.tsx
View file

@ -1,8 +1,8 @@
import { observer } from "mobx-react";
// icons
import { X } from "lucide-react";
// plane constants
import { DATE_BEFORE_FILTER_OPTIONS } from "@plane/constants";
import { CloseIcon } from "@plane/propel/icons";
// plane constants
import { renderFormattedDate, capitalizeFirstLetter } from "@plane/utils";
// helpers
type Props = {
@ -44,7 +44,7 @@ export const AppliedDateFilters: React.FC<Props> = observer((props) => {
className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
onClick={() => handleRemove(date)}
>
<X size={10} strokeWidth={2} />
<CloseIcon height={10} width={10} strokeWidth={2} />
</button>
)}
</div>

4
apps/web/core/components/common/applied-filters/members.tsx
View file

@ -1,7 +1,7 @@
"use client";
import { observer } from "mobx-react";
import { X } from "lucide-react";
import { CloseIcon } from "@plane/propel/icons";
// plane ui
import { Avatar } from "@plane/ui";
// helpers
@ -44,7 +44,7 @@ export const AppliedMembersFilters: React.FC<Props> = observer((props) => {
className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
onClick={() => handleRemove(memberId)}
>
<X size={10} strokeWidth={2} />
<CloseIcon height={10} width={10} strokeWidth={2} />
</button>
)}
</div>

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

@ -1,10 +1,11 @@
import { useCallback, useRef } from "react";
import { observer } from "mobx-react";
import { ChevronLeft, ChevronRight, Copy } from "lucide-react";
import { Copy } from "lucide-react";
// plane imports
import type { EditorRefApi } from "@plane/editor";
import { useTranslation } from "@plane/i18n";
import { Button, getButtonStyling } from "@plane/propel/button";
import { 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";
@ -102,7 +103,7 @@ export const DescriptionVersionsModal: React.FC<Props> = observer((props) => {
)}
disabled={isPrevDisabled}
>
<ChevronLeft className="size-4" />
<ChevronLeftIcon className="size-4" />
</button>
<button
type="button"
@ -116,7 +117,7 @@ export const DescriptionVersionsModal: React.FC<Props> = observer((props) => {
)}
disabled={isNextDisabled}
>
<ChevronRight className="size-4" />
<ChevronRightIcon className="size-4" />
</button>
</div>
</div>

4
apps/web/core/components/core/filters/date-filter-modal.tsx
View file

@ -2,12 +2,12 @@
import { Fragment } from "react";
import { Controller, useForm } from "react-hook-form";
import { X } from "lucide-react";
import { Dialog, Transition } from "@headlessui/react";
import { Button } from "@plane/propel/button";
import { Calendar } from "@plane/propel/calendar";
import { CloseIcon } from "@plane/propel/icons";
import { renderFormattedPayloadDate, renderFormattedDate, getDate } from "@plane/utils";
import { DateFilterSelect } from "./date-filter-select";
type Props = {
@ -84,7 +84,7 @@ export const DateFilterModal: React.FC<Props> = ({ title, handleClose, isOpen, o
<DateFilterSelect title={title} value={value} onChange={onChange} />
)}
/>
<X className="h-4 w-4 cursor-pointer" onClick={handleClose} />
<CloseIcon className="h-4 w-4 cursor-pointer" onClick={handleClose} />
</div>
<div className="flex w-full justify-between gap-4">
<Controller

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

@ -1,12 +1,13 @@
"use client";
import React, { useEffect, useState } from "react";
import { Rocket, Search, X } from "lucide-react";
import { Rocket, Search } from "lucide-react";
import { Combobox, Dialog, Transition } from "@headlessui/react";
// i18n
import { useTranslation } from "@plane/i18n";
// types
import { Button } from "@plane/propel/button";
import { 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";
@ -197,7 +198,7 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
className="group p-1"
onClick={() => setSelectedIssues((prevData) => prevData.filter((i) => i.id !== issue.id))}
>
<X className="h-3 w-3 text-custom-text-200 group-hover:text-custom-text-100" />
<CloseIcon className="h-3 w-3 text-custom-text-200 group-hover:text-custom-text-100" />
</button>
</div>
))}

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

@ -5,10 +5,10 @@ import { useMemo } from "react";
import { isEmpty } from "lodash-es";
import { observer } from "mobx-react";
import { useSearchParams } from "next/navigation";
import { ChevronUp, ChevronDown } from "lucide-react";
import { Disclosure, Transition } from "@headlessui/react";
// plane imports
import { useTranslation } from "@plane/i18n";
import { ChevronUpIcon, ChevronDownIcon } from "@plane/propel/icons";
import type { ICycle, TCyclePlotType, TProgressSnapshot } from "@plane/types";
import { EIssuesStoreType } from "@plane/types";
import { getDate } from "@plane/utils";
@ -114,9 +114,9 @@ export const CycleAnalyticsProgress: FC<TCycleAnalyticsProgress> = observer((pro
</Disclosure.Button>
<Disclosure.Button className="ml-auto">
{open ? (
<ChevronUp className="h-3.5 w-3.5" aria-hidden="true" />
<ChevronUpIcon className="h-3.5 w-3.5" aria-hidden="true" />
) : (
<ChevronDown className="h-3.5 w-3.5" aria-hidden="true" />
<ChevronDownIcon className="h-3.5 w-3.5" aria-hidden="true" />
)}
</Disclosure.Button>
</div>

5
apps/web/core/components/cycles/analytics-sidebar/sidebar-header.tsx
View file

@ -4,7 +4,7 @@ import type { FC } from "react";
import React, { useEffect } from "react";
import { observer } from "mobx-react";
import { Controller, useForm } from "react-hook-form";
import { ArrowRight, ChevronRight } from "lucide-react";
import { ArrowRight } from "lucide-react";
// Plane Imports
import {
CYCLE_TRACKER_EVENTS,
@ -14,6 +14,7 @@ import {
CYCLE_TRACKER_ELEMENTS,
} from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { ChevronRightIcon } from "@plane/propel/icons";
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
import type { ICycle } from "@plane/types";
import { getDate, renderFormattedPayloadDate } from "@plane/utils";
@ -160,7 +161,7 @@ export const CycleSidebarHeader: FC<Props> = observer((props) => {
className="flex size-4 items-center justify-center rounded-full bg-custom-border-200"
onClick={() => handleClose()}
>
<ChevronRight className="h-3 w-3 stroke-2 text-white" />
<ChevronRightIcon className="h-3 w-3 stroke-2 text-white" />
</button>
</div>
</div>

4
apps/web/core/components/cycles/applied-filters/date.tsx
View file

@ -1,7 +1,7 @@
import { observer } from "mobx-react";
import { X } from "lucide-react";
// helpers
import { DATE_AFTER_FILTER_OPTIONS } from "@plane/constants";
import { CloseIcon } from "@plane/propel/icons";
import { renderFormattedDate, capitalizeFirstLetter } from "@plane/utils";
// constants
@ -44,7 +44,7 @@ export const AppliedDateFilters: React.FC<Props> = observer((props) => {
className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
onClick={() => handleRemove(date)}
>
<X size={10} strokeWidth={2} />
<CloseIcon height={10} width={10} strokeWidth={2} />
</button>
)}
</div>

6
apps/web/core/components/cycles/applied-filters/root.tsx
View file

@ -1,8 +1,8 @@
import { observer } from "mobx-react";
import { X } from "lucide-react";
// plane imports
import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { CloseIcon } from "@plane/propel/icons";
import type { TCycleFilters } from "@plane/types";
import { Tag } from "@plane/ui";
import { replaceUnderscoreIfSnakeCase } from "@plane/utils";
@ -67,7 +67,7 @@ export const CycleAppliedFiltersList: React.FC<Props> = observer((props) => {
className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
onClick={() => handleRemoveFilter(filterKey, null)}
>
<X size={12} strokeWidth={2} />
<CloseIcon height={12} width={12} strokeWidth={2} />
</button>
)}
</div>
@ -78,7 +78,7 @@ export const CycleAppliedFiltersList: React.FC<Props> = observer((props) => {
<button type="button" onClick={handleClearAllFilters}>
<Tag>
{t("common.clear_all")}
<X size={12} strokeWidth={2} />
<CloseIcon height={12} width={12} strokeWidth={2} />
</Tag>
</button>
)}

4
apps/web/core/components/cycles/applied-filters/status.tsx
View file

@ -1,7 +1,7 @@
import { observer } from "mobx-react";
import { X } from "lucide-react";
import { CYCLE_STATUS } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { CloseIcon } from "@plane/propel/icons";
import { cn } from "@plane/utils";
type Props = {
@ -34,7 +34,7 @@ export const AppliedStatusFilters: React.FC<Props> = observer((props) => {
className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
onClick={() => handleRemove(status)}
>
<X size={10} strokeWidth={2} />
<CloseIcon height={10} width={10} strokeWidth={2} />
</button>
)}
</div>

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

@ -3,9 +3,10 @@ import { useCallback, useRef, useState } from "react";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
// icons
import { ListFilter, Search, X } from "lucide-react";
// plane helpers
import { ListFilter, Search } from "lucide-react";
import { useOutsideClickDetector } from "@plane/hooks";
import { CloseIcon } from "@plane/propel/icons";
// plane helpers
// types
import type { TCycleFilters } from "@plane/types";
import { cn, calculateTotalFilters } from "@plane/utils";
@ -109,7 +110,7 @@ export const ArchivedCyclesHeader: FC = observer(() => {
setIsSearchOpen(false);
}}
>
<X className="h-3 w-3" />
<CloseIcon className="h-3 w-3" />
</button>
)}
</div>

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

@ -1,11 +1,12 @@
import { useCallback, useEffect, useRef, useState } from "react";
import { observer } from "mobx-react";
// icons
import { ListFilter, Search, X } from "lucide-react";
import { ListFilter, Search } from "lucide-react";
// plane helpers
import { useOutsideClickDetector } from "@plane/hooks";
// types
import { useTranslation } from "@plane/i18n";
import { CloseIcon } from "@plane/propel/icons";
import type { TCycleFilters } from "@plane/types";
import { cn, calculateTotalFilters } from "@plane/utils";
// components
@ -109,7 +110,7 @@ export const CyclesViewHeader: React.FC<Props> = observer((props) => {
setIsSearchOpen(false);
}}
>
<X className="h-3 w-3" />
<CloseIcon className="h-3 w-3" />
</button>
)}
</div>

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

@ -1,6 +1,7 @@
import { useState } from "react";
import { observer } from "mobx-react";
import { Search, X } from "lucide-react";
import { Search } from "lucide-react";
import { CloseIcon } from "@plane/propel/icons";
// plane imports
import type { TCycleFilters, TCycleGroups } from "@plane/types";
// hooks
@ -38,7 +39,7 @@ export const CycleFiltersSelection: React.FC<Props> = observer((props) => {
/>
{filtersSearchQuery !== "" && (
<button type="button" className="grid place-items-center" onClick={() => setFiltersSearchQuery("")}>
<X className="text-custom-text-300" size={12} strokeWidth={2} />
<CloseIcon className="text-custom-text-300" height={12} width={12} strokeWidth={2} />
</button>
)}
</div>

5
apps/web/core/components/cycles/list/cycle-list-group-header.tsx
View file

@ -2,9 +2,8 @@
import type { FC } from "react";
import React from "react";
import { ChevronDown } from "lucide-react";
// types
import { CycleGroupIcon } from "@plane/propel/icons";
import { CycleGroupIcon, ChevronDownIcon } from "@plane/propel/icons";
import type { TCycleGroups } from "@plane/types";
// icons
import { Row } from "@plane/ui";
@ -33,7 +32,7 @@ export const CycleListGroupHeader: FC<Props> = (props) => {
{showCount && <div className="pl-2 text-sm font-medium text-custom-text-300">{`${count ?? "0"}`}</div>}
</div>
</div>
<ChevronDown
<ChevronDownIcon
className={cn("h-4 w-4 text-custom-sidebar-text-300 duration-300 ", {
"rotate-180": isExpanded,
})}

4
apps/web/core/components/cycles/list/cycle-list-project-group-header.tsx
View file

@ -3,7 +3,7 @@
import type { FC } from "react";
import React from "react";
import { observer } from "mobx-react";
import { ChevronRight } from "lucide-react";
import { ChevronRightIcon } from "@plane/propel/icons";
// icons
import { Row } from "@plane/ui";
// helpers
@ -29,7 +29,7 @@ export const CycleListProjectGroupHeader: FC<Props> = observer((props) => {
if (!project) return null;
return (
<Row className="flex items-center gap-2 flex-shrink-0 py-2.5">
<ChevronRight
<ChevronRightIcon
className={cn("h-4 w-4 text-custom-sidebar-text-300 duration-300 ", {
"rotate-90": isExpanded,
})}

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

@ -3,9 +3,9 @@
import React, { useState } from "react";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
import { AlertCircle, Search, X } from "lucide-react";
import { AlertCircle, Search } from "lucide-react";
import { Dialog, Transition } from "@headlessui/react";
import { CycleIcon, TransferIcon } from "@plane/propel/icons";
import { CycleIcon, TransferIcon, CloseIcon } from "@plane/propel/icons";
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
import { EIssuesStoreType } from "@plane/types";
import { useCycle } from "@/hooks/store/use-cycle";
@ -116,7 +116,7 @@ export const TransferIssuesModal: React.FC<Props> = observer((props) => {
<h4 className="text-xl font-medium text-custom-text-100">Transfer work items</h4>
</div>
<button onClick={handleClose}>
<X className="h-4 w-4" />
<CloseIcon className="h-4 w-4" />
</button>
</div>
<div className="flex items-center gap-2 border-b border-custom-border-200 px-5 pb-3">

5
apps/web/core/components/dropdowns/cycle/index.tsx
View file

@ -3,10 +3,9 @@
import type { ReactNode } from "react";
import { useRef, useState } from "react";
import { observer } from "mobx-react";
import { ChevronDown } from "lucide-react";
import { useTranslation } from "@plane/i18n";
// ui
import { CycleIcon } from "@plane/propel/icons";
import { CycleIcon, ChevronDownIcon } from "@plane/propel/icons";
import { ComboDropDown } from "@plane/ui";
// helpers
import { cn } from "@plane/utils";
@ -126,7 +125,7 @@ export const CycleDropdown: React.FC<Props> = observer((props) => {
<span className="max-w-40 flex-grow truncate">{selectedName ?? placeholder}</span>
)}
{dropdownArrow && (
<ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
<ChevronDownIcon className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
)}
</DropdownButton>
</button>

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

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

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

@ -4,11 +4,12 @@ import React, { useRef, useState } from "react";
import { observer } from "mobx-react";
import { createPortal } from "react-dom";
import { usePopper } from "react-popper";
import { CalendarDays, X } from "lucide-react";
import { CalendarDays } from "lucide-react";
import { Combobox } from "@headlessui/react";
// ui
import type { Matcher } from "@plane/propel/calendar";
import { Calendar } from "@plane/propel/calendar";
import { CloseIcon } from "@plane/propel/icons";
import { ComboDropDown } from "@plane/ui";
import { cn, renderFormattedDate, getDate } from "@plane/utils";
// helpers
@ -142,7 +143,7 @@ export const DateDropdown: React.FC<Props> = observer((props) => {
<span className="flex-grow truncate">{value ? renderFormattedDate(value, formatToken) : placeholder}</span>
)}
{isClearable && !disabled && isDateSelected && (
<X
<CloseIcon
className={cn("h-2.5 w-2.5 flex-shrink-0", clearIconClassName)}
onClick={(e) => {
e.stopPropagation();

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

@ -3,11 +3,11 @@ import { useRef, useState } from "react";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
import { usePopper } from "react-popper";
import { Check, ChevronDown, Search } from "lucide-react";
import { Check, Search } from "lucide-react";
import { Combobox } from "@headlessui/react";
// plane imports
import { useTranslation } from "@plane/i18n";
import { EstimatePropertyIcon } from "@plane/propel/icons";
import { EstimatePropertyIcon, ChevronDownIcon } from "@plane/propel/icons";
import { EEstimateSystem } from "@plane/types";
import { ComboDropDown } from "@plane/ui";
import { convertMinutesToHoursMinutesString, cn } from "@plane/utils";
@ -201,7 +201,7 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
</span>
)}
{dropdownArrow && (
<ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
<ChevronDownIcon className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
)}
</DropdownButton>
</button>

6
apps/web/core/components/dropdowns/member/base.tsx
View file

@ -1,9 +1,9 @@
import { useRef, useState } from "react";
import { observer } from "mobx-react";
import type { LucideIcon } from "lucide-react";
import { ChevronDown } from "lucide-react";
// plane imports
import { useTranslation } from "@plane/i18n";
import { ChevronDownIcon } from "@plane/propel/icons";
// plane imports
import type { IUserLite } from "@plane/types";
import { ComboDropDown } from "@plane/ui";
// helpers
@ -149,7 +149,7 @@ export const MemberDropdownBase: React.FC<TMemberDropdownBaseProps> = observer((
</span>
)}
{dropdownArrow && (
<ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
<ChevronDownIcon className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
)}
</DropdownButton>
</button>

9
apps/web/core/components/dropdowns/module/button-content.tsx
View file

@ -1,8 +1,7 @@
"use client";
import { ChevronDown, X } from "lucide-react";
// plane imports
import { ModuleIcon } from "@plane/propel/icons";
import { CloseIcon, ModuleIcon, ChevronDownIcon } from "@plane/propel/icons";
import { Tooltip } from "@plane/propel/tooltip";
import { cn } from "@plane/utils";
// hooks
@ -96,7 +95,7 @@ export const ModuleButtonContent: React.FC<ModuleButtonContentProps> = (props) =
onChange(newModuleIds);
}}
>
<X className="h-2.5 w-2.5 text-custom-text-300 hover:text-red-500" />
<CloseIcon className="h-2.5 w-2.5 text-custom-text-300 hover:text-red-500" />
</button>
</Tooltip>
)}
@ -111,7 +110,7 @@ export const ModuleButtonContent: React.FC<ModuleButtonContentProps> = (props) =
</>
)}
{dropdownArrow && (
<ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
<ChevronDownIcon className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
)}
</>
);
@ -123,7 +122,7 @@ export const ModuleButtonContent: React.FC<ModuleButtonContentProps> = (props) =
<span className="flex-grow truncate text-left">{value ? getModuleById(value)?.name : placeholder}</span>
)}
{dropdownArrow && (
<ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
<ChevronDownIcon className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
)}
</>
);

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

@ -4,12 +4,12 @@ import type { ReactNode } from "react";
import { Fragment, useRef, useState } from "react";
import { useTheme } from "next-themes";
import { usePopper } from "react-popper";
import { Check, ChevronDown, Search, SignalHigh } from "lucide-react";
import { Check, Search, SignalHigh } from "lucide-react";
import { Combobox } from "@headlessui/react";
import { ISSUE_PRIORITIES } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
// types
import { PriorityIcon } from "@plane/propel/icons";
import { PriorityIcon, ChevronDownIcon } from "@plane/propel/icons";
import { Tooltip } from "@plane/propel/tooltip";
import type { TIssuePriorities } from "@plane/types";
// ui
@ -125,7 +125,7 @@ const BorderButton = (props: ButtonProps) => {
))}
{!hideText && <span className="flex-grow truncate">{priorityDetails?.title ?? placeholder}</span>}
{dropdownArrow && (
<ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
<ChevronDownIcon className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
)}
</div>
</Tooltip>
@ -210,7 +210,7 @@ const BackgroundButton = (props: ButtonProps) => {
<span className="flex-grow truncate">{priorityDetails?.title ?? t("common.priority") ?? placeholder}</span>
)}
{dropdownArrow && (
<ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
<ChevronDownIcon className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
)}
</div>
</Tooltip>
@ -297,7 +297,7 @@ const TransparentButton = (props: ButtonProps) => {
<span className="flex-grow truncate">{priorityDetails?.title ?? t("common.priority") ?? placeholder}</span>
)}
{dropdownArrow && (
<ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
<ChevronDownIcon className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
)}
</div>
</Tooltip>

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

@ -2,11 +2,11 @@ import type { ReactNode } from "react";
import { useRef, useState } from "react";
import { observer } from "mobx-react";
import { usePopper } from "react-popper";
import { Check, ChevronDown, Search } from "lucide-react";
import { Check, Search } from "lucide-react";
import { Combobox } from "@headlessui/react";
// plane imports
import { useTranslation } from "@plane/i18n";
import { ProjectIcon } from "@plane/propel/icons";
import { ProjectIcon, ChevronDownIcon } from "@plane/propel/icons";
import { ComboDropDown } from "@plane/ui";
import { cn } from "@plane/utils";
// components
@ -207,7 +207,7 @@ export const ProjectDropdownBase: React.FC<Props> = observer((props) => {
<span className="truncate max-w-40">{getDisplayName(value, placeholder)}</span>
)}
{dropdownArrow && (
<ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
<ChevronDownIcon className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
)}
</DropdownButton>
</button>

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

@ -4,11 +4,11 @@ import type { ReactNode } from "react";
import { useRef, useState } from "react";
import { observer } from "mobx-react";
import { usePopper } from "react-popper";
import { ChevronDown, Search } from "lucide-react";
import { Search } from "lucide-react";
import { Combobox } from "@headlessui/react";
// plane imports
import { useTranslation } from "@plane/i18n";
import { StateGroupIcon } from "@plane/propel/icons";
import { StateGroupIcon, ChevronDownIcon } from "@plane/propel/icons";
import type { IState } from "@plane/types";
import { ComboDropDown, Spinner } from "@plane/ui";
import { cn } from "@plane/utils";
@ -185,7 +185,10 @@ export const WorkItemStateDropdownBase: React.FC<TWorkItemStateDropdownBaseProps
<span className="flex-grow truncate text-left">{selectedState?.name ?? t("state")}</span>
)}
{dropdownArrow && (
<ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
<ChevronDownIcon
className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)}
aria-hidden="true"
/>
)}
</>
)}

4
apps/web/core/components/estimates/create/modal.tsx
View file

@ -3,11 +3,11 @@
import type { FC } from "react";
import { useEffect, useMemo, useState } from "react";
import { observer } from "mobx-react";
import { ChevronLeft } from "lucide-react";
// plane imports
import { EEstimateSystem, ESTIMATE_SYSTEMS } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { Button } from "@plane/propel/button";
import { ChevronLeftIcon } from "@plane/propel/icons";
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
import type { IEstimateFormData, TEstimateSystemKeys, TEstimatePointsObject, TEstimateTypeError } from "@plane/types";
import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
@ -152,7 +152,7 @@ export const CreateEstimateModal: FC<TCreateEstimateModal> = observer((props) =>
}}
className="flex-shrink-0 cursor-pointer w-5 h-5 flex justify-center items-center"
>
<ChevronLeft className="w-4 h-4" />
<ChevronLeftIcon className="w-4 h-4" />
</div>
)}
<div className="text-xl font-medium text-custom-text-100">{t("project_settings.estimates.new")}</div>

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

@ -3,9 +3,10 @@
import type { FC, FormEvent } from "react";
import { useState } from "react";
import { observer } from "mobx-react";
import { Check, Info, X } from "lucide-react";
import { Check, 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 { TOAST_TYPE, setToast } from "@plane/propel/toast";
import { Tooltip } from "@plane/propel/tooltip";
import type { TEstimatePointsObject, TEstimateSystemKeys, TEstimateTypeErrorObject } from "@plane/types";
@ -204,7 +205,7 @@ export const EstimatePointCreate: FC<TEstimatePointCreate> = observer((props) =>
onClick={handleClose}
disabled={loader}
>
<X size={14} className="text-custom-text-200" />
<CloseIcon height={14} width={14} className="text-custom-text-200" />
</button>
</form>
);

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

@ -3,9 +3,10 @@
import type { FC, FormEvent } from "react";
import { useEffect, useState } from "react";
import { observer } from "mobx-react";
import { Check, Info, X } from "lucide-react";
import { Check, 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 { TOAST_TYPE, setToast } from "@plane/propel/toast";
import { Tooltip } from "@plane/propel/tooltip";
import type { TEstimatePointsObject, TEstimateSystemKeys, TEstimateTypeErrorObject } from "@plane/types";
@ -212,7 +213,7 @@ export const EstimatePointUpdate: FC<TEstimatePointUpdate> = observer((props) =>
onClick={handleClose}
disabled={loader}
>
<X size={14} className="text-custom-text-200" />
<CloseIcon height={14} width={14} className="text-custom-text-200" />
</button>
</form>
);

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, Users, X } from "lucide-react";
import { Check, Hotel, Users } 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 { ProjectIcon } from "@plane/propel/icons";
import { ProjectIcon, CloseIcon } from "@plane/propel/icons";
import { cn, getFileURL } from "@plane/utils";
// helpers
// hooks
@ -142,7 +142,7 @@ export const NoProjectsEmptyState = observer(() => {
setValue({ ...storedValue, hide: true });
}}
>
<X className="size-4" />
<CloseIcon className="size-4" />
{t("home.empty.not_right_now")}
</button>
</div>

6
apps/web/core/components/home/widgets/recents/filters.tsx
View file

@ -2,8 +2,8 @@
import type { FC } from "react";
import { observer } from "mobx-react";
import { ChevronDown } from "lucide-react";
import { useTranslation } from "@plane/i18n";
import { ChevronDownIcon } from "@plane/propel/icons";
import type { TRecentActivityFilterKeys } from "@plane/types";
import { CustomMenu } from "@plane/ui";
import { cn } from "@plane/utils";
@ -41,7 +41,9 @@ export const FiltersDropdown: FC<TFiltersDropdown> = observer((props) => {
customButton={
<button className="flex hover:bg-custom-background-80 px-2 py-1 rounded gap-1 capitalize border border-custom-border-200">
<span className="font-medium text-sm my-auto"> {t(title || "")}</span>
<ChevronDown className={cn("size-3 my-auto text-custom-text-300 hover:text-custom-text-200 duration-300")} />
<ChevronDownIcon
className={cn("size-3 my-auto text-custom-text-300 hover:text-custom-text-200 duration-300")}
/>
</button>
}
customButtonClassName="flex justify-center"

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

@ -3,23 +3,12 @@
import type { FC } from "react";
import { useCallback, useEffect, useState } from "react";
import { observer } from "mobx-react";
import {
CircleCheck,
CircleX,
ChevronDown,
ChevronUp,
Clock,
ExternalLink,
FileStack,
Link,
Trash2,
MoveRight,
Copy,
} from "lucide-react";
import { CircleCheck, CircleX, Clock, ExternalLink, FileStack, Link, Trash2, MoveRight, Copy } 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 { TOAST_TYPE, setToast } from "@plane/propel/toast";
import type { TNameDescriptionLoader } from "@plane/types";
import { EInboxIssueStatus } from "@plane/types";
@ -308,14 +297,14 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
className="rounded border border-custom-border-200 p-1.5"
onClick={() => handleInboxIssueNavigation("prev")}
>
<ChevronUp size={14} strokeWidth={2} />
<ChevronUpIcon height={14} width={14} strokeWidth={2} />
</button>
<button
type="button"
className="rounded border border-custom-border-200 p-1.5"
onClick={() => handleInboxIssueNavigation("next")}
>
<ChevronDown size={14} strokeWidth={2} />
<ChevronDownIcon height={14} width={14} strokeWidth={2} />
</button>
</div>
)}

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

@ -2,19 +2,8 @@
import React from "react";
import { observer } from "mobx-react";
import {
CircleCheck,
CircleX,
ChevronDown,
ChevronUp,
Clock,
ExternalLink,
FileStack,
Link,
Trash2,
PanelLeft,
MoveRight,
} from "lucide-react";
import { CircleCheck, CircleX, Clock, ExternalLink, FileStack, Link, Trash2, PanelLeft, MoveRight } from "lucide-react";
import { 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";
@ -117,14 +106,14 @@ export const InboxIssueActionsMobileHeader: React.FC<Props> = observer((props) =
className="rounded border border-custom-border-200 p-1.5"
onClick={() => handleInboxIssueNavigation("prev")}
>
<ChevronUp size={14} strokeWidth={2} />
<ChevronUpIcon height={14} width={14} strokeWidth={2} />
</button>
<button
type="button"
className="rounded border border-custom-border-200 p-1.5"
onClick={() => handleInboxIssueNavigation("next")}
>
<ChevronDown size={14} strokeWidth={2} />
<ChevronDownIcon height={14} width={14} strokeWidth={2} />
</button>
</div>
<div className="flex items-center gap-4">

6
apps/web/core/components/inbox/inbox-filter/applied-filters/date.tsx
View file

@ -1,7 +1,7 @@
import type { FC } from "react";
import { observer } from "mobx-react";
import { X } from "lucide-react";
import { PAST_DURATION_FILTER_OPTIONS } from "@plane/constants";
import { CloseIcon } from "@plane/propel/icons";
import type { TInboxIssueFilterDateKeys } from "@plane/types";
// helpers
import { Tag } from "@plane/ui";
@ -50,7 +50,7 @@ export const InboxIssueAppliedFiltersDate: FC<InboxIssueAppliedFiltersDate> = ob
className="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden cursor-pointer text-custom-text-300 hover:text-custom-text-200 transition-all"
onClick={() => handleInboxIssueFilters(filterKey, handleFilterValue(optionDetail?.value))}
>
<X className={`w-3 h-3`} />
<CloseIcon className={`w-3 h-3`} />
</div>
</div>
);
@ -60,7 +60,7 @@ export const InboxIssueAppliedFiltersDate: FC<InboxIssueAppliedFiltersDate> = ob
className="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden cursor-pointer text-custom-text-300 hover:text-custom-text-200 transition-all"
onClick={clearFilter}
>
<X className={`w-3 h-3`} />
<CloseIcon className={`w-3 h-3`} />
</div>
</Tag>
);

6
apps/web/core/components/inbox/inbox-filter/applied-filters/label.tsx
View file

@ -1,7 +1,7 @@
import type { FC } from "react";
import { observer } from "mobx-react";
import { X } from "lucide-react";
// hooks
import { CloseIcon } from "@plane/propel/icons";
import { Tag } from "@plane/ui";
import { useLabel } from "@/hooks/store/use-label";
import { useProjectInbox } from "@/hooks/store/use-project-inbox";
@ -40,7 +40,7 @@ export const InboxIssueAppliedFiltersLabel: FC = observer(() => {
className="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden cursor-pointer text-custom-text-300 hover:text-custom-text-200 transition-all"
onClick={() => handleInboxIssueFilters("labels", handleFilterValue(value))}
>
<X className={`w-3 h-3`} />
<CloseIcon className={`w-3 h-3`} />
</div>
</div>
);
@ -50,7 +50,7 @@ export const InboxIssueAppliedFiltersLabel: FC = observer(() => {
className="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden cursor-pointer text-custom-text-300 hover:text-custom-text-200 transition-all"
onClick={clearFilter}
>
<X className={`w-3 h-3`} />
<CloseIcon className={`w-3 h-3`} />
</div>
</Tag>
);

7
apps/web/core/components/inbox/inbox-filter/applied-filters/member.tsx
View file

@ -2,8 +2,9 @@
import type { FC } from "react";
import { observer } from "mobx-react";
import { X } from "lucide-react";
// plane types
import { CloseIcon } from "@plane/propel/icons";
import type { TInboxIssueFilterMemberKeys } from "@plane/types";
// plane ui
import { Avatar, Tag } from "@plane/ui";
@ -54,7 +55,7 @@ export const InboxIssueAppliedFiltersMember: FC<InboxIssueAppliedFiltersMember>
className="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden cursor-pointer text-custom-text-300 hover:text-custom-text-200 transition-all"
onClick={() => handleInboxIssueFilters(filterKey, handleFilterValue(value))}
>
<X className={`w-3 h-3`} />
<CloseIcon className={`w-3 h-3`} />
</div>
</div>
);
@ -64,7 +65,7 @@ export const InboxIssueAppliedFiltersMember: FC<InboxIssueAppliedFiltersMember>
className="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden cursor-pointer text-custom-text-300 hover:text-custom-text-200 transition-all"
onClick={clearFilter}
>
<X className={`w-3 h-3`} />
<CloseIcon className={`w-3 h-3`} />
</div>
</Tag>
);

7
apps/web/core/components/inbox/inbox-filter/applied-filters/priority.tsx
View file

@ -2,10 +2,9 @@
import type { FC } from "react";
import { observer } from "mobx-react";
import { X } from "lucide-react";
import { ISSUE_PRIORITIES } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { PriorityIcon } from "@plane/propel/icons";
import { PriorityIcon, CloseIcon } from "@plane/propel/icons";
import type { TIssuePriorities } from "@plane/types";
import { Tag } from "@plane/ui";
// hooks
@ -42,7 +41,7 @@ export const InboxIssueAppliedFiltersPriority: FC = observer(() => {
className="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden cursor-pointer text-custom-text-300 hover:text-custom-text-200 transition-all"
onClick={() => handleInboxIssueFilters("priority", handleFilterValue(optionDetail?.key))}
>
<X className={`w-3 h-3`} />
<CloseIcon className={`w-3 h-3`} />
</div>
</div>
);
@ -52,7 +51,7 @@ export const InboxIssueAppliedFiltersPriority: FC = observer(() => {
className="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden cursor-pointer text-custom-text-300 hover:text-custom-text-200 transition-all"
onClick={clearFilter}
>
<X className={`w-3 h-3`} />
<CloseIcon className={`w-3 h-3`} />
</div>
</Tag>
);

7
apps/web/core/components/inbox/inbox-filter/applied-filters/state.tsx
View file

@ -2,9 +2,8 @@
import type { FC } from "react";
import { observer } from "mobx-react";
import { X } from "lucide-react";
import { EIconSize } from "@plane/constants";
import { StateGroupIcon } from "@plane/propel/icons";
import { StateGroupIcon, CloseIcon } from "@plane/propel/icons";
import { Tag } from "@plane/ui";
// hooks
import { useProjectInbox } from "@/hooks/store/use-project-inbox";
@ -40,7 +39,7 @@ export const InboxIssueAppliedFiltersState: FC = observer(() => {
className="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden cursor-pointer text-custom-text-300 hover:text-custom-text-200 transition-all"
onClick={() => handleInboxIssueFilters("state", handleFilterValue(optionDetail?.id))}
>
<X className={`w-3 h-3`} />
<CloseIcon className={`w-3 h-3`} />
</div>
</div>
);
@ -50,7 +49,7 @@ export const InboxIssueAppliedFiltersState: FC = observer(() => {
className="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden cursor-pointer text-custom-text-300 hover:text-custom-text-200 transition-all"
onClick={clearFilter}
>
<X className={`w-3 h-3`} />
<CloseIcon className={`w-3 h-3`} />
</div>
</Tag>
);

4
apps/web/core/components/inbox/inbox-filter/applied-filters/status.tsx
View file

@ -1,8 +1,8 @@
import type { FC } from "react";
import { observer } from "mobx-react";
import { X } from "lucide-react";
import { INBOX_STATUS } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { CloseIcon } from "@plane/propel/icons";
import type { TInboxIssueStatus } from "@plane/types";
// constants
import { Tag } from "@plane/ui";
@ -39,7 +39,7 @@ export const InboxIssueAppliedFiltersStatus: FC = observer(() => {
className="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden cursor-pointer text-custom-text-300 hover:text-custom-text-200 transition-all"
onClick={() => handleInboxIssueFilters("status", handleFilterValue(optionDetail?.status))}
>
<X className={`w-3 h-3`} />
<CloseIcon className={`w-3 h-3`} />
</div>
)}
</div>

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

@ -1,7 +1,8 @@
import type { FC } from "react";
import { useState } from "react";
import { observer } from "mobx-react";
import { Search, X } from "lucide-react";
import { Search } from "lucide-react";
import { CloseIcon } from "@plane/propel/icons";
// hooks
import { useLabel } from "@/hooks/store/use-label";
import { useMember } from "@/hooks/store/use-member";
@ -41,7 +42,7 @@ export const InboxIssueFilterSelection: FC = observer(() => {
/>
{filtersSearchQuery !== "" && (
<button type="button" className="grid place-items-center" onClick={() => setFiltersSearchQuery("")}>
<X className="text-custom-text-300" size={12} strokeWidth={2} />
<CloseIcon className="text-custom-text-300" height={12} width={12} strokeWidth={2} />
</button>
)}
</div>

7
apps/web/core/components/inbox/inbox-filter/root.tsx
View file

@ -1,7 +1,8 @@
import type { FC } from "react";
import { ChevronDown, ListFilter } from "lucide-react";
// plane imports
import { ListFilter } from "lucide-react";
import { getButtonStyling } from "@plane/propel/button";
// plane imports
import { ChevronDownIcon } from "@plane/propel/icons";
import { cn } from "@plane/utils";
// components
import { FiltersDropdown } from "@/components/issues/issue-layouts/filters";
@ -17,7 +18,7 @@ const largeButton = (
<div className={cn(getButtonStyling("neutral-primary", "sm"), "px-2 text-custom-text-300")}>
<ListFilter className="size-3 " />
<span>Filters</span>
<ChevronDown className="size-3" strokeWidth={2} />
<ChevronDownIcon className="size-3" strokeWidth={2} />
</div>
);
export const FiltersRoot: FC = () => {

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

@ -2,10 +2,11 @@
import type { FC } from "react";
import { observer } from "mobx-react";
import { ArrowDownWideNarrow, ArrowUpWideNarrow, Check, ChevronDown } from "lucide-react";
import { ArrowDownWideNarrow, ArrowUpWideNarrow, Check } 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 type { TInboxIssueSortingOrderByKeys, TInboxIssueSortingSortByKeys } from "@plane/types";
import { CustomMenu } from "@plane/ui";
// constants
@ -36,7 +37,7 @@ export const InboxIssueOrderByDropdown: FC = observer(() => {
<ArrowDownWideNarrow className="size-3 " />
)}
{t(orderByDetails?.i18n_label || "inbox_issue.order_by.created_at")}
<ChevronDown className="size-3" strokeWidth={2} />
<ChevronDownIcon className="size-3" strokeWidth={2} />
</div>
);
return (

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

@ -4,7 +4,8 @@ import type { FC } from "react";
import { useState } from "react";
import { observer } from "mobx-react";
import Link from "next/link";
import { AlertCircle, X } from "lucide-react";
import { AlertCircle } from "lucide-react";
import { CloseIcon } from "@plane/propel/icons";
// ui
import { Tooltip } from "@plane/propel/tooltip";
import {
@ -98,7 +99,7 @@ export const IssueAttachmentsDetail: FC<TIssueAttachmentsDetail> = observer((pro
{!disabled && (
<button type="button" onClick={() => setIsDeleteIssueAttachmentModalOpen(true)}>
<X className="h-4 w-4 text-custom-text-200 hover:text-custom-text-100" />
<CloseIcon className="h-4 w-4 text-custom-text-200 hover:text-custom-text-100" />
</button>
)}
</div>

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

@ -1,8 +1,9 @@
import type { FC } from "react";
import { useMemo, useState } from "react";
import { observer } from "mobx-react";
import { ListFilter, Search, X } from "lucide-react";
import { ListFilter, Search } from "lucide-react";
import { useTranslation } from "@plane/i18n";
import { CloseIcon } from "@plane/propel/icons";
import type { IIssueFilterOptions, IState } from "@plane/types";
import { cn } from "@plane/utils";
import {
@ -65,7 +66,7 @@ export const SubIssueFilters: FC<TSubIssueFiltersProps> = observer((props) => {
/>
{filtersSearchQuery !== "" && (
<button type="button" className="grid place-items-center" onClick={() => setFiltersSearchQuery("")}>
<X className="text-custom-text-300" size={12} strokeWidth={2} />
<CloseIcon className="text-custom-text-300" height={12} width={12} strokeWidth={2} />
</button>
)}
</div>

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

@ -1,8 +1,9 @@
import type { FC } from "react";
import { useState } from "react";
import { observer } from "mobx-react";
import { ChevronRight, CircleDashed } from "lucide-react";
import { CircleDashed } from "lucide-react";
import { ALL_ISSUES } from "@plane/constants";
import { ChevronRightIcon } from "@plane/propel/icons";
import type { IGroupByColumn, TIssue, TIssueServiceType, TSubIssueOperations } from "@plane/types";
import { EIssuesStoreType } from "@plane/types";
import { Collapsible } from "@plane/ui";
@ -59,7 +60,7 @@ export const SubIssuesListGroup: FC<TSubIssuesListGroupProps> = observer((props)
title={
!isAllIssues && (
<div className="flex items-center gap-2 p-3">
<ChevronRight
<ChevronRightIcon
className={cn("size-3.5 transition-all text-custom-text-400", {
"rotate-90": isCollapsibleOpen,
})}

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

@ -1,9 +1,10 @@
"use client";
import { observer } from "mobx-react";
import { ChevronRight, X, Pencil, Trash, Link as LinkIcon, Loader } from "lucide-react";
// plane imports
import { Pencil, Trash, Link as LinkIcon, Loader } from "lucide-react";
import { useTranslation } from "@plane/i18n";
import { CloseIcon, ChevronRightIcon } from "@plane/propel/icons";
// plane imports
import { Tooltip } from "@plane/propel/tooltip";
import type { TIssue, TIssueServiceType, TSubIssueOperations } from "@plane/types";
import { EIssueServiceType, EIssuesStoreType } from "@plane/types";
@ -133,7 +134,7 @@ export const SubIssuesListItem: React.FC<Props> = observer((props) => {
setSubIssueHelpers(parentIssueId, "issue_visibility", issueId);
}}
>
<ChevronRight
<ChevronRightIcon
className={cn("size-3.5 transition-all", {
"rotate-90": subIssueHelpers.issue_visibility.includes(issue.id),
})}
@ -217,7 +218,7 @@ export const SubIssuesListItem: React.FC<Props> = observer((props) => {
}}
>
<div className="flex items-center gap-2">
<X className="h-3.5 w-3.5" strokeWidth={2} />
<CloseIcon className="h-3.5 w-3.5" strokeWidth={2} />
{issueServiceType === EIssueServiceType.ISSUES
? t("issue.remove.parent.label")
: t("issue.remove.label")}

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

@ -5,8 +5,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, X, Loader } from "lucide-react";
import { Plus, Loader } from "lucide-react";
import { Popover } from "@headlessui/react";
import { CloseIcon } from "@plane/propel/icons";
import type { IIssueLabel } from "@plane/types";
// hooks
import { Input } from "@plane/ui";
@ -82,7 +83,7 @@ export const LabelCreate: FC<ILabelCreate> = (props) => {
onClick={handleIsCreateToggle}
>
<div className="flex-shrink-0">
{isCreateToggle ? <X className="h-2.5 w-2.5" /> : <Plus className="h-2.5 w-2.5" />}
{isCreateToggle ? <CloseIcon className="h-2.5 w-2.5" /> : <Plus className="h-2.5 w-2.5" />}
</div>
<div className="flex-shrink-0">{isCreateToggle ? "Cancel" : "New"}</div>
</div>
@ -150,7 +151,7 @@ export const LabelCreate: FC<ILabelCreate> = (props) => {
onClick={() => setIsCreateToggle(false)}
disabled={disabled}
>
<X className="h-3.5 w-3.5 text-white" />
<CloseIcon className="h-3.5 w-3.5 text-white" />
</button>
<button type="submit" className="grid place-items-center rounded bg-green-500 p-1" disabled={isSubmitting}>
{isSubmitting ? (

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

@ -1,6 +1,6 @@
import type { FC } from "react";
import { observer } from "mobx-react";
import { X } from "lucide-react";
import { CloseIcon } from "@plane/propel/icons";
// types
import { useLabel } from "@/hooks/store/use-label";
import type { TLabelOperations } from "./root";
@ -47,7 +47,7 @@ export const LabelListItem: FC<TLabelListItem> = observer((props) => {
<div className="truncate">{label.name}</div>
{!disabled && (
<div className="flex-shrink-0">
<X className="transition-all h-2.5 w-2.5 group-hover:text-red-500" />
<CloseIcon className="transition-all h-2.5 w-2.5 group-hover:text-red-500" />
</div>
)}
</div>

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

@ -3,9 +3,10 @@
import React from "react";
import { observer } from "mobx-react";
import Link from "next/link";
import { Pencil, X } from "lucide-react";
// plane imports
import { Pencil } from "lucide-react";
import { useTranslation } from "@plane/i18n";
import { CloseIcon } from "@plane/propel/icons";
// plane imports
import { Tooltip } from "@plane/propel/tooltip";
import { cn } from "@plane/utils";
// hooks
@ -109,7 +110,7 @@ export const IssueParentSelect: React.FC<TIssueParentSelect> = observer((props)
handleRemoveSubIssue(workspaceSlug, projectId, parentIssue.id, issueId);
}}
>
<X className="h-2.5 w-2.5 text-custom-text-300 hover:text-red-500" />
<CloseIcon className="h-2.5 w-2.5 text-custom-text-300 hover:text-red-500" />
</span>
</Tooltip>
)}

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

@ -3,7 +3,8 @@
import React from "react";
import { observer } from "mobx-react";
import Link from "next/link";
import { Pencil, X } from "lucide-react";
import { Pencil } from "lucide-react";
import { CloseIcon } from "@plane/propel/icons";
// Plane
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
import { Tooltip } from "@plane/propel/tooltip";
@ -140,7 +141,7 @@ export const IssueRelationSelect: React.FC<TIssueRelationSelect> = observer((pro
removeRelation(workspaceSlug, projectId, issueId, relationKey, relationIssueId);
}}
>
<X className="h-2.5 w-2.5 text-custom-text-300 hover:text-red-500" />
<CloseIcon className="h-2.5 w-2.5 text-custom-text-300 hover:text-red-500" />
</span>
</Tooltip>
)}

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

@ -1,8 +1,8 @@
import React, { useState } from "react";
import { observer } from "mobx-react";
import { usePopper } from "react-popper";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { Popover, Transition } from "@headlessui/react";
import { ChevronLeftIcon, ChevronRightIcon } from "@plane/propel/icons";
//hooks
// icons
// constants
@ -118,7 +118,7 @@ export const CalendarMonthsDropdown: React.FC<Props> = observer((props: Props) =
handleDateChange(previousYear);
}}
>
<ChevronLeft size={14} />
<ChevronLeftIcon height={14} width={14} />
</button>
<span className="text-xs">{activeMonthDate.getFullYear()}</span>
<button
@ -129,7 +129,7 @@ export const CalendarMonthsDropdown: React.FC<Props> = observer((props: Props) =
handleDateChange(nextYear);
}}
>
<ChevronRight size={14} />
<ChevronRightIcon height={14} width={14} />
</button>
</div>
<div className="grid grid-cols-4 items-stretch justify-items-stretch gap-4 pt-3">

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

@ -4,7 +4,7 @@ import React, { useState } from "react";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
import { usePopper } from "react-popper";
import { Check, ChevronUp, MoreVerticalIcon } from "lucide-react";
import { Check, MoreVerticalIcon } from "lucide-react";
import { Popover, Transition } from "@headlessui/react";
// hooks
// ui
@ -12,6 +12,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 type { TCalendarLayouts, TSupportedFilterForUpdate } from "@plane/types";
import { ToggleSwitch } from "@plane/ui";
// types
@ -113,7 +114,7 @@ export const CalendarOptionsDropdown: React.FC<ICalendarHeader> = observer((prop
<div
className={`flex h-3.5 w-3.5 items-center justify-center transition-all ${open ? "" : "rotate-180"}`}
>
<ChevronUp width={12} strokeWidth={2} />
<ChevronUpIcon width={12} strokeWidth={2} />
</div>
</div>
<div className="md:hidden">

6
apps/web/core/components/issues/issue-layouts/calendar/header.tsx
View file

@ -1,9 +1,9 @@
import { observer } from "mobx-react";
// components
import { ChevronLeft, ChevronRight } from "lucide-react";
import type { TSupportedFilterTypeForUpdate } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { ChevronLeftIcon, ChevronRightIcon } from "@plane/propel/icons";
import type { TSupportedFilterForUpdate } from "@plane/types";
import { Row } from "@plane/ui";
// icons
@ -104,10 +104,10 @@ export const CalendarHeader: React.FC<ICalendarHeader> = observer((props) => {
<Row className="mb-4 flex items-center justify-between gap-2">
<div className="flex items-center gap-1.5">
<button type="button" className="grid place-items-center" onClick={handlePrevious}>
<ChevronLeft size={16} strokeWidth={2} />
<ChevronLeftIcon height={16} width={16} strokeWidth={2} />
</button>
<button type="button" className="grid place-items-center" onClick={handleNext}>
<ChevronRight size={16} strokeWidth={2} />
<ChevronRightIcon height={16} width={16} strokeWidth={2} />
</button>
<CalendarMonthsDropdown issuesFilterStore={issuesFilterStore} />
</div>

5
apps/web/core/components/issues/issue-layouts/filters/applied-filters/cycle.tsx
View file

@ -1,8 +1,7 @@
"use client";
import { observer } from "mobx-react";
import { X } from "lucide-react";
import { CycleGroupIcon } from "@plane/propel/icons";
import { CloseIcon, CycleGroupIcon } from "@plane/propel/icons";
import type { TCycleGroups } from "@plane/types";
// hooks
import { useCycle } from "@/hooks/store/use-cycle";
@ -39,7 +38,7 @@ export const AppliedCycleFilters: React.FC<Props> = observer((props) => {
className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
onClick={() => handleRemove(cycleId)}
>
<X size={10} strokeWidth={2} />
<CloseIcon height={10} width={10} strokeWidth={2} />
</button>
)}
</div>

6
apps/web/core/components/issues/issue-layouts/filters/applied-filters/date.tsx
View file

@ -1,8 +1,8 @@
import { observer } from "mobx-react";
// icons
import { X } from "lucide-react";
// helpers
import { DATE_AFTER_FILTER_OPTIONS } from "@plane/constants";
import { CloseIcon } from "@plane/propel/icons";
// helpers
import { renderFormattedDate, capitalizeFirstLetter } from "@plane/utils";
// constants
@ -43,7 +43,7 @@ export const AppliedDateFilters: React.FC<Props> = observer((props) => {
className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
onClick={() => handleRemove(date)}
>
<X size={10} strokeWidth={2} />
<CloseIcon height={10} width={10} strokeWidth={2} />
</button>
</div>
))}

4
apps/web/core/components/issues/issue-layouts/filters/applied-filters/label.tsx
View file

@ -1,7 +1,7 @@
import { observer } from "mobx-react";
// icons
import { X } from "lucide-react";
import { CloseIcon } from "@plane/propel/icons";
import type { IIssueLabel } from "@plane/types";
// types
@ -37,7 +37,7 @@ export const AppliedLabelsFilters: React.FC<Props> = observer((props) => {
className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
onClick={() => handleRemove(labelId)}
>
<X size={10} strokeWidth={2} />
<CloseIcon height={10} width={10} strokeWidth={2} />
</button>
)}
</div>

4
apps/web/core/components/issues/issue-layouts/filters/applied-filters/members.tsx
View file

@ -1,7 +1,7 @@
"use client";
import { observer } from "mobx-react";
import { X } from "lucide-react";
import { CloseIcon } from "@plane/propel/icons";
// plane ui
import { Avatar } from "@plane/ui";
// helpers
@ -44,7 +44,7 @@ export const AppliedMembersFilters: React.FC<Props> = observer((props) => {
className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
onClick={() => handleRemove(memberId)}
>
<X size={10} strokeWidth={2} />
<CloseIcon height={10} width={10} strokeWidth={2} />
</button>
)}
</div>

5
apps/web/core/components/issues/issue-layouts/filters/applied-filters/module.tsx
View file

@ -1,9 +1,8 @@
"use client";
import { observer } from "mobx-react";
import { X } from "lucide-react";
// hooks
import { ModuleIcon } from "@plane/propel/icons";
import { CloseIcon, ModuleIcon } from "@plane/propel/icons";
import { useModule } from "@/hooks/store/use-module";
// ui
@ -35,7 +34,7 @@ export const AppliedModuleFilters: React.FC<Props> = observer((props) => {
className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
onClick={() => handleRemove(moduleId)}
>
<X size={10} strokeWidth={2} />
<CloseIcon height={10} width={10} strokeWidth={2} />
</button>
)}
</div>

5
apps/web/core/components/issues/issue-layouts/filters/applied-filters/priority.tsx
View file

@ -3,8 +3,7 @@
import { observer } from "mobx-react";
// icons
import { X } from "lucide-react";
import { PriorityIcon } from "@plane/propel/icons";
import { CloseIcon, PriorityIcon } from "@plane/propel/icons";
import type { TIssuePriorities } from "@plane/types";
// types
@ -29,7 +28,7 @@ export const AppliedPriorityFilters: React.FC<Props> = observer((props) => {
className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
onClick={() => handleRemove(priority)}
>
<X size={10} strokeWidth={2} />
<CloseIcon height={10} width={10} strokeWidth={2} />
</button>
)}
</div>

4
apps/web/core/components/issues/issue-layouts/filters/applied-filters/project.tsx
View file

@ -1,5 +1,5 @@
import { observer } from "mobx-react";
import { X } from "lucide-react";
import { CloseIcon } from "@plane/propel/icons";
// components
import { Logo } from "@/components/common/logo";
// hooks
@ -35,7 +35,7 @@ export const AppliedProjectFilters: React.FC<Props> = observer((props) => {
className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
onClick={() => handleRemove(projectId)}
>
<X size={10} strokeWidth={2} />
<CloseIcon height={10} width={10} strokeWidth={2} />
</button>
)}
</div>

5
apps/web/core/components/issues/issue-layouts/filters/applied-filters/state-group.tsx
View file

@ -3,9 +3,8 @@
import { observer } from "mobx-react";
// icons
import { X } from "lucide-react";
import { EIconSize } from "@plane/constants";
import { StateGroupIcon } from "@plane/propel/icons";
import { CloseIcon, StateGroupIcon } from "@plane/propel/icons";
import type { TStateGroups } from "@plane/types";
type Props = {
@ -27,7 +26,7 @@ export const AppliedStateGroupFilters: React.FC<Props> = observer((props) => {
className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
onClick={() => handleRemove(stateGroup)}
>
<X size={10} strokeWidth={2} />
<CloseIcon height={10} width={10} strokeWidth={2} />
</button>
</div>
))}

5
apps/web/core/components/issues/issue-layouts/filters/applied-filters/state.tsx
View file

@ -2,10 +2,9 @@
import { observer } from "mobx-react";
// icons
import { X } from "lucide-react";
// plane imports
import { EIconSize } from "@plane/constants";
import { StateGroupIcon } from "@plane/propel/icons";
import { CloseIcon, StateGroupIcon } from "@plane/propel/icons";
import type { IState } from "@plane/types";
type Props = {
@ -40,7 +39,7 @@ export const AppliedStateFilters: React.FC<Props> = observer((props) => {
className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
onClick={() => handleRemove(stateId)}
>
<X size={10} strokeWidth={2} />
<CloseIcon height={10} width={10} strokeWidth={2} />
</button>
)}
</div>

10
apps/web/core/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx
View file

@ -3,12 +3,11 @@
import React, { Fragment, useState } from "react";
import type { Placement } from "@popperjs/core";
import { usePopper } from "react-popper";
// icons
import { ChevronUp } from "lucide-react";
// headless ui
import { Popover, Transition } from "@headlessui/react";
// ui
import { Button } from "@plane/propel/button";
import { ChevronUpIcon } from "@plane/propel/icons";
type Props = {
children: React.ReactNode;
@ -63,7 +62,12 @@ export const FiltersDropdown: React.FC<Props> = (props) => {
size="sm"
prependIcon={icon}
appendIcon={
<ChevronUp className={`transition-all ${open ? "" : "rotate-180"}`} size={14} strokeWidth={2} />
<ChevronUpIcon
className={`transition-all ${open ? "" : "rotate-180"}`}
height={14}
width={14}
strokeWidth={2}
/>
}
tabIndex={tabIndex}
className="relative"

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

@ -1,6 +1,6 @@
import React from "react";
import { ChevronDownIcon, ChevronUpIcon } from "@plane/propel/icons";
// lucide icons
import { ChevronDown, ChevronUp } from "lucide-react";
interface IFilterHeader {
title: string;
@ -16,7 +16,7 @@ export const FilterHeader = ({ title, isPreviewEnabled, handleIsPreviewEnabled }
className="grid h-5 w-5 flex-shrink-0 place-items-center rounded hover:bg-custom-background-80"
onClick={handleIsPreviewEnabled}
>
{isPreviewEnabled ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
{isPreviewEnabled ? <ChevronUpIcon height={14} width={14} /> : <ChevronDownIcon height={14} width={14} />}
</button>
</div>
);

6
apps/web/core/components/issues/issue-layouts/filters/header/mobile-layout-selection.tsx
View file

@ -1,7 +1,7 @@
import { ChevronDown } from "lucide-react";
import { ISSUE_LAYOUTS } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { Button } from "@plane/propel/button";
import { ChevronDownIcon } from "@plane/propel/icons";
import type { EIssueLayoutTypes } from "@plane/types";
import { CustomMenu } from "@plane/ui";
import { IssueLayoutIcon } from "../../layout-icon";
@ -26,12 +26,12 @@ export const MobileLayoutSelection = ({
activeLayout ? (
<Button variant="neutral-primary" size="sm" className="relative px-2">
<IssueLayoutIcon layout={activeLayout} size={14} strokeWidth={2} className={`h-3.5 w-3.5`} />
<ChevronDown className="size-3 text-custom-text-200 my-auto" strokeWidth={2} />
<ChevronDownIcon className="size-3 text-custom-text-200 my-auto" strokeWidth={2} />
</Button>
) : (
<div className="flex flex-start text-sm text-custom-text-200">
{t("common.layout")}
<ChevronDown className="ml-2 h-4 w-4 text-custom-text-200 my-auto" strokeWidth={2} />
<ChevronDownIcon className="ml-2 h-4 w-4 text-custom-text-200 my-auto" strokeWidth={2} />
</div>
)
}

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

@ -1,7 +1,8 @@
import type { FC } from "react";
import React from "react";
import { observer } from "mobx-react";
import { Circle, ChevronDown, ChevronUp } from "lucide-react";
import { Circle } from "lucide-react";
import { ChevronDownIcon, ChevronUpIcon } from "@plane/propel/icons";
// Plane
import type { TIssueGroupByOptions, TIssueKanbanFilters } from "@plane/types";
// Plane-web
@ -27,9 +28,9 @@ export const HeaderSubGroupByCard: FC<IHeaderSubGroupByCard> = observer((props)
>
<div className="flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm transition-all hover:bg-custom-background-80">
{collapsedGroups?.sub_group_by.includes(column_id) ? (
<ChevronDown width={14} strokeWidth={2} />
<ChevronDownIcon width={14} strokeWidth={2} />
) : (
<ChevronUp width={14} strokeWidth={2} />
<ChevronUpIcon width={14} strokeWidth={2} />
)}
</div>

4
apps/web/core/components/issues/issue-layouts/list/block.tsx
View file

@ -6,7 +6,7 @@ import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
import { ChevronRight } from "lucide-react";
import { ChevronRightIcon } from "@plane/propel/icons";
// types
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
import { Tooltip } from "@plane/propel/tooltip";
@ -250,7 +250,7 @@ export const IssueBlock = observer((props: IssueBlockProps) => {
className="size-4 grid place-items-center rounded-sm text-custom-text-400 hover:text-custom-text-300"
onClick={handleToggleExpand}
>
<ChevronRight
<ChevronRightIcon
className={cn("size-4", {
"rotate-90": isExpanded,
})}

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

@ -2,12 +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, ChevronDown, Loader, Search } from "lucide-react";
import { Check, Loader, Search } 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";
// types
import type { IIssueLabel } from "@plane/types";
import { EUserProjectRoles } from "@plane/types";
@ -200,7 +201,7 @@ export const LabelDropdown = (props: ILabelDropdownProps) => {
disabled={disabled}
>
{label}
{!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
{!hideDropdownArrow && !disabled && <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />}
</button>
),
[buttonClassName, disabled, fullWidth, handleOnClick, hideDropdownArrow, label, maxRender, value.length]

5
apps/web/core/components/issues/issue-layouts/spreadsheet/issue-row.tsx
View file

@ -4,10 +4,11 @@ import type { Dispatch, MouseEvent, MutableRefObject, SetStateAction } from "rea
import { useRef, useState } from "react";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
import { ChevronRight, MoreHorizontal } from "lucide-react";
import { MoreHorizontal } from "lucide-react";
import { SPREADSHEET_SELECT_GROUP } from "@plane/constants";
// plane helpers
import { useOutsideClickDetector } from "@plane/hooks";
import { ChevronRightIcon } from "@plane/propel/icons";
// types
import { Tooltip } from "@plane/propel/tooltip";
import type { IIssueDisplayProperties, TIssue } from "@plane/types";
@ -335,7 +336,7 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
className="grid place-items-center size-4 rounded-sm text-custom-text-400 hover:text-custom-text-300"
onClick={handleToggleExpand}
>
<ChevronRight
<ChevronRightIcon
className={cn("size-4", {
"rotate-90": isExpanded,
})}

6
apps/web/core/components/issues/issue-modal/components/parent-tag.tsx
View file

@ -4,9 +4,9 @@ import React from "react";
import { observer } from "mobx-react";
import type { Control } from "react-hook-form";
import { Controller } from "react-hook-form";
import { X } from "lucide-react";
// plane imports
import { ETabIndices } from "@plane/constants";
import { CloseIcon } from "@plane/propel/icons";
// plane imports
// types
import type { ISearchIssueResponse, TIssue } from "@plane/types";
// helpers
@ -65,7 +65,7 @@ export const IssueParentTag: React.FC<TIssueParentTagProps> = observer((props) =
}}
tabIndex={getIndex("remove_parent")}
>
<X className="h-3 w-3 cursor-pointer" />
<CloseIcon className="h-3 w-3 cursor-pointer" />
</button>
</div>
</div>

7
apps/web/core/components/issues/relations/issue-list-item.tsx
View file

@ -3,9 +3,10 @@
import type { FC } from "react";
import React from "react";
import { observer } from "mobx-react";
import { X, Pencil, Trash, Link as LinkIcon } from "lucide-react";
// plane imports
import { Pencil, Trash, Link as LinkIcon } from "lucide-react";
import { useTranslation } from "@plane/i18n";
import { CloseIcon } from "@plane/propel/icons";
// plane imports
import { Tooltip } from "@plane/propel/tooltip";
import type { TIssue, TIssueServiceType } from "@plane/types";
import { EIssueServiceType } from "@plane/types";
@ -180,7 +181,7 @@ export const RelationIssueListItem: FC<Props> = observer((props) => {
{!disabled && (
<CustomMenu.MenuItem onClick={handleRemoveRelation}>
<div className="flex items-center gap-2">
<X className="h-3.5 w-3.5" strokeWidth={2} />
<CloseIcon className="h-3.5 w-3.5" strokeWidth={2} />
<span>{t("common.actions.remove_relation")}</span>
</div>
</CustomMenu.MenuItem>

7
apps/web/core/components/labels/label-block/label-item-block.tsx
View file

@ -3,10 +3,11 @@
import type { MutableRefObject } from "react";
import { useRef, useState } from "react";
import type { LucideIcon } from "lucide-react";
import { X } from "lucide-react";
// plane helpers
import { PROJECT_SETTINGS_TRACKER_ELEMENTS } from "@plane/constants";
import { useOutsideClickDetector } from "@plane/hooks";
import type { ISvgIcons } from "@plane/propel/icons";
import { CloseIcon } from "@plane/propel/icons";
// types
import type { IIssueLabel } from "@plane/types";
// ui
@ -17,7 +18,7 @@ import { cn } from "@plane/utils";
import { LabelName } from "./label-name";
export interface ICustomMenuItem {
CustomIcon: LucideIcon;
CustomIcon: LucideIcon | React.FC<ISvgIcons>;
onClick: (label: IIssueLabel) => void;
isVisible: boolean;
text: string;
@ -98,7 +99,7 @@ export const LabelItemBlock = (props: ILabelItemBlock) => {
}}
data-ph-element={PROJECT_SETTINGS_TRACKER_ELEMENTS.LABELS_DELETE_BUTTON}
>
<X className="size-3.5 flex-shrink-0 text-custom-sidebar-text-300" />
<CloseIcon className="size-3.5 flex-shrink-0 text-custom-sidebar-text-300" />
</button>
</div>
)}

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