From 87eb1949c6071ca36eafad5098af1c657af695ed Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com> Date: Mon, 13 Oct 2025 19:43:24 +0530 Subject: [PATCH] [WEB-5129] feat: icons revamp (#7945) --- .../(dashboard)/sidebar-help-section.tsx | 8 +- .../properties/all-properties.tsx | 5 +- .../issues/issue-layouts/properties/cycle.tsx | 4 +- .../issue-layouts/properties/modules.tsx | 4 +- .../components/issues/issue-layouts/utils.tsx | 6 +- .../core/components/issues/navbar/root.tsx | 4 +- .../(projects)/active-cycles/header.tsx | 4 +- .../(projects)/analytics/[tabId]/header.tsx | 6 +- .../(projects)/drafts/header.tsx | 4 +- .../[workspaceSlug]/(projects)/header.tsx | 8 +- .../(projects)/profile/[userId]/header.tsx | 4 +- .../(detail)/[projectId]/archives/header.tsx | 8 +- .../archives/issues/(detail)/header.tsx | 4 +- .../[projectId]/cycles/(detail)/header.tsx | 6 +- .../[projectId]/modules/(detail)/header.tsx | 6 +- .../[projectId]/pages/(detail)/header.tsx | 6 +- .../views/(detail)/[viewId]/header.tsx | 7 +- .../(projects)/workspace-views/header.tsx | 10 +-- .../web/ce/components/breadcrumbs/project.tsx | 9 ++- .../ce/components/command-palette/helpers.tsx | 14 ++-- .../components/issues/issue-layouts/utils.tsx | 4 +- .../components/projects/navigation/helper.tsx | 15 ++-- .../components/workspace/sidebar/helper.tsx | 29 ++++--- .../constants/project/settings/features.tsx | 14 ++-- apps/web/ce/constants/sidebar-favorites.ts | 22 ++++-- .../overview/active-project-item.tsx | 4 +- .../components/analytics/select/project.tsx | 6 +- .../analytics/select/select-y-axis.tsx | 4 +- .../work-items/workitems-insight-table.tsx | 7 +- .../command-palette/actions/help-actions.tsx | 6 +- .../actions/project-actions.tsx | 10 +-- .../command-palette/command-modal.tsx | 4 +- .../components/common/activity/helper.tsx | 12 +-- apps/web/core/components/core/activity.tsx | 16 +++- .../analytics-sidebar/sidebar-details.tsx | 7 +- .../cycles/list/cycle-list-item-action.tsx | 4 +- .../cycles/transfer-issues-modal.tsx | 4 +- .../dropdowns/cycle/cycle-options.tsx | 4 +- .../core/components/dropdowns/cycle/index.tsx | 4 +- .../dropdowns/module/button-content.tsx | 10 +-- .../dropdowns/module/module-options.tsx | 6 +- .../components/dropdowns/project/base.tsx | 5 +- .../home/widgets/empty-states/no-projects.tsx | 5 +- .../home/widgets/empty-states/recents.tsx | 12 +-- .../components/home/widgets/recents/index.tsx | 9 +-- .../components/home/widgets/recents/issue.tsx | 4 +- .../components/home/widgets/recents/page.tsx | 4 +- apps/web/core/components/inbox/root.tsx | 4 +- .../components/instance/not-ready-view.tsx | 2 +- .../issue-detail-widgets/action-buttons.tsx | 7 +- .../sub-issues/quick-action-button.tsx | 5 +- .../issue-activity/activity/actions/cycle.tsx | 4 +- .../activity/actions/default.tsx | 4 +- .../issue-activity/activity/actions/inbox.tsx | 4 +- .../activity/actions/module.tsx | 4 +- .../issues/issue-detail/sidebar.tsx | 6 +- .../filters/applied-filters/module.tsx | 4 +- .../filters/header/filters/module.tsx | 4 +- .../properties/all-properties.tsx | 5 +- .../components/issues/issue-layouts/utils.tsx | 6 +- .../issues/peek-overview/properties.tsx | 6 +- .../modules/analytics-sidebar/root.tsx | 6 +- .../components/modules/module-card-item.tsx | 4 +- .../components/onboarding/steps/role/root.tsx | 5 +- .../components/onboarding/tour/sidebar.tsx | 13 ++-- apps/web/core/components/pages/list/block.tsx | 4 +- .../components/pages/modals/page-form.tsx | 5 +- apps/web/core/components/project/header.tsx | 4 +- apps/web/core/components/views/form.tsx | 4 +- .../core/components/views/view-list-item.tsx | 4 +- .../sidebar/header/root.tsx | 4 +- .../sidebar/favorites/favorite-folder.tsx | 6 +- .../favorite-items/common/helper.tsx | 4 +- .../workspace/sidebar/help-menu.tsx | 5 +- .../workspace/sidebar/help-section.tsx | 5 +- .../workspace/sidebar/help-section/root.tsx | 5 +- .../workspace/sidebar/project-navigation.tsx | 15 ++-- .../workspace/sidebar/quick-actions.tsx | 4 +- .../workspace/sidebar/user-menu.tsx | 11 ++- .../workspace/sidebar/workspace-menu.tsx | 11 ++- packages/propel/src/icons/add-icon.tsx | 33 ++++++++ packages/propel/src/icons/analytics-icon.tsx | 26 +++++++ packages/propel/src/icons/archive-icon.tsx | 28 +------ packages/propel/src/icons/cycle-icon.tsx | 37 +++++++++ packages/propel/src/icons/dashboard-icon.tsx | 26 +++++++ packages/propel/src/icons/draft-icon.tsx | 26 +++++++ packages/propel/src/icons/home-icon.tsx | 19 +++++ packages/propel/src/icons/inbox-icon.tsx | 26 +++++++ packages/propel/src/icons/index.ts | 75 +++++++++++-------- packages/propel/src/icons/intake-icon.tsx | 33 ++++++++ packages/propel/src/icons/module-icon.tsx | 42 +++++++++++ packages/propel/src/icons/page-icon.tsx | 26 +++++++ packages/propel/src/icons/project-icon.tsx | 26 +++++++ packages/propel/src/icons/view-icon.tsx | 33 ++++++++ packages/propel/src/icons/work-items-icon.tsx | 26 +++++++ packages/propel/src/icons/your-work-icon.tsx | 30 ++++++++ packages/propel/src/tabs/tabs.stories.tsx | 7 +- 97 files changed, 753 insertions(+), 308 deletions(-) create mode 100644 packages/propel/src/icons/add-icon.tsx create mode 100644 packages/propel/src/icons/analytics-icon.tsx create mode 100644 packages/propel/src/icons/cycle-icon.tsx create mode 100644 packages/propel/src/icons/dashboard-icon.tsx create mode 100644 packages/propel/src/icons/draft-icon.tsx create mode 100644 packages/propel/src/icons/home-icon.tsx create mode 100644 packages/propel/src/icons/inbox-icon.tsx create mode 100644 packages/propel/src/icons/intake-icon.tsx create mode 100644 packages/propel/src/icons/module-icon.tsx create mode 100644 packages/propel/src/icons/page-icon.tsx create mode 100644 packages/propel/src/icons/project-icon.tsx create mode 100644 packages/propel/src/icons/view-icon.tsx create mode 100644 packages/propel/src/icons/work-items-icon.tsx create mode 100644 packages/propel/src/icons/your-work-icon.tsx diff --git a/apps/admin/app/(all)/(dashboard)/sidebar-help-section.tsx b/apps/admin/app/(all)/(dashboard)/sidebar-help-section.tsx index c4421ae5f..a8c3ab827 100644 --- a/apps/admin/app/(all)/(dashboard)/sidebar-help-section.tsx +++ b/apps/admin/app/(all)/(dashboard)/sidebar-help-section.tsx @@ -3,11 +3,11 @@ import { FC, useState, useRef } from "react"; import { observer } from "mobx-react"; import Link from "next/link"; -import { ExternalLink, FileText, HelpCircle, MoveLeft } from "lucide-react"; +import { ExternalLink, HelpCircle, MoveLeft } from "lucide-react"; import { Transition } from "@headlessui/react"; // plane internal packages import { WEB_BASE_URL } from "@plane/constants"; -import { DiscordIcon, GithubIcon } from "@plane/propel/icons"; +import { DiscordIcon, GithubIcon, PageIcon } from "@plane/propel/icons"; import { Tooltip } from "@plane/propel/tooltip"; import { cn } from "@plane/utils"; // hooks @@ -20,7 +20,7 @@ const helpOptions = [ { name: "Documentation", href: "https://docs.plane.so/", - Icon: FileText, + Icon: PageIcon, }, { name: "Join our Discord", @@ -110,7 +110,7 @@ export const AdminSidebarHelpSection: FC = observer(() => {
- +
{name}
diff --git a/apps/space/core/components/issues/issue-layouts/properties/all-properties.tsx b/apps/space/core/components/issues/issue-layouts/properties/all-properties.tsx index e8a8ead17..03c15f489 100644 --- a/apps/space/core/components/issues/issue-layouts/properties/all-properties.tsx +++ b/apps/space/core/components/issues/issue-layouts/properties/all-properties.tsx @@ -1,7 +1,8 @@ "use client"; import { observer } from "mobx-react"; -import { Layers, Link, Paperclip } from "lucide-react"; +import { Link, Paperclip } from "lucide-react"; +import { ViewsIcon } from "@plane/propel/icons"; // plane imports import { Tooltip } from "@plane/propel/tooltip"; import type { IIssueDisplayProperties } from "@plane/types"; @@ -142,7 +143,7 @@ export const IssueProperties: React.FC = observer((props) => { } )} > - +
{issue.sub_issues_count}
diff --git a/apps/space/core/components/issues/issue-layouts/properties/cycle.tsx b/apps/space/core/components/issues/issue-layouts/properties/cycle.tsx index c58badcf9..0df14f1ed 100644 --- a/apps/space/core/components/issues/issue-layouts/properties/cycle.tsx +++ b/apps/space/core/components/issues/issue-layouts/properties/cycle.tsx @@ -2,7 +2,7 @@ import { observer } from "mobx-react"; // plane ui -import { ContrastIcon } from "@plane/propel/icons"; +import { CycleIcon } from "@plane/propel/icons"; import { Tooltip } from "@plane/propel/tooltip"; // plane utils import { cn } from "@plane/utils"; @@ -28,7 +28,7 @@ export const IssueBlockCycle = observer(({ cycleId, shouldShowBorder = true }: P )} >
- +
{cycle?.name ?? "No Cycle"}
diff --git a/apps/space/core/components/issues/issue-layouts/properties/modules.tsx b/apps/space/core/components/issues/issue-layouts/properties/modules.tsx index c5e250f08..29c7a4cee 100644 --- a/apps/space/core/components/issues/issue-layouts/properties/modules.tsx +++ b/apps/space/core/components/issues/issue-layouts/properties/modules.tsx @@ -2,7 +2,7 @@ import { observer } from "mobx-react"; // plane ui -import { DiceIcon } from "@plane/propel/icons"; +import { ModuleIcon } from "@plane/propel/icons"; import { Tooltip } from "@plane/propel/tooltip"; // plane utils import { cn } from "@plane/utils"; @@ -32,7 +32,7 @@ export const IssueBlockModules = observer(({ moduleIds, shouldShowBorder = true })} >
- +
{modules?.[0]?.name ?? "No Modules"}
diff --git a/apps/space/core/components/issues/issue-layouts/utils.tsx b/apps/space/core/components/issues/issue-layouts/utils.tsx index 9beb230c8..44f977554 100644 --- a/apps/space/core/components/issues/issue-layouts/utils.tsx +++ b/apps/space/core/components/issues/issue-layouts/utils.tsx @@ -4,7 +4,7 @@ import { isNil } from "lodash-es"; import { ContrastIcon } from "lucide-react"; // types import { EIconSize, ISSUE_PRIORITIES } from "@plane/constants"; -import { CycleGroupIcon, DiceIcon, PriorityIcon, StateGroupIcon } from "@plane/propel/icons"; +import { CycleGroupIcon, ModuleIcon, PriorityIcon, StateGroupIcon } from "@plane/propel/icons"; import { GroupByColumnTypes, IGroupByColumn, @@ -95,14 +95,14 @@ const getModuleColumns = (moduleStore: IIssueModuleStore): IGroupByColumn[] | un moduleGroups.push({ id: moduleInfo.id, name: moduleInfo.name, - icon: , + icon: , payload: { module_ids: [moduleInfo.id] }, }); }) as any; moduleGroups.push({ id: "None", name: "None", - icon: , + icon: , payload: { module_ids: [] }, }); diff --git a/apps/space/core/components/issues/navbar/root.tsx b/apps/space/core/components/issues/navbar/root.tsx index 4751047a3..365c712c8 100644 --- a/apps/space/core/components/issues/navbar/root.tsx +++ b/apps/space/core/components/issues/navbar/root.tsx @@ -2,7 +2,7 @@ import { FC } from "react"; import { observer } from "mobx-react"; -import { Briefcase } from "lucide-react"; +import { ProjectIcon } from "@plane/propel/icons"; // components import { ProjectLogo } from "@/components/common/project-logo"; // store @@ -29,7 +29,7 @@ export const IssuesNavbarRoot: FC = observer((props) => { ) : ( - + )}
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/active-cycles/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/active-cycles/header.tsx index d147d0ed1..8408a9706 100644 --- a/apps/web/app/(all)/[workspaceSlug]/(projects)/active-cycles/header.tsx +++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/active-cycles/header.tsx @@ -2,7 +2,7 @@ import { observer } from "mobx-react"; import { useTranslation } from "@plane/i18n"; // ui -import { ContrastIcon } from "@plane/propel/icons"; +import { CycleIcon } from "@plane/propel/icons"; import { Breadcrumbs, Header } from "@plane/ui"; // components import { BreadcrumbLink } from "@/components/common/breadcrumb-link"; @@ -19,7 +19,7 @@ export const WorkspaceActiveCycleHeader = observer(() => { component={ } + icon={} /> } /> diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/header.tsx index 8872b4cca..8171d55a8 100644 --- a/apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/header.tsx +++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/header.tsx @@ -1,9 +1,9 @@ "use client"; import { observer } from "mobx-react"; -import { BarChart2 } from "lucide-react"; -// plane imports import { useTranslation } from "@plane/i18n"; +import { AnalyticsIcon } from "@plane/propel/icons"; +// plane imports import { Breadcrumbs, Header } from "@plane/ui"; // components import { BreadcrumbLink } from "@/components/common/breadcrumb-link"; @@ -18,7 +18,7 @@ export const WorkspaceAnalyticsHeader = observer(() => { component={ } + icon={} /> } /> diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/drafts/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/drafts/header.tsx index b54a78252..9e8472822 100644 --- a/apps/web/app/(all)/[workspaceSlug]/(projects)/drafts/header.tsx +++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/drafts/header.tsx @@ -2,11 +2,11 @@ import { useState } from "react"; import { observer } from "mobx-react"; -import { PenSquare } from "lucide-react"; import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants"; import { useTranslation } from "@plane/i18n"; // ui import { Button } from "@plane/propel/button"; +import { DraftIcon } from "@plane/propel/icons"; import { EIssuesStoreType } from "@plane/types"; import { Breadcrumbs, Header } from "@plane/ui"; // components @@ -48,7 +48,7 @@ export const WorkspaceDraftHeader = observer(() => { } /> + } /> } /> diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/header.tsx index 2d5786bb1..18629c172 100644 --- a/apps/web/app/(all)/[workspaceSlug]/(projects)/header.tsx +++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/header.tsx @@ -1,10 +1,11 @@ "use client"; import { observer } from "mobx-react"; -import { Home, Shapes } from "lucide-react"; +import { Shapes } from "lucide-react"; // plane imports import { useTranslation } from "@plane/i18n"; import { Button } from "@plane/propel/button"; +import { HomeIcon } from "@plane/propel/icons"; import { Breadcrumbs, Header } from "@plane/ui"; // components import { BreadcrumbLink } from "@/components/common/breadcrumb-link"; @@ -27,7 +28,10 @@ export const WorkspaceDashboardHeader = observer(() => { } /> + } + /> } /> diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/header.tsx index 8e839c0ee..37eab6a22 100644 --- a/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/header.tsx +++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/header.tsx @@ -8,7 +8,7 @@ import { useParams } from "next/navigation"; import { ChevronDown, PanelRight } from "lucide-react"; import { PROFILE_VIEWER_TAB, PROFILE_ADMINS_TAB, EUserPermissions, EUserPermissionsLevel } from "@plane/constants"; import { useTranslation } from "@plane/i18n"; -import { UserActivityIcon } from "@plane/propel/icons"; +import { YourWorkIcon } from "@plane/propel/icons"; import { IUserProfileProjectSegregation } from "@plane/types"; import { Breadcrumbs, Header, CustomMenu } from "@plane/ui"; import { cn } from "@plane/utils"; @@ -59,7 +59,7 @@ export const UserProfileHeader: FC = observer((props) => { } + icon={} /> } /> diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx index 0f6606ba3..1be30ae75 100644 --- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx +++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx @@ -3,7 +3,7 @@ import { FC } from "react"; import { observer } from "mobx-react"; import { useParams } from "next/navigation"; -import { ArchiveIcon, ContrastIcon, DiceIcon, LayersIcon } from "@plane/propel/icons"; +import { ArchiveIcon, CycleIcon, ModuleIcon, WorkItemsIcon } from "@plane/propel/icons"; import { Tooltip } from "@plane/propel/tooltip"; import { EIssuesStoreType } from "@plane/types"; // ui @@ -32,17 +32,17 @@ const PROJECT_ARCHIVES_BREADCRUMB_LIST: { issues: { label: "Work items", href: "/issues", - icon: LayersIcon, + icon: WorkItemsIcon, }, cycles: { label: "Cycles", href: "/cycles", - icon: ContrastIcon, + icon: CycleIcon, }, modules: { label: "Modules", href: "/modules", - icon: DiceIcon, + icon: ModuleIcon, }, }; diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/header.tsx index fbfce0d00..3cfbdb816 100644 --- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/header.tsx +++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/header.tsx @@ -4,7 +4,7 @@ import { observer } from "mobx-react"; import { useParams } from "next/navigation"; import useSWR from "swr"; // ui -import { ArchiveIcon, LayersIcon } from "@plane/propel/icons"; +import { ArchiveIcon, WorkItemsIcon } from "@plane/propel/icons"; import { Breadcrumbs, Header } from "@plane/ui"; // components import { BreadcrumbLink } from "@/components/common/breadcrumb-link"; @@ -52,7 +52,7 @@ export const ProjectArchivedIssueDetailsHeader = observer(() => { } + icon={} /> } /> diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx index 848e0bfdb..833e1f632 100644 --- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx +++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx @@ -17,7 +17,7 @@ import { import { usePlatformOS } from "@plane/hooks"; import { useTranslation } from "@plane/i18n"; import { Button } from "@plane/propel/button"; -import { ContrastIcon } from "@plane/propel/icons"; +import { CycleIcon } from "@plane/propel/icons"; import { Tooltip } from "@plane/propel/tooltip"; import { EIssuesStoreType, @@ -123,7 +123,7 @@ export const CycleIssuesHeader: React.FC = observer(() => { return { value: _cycle.id, query: _cycle.name, - content: , + content: , }; }) .filter((option) => option !== undefined) as ICustomSearchSelectOption[]; @@ -158,7 +158,7 @@ export const CycleIssuesHeader: React.FC = observer(() => { title={cycleDetails?.name} icon={ - + } isLast diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx index 98f6adb4b..e2520b8a2 100644 --- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx +++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx @@ -15,7 +15,7 @@ import { WORK_ITEM_TRACKER_ELEMENTS, } from "@plane/constants"; import { Button } from "@plane/propel/button"; -import { DiceIcon } from "@plane/propel/icons"; +import { ModuleIcon } from "@plane/propel/icons"; import { Tooltip } from "@plane/propel/tooltip"; import { EIssuesStoreType, @@ -118,7 +118,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => { return { value: _module.id, query: _module.name, - content: , + content: , }; }) .filter((option) => option !== undefined) as ICustomSearchSelectOption[]; @@ -149,7 +149,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => { router.push(`/${workspaceSlug}/projects/${projectId}/modules/${value}`); }} title={moduleDetails?.name} - icon={} + icon={} isLast /> } diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx index 99af7075b..8f4eeadf0 100644 --- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx +++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx @@ -1,8 +1,8 @@ "use client"; import { observer } from "mobx-react"; import { useParams } from "next/navigation"; -import { FileText } from "lucide-react"; import { EProjectFeatureKey } from "@plane/constants"; +import { PageIcon } from "@plane/propel/icons"; // types import { ICustomSearchSelectOption } from "@plane/types"; // ui @@ -51,7 +51,7 @@ export const PageDetailsHeader = observer(() => { query: _page.name, content: (
- +
), @@ -83,7 +83,7 @@ export const PageDetailsHeader = observer(() => { title={getPageName(page?.name)} icon={ - + } isLast diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsx index 355aadd76..6cbee5bd4 100644 --- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsx +++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsx @@ -3,7 +3,7 @@ import { useCallback, useRef } from "react"; import { observer } from "mobx-react"; import { useParams } from "next/navigation"; -import { Layers, Lock } from "lucide-react"; +import { Lock } from "lucide-react"; // plane constants import { EIssueFilterType, @@ -15,6 +15,7 @@ import { } from "@plane/constants"; // types import { Button } from "@plane/propel/button"; +import { ViewsIcon } from "@plane/propel/icons"; import { Tooltip } from "@plane/propel/tooltip"; import { EIssuesStoreType, @@ -119,7 +120,7 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => { return { value: _view.id, query: _view.name, - content: , + content: , }; }) .filter((option) => option !== undefined) as ICustomSearchSelectOption[]; @@ -145,7 +146,7 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => { title={viewDetails?.name} icon={ - + } isLast diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/workspace-views/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/workspace-views/header.tsx index 57a693376..7ecdd50c4 100644 --- a/apps/web/app/(all)/[workspaceSlug]/(projects)/workspace-views/header.tsx +++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/workspace-views/header.tsx @@ -3,7 +3,6 @@ import { useCallback, useMemo, useState } from "react"; import { observer } from "mobx-react"; import { useParams } from "next/navigation"; -import { Layers } from "lucide-react"; // plane imports import { EIssueFilterType, @@ -13,6 +12,7 @@ import { } from "@plane/constants"; import { useTranslation } from "@plane/i18n"; import { Button } from "@plane/propel/button"; +import { ViewsIcon } from "@plane/propel/icons"; import { EIssuesStoreType, IIssueDisplayFilterOptions, @@ -99,7 +99,7 @@ export const GlobalIssuesHeader = observer(() => { const defaultOptions = DEFAULT_GLOBAL_VIEWS_LIST.map((view) => ({ value: view.key, query: view.key, - content: , + content: , })); const workspaceOptions = (currentWorkspaceViews || []).map((view) => { @@ -108,7 +108,7 @@ export const GlobalIssuesHeader = observer(() => { return { value: _view.id, query: _view.name, - content: , + content: , }; }); @@ -128,7 +128,7 @@ export const GlobalIssuesHeader = observer(() => { } /> + } /> } /> { title={viewDetails?.name ?? t(defaultViewDetails?.i18n_label ?? "")} icon={ - + } isLast diff --git a/apps/web/ce/components/breadcrumbs/project.tsx b/apps/web/ce/components/breadcrumbs/project.tsx index 18c4fea76..1bf3594e3 100644 --- a/apps/web/ce/components/breadcrumbs/project.tsx +++ b/apps/web/ce/components/breadcrumbs/project.tsx @@ -1,7 +1,7 @@ "use client"; import { observer } from "mobx-react"; -import { Briefcase } from "lucide-react"; +import { ProjectIcon } from "@plane/propel/icons"; // plane imports import { ICustomSearchSelectOption } from "@plane/types"; import { BreadcrumbNavigationSearchDropdown, Breadcrumbs } from "@plane/ui"; @@ -39,7 +39,12 @@ export const ProjectBreadcrumb = observer((props: TProjectBreadcrumbProps) => { value: projectId, query: project?.name, content: ( - + ), }; }) diff --git a/apps/web/ce/components/command-palette/helpers.tsx b/apps/web/ce/components/command-palette/helpers.tsx index d098b1a48..2b49a87a5 100644 --- a/apps/web/ce/components/command-palette/helpers.tsx +++ b/apps/web/ce/components/command-palette/helpers.tsx @@ -1,8 +1,8 @@ "use client"; // types -import { Briefcase, FileText, Layers, LayoutGrid } from "lucide-react"; -import { ContrastIcon, DiceIcon } from "@plane/propel/icons"; +import { LayoutGrid } from "lucide-react"; +import { CycleIcon, ModuleIcon, PageIcon, ProjectIcon, ViewsIcon } from "@plane/propel/icons"; import { IWorkspaceDefaultSearchResult, IWorkspaceIssueSearchResult, @@ -27,7 +27,7 @@ export type TCommandGroups = { export const commandGroups: TCommandGroups = { cycle: { - icon: , + icon: , itemName: (cycle: IWorkspaceDefaultSearchResult) => (
{cycle.project__identifier} {cycle.name} @@ -62,7 +62,7 @@ export const commandGroups: TCommandGroups = { title: "Work items", }, issue_view: { - icon: , + icon: , itemName: (view: IWorkspaceDefaultSearchResult) => (
{view.project__identifier} {view.name} @@ -73,7 +73,7 @@ export const commandGroups: TCommandGroups = { title: "Views", }, module: { - icon: , + icon: , itemName: (module: IWorkspaceDefaultSearchResult) => (
{module.project__identifier} {module.name} @@ -84,7 +84,7 @@ export const commandGroups: TCommandGroups = { title: "Modules", }, page: { - icon: , + icon: , itemName: (page: IWorkspacePageSearchResult) => (
{page.project__identifiers?.[0]} {page.name} @@ -100,7 +100,7 @@ export const commandGroups: TCommandGroups = { title: "Pages", }, project: { - icon: , + icon: , itemName: (project: IWorkspaceProjectSearchResult) => project?.name, path: (project: IWorkspaceProjectSearchResult) => `/${project?.workspace__slug}/projects/${project?.id}/issues/`, title: "Projects", diff --git a/apps/web/ce/components/issues/issue-layouts/utils.tsx b/apps/web/ce/components/issues/issue-layouts/utils.tsx index fcf1cd91b..dca7173e9 100644 --- a/apps/web/ce/components/issues/issue-layouts/utils.tsx +++ b/apps/web/ce/components/issues/issue-layouts/utils.tsx @@ -13,7 +13,7 @@ import { Users, } from "lucide-react"; // types -import { DiceIcon, DoubleCircleIcon, ISvgIcons } from "@plane/propel/icons"; +import { DoubleCircleIcon, ISvgIcons, ModuleIcon } from "@plane/propel/icons"; import { IGroupByColumn, IIssueDisplayProperties, TGetColumns, TSpreadsheetColumn } from "@plane/types"; // components import { @@ -71,7 +71,7 @@ export const SpreadSheetPropertyIconMap: Record> = { CalenderCheck2: CalendarCheck2, Triangle: Triangle, Tag: Tag, - DiceIcon: DiceIcon, + ModuleIcon: ModuleIcon, ContrastIcon: ContrastIcon, Signal: Signal, CalendarClock: CalendarClock, diff --git a/apps/web/ce/components/projects/navigation/helper.tsx b/apps/web/ce/components/projects/navigation/helper.tsx index b48668415..811eb9a17 100644 --- a/apps/web/ce/components/projects/navigation/helper.tsx +++ b/apps/web/ce/components/projects/navigation/helper.tsx @@ -1,7 +1,6 @@ -import { FileText, Layers } from "lucide-react"; // plane imports import { EUserPermissions, EProjectFeatureKey } from "@plane/constants"; -import { ContrastIcon, DiceIcon, LayersIcon, Intake } from "@plane/propel/icons"; +import { CycleIcon, IntakeIcon, ModuleIcon, PageIcon, ViewsIcon, WorkItemsIcon } from "@plane/propel/icons"; // components import type { TNavigationItem } from "@/components/workspace/sidebar/project-navigation"; @@ -21,7 +20,7 @@ export const getProjectFeatureNavigation = ( key: EProjectFeatureKey.WORK_ITEMS, name: "Work items", href: `/${workspaceSlug}/projects/${projectId}/issues`, - icon: LayersIcon, + icon: WorkItemsIcon, access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST], shouldRender: true, sortOrder: 1, @@ -31,7 +30,7 @@ export const getProjectFeatureNavigation = ( key: EProjectFeatureKey.CYCLES, name: "Cycles", href: `/${workspaceSlug}/projects/${projectId}/cycles`, - icon: ContrastIcon, + icon: CycleIcon, access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER], shouldRender: project.cycle_view, sortOrder: 2, @@ -41,7 +40,7 @@ export const getProjectFeatureNavigation = ( key: EProjectFeatureKey.MODULES, name: "Modules", href: `/${workspaceSlug}/projects/${projectId}/modules`, - icon: DiceIcon, + icon: ModuleIcon, access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER], shouldRender: project.module_view, sortOrder: 3, @@ -51,7 +50,7 @@ export const getProjectFeatureNavigation = ( key: EProjectFeatureKey.VIEWS, name: "Views", href: `/${workspaceSlug}/projects/${projectId}/views`, - icon: Layers, + icon: ViewsIcon, access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST], shouldRender: project.issue_views_view, sortOrder: 4, @@ -61,7 +60,7 @@ export const getProjectFeatureNavigation = ( key: EProjectFeatureKey.PAGES, name: "Pages", href: `/${workspaceSlug}/projects/${projectId}/pages`, - icon: FileText, + icon: PageIcon, access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST], shouldRender: project.page_view, sortOrder: 5, @@ -71,7 +70,7 @@ export const getProjectFeatureNavigation = ( key: EProjectFeatureKey.INTAKE, name: "Intake", href: `/${workspaceSlug}/projects/${projectId}/intake`, - icon: Intake, + icon: IntakeIcon, access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST], shouldRender: project.inbox_view, sortOrder: 6, diff --git a/apps/web/ce/components/workspace/sidebar/helper.tsx b/apps/web/ce/components/workspace/sidebar/helper.tsx index 0821a0ef4..316f77b5d 100644 --- a/apps/web/ce/components/workspace/sidebar/helper.tsx +++ b/apps/web/ce/components/workspace/sidebar/helper.tsx @@ -1,25 +1,34 @@ -import { BarChart2, Briefcase, Home, Inbox, Layers, PenSquare } from "lucide-react"; -import { ArchiveIcon, ContrastIcon, UserActivityIcon } from "@plane/propel/icons"; +import { + AnalyticsIcon, + ArchiveIcon, + CycleIcon, + DraftIcon, + HomeIcon, + InboxIcon, + ProjectIcon, + ViewsIcon, + YourWorkIcon, +} from "@plane/propel/icons"; import { cn } from "@plane/utils"; export const getSidebarNavigationItemIcon = (key: string, className: string = "") => { switch (key) { case "home": - return ; + return ; case "inbox": - return ; + return ; case "projects": - return ; + return ; case "views": - return ; + return ; case "active_cycles": - return ; + return ; case "analytics": - return ; + return ; case "your_work": - return ; + return ; case "drafts": - return ; + return ; case "archives": return ; } diff --git a/apps/web/ce/constants/project/settings/features.tsx b/apps/web/ce/constants/project/settings/features.tsx index 3ad27ddbb..923d2db84 100644 --- a/apps/web/ce/constants/project/settings/features.tsx +++ b/apps/web/ce/constants/project/settings/features.tsx @@ -1,7 +1,7 @@ import { ReactNode } from "react"; -import { FileText, Layers, Timer } from "lucide-react"; +import { Timer } from "lucide-react"; // plane imports -import { ContrastIcon, DiceIcon, Intake } from "@plane/propel/icons"; +import { CycleIcon, IntakeIcon, ModuleIcon, PageIcon, ViewsIcon } from "@plane/propel/icons"; import { IProject } from "@plane/types"; export type TProperties = { @@ -28,7 +28,7 @@ export const PROJECT_BASE_FEATURES_LIST: TBaseFeatureList = { property: "cycle_view", title: "Cycles", description: "Timebox work as you see fit per project and change frequency from one period to the next.", - icon: , + icon: , isPro: false, isEnabled: true, }, @@ -37,7 +37,7 @@ export const PROJECT_BASE_FEATURES_LIST: TBaseFeatureList = { property: "module_view", title: "Modules", description: "Group work into sub-project-like set-ups with their own leads and assignees.", - icon: , + icon: , isPro: false, isEnabled: true, }, @@ -46,7 +46,7 @@ export const PROJECT_BASE_FEATURES_LIST: TBaseFeatureList = { property: "issue_views_view", title: "Views", description: "Save sorts, filters, and display options for later or share them.", - icon: , + icon: , isPro: false, isEnabled: true, }, @@ -55,7 +55,7 @@ export const PROJECT_BASE_FEATURES_LIST: TBaseFeatureList = { property: "page_view", title: "Pages", description: "Write anything like you write anything.", - icon: , + icon: , isPro: false, isEnabled: true, }, @@ -64,7 +64,7 @@ export const PROJECT_BASE_FEATURES_LIST: TBaseFeatureList = { property: "inbox_view", title: "Intake", description: "Consider and discuss work items before you add them to your project.", - icon: , + icon: , isPro: false, isEnabled: true, }, diff --git a/apps/web/ce/constants/sidebar-favorites.ts b/apps/web/ce/constants/sidebar-favorites.ts index 4ad0c0463..b93c9cf67 100644 --- a/apps/web/ce/constants/sidebar-favorites.ts +++ b/apps/web/ce/constants/sidebar-favorites.ts @@ -1,14 +1,22 @@ -import { Briefcase, FileText, Layers, LucideIcon } from "lucide-react"; +import { LucideIcon } from "lucide-react"; // plane imports -import { ContrastIcon, DiceIcon, FavoriteFolderIcon, ISvgIcons } from "@plane/propel/icons"; +import { + CycleIcon, + FavoriteFolderIcon, + ISvgIcons, + ModuleIcon, + PageIcon, + ProjectIcon, + ViewsIcon, +} from "@plane/propel/icons"; import { IFavorite } from "@plane/types"; export const FAVORITE_ITEM_ICONS: Record | LucideIcon> = { - page: FileText, - project: Briefcase, - view: Layers, - module: DiceIcon, - cycle: ContrastIcon, + page: PageIcon, + project: ProjectIcon, + view: ViewsIcon, + module: ModuleIcon, + cycle: CycleIcon, folder: FavoriteFolderIcon, }; diff --git a/apps/web/core/components/analytics/overview/active-project-item.tsx b/apps/web/core/components/analytics/overview/active-project-item.tsx index b40d65359..b551f4945 100644 --- a/apps/web/core/components/analytics/overview/active-project-item.tsx +++ b/apps/web/core/components/analytics/overview/active-project-item.tsx @@ -1,4 +1,4 @@ -import { Briefcase } from "lucide-react"; +import { ProjectIcon } from "@plane/propel/icons"; // plane package imports import { cn } from "@plane/utils"; import { Logo } from "@/components/common/logo"; @@ -40,7 +40,7 @@ const ActiveProjectItem = (props: Props) => { ) : ( - + )} diff --git a/apps/web/core/components/analytics/select/project.tsx b/apps/web/core/components/analytics/select/project.tsx index 1c97e8b94..aee309026 100644 --- a/apps/web/core/components/analytics/select/project.tsx +++ b/apps/web/core/components/analytics/select/project.tsx @@ -1,7 +1,7 @@ "use client"; import { observer } from "mobx-react"; -import { Briefcase } from "lucide-react"; +import { ProjectIcon } from "@plane/propel/icons"; // plane package imports import { CustomSearchSelect } from "@plane/ui"; // components @@ -30,7 +30,7 @@ export const ProjectSelect: React.FC = observer((props) => { {projectDetails?.logo_props ? ( ) : ( - + )} {projectDetails?.name}
@@ -45,7 +45,7 @@ export const ProjectSelect: React.FC = observer((props) => { options={options} label={
- + {value && value.length > 3 ? `3+ projects` : value && value.length > 0 diff --git a/apps/web/core/components/analytics/select/select-y-axis.tsx b/apps/web/core/components/analytics/select/select-y-axis.tsx index 0a3ef5742..5ed58311b 100644 --- a/apps/web/core/components/analytics/select/select-y-axis.tsx +++ b/apps/web/core/components/analytics/select/select-y-axis.tsx @@ -2,8 +2,8 @@ import { observer } from "mobx-react"; import { useParams } from "next/navigation"; -import { Briefcase } from "lucide-react"; import { EEstimateSystem } from "@plane/constants"; +import { ProjectIcon } from "@plane/propel/icons"; import { ChartYAxisMetric } from "@plane/types"; // plane package imports import { CustomSelect } from "@plane/ui"; @@ -44,7 +44,7 @@ export const SelectYAxis: React.FC = observer(({ value, onChange, hiddenO value={value} label={
- + {options.find((v) => v.value === value)?.label ?? "Add Metric"}
} diff --git a/apps/web/core/components/analytics/work-items/workitems-insight-table.tsx b/apps/web/core/components/analytics/work-items/workitems-insight-table.tsx index d0b6262fd..f99fd22bc 100644 --- a/apps/web/core/components/analytics/work-items/workitems-insight-table.tsx +++ b/apps/web/core/components/analytics/work-items/workitems-insight-table.tsx @@ -3,9 +3,10 @@ import { ColumnDef, Row, RowData } from "@tanstack/react-table"; import { observer } from "mobx-react"; import { useParams } from "next/navigation"; import useSWR from "swr"; -import { Briefcase, UserRound } from "lucide-react"; -// plane package imports +import { UserRound } from "lucide-react"; import { useTranslation } from "@plane/i18n"; +import { ProjectIcon } from "@plane/propel/icons"; +// plane package imports import { AnalyticsTableDataMap, WorkItemInsightColumns } from "@plane/types"; // plane web components import { Avatar } from "@plane/ui"; @@ -82,7 +83,7 @@ const WorkItemsInsightTable = observer(() => { {project?.logo_props ? ( ) : ( - + )} {project?.name}
diff --git a/apps/web/core/components/command-palette/actions/help-actions.tsx b/apps/web/core/components/command-palette/actions/help-actions.tsx index 26eb13e29..ba7c5b353 100644 --- a/apps/web/core/components/command-palette/actions/help-actions.tsx +++ b/apps/web/core/components/command-palette/actions/help-actions.tsx @@ -1,9 +1,9 @@ "use client"; import { Command } from "cmdk"; import { observer } from "mobx-react"; -import { FileText, GithubIcon, MessageSquare, Rocket } from "lucide-react"; +import { GithubIcon, MessageSquare, Rocket } from "lucide-react"; // ui -import { DiscordIcon } from "@plane/propel/icons"; +import { DiscordIcon, PageIcon } from "@plane/propel/icons"; // hooks import { useCommandPalette } from "@/hooks/store/use-command-palette"; import { useTransient } from "@/hooks/store/use-transient"; @@ -40,7 +40,7 @@ export const CommandPaletteHelpActions: React.FC = observer((props) => { className="focus:outline-none" >
- + Open Plane documentation
diff --git a/apps/web/core/components/command-palette/actions/project-actions.tsx b/apps/web/core/components/command-palette/actions/project-actions.tsx index 9776db33d..a64feadf2 100644 --- a/apps/web/core/components/command-palette/actions/project-actions.tsx +++ b/apps/web/core/components/command-palette/actions/project-actions.tsx @@ -1,7 +1,7 @@ "use client"; import { Command } from "cmdk"; -import { ContrastIcon, FileText, Layers } from "lucide-react"; +import { ContrastIcon } from "lucide-react"; // hooks import { CYCLE_TRACKER_ELEMENTS, @@ -9,7 +9,7 @@ import { PROJECT_PAGE_TRACKER_ELEMENTS, PROJECT_VIEW_TRACKER_ELEMENTS, } from "@plane/constants"; -import { DiceIcon } from "@plane/propel/icons"; +import { ModuleIcon, PageIcon, ViewsIcon } from "@plane/propel/icons"; // hooks import { useCommandPalette } from "@/hooks/store/use-command-palette"; // ui @@ -52,7 +52,7 @@ export const CommandPaletteProjectActions: React.FC = (props) => { className="focus:outline-none" >
- + Create new module
M @@ -68,7 +68,7 @@ export const CommandPaletteProjectActions: React.FC = (props) => { className="focus:outline-none" >
- + Create new view
V @@ -84,7 +84,7 @@ export const CommandPaletteProjectActions: React.FC = (props) => { className="focus:outline-none" >
- + Create new page
D diff --git a/apps/web/core/components/command-palette/command-modal.tsx b/apps/web/core/components/command-palette/command-modal.tsx index e482438f6..da375c337 100644 --- a/apps/web/core/components/command-palette/command-modal.tsx +++ b/apps/web/core/components/command-palette/command-modal.tsx @@ -16,7 +16,7 @@ import { WORKSPACE_DEFAULT_SEARCH_RESULT, } from "@plane/constants"; import { useTranslation } from "@plane/i18n"; -import { LayersIcon } from "@plane/propel/icons"; +import { WorkItemsIcon } from "@plane/propel/icons"; import { IWorkspaceSearchResults } from "@plane/types"; import { Loader, ToggleSwitch } from "@plane/ui"; import { cn, getTabIndex } from "@plane/utils"; @@ -357,7 +357,7 @@ export const CommandModal: React.FC = observer(() => { className="focus:bg-custom-background-80" >
- + Create new work item
C diff --git a/apps/web/core/components/common/activity/helper.tsx b/apps/web/core/components/common/activity/helper.tsx index 8ce307597..812bdf4f7 100644 --- a/apps/web/core/components/common/activity/helper.tsx +++ b/apps/web/core/components/common/activity/helper.tsx @@ -25,7 +25,7 @@ import { } from "lucide-react"; // components -import { ArchiveIcon, DoubleCircleIcon, ContrastIcon, DiceIcon, Intake } from "@plane/propel/icons"; +import { ArchiveIcon, CycleIcon, DoubleCircleIcon, IntakeIcon, ModuleIcon } from "@plane/propel/icons"; import { store } from "@/lib/store-context"; import { TProjectActivity } from "@/plane-web/types"; @@ -47,8 +47,8 @@ export const iconsMap: ActivityIconMap = { name: , state: , estimate: , - cycle: , - module: , + cycle: , + module: , page: , network: , identifier: , @@ -59,11 +59,11 @@ export const iconsMap: ActivityIconMap = { is_time_tracking_enabled: , is_issue_type_enabled: , default: , - module_view: , - cycle_view: , + module_view: , + cycle_view: , issue_views_view: , page_view: , - intake_view: , + intake_view: , }; export const messages = (activity: TProjectActivity): { message: string | ReactNode; customUserName?: string } => { diff --git a/apps/web/core/components/core/activity.tsx b/apps/web/core/components/core/activity.tsx index 3c773899e..a6ff0b400 100644 --- a/apps/web/core/components/core/activity.tsx +++ b/apps/web/core/components/core/activity.tsx @@ -20,7 +20,15 @@ import { MessageSquareIcon, UsersIcon, } from "lucide-react"; -import { BlockedIcon, BlockerIcon, RelatedIcon, LayersIcon, DiceIcon, EpicIcon, Intake } from "@plane/propel/icons"; +import { + BlockedIcon, + BlockerIcon, + EpicIcon, + IntakeIcon, + ModuleIcon, + RelatedIcon, + WorkItemsIcon, +} from "@plane/propel/icons"; import { Tooltip } from "@plane/propel/tooltip"; import { IIssueActivity } from "@plane/types"; import { renderFormattedDate, generateWorkItemLink, capitalizeFirstLetter } from "@plane/utils"; @@ -283,7 +291,7 @@ const activityDetails: { ); }, - icon: