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

[WEB-5129] feat: icons revamp (#7945)

Browse source
This commit is contained in:
Anmol Singh Bhatia 2025-10-13 19:43:24 +05:30 • committed by GitHub
parent c736354739
commit 87eb1949c6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
97 changed files with 753 additions and 308 deletions
Download patch file Download diff file Expand all files Collapse all files

4
apps/web/app/(all)/[workspaceSlug]/(projects)/active-cycles/header.tsx
View file

@ -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={
<BreadcrumbLink
label={t("active_cycles")}
icon={<ContrastIcon className="h-4 w-4 text-custom-text-300 rotate-180" />}
icon={<CycleIcon className="h-4 w-4 text-custom-text-300 rotate-180" />}
/>
}
/>

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

@ -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={
<BreadcrumbLink
label={t("workspace_analytics.label")}
icon={<BarChart2 className="h-4 w-4 text-custom-text-300" />}
icon={<AnalyticsIcon className="h-4 w-4 text-custom-text-300" />}
/>
}
/>

4
apps/web/app/(all)/[workspaceSlug]/(projects)/drafts/header.tsx
View file

@ -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(() => {
<Breadcrumbs>
<Breadcrumbs.Item
component={
<BreadcrumbLink label={t("drafts")} icon={<PenSquare className="h-4 w-4 text-custom-text-300" />} />
<BreadcrumbLink label={t("drafts")} icon={<DraftIcon className="h-4 w-4 text-custom-text-300" />} />
}
/>
</Breadcrumbs>

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

@ -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(() => {
<Breadcrumbs>
<Breadcrumbs.Item
component={
<BreadcrumbLink label={t("home.title")} icon={<Home className="h-4 w-4 text-custom-text-300" />} />
<BreadcrumbLink
label={t("home.title")}
icon={<HomeIcon className="h-4 w-4 text-custom-text-300" />}
/>
}
/>
</Breadcrumbs>

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

@ -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<TUserProfileHeader> = observer((props) => {
<BreadcrumbLink
label={breadcrumbLabel}
disableTooltip
icon={<UserActivityIcon className="h-4 w-4 text-custom-text-300" />}
icon={<YourWorkIcon className="h-4 w-4 text-custom-text-300" />}
/>
}
/>

8
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx
View file

@ -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,
},
};

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

@ -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(() => {
<BreadcrumbLink
href={`/${workspaceSlug}/projects/${projectId}/archives/issues`}
label="Work items"
icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
icon={<WorkItemsIcon className="h-4 w-4 text-custom-text-300" />}
/>
}
/>

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

@ -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: <SwitcherLabel name={_cycle.name} LabelIcon={ContrastIcon} />,
content: <SwitcherLabel name={_cycle.name} LabelIcon={CycleIcon} />,
};
})
.filter((option) => option !== undefined) as ICustomSearchSelectOption[];
@ -158,7 +158,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
title={cycleDetails?.name}
icon={
<Breadcrumbs.Icon>
<ContrastIcon className="size-4 flex-shrink-0 text-custom-text-300" />
<CycleIcon className="size-4 flex-shrink-0 text-custom-text-300" />
</Breadcrumbs.Icon>
}
isLast

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

@ -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: <SwitcherLabel name={_module.name} LabelIcon={DiceIcon} />,
content: <SwitcherLabel name={_module.name} LabelIcon={ModuleIcon} />,
};
})
.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={<DiceIcon className="size-3.5 flex-shrink-0 text-custom-text-300" />}
icon={<ModuleIcon className="size-3.5 flex-shrink-0 text-custom-text-300" />}
isLast
/>
}

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

@ -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: (
<div className="flex gap-2 items-center justify-between">
<SwitcherLabel logo_props={_page.logo_props} name={getPageName(_page.name)} LabelIcon={FileText} />
<SwitcherLabel logo_props={_page.logo_props} name={getPageName(_page.name)} LabelIcon={PageIcon} />
<PageAccessIcon {..._page} />
</div>
),
@ -83,7 +83,7 @@ export const PageDetailsHeader = observer(() => {
title={getPageName(page?.name)}
icon={
<Breadcrumbs.Icon>
<SwitcherIcon logo_props={page.logo_props} LabelIcon={FileText} size={16} />
<SwitcherIcon logo_props={page.logo_props} LabelIcon={PageIcon} size={16} />
</Breadcrumbs.Icon>
}
isLast

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

@ -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: <SwitcherLabel logo_props={_view.logo_props} name={_view.name} LabelIcon={Layers} />,
content: <SwitcherLabel logo_props={_view.logo_props} name={_view.name} LabelIcon={ViewsIcon} />,
};
})
.filter((option) => option !== undefined) as ICustomSearchSelectOption[];
@ -145,7 +146,7 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
title={viewDetails?.name}
icon={
<Breadcrumbs.Icon>
<SwitcherIcon logo_props={viewDetails.logo_props} LabelIcon={Layers} size={16} />
<SwitcherIcon logo_props={viewDetails.logo_props} LabelIcon={ViewsIcon} size={16} />
</Breadcrumbs.Icon>
}
isLast

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

@ -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: <SwitcherLabel name={t(view.i18n_label)} LabelIcon={Layers} />,
content: <SwitcherLabel name={t(view.i18n_label)} LabelIcon={ViewsIcon} />,
}));
const workspaceOptions = (currentWorkspaceViews || []).map((view) => {
@ -108,7 +108,7 @@ export const GlobalIssuesHeader = observer(() => {
return {
value: _view.id,
query: _view.name,
content: <SwitcherLabel name={_view.name} LabelIcon={Layers} />,
content: <SwitcherLabel name={_view.name} LabelIcon={ViewsIcon} />,
};
});
@ -128,7 +128,7 @@ export const GlobalIssuesHeader = observer(() => {
<Breadcrumbs>
<Breadcrumbs.Item
component={
<BreadcrumbLink label={t("views")} icon={<Layers className="h-4 w-4 text-custom-text-300" />} />
<BreadcrumbLink label={t("views")} icon={<ViewsIcon className="h-4 w-4 text-custom-text-300" />} />
}
/>
<Breadcrumbs.Item
@ -142,7 +142,7 @@ export const GlobalIssuesHeader = observer(() => {
title={viewDetails?.name ?? t(defaultViewDetails?.i18n_label ?? "")}
icon={
<Breadcrumbs.Icon>
<Layers className="size-4 flex-shrink-0 text-custom-text-300" />
<ViewsIcon className="size-4 flex-shrink-0 text-custom-text-300" />
</Breadcrumbs.Icon>
}
isLast