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

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

@ -3,11 +3,11 @@
import { FC, useState, useRef } from "react"; import { FC, useState, useRef } from "react";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import Link from "next/link"; 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"; import { Transition } from "@headlessui/react";
// plane internal packages // plane internal packages
import { WEB_BASE_URL } from "@plane/constants"; 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 { Tooltip } from "@plane/propel/tooltip";
import { cn } from "@plane/utils"; import { cn } from "@plane/utils";
// hooks // hooks
@ -20,7 +20,7 @@ const helpOptions = [
{ {
name: "Documentation", name: "Documentation",
href: "https://docs.plane.so/", href: "https://docs.plane.so/",
Icon: FileText, Icon: PageIcon,
}, },
{ {
name: "Join our Discord", name: "Join our Discord",
@ -110,7 +110,7 @@ export const AdminSidebarHelpSection: FC = observer(() => {
<Link href={href} key={name} target="_blank"> <Link href={href} key={name} target="_blank">
<div className="flex items-center gap-x-2 rounded px-2 py-1 text-xs hover:bg-custom-background-80"> <div className="flex items-center gap-x-2 rounded px-2 py-1 text-xs hover:bg-custom-background-80">
<div className="grid flex-shrink-0 place-items-center"> <div className="grid flex-shrink-0 place-items-center">
<Icon className="h-3.5 w-3.5 text-custom-text-200" size={14} /> <Icon className="h-3.5 w-3.5 text-custom-text-200" width={14} height={14} />
</div> </div>
<span className="text-xs">{name}</span> <span className="text-xs">{name}</span>
</div> </div>

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

@ -1,7 +1,8 @@
"use client"; "use client";
import { observer } from "mobx-react"; 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 // plane imports
import { Tooltip } from "@plane/propel/tooltip"; import { Tooltip } from "@plane/propel/tooltip";
import type { IIssueDisplayProperties } from "@plane/types"; import type { IIssueDisplayProperties } from "@plane/types";
@ -142,7 +143,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
} }
)} )}
> >
<Layers className="h-3 w-3 flex-shrink-0" strokeWidth={2} /> <ViewsIcon className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
<div className="text-xs">{issue.sub_issues_count}</div> <div className="text-xs">{issue.sub_issues_count}</div>
</div> </div>
</Tooltip> </Tooltip>

4
apps/space/core/components/issues/issue-layouts/properties/cycle.tsx
View file

@ -2,7 +2,7 @@
import { observer } from "mobx-react"; import { observer } from "mobx-react";
// plane ui // plane ui
import { ContrastIcon } from "@plane/propel/icons"; import { CycleIcon } from "@plane/propel/icons";
import { Tooltip } from "@plane/propel/tooltip"; import { Tooltip } from "@plane/propel/tooltip";
// plane utils // plane utils
import { cn } from "@plane/utils"; import { cn } from "@plane/utils";
@ -28,7 +28,7 @@ export const IssueBlockCycle = observer(({ cycleId, shouldShowBorder = true }: P
)} )}
> >
<div className="flex w-full items-center text-xs gap-1.5"> <div className="flex w-full items-center text-xs gap-1.5">
<ContrastIcon className="h-3 w-3 flex-shrink-0" /> <CycleIcon className="h-3 w-3 flex-shrink-0" />
<div className="max-w-40 flex-grow truncate ">{cycle?.name ?? "No Cycle"}</div> <div className="max-w-40 flex-grow truncate ">{cycle?.name ?? "No Cycle"}</div>
</div> </div>
</div> </div>

4
apps/space/core/components/issues/issue-layouts/properties/modules.tsx
View file

@ -2,7 +2,7 @@
import { observer } from "mobx-react"; import { observer } from "mobx-react";
// plane ui // plane ui
import { DiceIcon } from "@plane/propel/icons"; import { ModuleIcon } from "@plane/propel/icons";
import { Tooltip } from "@plane/propel/tooltip"; import { Tooltip } from "@plane/propel/tooltip";
// plane utils // plane utils
import { cn } from "@plane/utils"; import { cn } from "@plane/utils";
@ -32,7 +32,7 @@ export const IssueBlockModules = observer(({ moduleIds, shouldShowBorder = true
})} })}
> >
<div className="flex items-center gap-1.5 text-custom-text-200"> <div className="flex items-center gap-1.5 text-custom-text-200">
<DiceIcon className="h-3 w-3 flex-shrink-0" /> <ModuleIcon className="h-3 w-3 flex-shrink-0" />
<div className="text-xs">{modules?.[0]?.name ?? "No Modules"}</div> <div className="text-xs">{modules?.[0]?.name ?? "No Modules"}</div>
</div> </div>
</div> </div>

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

@ -4,7 +4,7 @@ import { isNil } from "lodash-es";
import { ContrastIcon } from "lucide-react"; import { ContrastIcon } from "lucide-react";
// types // types
import { EIconSize, ISSUE_PRIORITIES } from "@plane/constants"; 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 { import {
GroupByColumnTypes, GroupByColumnTypes,
IGroupByColumn, IGroupByColumn,
@ -95,14 +95,14 @@ const getModuleColumns = (moduleStore: IIssueModuleStore): IGroupByColumn[] | un
moduleGroups.push({ moduleGroups.push({
id: moduleInfo.id, id: moduleInfo.id,
name: moduleInfo.name, name: moduleInfo.name,
icon: <DiceIcon className="h-3.5 w-3.5" />, icon: <ModuleIcon className="h-3.5 w-3.5" />,
payload: { module_ids: [moduleInfo.id] }, payload: { module_ids: [moduleInfo.id] },
}); });
}) as any; }) as any;
moduleGroups.push({ moduleGroups.push({
id: "None", id: "None",
name: "None", name: "None",
icon: <DiceIcon className="h-3.5 w-3.5" />, icon: <ModuleIcon className="h-3.5 w-3.5" />,
payload: { module_ids: [] }, payload: { module_ids: [] },
}); });

4
apps/space/core/components/issues/navbar/root.tsx
View file

@ -2,7 +2,7 @@
import { FC } from "react"; import { FC } from "react";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import { Briefcase } from "lucide-react"; import { ProjectIcon } from "@plane/propel/icons";
// components // components
import { ProjectLogo } from "@/components/common/project-logo"; import { ProjectLogo } from "@/components/common/project-logo";
// store // store
@ -29,7 +29,7 @@ export const IssuesNavbarRoot: FC<Props> = observer((props) => {
</span> </span>
) : ( ) : (
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase"> <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
<Briefcase className="h-4 w-4" /> <ProjectIcon className="h-4 w-4" />
</span> </span>
)} )}
<div className="line-clamp-1 max-w-[300px] overflow-hidden text-lg font-medium"> <div className="line-clamp-1 max-w-[300px] overflow-hidden text-lg font-medium">

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

@ -2,7 +2,7 @@
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import { useTranslation } from "@plane/i18n"; import { useTranslation } from "@plane/i18n";
// ui // ui
import { ContrastIcon } from "@plane/propel/icons"; import { CycleIcon } from "@plane/propel/icons";
import { Breadcrumbs, Header } from "@plane/ui"; import { Breadcrumbs, Header } from "@plane/ui";
// components // components
import { BreadcrumbLink } from "@/components/common/breadcrumb-link"; import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
@ -19,7 +19,7 @@ export const WorkspaceActiveCycleHeader = observer(() => {
component={ component={
<BreadcrumbLink <BreadcrumbLink
label={t("active_cycles")} 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"; "use client";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import { BarChart2 } from "lucide-react";
// plane imports
import { useTranslation } from "@plane/i18n"; import { useTranslation } from "@plane/i18n";
import { AnalyticsIcon } from "@plane/propel/icons";
// plane imports
import { Breadcrumbs, Header } from "@plane/ui"; import { Breadcrumbs, Header } from "@plane/ui";
// components // components
import { BreadcrumbLink } from "@/components/common/breadcrumb-link"; import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
@ -18,7 +18,7 @@ export const WorkspaceAnalyticsHeader = observer(() => {
component={ component={
<BreadcrumbLink <BreadcrumbLink
label={t("workspace_analytics.label")} 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 { useState } from "react";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import { PenSquare } from "lucide-react";
import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants"; import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
import { useTranslation } from "@plane/i18n"; import { useTranslation } from "@plane/i18n";
// ui // ui
import { Button } from "@plane/propel/button"; import { Button } from "@plane/propel/button";
import { DraftIcon } from "@plane/propel/icons";
import { EIssuesStoreType } from "@plane/types"; import { EIssuesStoreType } from "@plane/types";
import { Breadcrumbs, Header } from "@plane/ui"; import { Breadcrumbs, Header } from "@plane/ui";
// components // components
@ -48,7 +48,7 @@ export const WorkspaceDraftHeader = observer(() => {
<Breadcrumbs> <Breadcrumbs>
<Breadcrumbs.Item <Breadcrumbs.Item
component={ 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> </Breadcrumbs>

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

@ -1,10 +1,11 @@
"use client"; "use client";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import { Home, Shapes } from "lucide-react"; import { Shapes } from "lucide-react";
// plane imports // plane imports
import { useTranslation } from "@plane/i18n"; import { useTranslation } from "@plane/i18n";
import { Button } from "@plane/propel/button"; import { Button } from "@plane/propel/button";
import { HomeIcon } from "@plane/propel/icons";
import { Breadcrumbs, Header } from "@plane/ui"; import { Breadcrumbs, Header } from "@plane/ui";
// components // components
import { BreadcrumbLink } from "@/components/common/breadcrumb-link"; import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
@ -27,7 +28,10 @@ export const WorkspaceDashboardHeader = observer(() => {
<Breadcrumbs> <Breadcrumbs>
<Breadcrumbs.Item <Breadcrumbs.Item
component={ 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> </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 { ChevronDown, PanelRight } from "lucide-react";
import { PROFILE_VIEWER_TAB, PROFILE_ADMINS_TAB, EUserPermissions, EUserPermissionsLevel } from "@plane/constants"; import { PROFILE_VIEWER_TAB, PROFILE_ADMINS_TAB, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
import { useTranslation } from "@plane/i18n"; import { useTranslation } from "@plane/i18n";
import { UserActivityIcon } from "@plane/propel/icons"; import { YourWorkIcon } from "@plane/propel/icons";
import { IUserProfileProjectSegregation } from "@plane/types"; import { IUserProfileProjectSegregation } from "@plane/types";
import { Breadcrumbs, Header, CustomMenu } from "@plane/ui"; import { Breadcrumbs, Header, CustomMenu } from "@plane/ui";
import { cn } from "@plane/utils"; import { cn } from "@plane/utils";
@ -59,7 +59,7 @@ export const UserProfileHeader: FC<TUserProfileHeader> = observer((props) => {
<BreadcrumbLink <BreadcrumbLink
label={breadcrumbLabel} label={breadcrumbLabel}
disableTooltip 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 { FC } from "react";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import { useParams } from "next/navigation"; 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 { Tooltip } from "@plane/propel/tooltip";
import { EIssuesStoreType } from "@plane/types"; import { EIssuesStoreType } from "@plane/types";
// ui // ui
@ -32,17 +32,17 @@ const PROJECT_ARCHIVES_BREADCRUMB_LIST: {
issues: { issues: {
label: "Work items", label: "Work items",
href: "/issues", href: "/issues",
icon: LayersIcon, icon: WorkItemsIcon,
}, },
cycles: { cycles: {
label: "Cycles", label: "Cycles",
href: "/cycles", href: "/cycles",
icon: ContrastIcon, icon: CycleIcon,
}, },
modules: { modules: {
label: "Modules", label: "Modules",
href: "/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 { useParams } from "next/navigation";
import useSWR from "swr"; import useSWR from "swr";
// ui // ui
import { ArchiveIcon, LayersIcon } from "@plane/propel/icons"; import { ArchiveIcon, WorkItemsIcon } from "@plane/propel/icons";
import { Breadcrumbs, Header } from "@plane/ui"; import { Breadcrumbs, Header } from "@plane/ui";
// components // components
import { BreadcrumbLink } from "@/components/common/breadcrumb-link"; import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
@ -52,7 +52,7 @@ export const ProjectArchivedIssueDetailsHeader = observer(() => {
<BreadcrumbLink <BreadcrumbLink
href={`/${workspaceSlug}/projects/${projectId}/archives/issues`} href={`/${workspaceSlug}/projects/${projectId}/archives/issues`}
label="Work items" 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 { usePlatformOS } from "@plane/hooks";
import { useTranslation } from "@plane/i18n"; import { useTranslation } from "@plane/i18n";
import { Button } from "@plane/propel/button"; 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 { Tooltip } from "@plane/propel/tooltip";
import { import {
EIssuesStoreType, EIssuesStoreType,
@ -123,7 +123,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
return { return {
value: _cycle.id, value: _cycle.id,
query: _cycle.name, query: _cycle.name,
content: <SwitcherLabel name={_cycle.name} LabelIcon={ContrastIcon} />, content: <SwitcherLabel name={_cycle.name} LabelIcon={CycleIcon} />,
}; };
}) })
.filter((option) => option !== undefined) as ICustomSearchSelectOption[]; .filter((option) => option !== undefined) as ICustomSearchSelectOption[];
@ -158,7 +158,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
title={cycleDetails?.name} title={cycleDetails?.name}
icon={ icon={
<Breadcrumbs.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> </Breadcrumbs.Icon>
} }
isLast 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, WORK_ITEM_TRACKER_ELEMENTS,
} from "@plane/constants"; } from "@plane/constants";
import { Button } from "@plane/propel/button"; 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 { Tooltip } from "@plane/propel/tooltip";
import { import {
EIssuesStoreType, EIssuesStoreType,
@ -118,7 +118,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
return { return {
value: _module.id, value: _module.id,
query: _module.name, query: _module.name,
content: <SwitcherLabel name={_module.name} LabelIcon={DiceIcon} />, content: <SwitcherLabel name={_module.name} LabelIcon={ModuleIcon} />,
}; };
}) })
.filter((option) => option !== undefined) as ICustomSearchSelectOption[]; .filter((option) => option !== undefined) as ICustomSearchSelectOption[];
@ -149,7 +149,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
router.push(`/${workspaceSlug}/projects/${projectId}/modules/${value}`); router.push(`/${workspaceSlug}/projects/${projectId}/modules/${value}`);
}} }}
title={moduleDetails?.name} 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 isLast
/> />
} }

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

@ -1,8 +1,8 @@
"use client"; "use client";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import { useParams } from "next/navigation"; import { useParams } from "next/navigation";
import { FileText } from "lucide-react";
import { EProjectFeatureKey } from "@plane/constants"; import { EProjectFeatureKey } from "@plane/constants";
import { PageIcon } from "@plane/propel/icons";
// types // types
import { ICustomSearchSelectOption } from "@plane/types"; import { ICustomSearchSelectOption } from "@plane/types";
// ui // ui
@ -51,7 +51,7 @@ export const PageDetailsHeader = observer(() => {
query: _page.name, query: _page.name,
content: ( content: (
<div className="flex gap-2 items-center justify-between"> <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} /> <PageAccessIcon {..._page} />
</div> </div>
), ),
@ -83,7 +83,7 @@ export const PageDetailsHeader = observer(() => {
title={getPageName(page?.name)} title={getPageName(page?.name)}
icon={ icon={
<Breadcrumbs.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> </Breadcrumbs.Icon>
} }
isLast 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 { useCallback, useRef } from "react";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import { useParams } from "next/navigation"; import { useParams } from "next/navigation";
import { Layers, Lock } from "lucide-react"; import { Lock } from "lucide-react";
// plane constants // plane constants
import { import {
EIssueFilterType, EIssueFilterType,
@ -15,6 +15,7 @@ import {
} from "@plane/constants"; } from "@plane/constants";
// types // types
import { Button } from "@plane/propel/button"; import { Button } from "@plane/propel/button";
import { ViewsIcon } from "@plane/propel/icons";
import { Tooltip } from "@plane/propel/tooltip"; import { Tooltip } from "@plane/propel/tooltip";
import { import {
EIssuesStoreType, EIssuesStoreType,
@ -119,7 +120,7 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
return { return {
value: _view.id, value: _view.id,
query: _view.name, 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[]; .filter((option) => option !== undefined) as ICustomSearchSelectOption[];
@ -145,7 +146,7 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
title={viewDetails?.name} title={viewDetails?.name}
icon={ icon={
<Breadcrumbs.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> </Breadcrumbs.Icon>
} }
isLast 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 { useCallback, useMemo, useState } from "react";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import { useParams } from "next/navigation"; import { useParams } from "next/navigation";
import { Layers } from "lucide-react";
// plane imports // plane imports
import { import {
EIssueFilterType, EIssueFilterType,
@ -13,6 +12,7 @@ import {
} from "@plane/constants"; } from "@plane/constants";
import { useTranslation } from "@plane/i18n"; import { useTranslation } from "@plane/i18n";
import { Button } from "@plane/propel/button"; import { Button } from "@plane/propel/button";
import { ViewsIcon } from "@plane/propel/icons";
import { import {
EIssuesStoreType, EIssuesStoreType,
IIssueDisplayFilterOptions, IIssueDisplayFilterOptions,
@ -99,7 +99,7 @@ export const GlobalIssuesHeader = observer(() => {
const defaultOptions = DEFAULT_GLOBAL_VIEWS_LIST.map((view) => ({ const defaultOptions = DEFAULT_GLOBAL_VIEWS_LIST.map((view) => ({
value: view.key, value: view.key,
query: 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) => { const workspaceOptions = (currentWorkspaceViews || []).map((view) => {
@ -108,7 +108,7 @@ export const GlobalIssuesHeader = observer(() => {
return { return {
value: _view.id, value: _view.id,
query: _view.name, 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>
<Breadcrumbs.Item <Breadcrumbs.Item
component={ 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 <Breadcrumbs.Item
@ -142,7 +142,7 @@ export const GlobalIssuesHeader = observer(() => {
title={viewDetails?.name ?? t(defaultViewDetails?.i18n_label ?? "")} title={viewDetails?.name ?? t(defaultViewDetails?.i18n_label ?? "")}
icon={ icon={
<Breadcrumbs.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> </Breadcrumbs.Icon>
} }
isLast isLast

9
apps/web/ce/components/breadcrumbs/project.tsx
View file

@ -1,7 +1,7 @@
"use client"; "use client";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import { Briefcase } from "lucide-react"; import { ProjectIcon } from "@plane/propel/icons";
// plane imports // plane imports
import { ICustomSearchSelectOption } from "@plane/types"; import { ICustomSearchSelectOption } from "@plane/types";
import { BreadcrumbNavigationSearchDropdown, Breadcrumbs } from "@plane/ui"; import { BreadcrumbNavigationSearchDropdown, Breadcrumbs } from "@plane/ui";
@ -39,7 +39,12 @@ export const ProjectBreadcrumb = observer((props: TProjectBreadcrumbProps) => {
value: projectId, value: projectId,
query: project?.name, query: project?.name,
content: ( content: (
<SwitcherLabel name={project?.name} logo_props={project?.logo_props} LabelIcon={Briefcase} type="material" /> <SwitcherLabel
name={project?.name}
logo_props={project?.logo_props}
LabelIcon={ProjectIcon}
type="material"
/>
), ),
}; };
}) })

14
apps/web/ce/components/command-palette/helpers.tsx
View file

@ -1,8 +1,8 @@
"use client"; "use client";
// types // types
import { Briefcase, FileText, Layers, LayoutGrid } from "lucide-react"; import { LayoutGrid } from "lucide-react";
import { ContrastIcon, DiceIcon } from "@plane/propel/icons"; import { CycleIcon, ModuleIcon, PageIcon, ProjectIcon, ViewsIcon } from "@plane/propel/icons";
import { import {
IWorkspaceDefaultSearchResult, IWorkspaceDefaultSearchResult,
IWorkspaceIssueSearchResult, IWorkspaceIssueSearchResult,
@ -27,7 +27,7 @@ export type TCommandGroups = {
export const commandGroups: TCommandGroups = { export const commandGroups: TCommandGroups = {
cycle: { cycle: {
icon: <ContrastIcon className="h-3 w-3" />, icon: <CycleIcon className="h-3 w-3" />,
itemName: (cycle: IWorkspaceDefaultSearchResult) => ( itemName: (cycle: IWorkspaceDefaultSearchResult) => (
<h6> <h6>
<span className="text-xs text-custom-text-300">{cycle.project__identifier}</span> {cycle.name} <span className="text-xs text-custom-text-300">{cycle.project__identifier}</span> {cycle.name}
@ -62,7 +62,7 @@ export const commandGroups: TCommandGroups = {
title: "Work items", title: "Work items",
}, },
issue_view: { issue_view: {
icon: <Layers className="h-3 w-3" />, icon: <ViewsIcon className="h-3 w-3" />,
itemName: (view: IWorkspaceDefaultSearchResult) => ( itemName: (view: IWorkspaceDefaultSearchResult) => (
<h6> <h6>
<span className="text-xs text-custom-text-300">{view.project__identifier}</span> {view.name} <span className="text-xs text-custom-text-300">{view.project__identifier}</span> {view.name}
@ -73,7 +73,7 @@ export const commandGroups: TCommandGroups = {
title: "Views", title: "Views",
}, },
module: { module: {
icon: <DiceIcon className="h-3 w-3" />, icon: <ModuleIcon className="h-3 w-3" />,
itemName: (module: IWorkspaceDefaultSearchResult) => ( itemName: (module: IWorkspaceDefaultSearchResult) => (
<h6> <h6>
<span className="text-xs text-custom-text-300">{module.project__identifier}</span> {module.name} <span className="text-xs text-custom-text-300">{module.project__identifier}</span> {module.name}
@ -84,7 +84,7 @@ export const commandGroups: TCommandGroups = {
title: "Modules", title: "Modules",
}, },
page: { page: {
icon: <FileText className="h-3 w-3" />, icon: <PageIcon className="h-3 w-3" />,
itemName: (page: IWorkspacePageSearchResult) => ( itemName: (page: IWorkspacePageSearchResult) => (
<h6> <h6>
<span className="text-xs text-custom-text-300">{page.project__identifiers?.[0]}</span> {page.name} <span className="text-xs text-custom-text-300">{page.project__identifiers?.[0]}</span> {page.name}
@ -100,7 +100,7 @@ export const commandGroups: TCommandGroups = {
title: "Pages", title: "Pages",
}, },
project: { project: {
icon: <Briefcase className="h-3 w-3" />, icon: <ProjectIcon className="h-3 w-3" />,
itemName: (project: IWorkspaceProjectSearchResult) => project?.name, itemName: (project: IWorkspaceProjectSearchResult) => project?.name,
path: (project: IWorkspaceProjectSearchResult) => `/${project?.workspace__slug}/projects/${project?.id}/issues/`, path: (project: IWorkspaceProjectSearchResult) => `/${project?.workspace__slug}/projects/${project?.id}/issues/`,
title: "Projects", title: "Projects",

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

@ -13,7 +13,7 @@ import {
Users, Users,
} from "lucide-react"; } from "lucide-react";
// types // 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"; import { IGroupByColumn, IIssueDisplayProperties, TGetColumns, TSpreadsheetColumn } from "@plane/types";
// components // components
import { import {
@ -71,7 +71,7 @@ export const SpreadSheetPropertyIconMap: Record<string, FC<ISvgIcons>> = {
CalenderCheck2: CalendarCheck2, CalenderCheck2: CalendarCheck2,
Triangle: Triangle, Triangle: Triangle,
Tag: Tag, Tag: Tag,
DiceIcon: DiceIcon, ModuleIcon: ModuleIcon,
ContrastIcon: ContrastIcon, ContrastIcon: ContrastIcon,
Signal: Signal, Signal: Signal,
CalendarClock: CalendarClock, CalendarClock: CalendarClock,

15
apps/web/ce/components/projects/navigation/helper.tsx
View file

@ -1,7 +1,6 @@
import { FileText, Layers } from "lucide-react";
// plane imports // plane imports
import { EUserPermissions, EProjectFeatureKey } from "@plane/constants"; 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 // components
import type { TNavigationItem } from "@/components/workspace/sidebar/project-navigation"; import type { TNavigationItem } from "@/components/workspace/sidebar/project-navigation";
@ -21,7 +20,7 @@ export const getProjectFeatureNavigation = (
key: EProjectFeatureKey.WORK_ITEMS, key: EProjectFeatureKey.WORK_ITEMS,
name: "Work items", name: "Work items",
href: `/${workspaceSlug}/projects/${projectId}/issues`, href: `/${workspaceSlug}/projects/${projectId}/issues`,
icon: LayersIcon, icon: WorkItemsIcon,
access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST], access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
shouldRender: true, shouldRender: true,
sortOrder: 1, sortOrder: 1,
@ -31,7 +30,7 @@ export const getProjectFeatureNavigation = (
key: EProjectFeatureKey.CYCLES, key: EProjectFeatureKey.CYCLES,
name: "Cycles", name: "Cycles",
href: `/${workspaceSlug}/projects/${projectId}/cycles`, href: `/${workspaceSlug}/projects/${projectId}/cycles`,
icon: ContrastIcon, icon: CycleIcon,
access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER], access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
shouldRender: project.cycle_view, shouldRender: project.cycle_view,
sortOrder: 2, sortOrder: 2,
@ -41,7 +40,7 @@ export const getProjectFeatureNavigation = (
key: EProjectFeatureKey.MODULES, key: EProjectFeatureKey.MODULES,
name: "Modules", name: "Modules",
href: `/${workspaceSlug}/projects/${projectId}/modules`, href: `/${workspaceSlug}/projects/${projectId}/modules`,
icon: DiceIcon, icon: ModuleIcon,
access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER], access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
shouldRender: project.module_view, shouldRender: project.module_view,
sortOrder: 3, sortOrder: 3,
@ -51,7 +50,7 @@ export const getProjectFeatureNavigation = (
key: EProjectFeatureKey.VIEWS, key: EProjectFeatureKey.VIEWS,
name: "Views", name: "Views",
href: `/${workspaceSlug}/projects/${projectId}/views`, href: `/${workspaceSlug}/projects/${projectId}/views`,
icon: Layers, icon: ViewsIcon,
access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST], access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
shouldRender: project.issue_views_view, shouldRender: project.issue_views_view,
sortOrder: 4, sortOrder: 4,
@ -61,7 +60,7 @@ export const getProjectFeatureNavigation = (
key: EProjectFeatureKey.PAGES, key: EProjectFeatureKey.PAGES,
name: "Pages", name: "Pages",
href: `/${workspaceSlug}/projects/${projectId}/pages`, href: `/${workspaceSlug}/projects/${projectId}/pages`,
icon: FileText, icon: PageIcon,
access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST], access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
shouldRender: project.page_view, shouldRender: project.page_view,
sortOrder: 5, sortOrder: 5,
@ -71,7 +70,7 @@ export const getProjectFeatureNavigation = (
key: EProjectFeatureKey.INTAKE, key: EProjectFeatureKey.INTAKE,
name: "Intake", name: "Intake",
href: `/${workspaceSlug}/projects/${projectId}/intake`, href: `/${workspaceSlug}/projects/${projectId}/intake`,
icon: Intake, icon: IntakeIcon,
access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST], access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
shouldRender: project.inbox_view, shouldRender: project.inbox_view,
sortOrder: 6, sortOrder: 6,

29
apps/web/ce/components/workspace/sidebar/helper.tsx
View file

@ -1,25 +1,34 @@
import { BarChart2, Briefcase, Home, Inbox, Layers, PenSquare } from "lucide-react"; import {
import { ArchiveIcon, ContrastIcon, UserActivityIcon } from "@plane/propel/icons"; AnalyticsIcon,
ArchiveIcon,
CycleIcon,
DraftIcon,
HomeIcon,
InboxIcon,
ProjectIcon,
ViewsIcon,
YourWorkIcon,
} from "@plane/propel/icons";
import { cn } from "@plane/utils"; import { cn } from "@plane/utils";
export const getSidebarNavigationItemIcon = (key: string, className: string = "") => { export const getSidebarNavigationItemIcon = (key: string, className: string = "") => {
switch (key) { switch (key) {
case "home": case "home":
return <Home className={cn("size-4 flex-shrink-0", className)} />; return <HomeIcon className={cn("size-4 flex-shrink-0", className)} />;
case "inbox": case "inbox":
return <Inbox className={cn("size-4 flex-shrink-0", className)} />; return <InboxIcon className={cn("size-4 flex-shrink-0", className)} />;
case "projects": case "projects":
return <Briefcase className={cn("size-4 flex-shrink-0", className)} />; return <ProjectIcon className={cn("size-4 flex-shrink-0", className)} />;
case "views": case "views":
return <Layers className={cn("size-4 flex-shrink-0", className)} />; return <ViewsIcon className={cn("size-4 flex-shrink-0", className)} />;
case "active_cycles": case "active_cycles":
return <ContrastIcon className={cn("size-4 flex-shrink-0", className)} />; return <CycleIcon className={cn("size-4 flex-shrink-0", className)} />;
case "analytics": case "analytics":
return <BarChart2 className={cn("size-4 flex-shrink-0", className)} />; return <AnalyticsIcon className={cn("size-4 flex-shrink-0", className)} />;
case "your_work": case "your_work":
return <UserActivityIcon className={cn("size-4 flex-shrink-0", className)} />; return <YourWorkIcon className={cn("size-4 flex-shrink-0", className)} />;
case "drafts": case "drafts":
return <PenSquare className={cn("size-4 flex-shrink-0", className)} />; return <DraftIcon className={cn("size-4 flex-shrink-0", className)} />;
case "archives": case "archives":
return <ArchiveIcon className={cn("size-4 flex-shrink-0", className)} />; return <ArchiveIcon className={cn("size-4 flex-shrink-0", className)} />;
} }

14
apps/web/ce/constants/project/settings/features.tsx
View file

@ -1,7 +1,7 @@
import { ReactNode } from "react"; import { ReactNode } from "react";
import { FileText, Layers, Timer } from "lucide-react"; import { Timer } from "lucide-react";
// plane imports // 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"; import { IProject } from "@plane/types";
export type TProperties = { export type TProperties = {
@ -28,7 +28,7 @@ export const PROJECT_BASE_FEATURES_LIST: TBaseFeatureList = {
property: "cycle_view", property: "cycle_view",
title: "Cycles", title: "Cycles",
description: "Timebox work as you see fit per project and change frequency from one period to the next.", description: "Timebox work as you see fit per project and change frequency from one period to the next.",
icon: <ContrastIcon className="h-5 w-5 flex-shrink-0 rotate-180 text-custom-text-300" />, icon: <CycleIcon className="h-5 w-5 flex-shrink-0 rotate-180 text-custom-text-300" />,
isPro: false, isPro: false,
isEnabled: true, isEnabled: true,
}, },
@ -37,7 +37,7 @@ export const PROJECT_BASE_FEATURES_LIST: TBaseFeatureList = {
property: "module_view", property: "module_view",
title: "Modules", title: "Modules",
description: "Group work into sub-project-like set-ups with their own leads and assignees.", description: "Group work into sub-project-like set-ups with their own leads and assignees.",
icon: <DiceIcon width={20} height={20} className="flex-shrink-0 text-custom-text-300" />, icon: <ModuleIcon width={20} height={20} className="flex-shrink-0 text-custom-text-300" />,
isPro: false, isPro: false,
isEnabled: true, isEnabled: true,
}, },
@ -46,7 +46,7 @@ export const PROJECT_BASE_FEATURES_LIST: TBaseFeatureList = {
property: "issue_views_view", property: "issue_views_view",
title: "Views", title: "Views",
description: "Save sorts, filters, and display options for later or share them.", description: "Save sorts, filters, and display options for later or share them.",
icon: <Layers className="h-5 w-5 flex-shrink-0 text-custom-text-300" />, icon: <ViewsIcon className="h-5 w-5 flex-shrink-0 text-custom-text-300" />,
isPro: false, isPro: false,
isEnabled: true, isEnabled: true,
}, },
@ -55,7 +55,7 @@ export const PROJECT_BASE_FEATURES_LIST: TBaseFeatureList = {
property: "page_view", property: "page_view",
title: "Pages", title: "Pages",
description: "Write anything like you write anything.", description: "Write anything like you write anything.",
icon: <FileText className="h-5 w-5 flex-shrink-0 text-custom-text-300" />, icon: <PageIcon className="h-5 w-5 flex-shrink-0 text-custom-text-300" />,
isPro: false, isPro: false,
isEnabled: true, isEnabled: true,
}, },
@ -64,7 +64,7 @@ export const PROJECT_BASE_FEATURES_LIST: TBaseFeatureList = {
property: "inbox_view", property: "inbox_view",
title: "Intake", title: "Intake",
description: "Consider and discuss work items before you add them to your project.", description: "Consider and discuss work items before you add them to your project.",
icon: <Intake className="h-5 w-5 flex-shrink-0 text-custom-text-300" />, icon: <IntakeIcon className="h-5 w-5 flex-shrink-0 text-custom-text-300" />,
isPro: false, isPro: false,
isEnabled: true, isEnabled: true,
}, },

22
apps/web/ce/constants/sidebar-favorites.ts
View file

@ -1,14 +1,22 @@
import { Briefcase, FileText, Layers, LucideIcon } from "lucide-react"; import { LucideIcon } from "lucide-react";
// plane imports // 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"; import { IFavorite } from "@plane/types";
export const FAVORITE_ITEM_ICONS: Record<string, React.FC<ISvgIcons> | LucideIcon> = { export const FAVORITE_ITEM_ICONS: Record<string, React.FC<ISvgIcons> | LucideIcon> = {
page: FileText, page: PageIcon,
project: Briefcase, project: ProjectIcon,
view: Layers, view: ViewsIcon,
module: DiceIcon, module: ModuleIcon,
cycle: ContrastIcon, cycle: CycleIcon,
folder: FavoriteFolderIcon, folder: FavoriteFolderIcon,
}; };

4
apps/web/core/components/analytics/overview/active-project-item.tsx
View file

@ -1,4 +1,4 @@
import { Briefcase } from "lucide-react"; import { ProjectIcon } from "@plane/propel/icons";
// plane package imports // plane package imports
import { cn } from "@plane/utils"; import { cn } from "@plane/utils";
import { Logo } from "@/components/common/logo"; import { Logo } from "@/components/common/logo";
@ -40,7 +40,7 @@ const ActiveProjectItem = (props: Props) => {
<Logo logo={projectDetails?.logo_props} size={16} /> <Logo logo={projectDetails?.logo_props} size={16} />
) : ( ) : (
<span className="grid h-4 w-4 flex-shrink-0 place-items-center"> <span className="grid h-4 w-4 flex-shrink-0 place-items-center">
<Briefcase className="h-4 w-4" /> <ProjectIcon className="h-4 w-4" />
</span> </span>
)} )}
</span> </span>

6
apps/web/core/components/analytics/select/project.tsx
View file

@ -1,7 +1,7 @@
"use client"; "use client";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import { Briefcase } from "lucide-react"; import { ProjectIcon } from "@plane/propel/icons";
// plane package imports // plane package imports
import { CustomSearchSelect } from "@plane/ui"; import { CustomSearchSelect } from "@plane/ui";
// components // components
@ -30,7 +30,7 @@ export const ProjectSelect: React.FC<Props> = observer((props) => {
{projectDetails?.logo_props ? ( {projectDetails?.logo_props ? (
<Logo logo={projectDetails?.logo_props} size={16} /> <Logo logo={projectDetails?.logo_props} size={16} />
) : ( ) : (
<Briefcase className="h-4 w-4" /> <ProjectIcon className="h-4 w-4" />
)} )}
<span className="flex-grow truncate">{projectDetails?.name}</span> <span className="flex-grow truncate">{projectDetails?.name}</span>
</div> </div>
@ -45,7 +45,7 @@ export const ProjectSelect: React.FC<Props> = observer((props) => {
options={options} options={options}
label={ label={
<div className="flex items-center gap-2 p-1 "> <div className="flex items-center gap-2 p-1 ">
<Briefcase className="h-4 w-4" /> <ProjectIcon className="h-4 w-4" />
{value && value.length > 3 {value && value.length > 3
? `3+ projects` ? `3+ projects`
: value && value.length > 0 : value && value.length > 0

4
apps/web/core/components/analytics/select/select-y-axis.tsx
View file

@ -2,8 +2,8 @@
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import { useParams } from "next/navigation"; import { useParams } from "next/navigation";
import { Briefcase } from "lucide-react";
import { EEstimateSystem } from "@plane/constants"; import { EEstimateSystem } from "@plane/constants";
import { ProjectIcon } from "@plane/propel/icons";
import { ChartYAxisMetric } from "@plane/types"; import { ChartYAxisMetric } from "@plane/types";
// plane package imports // plane package imports
import { CustomSelect } from "@plane/ui"; import { CustomSelect } from "@plane/ui";
@ -44,7 +44,7 @@ export const SelectYAxis: React.FC<Props> = observer(({ value, onChange, hiddenO
value={value} value={value}
label={ label={
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Briefcase className="h-3 w-3" /> <ProjectIcon className="h-3 w-3" />
<span>{options.find((v) => v.value === value)?.label ?? "Add Metric"}</span> <span>{options.find((v) => v.value === value)?.label ?? "Add Metric"}</span>
</div> </div>
} }

7
apps/web/core/components/analytics/work-items/workitems-insight-table.tsx
View file

@ -3,9 +3,10 @@ import { ColumnDef, Row, RowData } from "@tanstack/react-table";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import { useParams } from "next/navigation"; import { useParams } from "next/navigation";
import useSWR from "swr"; import useSWR from "swr";
import { Briefcase, UserRound } from "lucide-react"; import { UserRound } from "lucide-react";
// plane package imports
import { useTranslation } from "@plane/i18n"; import { useTranslation } from "@plane/i18n";
import { ProjectIcon } from "@plane/propel/icons";
// plane package imports
import { AnalyticsTableDataMap, WorkItemInsightColumns } from "@plane/types"; import { AnalyticsTableDataMap, WorkItemInsightColumns } from "@plane/types";
// plane web components // plane web components
import { Avatar } from "@plane/ui"; import { Avatar } from "@plane/ui";
@ -82,7 +83,7 @@ const WorkItemsInsightTable = observer(() => {
{project?.logo_props ? ( {project?.logo_props ? (
<Logo logo={project.logo_props} size={18} /> <Logo logo={project.logo_props} size={18} />
) : ( ) : (
<Briefcase className="h-4 w-4" /> <ProjectIcon className="h-4 w-4" />
)} )}
{project?.name} {project?.name}
</div> </div>

6
apps/web/core/components/command-palette/actions/help-actions.tsx
View file

@ -1,9 +1,9 @@
"use client"; "use client";
import { Command } from "cmdk"; import { Command } from "cmdk";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import { FileText, GithubIcon, MessageSquare, Rocket } from "lucide-react"; import { GithubIcon, MessageSquare, Rocket } from "lucide-react";
// ui // ui
import { DiscordIcon } from "@plane/propel/icons"; import { DiscordIcon, PageIcon } from "@plane/propel/icons";
// hooks // hooks
import { useCommandPalette } from "@/hooks/store/use-command-palette"; import { useCommandPalette } from "@/hooks/store/use-command-palette";
import { useTransient } from "@/hooks/store/use-transient"; import { useTransient } from "@/hooks/store/use-transient";
@ -40,7 +40,7 @@ export const CommandPaletteHelpActions: React.FC<Props> = observer((props) => {
className="focus:outline-none" className="focus:outline-none"
> >
<div className="flex items-center gap-2 text-custom-text-200"> <div className="flex items-center gap-2 text-custom-text-200">
<FileText className="h-3.5 w-3.5" /> <PageIcon className="h-3.5 w-3.5" />
Open Plane documentation Open Plane documentation
</div> </div>
</Command.Item> </Command.Item>

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

@ -1,7 +1,7 @@
"use client"; "use client";
import { Command } from "cmdk"; import { Command } from "cmdk";
import { ContrastIcon, FileText, Layers } from "lucide-react"; import { ContrastIcon } from "lucide-react";
// hooks // hooks
import { import {
CYCLE_TRACKER_ELEMENTS, CYCLE_TRACKER_ELEMENTS,
@ -9,7 +9,7 @@ import {
PROJECT_PAGE_TRACKER_ELEMENTS, PROJECT_PAGE_TRACKER_ELEMENTS,
PROJECT_VIEW_TRACKER_ELEMENTS, PROJECT_VIEW_TRACKER_ELEMENTS,
} from "@plane/constants"; } from "@plane/constants";
import { DiceIcon } from "@plane/propel/icons"; import { ModuleIcon, PageIcon, ViewsIcon } from "@plane/propel/icons";
// hooks // hooks
import { useCommandPalette } from "@/hooks/store/use-command-palette"; import { useCommandPalette } from "@/hooks/store/use-command-palette";
// ui // ui
@ -52,7 +52,7 @@ export const CommandPaletteProjectActions: React.FC<Props> = (props) => {
className="focus:outline-none" className="focus:outline-none"
> >
<div className="flex items-center gap-2 text-custom-text-200"> <div className="flex items-center gap-2 text-custom-text-200">
<DiceIcon className="h-3.5 w-3.5" /> <ModuleIcon className="h-3.5 w-3.5" />
Create new module Create new module
</div> </div>
<kbd>M</kbd> <kbd>M</kbd>
@ -68,7 +68,7 @@ export const CommandPaletteProjectActions: React.FC<Props> = (props) => {
className="focus:outline-none" className="focus:outline-none"
> >
<div className="flex items-center gap-2 text-custom-text-200"> <div className="flex items-center gap-2 text-custom-text-200">
<Layers className="h-3.5 w-3.5" /> <ViewsIcon className="h-3.5 w-3.5" />
Create new view Create new view
</div> </div>
<kbd>V</kbd> <kbd>V</kbd>
@ -84,7 +84,7 @@ export const CommandPaletteProjectActions: React.FC<Props> = (props) => {
className="focus:outline-none" className="focus:outline-none"
> >
<div className="flex items-center gap-2 text-custom-text-200"> <div className="flex items-center gap-2 text-custom-text-200">
<FileText className="h-3.5 w-3.5" /> <PageIcon className="h-3.5 w-3.5" />
Create new page Create new page
</div> </div>
<kbd>D</kbd> <kbd>D</kbd>

4
apps/web/core/components/command-palette/command-modal.tsx
View file

@ -16,7 +16,7 @@ import {
WORKSPACE_DEFAULT_SEARCH_RESULT, WORKSPACE_DEFAULT_SEARCH_RESULT,
} from "@plane/constants"; } from "@plane/constants";
import { useTranslation } from "@plane/i18n"; import { useTranslation } from "@plane/i18n";
import { LayersIcon } from "@plane/propel/icons"; import { WorkItemsIcon } from "@plane/propel/icons";
import { IWorkspaceSearchResults } from "@plane/types"; import { IWorkspaceSearchResults } from "@plane/types";
import { Loader, ToggleSwitch } from "@plane/ui"; import { Loader, ToggleSwitch } from "@plane/ui";
import { cn, getTabIndex } from "@plane/utils"; import { cn, getTabIndex } from "@plane/utils";
@ -357,7 +357,7 @@ export const CommandModal: React.FC = observer(() => {
className="focus:bg-custom-background-80" className="focus:bg-custom-background-80"
> >
<div className="flex items-center gap-2 text-custom-text-200"> <div className="flex items-center gap-2 text-custom-text-200">
<LayersIcon className="h-3.5 w-3.5" /> <WorkItemsIcon className="h-3.5 w-3.5" />
Create new work item Create new work item
</div> </div>
<kbd>C</kbd> <kbd>C</kbd>

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

@ -25,7 +25,7 @@ import {
} from "lucide-react"; } from "lucide-react";
// components // 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 { store } from "@/lib/store-context";
import { TProjectActivity } from "@/plane-web/types"; import { TProjectActivity } from "@/plane-web/types";
@ -47,8 +47,8 @@ export const iconsMap: ActivityIconMap = {
name: <Type className="h-3.5 w-3.5 text-custom-text-200" />, name: <Type className="h-3.5 w-3.5 text-custom-text-200" />,
state: <DoubleCircleIcon className="h-4 w-4 flex-shrink-0 text-custom-text-200" />, state: <DoubleCircleIcon className="h-4 w-4 flex-shrink-0 text-custom-text-200" />,
estimate: <Triangle size={14} className="text-custom-text-200" />, estimate: <Triangle size={14} className="text-custom-text-200" />,
cycle: <ContrastIcon className="h-4 w-4 flex-shrink-0 text-custom-text-200" />, cycle: <CycleIcon className="h-4 w-4 flex-shrink-0 text-custom-text-200" />,
module: <DiceIcon className="h-4 w-4 flex-shrink-0 text-custom-text-200" />, module: <ModuleIcon className="h-4 w-4 flex-shrink-0 text-custom-text-200" />,
page: <FileText className="h-3.5 w-3.5 text-custom-text-200" />, page: <FileText className="h-3.5 w-3.5 text-custom-text-200" />,
network: <Globe className="h-3.5 w-3.5 text-custom-text-200" />, network: <Globe className="h-3.5 w-3.5 text-custom-text-200" />,
identifier: <Hash className="h-3.5 w-3.5 text-custom-text-200" />, identifier: <Hash className="h-3.5 w-3.5 text-custom-text-200" />,
@ -59,11 +59,11 @@ export const iconsMap: ActivityIconMap = {
is_time_tracking_enabled: <Timer className="h-3.5 w-3.5 text-custom-text-200" />, is_time_tracking_enabled: <Timer className="h-3.5 w-3.5 text-custom-text-200" />,
is_issue_type_enabled: <ListTodo className="h-3.5 w-3.5 text-custom-text-200" />, is_issue_type_enabled: <ListTodo className="h-3.5 w-3.5 text-custom-text-200" />,
default: <Network className="h-3.5 w-3.5 text-custom-text-200" />, default: <Network className="h-3.5 w-3.5 text-custom-text-200" />,
module_view: <DiceIcon className="h-3.5 w-3.5 text-custom-text-200" />, module_view: <ModuleIcon className="h-3.5 w-3.5 text-custom-text-200" />,
cycle_view: <ContrastIcon className="h-3.5 w-3.5 text-custom-text-200" />, cycle_view: <CycleIcon className="h-3.5 w-3.5 text-custom-text-200" />,
issue_views_view: <Layers className="h-3.5 w-3.5 text-custom-text-200" />, issue_views_view: <Layers className="h-3.5 w-3.5 text-custom-text-200" />,
page_view: <FileText className="h-3.5 w-3.5 text-custom-text-200" />, page_view: <FileText className="h-3.5 w-3.5 text-custom-text-200" />,
intake_view: <Intake className="h-3.5 w-3.5 text-custom-text-200" />, intake_view: <IntakeIcon className="h-3.5 w-3.5 text-custom-text-200" />,
}; };
export const messages = (activity: TProjectActivity): { message: string | ReactNode; customUserName?: string } => { export const messages = (activity: TProjectActivity): { message: string | ReactNode; customUserName?: string } => {

16
apps/web/core/components/core/activity.tsx
View file

@ -20,7 +20,15 @@ import {
MessageSquareIcon, MessageSquareIcon,
UsersIcon, UsersIcon,
} from "lucide-react"; } 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 { Tooltip } from "@plane/propel/tooltip";
import { IIssueActivity } from "@plane/types"; import { IIssueActivity } from "@plane/types";
import { renderFormattedDate, generateWorkItemLink, capitalizeFirstLetter } from "@plane/utils"; import { renderFormattedDate, generateWorkItemLink, capitalizeFirstLetter } from "@plane/utils";
@ -283,7 +291,7 @@ const activityDetails: {
</> </>
); );
}, },
icon: <LayersIcon width={12} height={12} className="text-custom-text-200" aria-hidden="true" />, icon: <WorkItemsIcon width={12} height={12} className="text-custom-text-200" aria-hidden="true" />,
}, },
epic: { epic: {
message: (activity) => { message: (activity) => {
@ -509,7 +517,7 @@ const activityDetails: {
</> </>
); );
}, },
icon: <DiceIcon className="h-3 w-3 !text-custom-text-200" aria-hidden="true" />, icon: <ModuleIcon className="h-3 w-3 !text-custom-text-200" aria-hidden="true" />,
}, },
name: { name: {
message: (activity, showIssue) => ( message: (activity, showIssue) => (
@ -739,7 +747,7 @@ const activityDetails: {
{activity.verb === "2" && ` from intake by marking a duplicate work item.`} {activity.verb === "2" && ` from intake by marking a duplicate work item.`}
</> </>
), ),
icon: <Intake className="size-3 text-custom-text-200" aria-hidden="true" />, icon: <IntakeIcon className="size-3 text-custom-text-200" aria-hidden="true" />,
}, },
}; };

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

@ -2,10 +2,11 @@
import React, { FC } from "react"; import React, { FC } from "react";
import { isEmpty } from "lodash-es"; import { isEmpty } from "lodash-es";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import { LayersIcon, SquareUser, Users } from "lucide-react"; import { SquareUser, Users } from "lucide-react";
// plane types // plane types
import { EEstimateSystem } from "@plane/constants"; import { EEstimateSystem } from "@plane/constants";
import { useTranslation } from "@plane/i18n"; import { useTranslation } from "@plane/i18n";
import { WorkItemsIcon } from "@plane/propel/icons";
import { ICycle } from "@plane/types"; import { ICycle } from "@plane/types";
// plane ui // plane ui
import { Avatar, AvatarGroup, TextArea } from "@plane/ui"; import { Avatar, AvatarGroup, TextArea } from "@plane/ui";
@ -115,7 +116,7 @@ export const CycleSidebarDetails: FC<Props> = observer((props) => {
<div className="flex items-center justify-start gap-1"> <div className="flex items-center justify-start gap-1">
<div className="flex w-2/5 items-center justify-start gap-2 text-custom-text-300"> <div className="flex w-2/5 items-center justify-start gap-2 text-custom-text-300">
<LayersIcon className="h-4 w-4" /> <WorkItemsIcon className="h-4 w-4" />
<span className="text-base">{t("work_items")}</span> <span className="text-base">{t("work_items")}</span>
</div> </div>
<div className="flex w-3/5 items-center"> <div className="flex w-3/5 items-center">
@ -129,7 +130,7 @@ export const CycleSidebarDetails: FC<Props> = observer((props) => {
{isEstimatePointValid && !isCompleted && ( {isEstimatePointValid && !isCompleted && (
<div className="flex items-center justify-start gap-1"> <div className="flex items-center justify-start gap-1">
<div className="flex w-2/5 items-center justify-start gap-2 text-custom-text-300"> <div className="flex w-2/5 items-center justify-start gap-2 text-custom-text-300">
<LayersIcon className="h-4 w-4" /> <WorkItemsIcon className="h-4 w-4" />
<span className="text-base">{t("points")}</span> <span className="text-base">{t("points")}</span>
</div> </div>
<div className="flex w-3/5 items-center"> <div className="flex w-3/5 items-center">

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

@ -15,7 +15,7 @@ import {
} from "@plane/constants"; } from "@plane/constants";
import { useLocalStorage } from "@plane/hooks"; import { useLocalStorage } from "@plane/hooks";
import { useTranslation } from "@plane/i18n"; import { useTranslation } from "@plane/i18n";
import { LayersIcon, TransferIcon } from "@plane/propel/icons"; import { TransferIcon, WorkItemsIcon } from "@plane/propel/icons";
import { setPromiseToast } from "@plane/propel/toast"; import { setPromiseToast } from "@plane/propel/toast";
import { Tooltip } from "@plane/propel/tooltip"; import { Tooltip } from "@plane/propel/tooltip";
import { ICycle, TCycleGroups } from "@plane/types"; import { ICycle, TCycleGroups } from "@plane/types";
@ -217,7 +217,7 @@ export const CycleListItemAction: FC<Props> = observer((props) => {
</button> </button>
{showIssueCount && ( {showIssueCount && (
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<LayersIcon className="h-4 w-4 text-custom-text-300" /> <WorkItemsIcon className="h-4 w-4 text-custom-text-300" />
<span className="text-xs text-custom-text-300">{cycleDetails.total_issues}</span> <span className="text-xs text-custom-text-300">{cycleDetails.total_issues}</span>
</div> </div>
)} )}

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

@ -5,7 +5,7 @@ import { observer } from "mobx-react";
import { useParams } from "next/navigation"; import { useParams } from "next/navigation";
import { AlertCircle, Search, X } from "lucide-react"; import { AlertCircle, Search, X } from "lucide-react";
import { Dialog, Transition } from "@headlessui/react"; import { Dialog, Transition } from "@headlessui/react";
import { ContrastIcon, TransferIcon } from "@plane/propel/icons"; import { CycleIcon, TransferIcon } from "@plane/propel/icons";
import { TOAST_TYPE, setToast } from "@plane/propel/toast"; import { TOAST_TYPE, setToast } from "@plane/propel/toast";
import { EIssuesStoreType } from "@plane/types"; import { EIssuesStoreType } from "@plane/types";
import { useCycle } from "@/hooks/store/use-cycle"; import { useCycle } from "@/hooks/store/use-cycle";
@ -147,7 +147,7 @@ export const TransferIssuesModal: React.FC<Props> = observer((props) => {
handleClose(); handleClose();
}} }}
> >
<ContrastIcon className="h-5 w-5" /> <CycleIcon className="h-5 w-5" />
<div className="flex w-full justify-between truncate"> <div className="flex w-full justify-between truncate">
<span className="truncate">{cycleDetails?.name}</span> <span className="truncate">{cycleDetails?.name}</span>
{cycleDetails.status && ( {cycleDetails.status && (

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

@ -11,7 +11,7 @@ import { Combobox } from "@headlessui/react";
// i18n // i18n
import { useTranslation } from "@plane/i18n"; import { useTranslation } from "@plane/i18n";
// icon // icon
import { ContrastIcon, CycleGroupIcon } from "@plane/propel/icons"; import { CycleGroupIcon, CycleIcon } from "@plane/propel/icons";
import { TCycleGroups } from "@plane/types"; import { TCycleGroups } from "@plane/types";
// ui // ui
// store hooks // store hooks
@ -110,7 +110,7 @@ export const CycleOptions: FC<CycleOptionsProps> = observer((props) => {
query: t("cycle.no_cycle"), query: t("cycle.no_cycle"),
content: ( content: (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<ContrastIcon className="h-3 w-3 flex-shrink-0" /> <CycleIcon className="h-3 w-3 flex-shrink-0" />
<span className="flex-grow truncate">{t("cycle.no_cycle")}</span> <span className="flex-grow truncate">{t("cycle.no_cycle")}</span>
</div> </div>
), ),

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

@ -5,7 +5,7 @@ import { observer } from "mobx-react";
import { ChevronDown } from "lucide-react"; import { ChevronDown } from "lucide-react";
import { useTranslation } from "@plane/i18n"; import { useTranslation } from "@plane/i18n";
// ui // ui
import { ContrastIcon } from "@plane/propel/icons"; import { CycleIcon } from "@plane/propel/icons";
import { ComboDropDown } from "@plane/ui"; import { ComboDropDown } from "@plane/ui";
// helpers // helpers
import { cn } from "@plane/utils"; import { cn } from "@plane/utils";
@ -120,7 +120,7 @@ export const CycleDropdown: React.FC<Props> = observer((props) => {
variant={buttonVariant} variant={buttonVariant}
renderToolTipByDefault={renderByDefault} renderToolTipByDefault={renderByDefault}
> >
{!hideIcon && <ContrastIcon className="h-3 w-3 flex-shrink-0" />} {!hideIcon && <CycleIcon className="h-3 w-3 flex-shrink-0" />}
{BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (!!selectedName || !!placeholder) && ( {BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (!!selectedName || !!placeholder) && (
<span className="max-w-40 flex-grow truncate">{selectedName ?? placeholder}</span> <span className="max-w-40 flex-grow truncate">{selectedName ?? placeholder}</span>
)} )}

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

@ -2,7 +2,7 @@
import { ChevronDown, X } from "lucide-react"; import { ChevronDown, X } from "lucide-react";
// plane imports // plane imports
import { DiceIcon } from "@plane/propel/icons"; import { ModuleIcon } from "@plane/propel/icons";
import { Tooltip } from "@plane/propel/tooltip"; import { Tooltip } from "@plane/propel/tooltip";
import { cn } from "@plane/utils"; import { cn } from "@plane/utils";
// hooks // hooks
@ -46,7 +46,7 @@ export const ModuleButtonContent: React.FC<ModuleButtonContentProps> = (props) =
<> <>
{showCount ? ( {showCount ? (
<div className="relative flex items-center max-w-full gap-1"> <div className="relative flex items-center max-w-full gap-1">
{!hideIcon && <DiceIcon className="h-3 w-3 flex-shrink-0" />} {!hideIcon && <ModuleIcon className="h-3 w-3 flex-shrink-0" />}
{(value.length > 0 || !!placeholder) && ( {(value.length > 0 || !!placeholder) && (
<div className="max-w-40 flex-grow truncate"> <div className="max-w-40 flex-grow truncate">
{value.length > 0 {value.length > 0
@ -69,7 +69,7 @@ export const ModuleButtonContent: React.FC<ModuleButtonContentProps> = (props) =
className className
)} )}
> >
{!hideIcon && <DiceIcon className="h-2.5 w-2.5 flex-shrink-0" />} {!hideIcon && <ModuleIcon className="h-2.5 w-2.5 flex-shrink-0" />}
{!hideText && ( {!hideText && (
<Tooltip <Tooltip
tooltipHeading="Title" tooltipHeading="Title"
@ -106,7 +106,7 @@ export const ModuleButtonContent: React.FC<ModuleButtonContentProps> = (props) =
</div> </div>
) : ( ) : (
<> <>
{!hideIcon && <DiceIcon className="h-3 w-3 flex-shrink-0" />} {!hideIcon && <ModuleIcon className="h-3 w-3 flex-shrink-0" />}
<span className="flex-grow truncate text-left">{placeholder}</span> <span className="flex-grow truncate text-left">{placeholder}</span>
</> </>
)} )}
@ -118,7 +118,7 @@ export const ModuleButtonContent: React.FC<ModuleButtonContentProps> = (props) =
else else
return ( return (
<> <>
{!hideIcon && <DiceIcon className="h-3 w-3 flex-shrink-0" />} {!hideIcon && <ModuleIcon className="h-3 w-3 flex-shrink-0" />}
{!hideText && ( {!hideText && (
<span className="flex-grow truncate text-left">{value ? getModuleById(value)?.name : placeholder}</span> <span className="flex-grow truncate text-left">{value ? getModuleById(value)?.name : placeholder}</span>
)} )}

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

@ -8,7 +8,7 @@ import { Check, Search } from "lucide-react";
import { Combobox } from "@headlessui/react"; import { Combobox } from "@headlessui/react";
// plane imports // plane imports
import { useTranslation } from "@plane/i18n"; import { useTranslation } from "@plane/i18n";
import { DiceIcon } from "@plane/propel/icons"; import { ModuleIcon } from "@plane/propel/icons";
import { IModule } from "@plane/types"; import { IModule } from "@plane/types";
import { cn } from "@plane/utils"; import { cn } from "@plane/utils";
// hooks // hooks
@ -85,7 +85,7 @@ export const ModuleOptions = observer((props: Props) => {
query: `${moduleDetails?.name}`, query: `${moduleDetails?.name}`,
content: ( content: (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<DiceIcon className="h-3 w-3 flex-shrink-0" /> <ModuleIcon className="h-3 w-3 flex-shrink-0" />
<span className="flex-grow truncate">{moduleDetails?.name}</span> <span className="flex-grow truncate">{moduleDetails?.name}</span>
</div> </div>
), ),
@ -97,7 +97,7 @@ export const ModuleOptions = observer((props: Props) => {
query: t("module.no_module"), query: t("module.no_module"),
content: ( content: (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<DiceIcon className="h-3 w-3 flex-shrink-0" /> <ModuleIcon className="h-3 w-3 flex-shrink-0" />
<span className="flex-grow truncate">{t("module.no_module")}</span> <span className="flex-grow truncate">{t("module.no_module")}</span>
</div> </div>
), ),

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

@ -1,10 +1,11 @@
import { ReactNode, useRef, useState } from "react"; import { ReactNode, useRef, useState } from "react";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import { usePopper } from "react-popper"; import { usePopper } from "react-popper";
import { Briefcase, Check, ChevronDown, Search } from "lucide-react"; import { Check, ChevronDown, Search } from "lucide-react";
import { Combobox } from "@headlessui/react"; import { Combobox } from "@headlessui/react";
// plane imports // plane imports
import { useTranslation } from "@plane/i18n"; import { useTranslation } from "@plane/i18n";
import { ProjectIcon } from "@plane/propel/icons";
import { ComboDropDown } from "@plane/ui"; import { ComboDropDown } from "@plane/ui";
import { cn } from "@plane/utils"; import { cn } from "@plane/utils";
// components // components
@ -154,7 +155,7 @@ export const ProjectDropdownBase: React.FC<Props> = observer((props) => {
return projectDetails?.logo_props ? renderIcon(projectDetails.logo_props) : null; return projectDetails?.logo_props ? renderIcon(projectDetails.logo_props) : null;
}) })
) : ( ) : (
<Briefcase className="size-3 text-custom-text-300" /> <ProjectIcon className="size-3 text-custom-text-300" />
)} )}
</div> </div>
); );

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

@ -3,11 +3,12 @@ import React from "react";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import Link from "next/link"; import Link from "next/link";
import { useParams } from "next/navigation"; import { useParams } from "next/navigation";
import { Briefcase, Check, Hotel, Users, X } from "lucide-react"; import { Check, Hotel, Users, X } from "lucide-react";
// plane ui // plane ui
import { EUserPermissions, EUserPermissionsLevel, PROJECT_TRACKER_ELEMENTS } from "@plane/constants"; import { EUserPermissions, EUserPermissionsLevel, PROJECT_TRACKER_ELEMENTS } from "@plane/constants";
import { useLocalStorage } from "@plane/hooks"; import { useLocalStorage } from "@plane/hooks";
import { useTranslation } from "@plane/i18n"; import { useTranslation } from "@plane/i18n";
import { ProjectIcon } from "@plane/propel/icons";
import { cn, getFileURL } from "@plane/utils"; import { cn, getFileURL } from "@plane/utils";
// helpers // helpers
// hooks // hooks
@ -47,7 +48,7 @@ export const NoProjectsEmptyState = observer(() => {
id: "create-project", id: "create-project",
title: "home.empty.create_project.title", title: "home.empty.create_project.title",
description: "home.empty.create_project.description", description: "home.empty.create_project.description",
icon: <Briefcase className="size-4" />, icon: <ProjectIcon className="size-4" />,
flag: "projects", flag: "projects",
cta: { cta: {
text: "home.empty.create_project.cta", text: "home.empty.create_project.cta",

12
apps/web/core/components/home/widgets/empty-states/recents.tsx
View file

@ -1,27 +1,27 @@
import { Briefcase, FileText, History } from "lucide-react"; import { History } from "lucide-react";
import { useTranslation } from "@plane/i18n"; import { useTranslation } from "@plane/i18n";
import { LayersIcon } from "@plane/propel/icons"; import { PageIcon, ProjectIcon, WorkItemsIcon } from "@plane/propel/icons";
const getDisplayContent = (type: string) => { const getDisplayContent = (type: string) => {
switch (type) { switch (type) {
case "project": case "project":
return { return {
icon: <Briefcase size={30} className="text-custom-text-400/40" />, icon: <ProjectIcon height={30} width={30} className="text-custom-text-400/40" />,
text: "home.recents.empty.project", text: "home.recents.empty.project",
}; };
case "page": case "page":
return { return {
icon: <FileText size={30} className="text-custom-text-400/40" />, icon: <PageIcon height={30} width={30} className="text-custom-text-400/40" />,
text: "home.recents.empty.page", text: "home.recents.empty.page",
}; };
case "issue": case "issue":
return { return {
icon: <LayersIcon className="text-custom-text-400/40 w-[30px] h-[30px]" />, icon: <WorkItemsIcon className="text-custom-text-400/40 w-[30px] h-[30px]" />,
text: "home.recents.empty.issue", text: "home.recents.empty.issue",
}; };
default: default:
return { return {
icon: <History size={30} className="text-custom-text-400/40" />, icon: <History height={30} width={30} className="text-custom-text-400/40" />,
text: "home.recents.empty.default", text: "home.recents.empty.default",
}; };
} }

9
apps/web/core/components/home/widgets/recents/index.tsx
View file

@ -3,10 +3,9 @@
import { useRef, useState } from "react"; import { useRef, useState } from "react";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import useSWR from "swr"; import useSWR from "swr";
import { Briefcase, FileText } from "lucide-react";
import { useTranslation } from "@plane/i18n"; import { useTranslation } from "@plane/i18n";
// plane types // plane types
import { LayersIcon } from "@plane/propel/icons"; import { PageIcon, ProjectIcon, WorkItemsIcon } from "@plane/propel/icons";
import { TActivityEntityData, THomeWidgetProps, TRecentActivityFilterKeys } from "@plane/types"; import { TActivityEntityData, THomeWidgetProps, TRecentActivityFilterKeys } from "@plane/types";
// plane ui // plane ui
// components // components
@ -24,9 +23,9 @@ const WIDGET_KEY = EWidgetKeys.RECENT_ACTIVITY;
const workspaceService = new WorkspaceService(); const workspaceService = new WorkspaceService();
const filters: { name: TRecentActivityFilterKeys; icon?: React.ReactNode; i18n_key: string }[] = [ const filters: { name: TRecentActivityFilterKeys; icon?: React.ReactNode; i18n_key: string }[] = [
{ name: "all item", i18n_key: "home.recents.filters.all" }, { name: "all item", i18n_key: "home.recents.filters.all" },
{ name: "issue", icon: <LayersIcon className="w-4 h-4" />, i18n_key: "home.recents.filters.issues" }, { name: "issue", icon: <WorkItemsIcon className="w-4 h-4" />, i18n_key: "home.recents.filters.issues" },
{ name: "page", icon: <FileText size={16} />, i18n_key: "home.recents.filters.pages" }, { name: "page", icon: <PageIcon height={16} width={16} />, i18n_key: "home.recents.filters.pages" },
{ name: "project", icon: <Briefcase size={16} />, i18n_key: "home.recents.filters.projects" }, { name: "project", icon: <ProjectIcon height={16} width={16} />, i18n_key: "home.recents.filters.projects" },
]; ];
type TRecentWidgetProps = THomeWidgetProps & { type TRecentWidgetProps = THomeWidgetProps & {

4
apps/web/core/components/home/widgets/recents/issue.tsx
View file

@ -1,6 +1,6 @@
import { observer } from "mobx-react"; import { observer } from "mobx-react";
// plane types // plane types
import { LayersIcon, PriorityIcon, StateGroupIcon } from "@plane/propel/icons"; import { PriorityIcon, StateGroupIcon, WorkItemsIcon } from "@plane/propel/icons";
import { Tooltip } from "@plane/propel/tooltip"; import { Tooltip } from "@plane/propel/tooltip";
import { EIssueServiceType, TActivityEntityData, TIssueEntityData } from "@plane/types"; import { EIssueServiceType, TActivityEntityData, TIssueEntityData } from "@plane/types";
// plane ui // plane ui
@ -77,7 +77,7 @@ export const RecentIssue = observer((props: BlockProps) => {
) : ( ) : (
<div className="flex gap-2 items-center justify-center"> <div className="flex gap-2 items-center justify-center">
<div className="flex-shrink-0 grid place-items-center rounded bg-custom-background-80 size-8"> <div className="flex-shrink-0 grid place-items-center rounded bg-custom-background-80 size-8">
<LayersIcon className="size-4 text-custom-text-350" /> <WorkItemsIcon className="size-4 text-custom-text-350" />
</div> </div>
<div className="font-medium text-custom-text-400 text-sm whitespace-nowrap"> <div className="font-medium text-custom-text-400 text-sm whitespace-nowrap">
{issueDetails?.project_identifier}-{issueDetails?.sequence_id} {issueDetails?.project_identifier}-{issueDetails?.sequence_id}

4
apps/web/core/components/home/widgets/recents/page.tsx
View file

@ -1,5 +1,5 @@
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { FileText } from "lucide-react"; import { PageIcon } from "@plane/propel/icons";
// plane import // plane import
import type { TActivityEntityData, TPageEntityData } from "@plane/types"; import type { TActivityEntityData, TPageEntityData } from "@plane/types";
import { Avatar } from "@plane/ui"; import { Avatar } from "@plane/ui";
@ -43,7 +43,7 @@ export const RecentPage = (props: BlockProps) => {
{pageDetails?.logo_props?.in_use ? ( {pageDetails?.logo_props?.in_use ? (
<Logo logo={pageDetails?.logo_props} size={16} type="lucide" /> <Logo logo={pageDetails?.logo_props} size={16} type="lucide" />
) : ( ) : (
<FileText className="size-4 text-custom-text-350" /> <PageIcon className="size-4 text-custom-text-350" />
)} )}
</div> </div>
{pageDetails?.project_identifier && ( {pageDetails?.project_identifier && (

4
apps/web/core/components/inbox/root.tsx
View file

@ -3,7 +3,7 @@ import { observer } from "mobx-react";
import { PanelLeft } from "lucide-react"; import { PanelLeft } from "lucide-react";
// plane imports // plane imports
import { useTranslation } from "@plane/i18n"; import { useTranslation } from "@plane/i18n";
import { Intake } from "@plane/propel/icons"; import { IntakeIcon } from "@plane/propel/icons";
import { EInboxIssueCurrentTab } from "@plane/types"; import { EInboxIssueCurrentTab } from "@plane/types";
import { cn } from "@plane/utils"; import { cn } from "@plane/utils";
// components // components
@ -61,7 +61,7 @@ export const InboxIssueRoot: FC<TInboxIssueRoot> = observer((props) => {
if (error && error?.status === "init-error") if (error && error?.status === "init-error")
return ( return (
<div className="relative w-full h-full flex flex-col gap-3 justify-center items-center"> <div className="relative w-full h-full flex flex-col gap-3 justify-center items-center">
<Intake className="size-[60px]" strokeWidth={1.5} /> <IntakeIcon className="size-[60px]" strokeWidth={1.5} />
<div className="text-custom-text-200">{error?.message}</div> <div className="text-custom-text-200">{error?.message}</div>
</div> </div>
); );

2
apps/web/core/components/instance/not-ready-view.tsx
View file

@ -5,8 +5,8 @@ import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import { useTheme } from "next-themes"; import { useTheme } from "next-themes";
import { GOD_MODE_URL } from "@plane/constants"; import { GOD_MODE_URL } from "@plane/constants";
import { PlaneLockup } from "@plane/propel/icons";
import { Button } from "@plane/propel/button"; import { Button } from "@plane/propel/button";
import { PlaneLockup } from "@plane/propel/icons";
// helpers // helpers
// images // images
// assets // assets

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

@ -1,9 +1,10 @@
"use client"; "use client";
import React, { FC } from "react"; import React, { FC } from "react";
import { Layers, Link, Paperclip, Waypoints } from "lucide-react"; import { Link, Paperclip, Waypoints } from "lucide-react";
// plane imports
import { useTranslation } from "@plane/i18n"; import { useTranslation } from "@plane/i18n";
import { ViewsIcon } from "@plane/propel/icons";
// plane imports
import { TIssueServiceType, TWorkItemWidgets } from "@plane/types"; import { TIssueServiceType, TWorkItemWidgets } from "@plane/types";
// plane web imports // plane web imports
import { WorkItemAdditionalWidgetActionButtons } from "@/plane-web/components/issues/issue-detail-widgets/action-buttons"; import { WorkItemAdditionalWidgetActionButtons } from "@/plane-web/components/issues/issue-detail-widgets/action-buttons";
@ -36,7 +37,7 @@ export const IssueDetailWidgetActionButtons: FC<Props> = (props) => {
customButton={ customButton={
<IssueDetailWidgetButton <IssueDetailWidgetButton
title={t("issue.add.sub_issue")} title={t("issue.add.sub_issue")}
icon={<Layers className="h-3.5 w-3.5 flex-shrink-0" strokeWidth={2} />} icon={<ViewsIcon className="h-3.5 w-3.5 flex-shrink-0" strokeWidth={2} />}
disabled={disabled} disabled={disabled}
/> />
} }

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

@ -1,10 +1,11 @@
"use client"; "use client";
import React, { FC } from "react"; import React, { FC } from "react";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import { LayersIcon, Plus } from "lucide-react"; import { Plus } from "lucide-react";
// plane imports // plane imports
import { WORK_ITEM_TRACKER_EVENTS } from "@plane/constants"; import { WORK_ITEM_TRACKER_EVENTS } from "@plane/constants";
import { useTranslation } from "@plane/i18n"; import { useTranslation } from "@plane/i18n";
import { WorkItemsIcon } from "@plane/propel/icons";
import { TIssue, TIssueServiceType } from "@plane/types"; import { TIssue, TIssueServiceType } from "@plane/types";
import { CustomMenu } from "@plane/ui"; import { CustomMenu } from "@plane/ui";
// hooks // hooks
@ -73,7 +74,7 @@ export const SubIssuesActionButton: FC<Props> = observer((props) => {
}, },
{ {
i18n_label: "common.add_existing", i18n_label: "common.add_existing",
icon: <LayersIcon className="h-3 w-3" />, icon: <WorkItemsIcon className="h-3 w-3" />,
onClick: handleAddExisting, onClick: handleAddExisting,
}, },
]; ];

4
apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/cycle.tsx
View file

@ -3,7 +3,7 @@
import { FC } from "react"; import { FC } from "react";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
// hooks // hooks
import { ContrastIcon } from "@plane/propel/icons"; import { CycleIcon } from "@plane/propel/icons";
import { useIssueDetail } from "@/hooks/store/use-issue-detail"; import { useIssueDetail } from "@/hooks/store/use-issue-detail";
// components // components
import { IssueActivityBlockComponent } from "./"; import { IssueActivityBlockComponent } from "./";
@ -23,7 +23,7 @@ export const IssueCycleActivity: FC<TIssueCycleActivity> = observer((props) => {
if (!activity) return <></>; if (!activity) return <></>;
return ( return (
<IssueActivityBlockComponent <IssueActivityBlockComponent
icon={<ContrastIcon className="h-4 w-4 flex-shrink-0 text-custom-text-200" />} icon={<CycleIcon className="h-4 w-4 flex-shrink-0 text-custom-text-200" />}
activityId={activityId} activityId={activityId}
ends={ends} ends={ends}
> >

4
apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/default.tsx
View file

@ -3,7 +3,7 @@
import { FC } from "react"; import { FC } from "react";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
// plane imports // plane imports
import { LayersIcon } from "@plane/propel/icons"; import { WorkItemsIcon } from "@plane/propel/icons";
import { EInboxIssueSource } from "@plane/types"; import { EInboxIssueSource } from "@plane/types";
// hooks // hooks
import { capitalizeFirstLetter } from "@plane/utils"; import { capitalizeFirstLetter } from "@plane/utils";
@ -28,7 +28,7 @@ export const IssueDefaultActivity: FC<TIssueDefaultActivity> = observer((props)
return ( return (
<IssueActivityBlockComponent <IssueActivityBlockComponent
activityId={activityId} activityId={activityId}
icon={<LayersIcon width={14} height={14} className="text-custom-text-200" aria-hidden="true" />} icon={<WorkItemsIcon width={14} height={14} className="text-custom-text-200" aria-hidden="true" />}
ends={ends} ends={ends}
> >
<> <>

4
apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/inbox.tsx
View file

@ -1,7 +1,7 @@
import { FC } from "react"; import { FC } from "react";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
// hooks // hooks
import { Intake } from "@plane/propel/icons"; import { IntakeIcon } from "@plane/propel/icons";
import { useIssueDetail } from "@/hooks/store/use-issue-detail"; import { useIssueDetail } from "@/hooks/store/use-issue-detail";
// components // components
import { IssueActivityBlockComponent } from "./"; import { IssueActivityBlockComponent } from "./";
@ -36,7 +36,7 @@ export const IssueInboxActivity: FC<TIssueInboxActivity> = observer((props) => {
if (!activity) return <></>; if (!activity) return <></>;
return ( return (
<IssueActivityBlockComponent <IssueActivityBlockComponent
icon={<Intake className="h-4 w-4 flex-shrink-0 text-custom-text-200" />} icon={<IntakeIcon className="h-4 w-4 flex-shrink-0 text-custom-text-200" />}
activityId={activityId} activityId={activityId}
ends={ends} ends={ends}
> >

4
apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/module.tsx
View file

@ -3,7 +3,7 @@
import { FC } from "react"; import { FC } from "react";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
// hooks // hooks
import { DiceIcon } from "@plane/propel/icons"; import { ModuleIcon } from "@plane/propel/icons";
import { useIssueDetail } from "@/hooks/store/use-issue-detail"; import { useIssueDetail } from "@/hooks/store/use-issue-detail";
// components // components
import { IssueActivityBlockComponent } from "./"; import { IssueActivityBlockComponent } from "./";
@ -23,7 +23,7 @@ export const IssueModuleActivity: FC<TIssueModuleActivity> = observer((props) =>
if (!activity) return <></>; if (!activity) return <></>;
return ( return (
<IssueActivityBlockComponent <IssueActivityBlockComponent
icon={<DiceIcon className="h-4 w-4 flex-shrink-0 text-custom-text-200" />} icon={<ModuleIcon className="h-4 w-4 flex-shrink-0 text-custom-text-200" />}
activityId={activityId} activityId={activityId}
ends={ends} ends={ends}
> >

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

@ -6,7 +6,7 @@ import { CalendarCheck2, CalendarClock, LayoutPanelTop, Signal, Tag, Triangle, U
// i18n // i18n
import { useTranslation } from "@plane/i18n"; import { useTranslation } from "@plane/i18n";
// ui // ui
import { ContrastIcon, DiceIcon, DoubleCircleIcon } from "@plane/propel/icons"; import { CycleIcon, DoubleCircleIcon, ModuleIcon } from "@plane/propel/icons";
import { cn, getDate, renderFormattedPayloadDate, shouldHighlightIssueDueDate } from "@plane/utils"; import { cn, getDate, renderFormattedPayloadDate, shouldHighlightIssueDueDate } from "@plane/utils";
// components // components
import { DateDropdown } from "@/components/dropdowns/date"; import { DateDropdown } from "@/components/dropdowns/date";
@ -227,7 +227,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
{projectDetails?.module_view && ( {projectDetails?.module_view && (
<div className="flex min-h-8 gap-2"> <div className="flex min-h-8 gap-2">
<div className="flex w-2/5 flex-shrink-0 gap-1 pt-2 text-sm text-custom-text-300"> <div className="flex w-2/5 flex-shrink-0 gap-1 pt-2 text-sm text-custom-text-300">
<DiceIcon className="h-4 w-4 flex-shrink-0" /> <ModuleIcon className="h-4 w-4 flex-shrink-0" />
<span>{t("common.modules")}</span> <span>{t("common.modules")}</span>
</div> </div>
<IssueModuleSelect <IssueModuleSelect
@ -244,7 +244,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
{projectDetails?.cycle_view && ( {projectDetails?.cycle_view && (
<div className="flex h-8 items-center gap-2"> <div className="flex h-8 items-center gap-2">
<div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300"> <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
<ContrastIcon className="h-4 w-4 flex-shrink-0" /> <CycleIcon className="h-4 w-4 flex-shrink-0" />
<span>{t("common.cycle")}</span> <span>{t("common.cycle")}</span>
</div> </div>
<IssueCycleSelect <IssueCycleSelect

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

@ -3,7 +3,7 @@
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import { X } from "lucide-react"; import { X } from "lucide-react";
// hooks // hooks
import { DiceIcon } from "@plane/propel/icons"; import { ModuleIcon } from "@plane/propel/icons";
import { useModule } from "@/hooks/store/use-module"; import { useModule } from "@/hooks/store/use-module";
// ui // ui
@ -27,7 +27,7 @@ export const AppliedModuleFilters: React.FC<Props> = observer((props) => {
return ( return (
<div key={moduleId} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs truncate"> <div key={moduleId} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs truncate">
<DiceIcon className="h-3 w-3 flex-shrink-0" /> <ModuleIcon className="h-3 w-3 flex-shrink-0" />
<span className="normal-case truncate">{moduleDetails.name}</span> <span className="normal-case truncate">{moduleDetails.name}</span>
{editable && ( {editable && (
<button <button

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

@ -5,7 +5,7 @@ import { sortBy } from "lodash-es";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import { useParams } from "next/navigation"; import { useParams } from "next/navigation";
// components // components
import { DiceIcon } from "@plane/propel/icons"; import { ModuleIcon } from "@plane/propel/icons";
import { Loader } from "@plane/ui"; import { Loader } from "@plane/ui";
import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters"; import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
import { useModule } from "@/hooks/store/use-module"; import { useModule } from "@/hooks/store/use-module";
@ -66,7 +66,7 @@ export const FilterModule: React.FC<Props> = observer((props) => {
key={cycle.id} key={cycle.id}
isChecked={appliedFilters?.includes(cycle.id) ? true : false} isChecked={appliedFilters?.includes(cycle.id) ? true : false}
onClick={() => handleUpdate(cycle.id)} onClick={() => handleUpdate(cycle.id)}
icon={<DiceIcon className="h-3 w-3 flex-shrink-0" />} icon={<ModuleIcon className="h-3 w-3 flex-shrink-0" />}
title={cycle.name} title={cycle.name}
/> />
))} ))}

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

@ -5,11 +5,12 @@ import { xor } from "lodash-es";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import { useParams } from "next/navigation"; import { useParams } from "next/navigation";
// icons // icons
import { CalendarCheck2, CalendarClock, Layers, Link, Paperclip } from "lucide-react"; import { CalendarCheck2, CalendarClock, Link, Paperclip } from "lucide-react";
// types // types
import { WORK_ITEM_TRACKER_EVENTS } from "@plane/constants"; import { WORK_ITEM_TRACKER_EVENTS } from "@plane/constants";
// i18n // i18n
import { useTranslation } from "@plane/i18n"; import { useTranslation } from "@plane/i18n";
import { ViewsIcon } from "@plane/propel/icons";
import { Tooltip } from "@plane/propel/tooltip"; import { Tooltip } from "@plane/propel/tooltip";
import { TIssue, IIssueDisplayProperties, TIssuePriorities } from "@plane/types"; import { TIssue, IIssueDisplayProperties, TIssuePriorities } from "@plane/types";
// ui // ui
@ -465,7 +466,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
} }
)} )}
> >
<Layers className="h-3 w-3 flex-shrink-0" strokeWidth={2} /> <ViewsIcon className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
<div className="text-xs">{subIssueCount}</div> <div className="text-xs">{subIssueCount}</div>
</div> </div>
</Tooltip> </Tooltip>

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

@ -7,7 +7,7 @@ import scrollIntoView from "smooth-scroll-into-view-if-needed";
import { ContrastIcon } from "lucide-react"; import { ContrastIcon } from "lucide-react";
// plane types // plane types
import { EIconSize, ISSUE_PRIORITIES, STATE_GROUPS } from "@plane/constants"; import { EIconSize, ISSUE_PRIORITIES, STATE_GROUPS } from "@plane/constants";
import { CycleGroupIcon, DiceIcon, PriorityIcon, StateGroupIcon, ISvgIcons } from "@plane/propel/icons"; import { CycleGroupIcon, ISvgIcons, ModuleIcon, PriorityIcon, StateGroupIcon } from "@plane/propel/icons";
import { import {
EIssuesStoreType, EIssuesStoreType,
GroupByColumnTypes, GroupByColumnTypes,
@ -192,14 +192,14 @@ const getModuleColumns = (): IGroupByColumn[] | undefined => {
modules.push({ modules.push({
id: module.id, id: module.id,
name: module.name, name: module.name,
icon: <DiceIcon className="h-3.5 w-3.5" />, icon: <ModuleIcon className="h-3.5 w-3.5" />,
payload: { module_ids: [module.id] }, payload: { module_ids: [module.id] },
}); });
}); });
modules.push({ modules.push({
id: "None", id: "None",
name: "None", name: "None",
icon: <DiceIcon className="h-3.5 w-3.5" />, icon: <ModuleIcon className="h-3.5 w-3.5" />,
payload: {}, payload: {},
}); });
return modules; return modules;

6
apps/web/core/components/issues/peek-overview/properties.tsx
View file

@ -6,7 +6,7 @@ import { Signal, Tag, Triangle, LayoutPanelTop, CalendarClock, CalendarCheck2, U
// i18n // i18n
import { useTranslation } from "@plane/i18n"; import { useTranslation } from "@plane/i18n";
// ui icons // ui icons
import { DiceIcon, DoubleCircleIcon, ContrastIcon } from "@plane/propel/icons"; import { CycleIcon, DoubleCircleIcon, ModuleIcon } from "@plane/propel/icons";
import { cn, getDate, renderFormattedPayloadDate, shouldHighlightIssueDueDate } from "@plane/utils"; import { cn, getDate, renderFormattedPayloadDate, shouldHighlightIssueDueDate } from "@plane/utils";
// components // components
import { DateDropdown } from "@/components/dropdowns/date"; import { DateDropdown } from "@/components/dropdowns/date";
@ -229,7 +229,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
{projectDetails?.module_view && ( {projectDetails?.module_view && (
<div className="flex w-full items-center gap-3 min-h-8 h-full"> <div className="flex w-full items-center gap-3 min-h-8 h-full">
<div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300"> <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
<DiceIcon className="h-4 w-4 flex-shrink-0" /> <ModuleIcon className="h-4 w-4 flex-shrink-0" />
<span>{t("common.modules")}</span> <span>{t("common.modules")}</span>
</div> </div>
<IssueModuleSelect <IssueModuleSelect
@ -246,7 +246,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
{projectDetails?.cycle_view && ( {projectDetails?.cycle_view && (
<div className="flex w-full items-center gap-3 h-8"> <div className="flex w-full items-center gap-3 h-8">
<div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300"> <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
<ContrastIcon className="h-4 w-4 flex-shrink-0" /> <CycleIcon className="h-4 w-4 flex-shrink-0" />
<span>{t("common.cycle")}</span> <span>{t("common.cycle")}</span>
</div> </div>
<IssueCycleSelect <IssueCycleSelect

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

@ -16,7 +16,7 @@ import {
} from "@plane/constants"; } from "@plane/constants";
// plane types // plane types
import { useTranslation } from "@plane/i18n"; import { useTranslation } from "@plane/i18n";
import { LayersIcon, ModuleStatusIcon } from "@plane/propel/icons"; import { ModuleStatusIcon, WorkItemsIcon } from "@plane/propel/icons";
import { TOAST_TYPE, setToast } from "@plane/propel/toast"; import { TOAST_TYPE, setToast } from "@plane/propel/toast";
import { ILinkDetails, IModule, ModuleLink } from "@plane/types"; import { ILinkDetails, IModule, ModuleLink } from "@plane/types";
// plane ui // plane ui
@ -396,7 +396,7 @@ export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
</div> </div>
<div className="flex items-center justify-start gap-1"> <div className="flex items-center justify-start gap-1">
<div className="flex w-2/5 items-center justify-start gap-2 text-custom-text-300"> <div className="flex w-2/5 items-center justify-start gap-2 text-custom-text-300">
<LayersIcon className="h-4 w-4" /> <WorkItemsIcon className="h-4 w-4" />
<span className="text-base">{t("issues")}</span> <span className="text-base">{t("issues")}</span>
</div> </div>
<div className="flex h-7 w-3/5 items-center"> <div className="flex h-7 w-3/5 items-center">
@ -410,7 +410,7 @@ export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
{isEstimatePointValid && ( {isEstimatePointValid && (
<div className="flex items-center justify-start gap-1"> <div className="flex items-center justify-start gap-1">
<div className="flex w-2/5 items-center justify-start gap-2 text-custom-text-300"> <div className="flex w-2/5 items-center justify-start gap-2 text-custom-text-300">
<LayersIcon className="h-4 w-4" /> <WorkItemsIcon className="h-4 w-4" />
<span className="text-base">{t("points")}</span> <span className="text-base">{t("points")}</span>
</div> </div>
<div className="flex h-7 w-3/5 items-center"> <div className="flex h-7 w-3/5 items-center">

4
apps/web/core/components/modules/module-card-item.tsx
View file

@ -16,7 +16,7 @@ import {
MODULE_TRACKER_ELEMENTS, MODULE_TRACKER_ELEMENTS,
} from "@plane/constants"; } from "@plane/constants";
import { useLocalStorage } from "@plane/hooks"; import { useLocalStorage } from "@plane/hooks";
import { LayersIcon } from "@plane/propel/icons"; import { WorkItemsIcon } from "@plane/propel/icons";
import { TOAST_TYPE, setPromiseToast, setToast } from "@plane/propel/toast"; import { TOAST_TYPE, setPromiseToast, setToast } from "@plane/propel/toast";
import { Tooltip } from "@plane/propel/tooltip"; import { Tooltip } from "@plane/propel/tooltip";
import { IModule } from "@plane/types"; import { IModule } from "@plane/types";
@ -232,7 +232,7 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-3">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center gap-1.5 text-custom-text-200"> <div className="flex items-center gap-1.5 text-custom-text-200">
<LayersIcon className="h-4 w-4 text-custom-text-300" /> <WorkItemsIcon className="h-4 w-4 text-custom-text-300" />
<span className="text-xs text-custom-text-300">{issueCount ?? "0 Work item"}</span> <span className="text-xs text-custom-text-300">{issueCount ?? "0 Work item"}</span>
</div> </div>
{moduleLeadDetails ? ( {moduleLeadDetails ? (

5
apps/web/core/components/onboarding/steps/role/root.tsx
View file

@ -3,10 +3,11 @@
import { FC } from "react"; import { FC } from "react";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import { Controller, useForm } from "react-hook-form"; import { Controller, useForm } from "react-hook-form";
import { Box, Check, PenTool, Rocket, Monitor, RefreshCw, Layers } from "lucide-react"; import { Box, Check, PenTool, Rocket, Monitor, RefreshCw } from "lucide-react";
// plane imports // plane imports
import { ONBOARDING_TRACKER_ELEMENTS, USER_TRACKER_EVENTS } from "@plane/constants"; import { ONBOARDING_TRACKER_ELEMENTS, USER_TRACKER_EVENTS } from "@plane/constants";
import { Button } from "@plane/propel/button"; import { Button } from "@plane/propel/button";
import { ViewsIcon } from "@plane/propel/icons";
import { TOAST_TYPE, setToast } from "@plane/propel/toast"; import { TOAST_TYPE, setToast } from "@plane/propel/toast";
import { EOnboardingSteps, TUserProfile } from "@plane/types"; import { EOnboardingSteps, TUserProfile } from "@plane/types";
// helpers // helpers
@ -23,7 +24,7 @@ type Props = {
const ROLES = [ const ROLES = [
{ id: "product-manager", label: "Product Manager", icon: Box }, { id: "product-manager", label: "Product Manager", icon: Box },
{ id: "engineering-manager", label: "Engineering Manager", icon: Layers }, { id: "engineering-manager", label: "Engineering Manager", icon: ViewsIcon },
{ id: "designer", label: "Designer", icon: PenTool }, { id: "designer", label: "Designer", icon: PenTool },
{ id: "developer", label: "Developer", icon: Monitor }, { id: "developer", label: "Developer", icon: Monitor },
{ id: "founder-executive", label: "Founder/Executive", icon: Rocket }, { id: "founder-executive", label: "Founder/Executive", icon: Rocket },

13
apps/web/core/components/onboarding/tour/sidebar.tsx
View file

@ -1,8 +1,7 @@
"use client"; "use client";
// icons // icons
import { FileText, Layers } from "lucide-react"; import { CycleIcon, ModuleIcon, PageIcon, ViewsIcon, WorkItemsIcon } from "@plane/propel/icons";
import { ContrastIcon, DiceIcon, LayersIcon } from "@plane/propel/icons";
// types // types
import { TTourSteps } from "./root"; import { TTourSteps } from "./root";
@ -14,27 +13,27 @@ const sidebarOptions: {
{ {
key: "work-items", key: "work-items",
label: "Work items", label: "Work items",
Icon: LayersIcon, Icon: WorkItemsIcon,
}, },
{ {
key: "cycles", key: "cycles",
label: "Cycles", label: "Cycles",
Icon: ContrastIcon, Icon: CycleIcon,
}, },
{ {
key: "modules", key: "modules",
label: "Modules", label: "Modules",
Icon: DiceIcon, Icon: ModuleIcon,
}, },
{ {
key: "views", key: "views",
label: "Views", label: "Views",
Icon: Layers, Icon: ViewsIcon,
}, },
{ {
key: "pages", key: "pages",
label: "Pages", label: "Pages",
Icon: FileText, Icon: PageIcon,
}, },
]; ];

4
apps/web/core/components/pages/list/block.tsx
View file

@ -2,7 +2,7 @@
import { FC, useRef } from "react"; import { FC, useRef } from "react";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import { FileText } from "lucide-react"; import { PageIcon } from "@plane/propel/icons";
// plane imports // plane imports
import { getPageName } from "@plane/utils"; import { getPageName } from "@plane/utils";
// components // components
@ -41,7 +41,7 @@ export const PageListBlock: FC<TPageListBlock> = observer((props) => {
{logo_props?.in_use ? ( {logo_props?.in_use ? (
<Logo logo={logo_props} size={16} type="lucide" /> <Logo logo={logo_props} size={16} type="lucide" />
) : ( ) : (
<FileText className="h-4 w-4 text-custom-text-300" /> <PageIcon className="h-4 w-4 text-custom-text-300" />
)} )}
</> </>
} }

5
apps/web/core/components/pages/modals/page-form.tsx
View file

@ -1,11 +1,12 @@
"use client"; "use client";
import { FormEvent, useState } from "react"; import { FormEvent, useState } from "react";
import { FileText, Globe2, Lock, LucideIcon } from "lucide-react"; import { Globe2, Lock, LucideIcon } from "lucide-react";
// plane imports // plane imports
import { ETabIndices, EPageAccess } from "@plane/constants"; import { ETabIndices, EPageAccess } from "@plane/constants";
import { useTranslation } from "@plane/i18n"; import { useTranslation } from "@plane/i18n";
import { Button } from "@plane/propel/button"; import { Button } from "@plane/propel/button";
import { PageIcon } from "@plane/propel/icons";
import type { TPage } from "@plane/types"; import type { TPage } from "@plane/types";
import { EmojiIconPicker, EmojiIconPickerTypes, Input } from "@plane/ui"; import { EmojiIconPicker, EmojiIconPickerTypes, Input } from "@plane/ui";
import { convertHexEmojiToDecimal, getTabIndex } from "@plane/utils"; import { convertHexEmojiToDecimal, getTabIndex } from "@plane/utils";
@ -73,7 +74,7 @@ export const PageForm: React.FC<Props> = (props) => {
{formData?.logo_props?.in_use ? ( {formData?.logo_props?.in_use ? (
<Logo logo={formData?.logo_props} size={18} type="lucide" /> <Logo logo={formData?.logo_props} size={18} type="lucide" />
) : ( ) : (
<FileText className="h-4 w-4 text-custom-text-300" /> <PageIcon className="h-4 w-4 text-custom-text-300" />
)} )}
</> </>
</span> </span>

4
apps/web/core/components/project/header.tsx
View file

@ -2,12 +2,12 @@
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import { usePathname } from "next/navigation"; import { usePathname } from "next/navigation";
import { Briefcase } from "lucide-react";
// i18n // i18n
import { EUserPermissions, EUserPermissionsLevel, PROJECT_TRACKER_ELEMENTS } from "@plane/constants"; import { EUserPermissions, EUserPermissionsLevel, PROJECT_TRACKER_ELEMENTS } from "@plane/constants";
import { useTranslation } from "@plane/i18n"; import { useTranslation } from "@plane/i18n";
// ui // ui
import { Button } from "@plane/propel/button"; import { Button } from "@plane/propel/button";
import { ProjectIcon } from "@plane/propel/icons";
import { Breadcrumbs, Header } from "@plane/ui"; import { Breadcrumbs, Header } from "@plane/ui";
// components // components
import { BreadcrumbLink } from "@/components/common/breadcrumb-link"; import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
@ -42,7 +42,7 @@ export const ProjectsBaseHeader = observer(() => {
component={ component={
<BreadcrumbLink <BreadcrumbLink
label={t("workspace_projects.label", { count: 2 })} label={t("workspace_projects.label", { count: 2 })}
icon={<Briefcase className="h-4 w-4 text-custom-text-300" />} icon={<ProjectIcon className="h-4 w-4 text-custom-text-300" />}
/> />
} }
/> />

4
apps/web/core/components/views/form.tsx
View file

@ -3,12 +3,12 @@
import { useState } from "react"; import { useState } from "react";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import { Controller, useForm } from "react-hook-form"; import { Controller, useForm } from "react-hook-form";
import { Layers } from "lucide-react";
// plane imports // plane imports
import { ETabIndices, ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@plane/constants"; import { ETabIndices, ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@plane/constants";
import { useTranslation } from "@plane/i18n"; import { useTranslation } from "@plane/i18n";
import { Button } from "@plane/propel/button"; import { Button } from "@plane/propel/button";
import { EmojiPicker, EmojiIconPickerTypes } from "@plane/propel/emoji-icon-picker"; import { EmojiPicker, EmojiIconPickerTypes } from "@plane/propel/emoji-icon-picker";
import { ViewsIcon } from "@plane/propel/icons";
import { import {
EViewAccess, EViewAccess,
IIssueDisplayFilterOptions, IIssueDisplayFilterOptions,
@ -123,7 +123,7 @@ export const ProjectViewForm: React.FC<Props> = observer((props) => {
{logoValue?.in_use ? ( {logoValue?.in_use ? (
<Logo logo={logoValue} size={18} type="lucide" /> <Logo logo={logoValue} size={18} type="lucide" />
) : ( ) : (
<Layers className="h-4 w-4 text-custom-text-300" /> <ViewsIcon className="h-4 w-4 text-custom-text-300" />
)} )}
</> </>
</span> </span>

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

@ -3,7 +3,7 @@
import { FC, useRef } from "react"; import { FC, useRef } from "react";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import { useParams } from "next/navigation"; import { useParams } from "next/navigation";
import { Layers } from "lucide-react"; import { ViewsIcon } from "@plane/propel/icons";
// types // types
import { IProjectView } from "@plane/types"; import { IProjectView } from "@plane/types";
// components // components
@ -35,7 +35,7 @@ export const ProjectViewListItem: FC<Props> = observer((props) => {
{view?.logo_props?.in_use ? ( {view?.logo_props?.in_use ? (
<Logo logo={view?.logo_props} size={16} type="lucide" /> <Logo logo={view?.logo_props} size={16} type="lucide" />
) : ( ) : (
<Layers className="h-4 w-4 text-custom-text-300" /> <ViewsIcon className="h-4 w-4 text-custom-text-300" />
)} )}
</> </>
} }

4
apps/web/core/components/workspace-notifications/sidebar/header/root.tsx
View file

@ -2,9 +2,9 @@
import { FC } from "react"; import { FC } from "react";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import { Inbox } from "lucide-react";
// plane imports // plane imports
import { useTranslation } from "@plane/i18n"; import { useTranslation } from "@plane/i18n";
import { InboxIcon } from "@plane/propel/icons";
import { Breadcrumbs, Header } from "@plane/ui"; import { Breadcrumbs, Header } from "@plane/ui";
// components // components
import { BreadcrumbLink } from "@/components/common/breadcrumb-link"; import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
@ -34,7 +34,7 @@ export const NotificationSidebarHeader: FC<TNotificationSidebarHeader> = observe
component={ component={
<BreadcrumbLink <BreadcrumbLink
label={t("notification.label")} label={t("notification.label")}
icon={<Inbox className="h-4 w-4 text-custom-text-300" />} icon={<InboxIcon className="h-4 w-4 text-custom-text-300" />}
disableTooltip disableTooltip
/> />
} }

6
apps/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx
View file

@ -15,12 +15,12 @@ import { attachInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree
import { orderBy } from "lodash-es"; import { orderBy } from "lodash-es";
import { useParams } from "next/navigation"; import { useParams } from "next/navigation";
import { createRoot } from "react-dom/client"; import { createRoot } from "react-dom/client";
import { PenSquare, Star, MoreHorizontal, ChevronRight, GripVertical } from "lucide-react"; import { Star, MoreHorizontal, ChevronRight, GripVertical } from "lucide-react";
import { Disclosure, Transition } from "@headlessui/react"; import { Disclosure, Transition } from "@headlessui/react";
// plane imports // plane imports
import { useOutsideClickDetector } from "@plane/hooks"; import { useOutsideClickDetector } from "@plane/hooks";
import { useTranslation } from "@plane/i18n"; import { useTranslation } from "@plane/i18n";
import { FavoriteFolderIcon } from "@plane/propel/icons"; import { DraftIcon, FavoriteFolderIcon } from "@plane/propel/icons";
import { Tooltip } from "@plane/propel/tooltip"; import { Tooltip } from "@plane/propel/tooltip";
import { IFavorite, InstructionType } from "@plane/types"; import { IFavorite, InstructionType } from "@plane/types";
import { CustomMenu, DropIndicator, DragHandle } from "@plane/ui"; import { CustomMenu, DropIndicator, DragHandle } from "@plane/ui";
@ -232,7 +232,7 @@ export const FavoriteFolder: React.FC<Props> = (props) => {
</CustomMenu.MenuItem> </CustomMenu.MenuItem>
<CustomMenu.MenuItem onClick={() => setFolderToRename(favorite.id)}> <CustomMenu.MenuItem onClick={() => setFolderToRename(favorite.id)}>
<div className="flex items-center justify-start gap-2"> <div className="flex items-center justify-start gap-2">
<PenSquare className="h-3.5 w-3.5 stroke-[1.5] text-custom-text-300" /> <DraftIcon className="h-3.5 w-3.5 stroke-[1.5] text-custom-text-300" />
<span>Rename Folder</span> <span>Rename Folder</span>
</div> </div>
</CustomMenu.MenuItem> </CustomMenu.MenuItem>

4
apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/helper.tsx
View file

@ -1,6 +1,6 @@
"use client"; "use client";
import { FileText } from "lucide-react"; import { PageIcon } from "@plane/propel/icons";
// plane imports // plane imports
import { IFavorite, TLogoProps } from "@plane/types"; import { IFavorite, TLogoProps } from "@plane/types";
// components // components
@ -9,7 +9,7 @@ import { Logo } from "@/components/common/logo";
import { FAVORITE_ITEM_ICONS, FAVORITE_ITEM_LINKS } from "@/plane-web/constants/sidebar-favorites"; import { FAVORITE_ITEM_ICONS, FAVORITE_ITEM_LINKS } from "@/plane-web/constants/sidebar-favorites";
export const getFavoriteItemIcon = (type: string, logo?: TLogoProps | undefined) => { export const getFavoriteItemIcon = (type: string, logo?: TLogoProps | undefined) => {
const Icon = FAVORITE_ITEM_ICONS[type] || FileText; const Icon = FAVORITE_ITEM_ICONS[type] || PageIcon;
return ( return (
<> <>

5
apps/web/core/components/workspace/sidebar/help-menu.tsx
View file

@ -2,8 +2,9 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import { FileText, HelpCircle, MessagesSquare, User } from "lucide-react"; import { HelpCircle, MessagesSquare, User } from "lucide-react";
import { useTranslation } from "@plane/i18n"; import { useTranslation } from "@plane/i18n";
import { PageIcon } from "@plane/propel/icons";
// ui // ui
import { Tooltip } from "@plane/propel/tooltip"; import { Tooltip } from "@plane/propel/tooltip";
import { CustomMenu } from "@plane/ui"; import { CustomMenu } from "@plane/ui";
@ -70,7 +71,7 @@ export const HelpMenu: React.FC<WorkspaceHelpSectionProps> = observer(() => {
target="_blank" target="_blank"
className="flex items-center justify- gap-x-2 rounded text-xs hover:bg-custom-background-80" className="flex items-center justify- gap-x-2 rounded text-xs hover:bg-custom-background-80"
> >
<FileText className="h-3.5 w-3.5 text-custom-text-200" size={14} /> <PageIcon className="h-3.5 w-3.5 text-custom-text-200" height={14} width={14} />
<span className="text-xs">{t("documentation")}</span> <span className="text-xs">{t("documentation")}</span>
</a> </a>
</CustomMenu.MenuItem> </CustomMenu.MenuItem>

5
apps/web/core/components/workspace/sidebar/help-section.tsx
View file

@ -2,9 +2,10 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import { FileText, HelpCircle, MessagesSquare, MoveLeft, User } from "lucide-react"; import { HelpCircle, MessagesSquare, MoveLeft, User } from "lucide-react";
// plane imports // plane imports
import { useTranslation } from "@plane/i18n"; import { useTranslation } from "@plane/i18n";
import { PageIcon } from "@plane/propel/icons";
import { Tooltip } from "@plane/propel/tooltip"; import { Tooltip } from "@plane/propel/tooltip";
import { CustomMenu } from "@plane/ui"; import { CustomMenu } from "@plane/ui";
import { cn } from "@plane/utils"; import { cn } from "@plane/utils";
@ -73,7 +74,7 @@ export const SidebarHelpSection: React.FC<WorkspaceHelpSectionProps> = observer(
target="_blank" target="_blank"
className="flex items-center justify- gap-x-2 rounded text-xs hover:bg-custom-background-80" className="flex items-center justify- gap-x-2 rounded text-xs hover:bg-custom-background-80"
> >
<FileText className="h-3.5 w-3.5 text-custom-text-200" size={14} /> <PageIcon className="h-3.5 w-3.5 text-custom-text-200" height={14} width={14} />
<span className="text-xs">{t("documentation")}</span> <span className="text-xs">{t("documentation")}</span>
</a> </a>
</CustomMenu.MenuItem> </CustomMenu.MenuItem>

5
apps/web/core/components/workspace/sidebar/help-section/root.tsx
View file

@ -2,8 +2,9 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import { FileText, HelpCircle, MessagesSquare, User } from "lucide-react"; import { HelpCircle, MessagesSquare, User } from "lucide-react";
import { useTranslation } from "@plane/i18n"; import { useTranslation } from "@plane/i18n";
import { PageIcon } from "@plane/propel/icons";
// ui // ui
import { CustomMenu } from "@plane/ui"; import { CustomMenu } from "@plane/ui";
// components // components
@ -57,7 +58,7 @@ export const HelpMenuRoot = observer(() => {
target="_blank" target="_blank"
className="flex items-center justify- gap-x-2 rounded text-xs hover:bg-custom-background-80" className="flex items-center justify- gap-x-2 rounded text-xs hover:bg-custom-background-80"
> >
<FileText className="h-3.5 w-3.5 text-custom-text-200" size={14} /> <PageIcon className="h-3.5 w-3.5 text-custom-text-200" height={14} width={14} />
<span className="text-xs">{t("documentation")}</span> <span className="text-xs">{t("documentation")}</span>
</a> </a>
</CustomMenu.MenuItem> </CustomMenu.MenuItem>

15
apps/web/core/components/workspace/sidebar/project-navigation.tsx
View file

@ -4,10 +4,9 @@ import React, { FC, useCallback, useMemo } from "react";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import Link from "next/link"; import Link from "next/link";
import { useParams, usePathname } from "next/navigation"; import { useParams, usePathname } from "next/navigation";
import { FileText, Layers } from "lucide-react";
import { EUserPermissionsLevel, EUserPermissions } from "@plane/constants"; import { EUserPermissionsLevel, EUserPermissions } from "@plane/constants";
import { useTranslation } from "@plane/i18n"; import { useTranslation } from "@plane/i18n";
import { DiceIcon, ContrastIcon, LayersIcon, Intake } from "@plane/propel/icons"; import { CycleIcon, IntakeIcon, ModuleIcon, PageIcon, ViewsIcon, WorkItemsIcon } from "@plane/propel/icons";
import { EUserProjectRoles } from "@plane/types"; import { EUserProjectRoles } from "@plane/types";
// plane ui // plane ui
// components // components
@ -70,7 +69,7 @@ export const ProjectNavigation: FC<TProjectItemsProps> = observer((props) => {
key: "work_items", key: "work_items",
name: "Work items", name: "Work items",
href: `/${workspaceSlug}/projects/${projectId}/issues`, href: `/${workspaceSlug}/projects/${projectId}/issues`,
icon: LayersIcon, icon: WorkItemsIcon,
access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST], access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
shouldRender: true, shouldRender: true,
sortOrder: 1, sortOrder: 1,
@ -80,7 +79,7 @@ export const ProjectNavigation: FC<TProjectItemsProps> = observer((props) => {
key: "cycles", key: "cycles",
name: "Cycles", name: "Cycles",
href: `/${workspaceSlug}/projects/${projectId}/cycles`, href: `/${workspaceSlug}/projects/${projectId}/cycles`,
icon: ContrastIcon, icon: CycleIcon,
access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER], access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
shouldRender: project.cycle_view, shouldRender: project.cycle_view,
sortOrder: 2, sortOrder: 2,
@ -90,7 +89,7 @@ export const ProjectNavigation: FC<TProjectItemsProps> = observer((props) => {
key: "modules", key: "modules",
name: "Modules", name: "Modules",
href: `/${workspaceSlug}/projects/${projectId}/modules`, href: `/${workspaceSlug}/projects/${projectId}/modules`,
icon: DiceIcon, icon: ModuleIcon,
access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER], access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
shouldRender: project.module_view, shouldRender: project.module_view,
sortOrder: 3, sortOrder: 3,
@ -100,7 +99,7 @@ export const ProjectNavigation: FC<TProjectItemsProps> = observer((props) => {
key: "views", key: "views",
name: "Views", name: "Views",
href: `/${workspaceSlug}/projects/${projectId}/views`, href: `/${workspaceSlug}/projects/${projectId}/views`,
icon: Layers, icon: ViewsIcon,
access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST], access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
shouldRender: project.issue_views_view, shouldRender: project.issue_views_view,
sortOrder: 4, sortOrder: 4,
@ -110,7 +109,7 @@ export const ProjectNavigation: FC<TProjectItemsProps> = observer((props) => {
key: "pages", key: "pages",
name: "Pages", name: "Pages",
href: `/${workspaceSlug}/projects/${projectId}/pages`, href: `/${workspaceSlug}/projects/${projectId}/pages`,
icon: FileText, icon: PageIcon,
access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST], access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
shouldRender: project.page_view, shouldRender: project.page_view,
sortOrder: 5, sortOrder: 5,
@ -120,7 +119,7 @@ export const ProjectNavigation: FC<TProjectItemsProps> = observer((props) => {
key: "intake", key: "intake",
name: "Intake", name: "Intake",
href: `/${workspaceSlug}/projects/${projectId}/intake`, href: `/${workspaceSlug}/projects/${projectId}/intake`,
icon: Intake, icon: IntakeIcon,
access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST], access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
shouldRender: project.inbox_view, shouldRender: project.inbox_view,
sortOrder: 6, sortOrder: 6,

4
apps/web/core/components/workspace/sidebar/quick-actions.tsx
View file

@ -1,10 +1,10 @@
import { useRef, useState } from "react"; import { useRef, useState } from "react";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import { useParams } from "next/navigation"; import { useParams } from "next/navigation";
import { PenSquare } from "lucide-react";
// plane imports // plane imports
import { EUserPermissions, EUserPermissionsLevel, SIDEBAR_TRACKER_ELEMENTS } from "@plane/constants"; import { EUserPermissions, EUserPermissionsLevel, SIDEBAR_TRACKER_ELEMENTS } from "@plane/constants";
import { useTranslation } from "@plane/i18n"; import { useTranslation } from "@plane/i18n";
import { AddIcon } from "@plane/propel/icons";
import { TIssue } from "@plane/types"; import { TIssue } from "@plane/types";
import { cn } from "@plane/utils"; import { cn } from "@plane/utils";
// components // components
@ -90,7 +90,7 @@ export const SidebarQuickActions = observer(() => {
onMouseLeave={handleMouseLeave} onMouseLeave={handleMouseLeave}
disabled={disabled} disabled={disabled}
> >
<PenSquare className="size-4" /> <AddIcon className="size-4" />
<span className="text-sm font-medium truncate max-w-[145px]">{t("sidebar.new_work_item")}</span> <span className="text-sm font-medium truncate max-w-[145px]">{t("sidebar.new_work_item")}</span>
</button> </button>
<AppSearch /> <AppSearch />

11
apps/web/core/components/workspace/sidebar/user-menu.tsx
View file

@ -3,9 +3,8 @@
import React from "react"; import React from "react";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import { useParams } from "next/navigation"; import { useParams } from "next/navigation";
import { Home, Inbox, PenSquare } from "lucide-react";
// plane imports // plane imports
import { UserActivityIcon } from "@plane/propel/icons"; import { DraftIcon, HomeIcon, InboxIcon, YourWorkIcon } from "@plane/propel/icons";
import { EUserWorkspaceRoles } from "@plane/types"; import { EUserWorkspaceRoles } from "@plane/types";
// hooks // hooks
import { useUserPermissions, useUser } from "@/hooks/store/user"; import { useUserPermissions, useUser } from "@/hooks/store/user";
@ -23,28 +22,28 @@ export const SidebarUserMenu = observer(() => {
labelTranslationKey: "sidebar.home", labelTranslationKey: "sidebar.home",
href: `/${workspaceSlug.toString()}/`, href: `/${workspaceSlug.toString()}/`,
access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER, EUserWorkspaceRoles.GUEST], access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER, EUserWorkspaceRoles.GUEST],
Icon: Home, Icon: HomeIcon,
}, },
{ {
key: "your-work", key: "your-work",
labelTranslationKey: "sidebar.your_work", labelTranslationKey: "sidebar.your_work",
href: `/${workspaceSlug.toString()}/profile/${currentUser?.id}/`, href: `/${workspaceSlug.toString()}/profile/${currentUser?.id}/`,
access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER], access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER],
Icon: UserActivityIcon, Icon: YourWorkIcon,
}, },
{ {
key: "notifications", key: "notifications",
labelTranslationKey: "sidebar.inbox", labelTranslationKey: "sidebar.inbox",
href: `/${workspaceSlug.toString()}/notifications/`, href: `/${workspaceSlug.toString()}/notifications/`,
access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER, EUserWorkspaceRoles.GUEST], access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER, EUserWorkspaceRoles.GUEST],
Icon: Inbox, Icon: InboxIcon,
}, },
{ {
key: "drafts", key: "drafts",
labelTranslationKey: "sidebar.drafts", labelTranslationKey: "sidebar.drafts",
href: `/${workspaceSlug.toString()}/drafts/`, href: `/${workspaceSlug.toString()}/drafts/`,
access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER], access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER],
Icon: PenSquare, Icon: DraftIcon,
}, },
]; ];

11
apps/web/core/components/workspace/sidebar/workspace-menu.tsx
View file

@ -3,10 +3,9 @@
import React from "react"; import React from "react";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import { useParams } from "next/navigation"; import { useParams } from "next/navigation";
import { BarChart2, Briefcase, Layers } from "lucide-react";
import { Disclosure, Transition } from "@headlessui/react"; import { Disclosure, Transition } from "@headlessui/react";
// plane imports // plane imports
import { ContrastIcon } from "@plane/propel/icons"; import { AnalyticsIcon, CycleIcon, ProjectIcon, ViewsIcon } from "@plane/propel/icons";
import { EUserWorkspaceRoles } from "@plane/types"; import { EUserWorkspaceRoles } from "@plane/types";
// hooks // hooks
import useLocalStorage from "@/hooks/use-local-storage"; import useLocalStorage from "@/hooks/use-local-storage";
@ -28,28 +27,28 @@ export const SidebarWorkspaceMenu = observer(() => {
labelTranslationKey: "sidebar.projects", labelTranslationKey: "sidebar.projects",
href: `/${workspaceSlug}/projects/`, href: `/${workspaceSlug}/projects/`,
access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER, EUserWorkspaceRoles.GUEST], access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER, EUserWorkspaceRoles.GUEST],
Icon: Briefcase, Icon: ProjectIcon,
}, },
{ {
key: "views", key: "views",
labelTranslationKey: "sidebar.views", labelTranslationKey: "sidebar.views",
href: `/${workspaceSlug}/workspace-views/all-issues/`, href: `/${workspaceSlug}/workspace-views/all-issues/`,
access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER, EUserWorkspaceRoles.GUEST], access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER, EUserWorkspaceRoles.GUEST],
Icon: Layers, Icon: ViewsIcon,
}, },
{ {
key: "active-cycles", key: "active-cycles",
labelTranslationKey: "sidebar.cycles", labelTranslationKey: "sidebar.cycles",
href: `/${workspaceSlug}/active-cycles/`, href: `/${workspaceSlug}/active-cycles/`,
access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER], access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER],
Icon: ContrastIcon, Icon: CycleIcon,
}, },
{ {
key: "analytics", key: "analytics",
labelTranslationKey: "sidebar.analytics", labelTranslationKey: "sidebar.analytics",
href: `/${workspaceSlug}/analytics/`, href: `/${workspaceSlug}/analytics/`,
access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER], access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER],
Icon: BarChart2, Icon: AnalyticsIcon,
}, },
]; ];

33
packages/propel/src/icons/add-icon.tsx Normal file
View file

@ -0,0 +1,33 @@
import * as React from "react";
import { ISvgIcons } from "./type";
export const AddIcon: React.FC<ISvgIcons> = ({
width = "16",
height = "16",
className = "text-current",
color = "currentColor",
...rest
}) => (
<svg
width={width}
height={height}
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={className}
{...rest}
>
<g clip-path="url(#clip0_2890_23)">
<path
d="M14.0413 8C14.0413 4.66339 11.3368 1.95818 8.00024 1.95801C4.66352 1.95801 1.95825 4.66328 1.95825 8C1.95843 11.3366 4.66363 14.041 8.00024 14.041C11.3367 14.0408 14.0411 11.3365 14.0413 8ZM7.37524 10.666V8.625H5.33325C4.98818 8.625 4.70843 8.34503 4.70825 8C4.70825 7.65482 4.98807 7.375 5.33325 7.375H7.37524V5.33301C7.37524 4.98783 7.65507 4.70801 8.00024 4.70801C8.34527 4.70818 8.62524 4.98794 8.62524 5.33301V7.375H10.6663C11.0114 7.375 11.2913 7.65482 11.2913 8C11.2911 8.34503 11.0113 8.625 10.6663 8.625H8.62524V10.666C8.62524 11.0111 8.34527 11.2908 8.00024 11.291C7.65507 11.291 7.37524 11.0112 7.37524 10.666ZM15.2913 8C15.2911 12.0268 12.0271 15.2908 8.00024 15.291C3.97328 15.291 0.708428 12.0269 0.708252 8C0.708252 3.97292 3.97317 0.708008 8.00024 0.708008C12.0272 0.708184 15.2913 3.97303 15.2913 8Z"
fill={color}
/>
</g>
<defs>
<clipPath id="clip0_2890_23">
<rect width="16" height="16" fill="white" />
</clipPath>
</defs>
</svg>
);

26
packages/propel/src/icons/analytics-icon.tsx Normal file
View file

@ -0,0 +1,26 @@
import * as React from "react";
import { ISvgIcons } from "./type";
export const AnalyticsIcon: React.FC<ISvgIcons> = ({
width = "16",
height = "16",
className = "text-current",
color = "currentColor",
...rest
}) => (
<svg
width={width}
height={height}
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={className}
{...rest}
>
<path
d="M13.375 5.2002C13.375 4.62994 13.3743 4.23962 13.3496 3.9375C13.3255 3.64296 13.2821 3.48707 13.2256 3.37598C13.0938 3.11725 12.8827 2.90624 12.624 2.77441C12.5129 2.71788 12.357 2.67446 12.0625 2.65039C11.7604 2.62572 11.3701 2.625 10.7998 2.625H5.2002C4.62994 2.625 4.23962 2.62572 3.9375 2.65039C3.64296 2.67446 3.48707 2.71788 3.37598 2.77441C3.11725 2.90624 2.90624 3.11725 2.77441 3.37598C2.71788 3.48707 2.67446 3.64296 2.65039 3.9375C2.62572 4.23962 2.625 4.62994 2.625 5.2002V10.7998C2.625 11.3701 2.62572 11.7604 2.65039 12.0625C2.67446 12.357 2.71788 12.5129 2.77441 12.624C2.90624 12.8827 3.11725 13.0938 3.37598 13.2256C3.48707 13.2821 3.64296 13.3255 3.9375 13.3496C4.23962 13.3743 4.62994 13.375 5.2002 13.375H10.7998C11.3701 13.375 11.7604 13.3743 12.0625 13.3496C12.357 13.3255 12.5129 13.2821 12.624 13.2256C12.8827 13.0938 13.0938 12.8827 13.2256 12.624C13.2821 12.5129 13.3255 12.357 13.3496 12.0625C13.3743 11.7604 13.375 11.3701 13.375 10.7998V5.2002ZM4.70801 11.333V8.66699C4.70801 8.32192 4.98798 8.04217 5.33301 8.04199C5.67819 8.04199 5.95801 8.32181 5.95801 8.66699V11.333C5.95801 11.6782 5.67819 11.958 5.33301 11.958C4.98798 11.9578 4.70801 11.6781 4.70801 11.333ZM7.375 11.333V4.66699C7.375 4.32181 7.65482 4.04199 8 4.04199C8.34518 4.04199 8.625 4.32181 8.625 4.66699V11.333C8.625 11.6782 8.34518 11.958 8 11.958C7.65482 11.958 7.375 11.6782 7.375 11.333ZM10.042 11.333V7.33301C10.0422 6.98798 10.3219 6.70801 10.667 6.70801C11.0119 6.70818 11.2918 6.98809 11.292 7.33301V11.333C11.292 11.6781 11.012 11.9578 10.667 11.958C10.3218 11.958 10.042 11.6782 10.042 11.333ZM14.625 10.7998C14.625 11.3493 14.6255 11.7993 14.5957 12.1641C14.5653 12.5361 14.5001 12.8748 14.3389 13.1914C14.0872 13.6853 13.6853 14.0872 13.1914 14.3389C12.8748 14.5001 12.5361 14.5653 12.1641 14.5957C11.7993 14.6255 11.3493 14.625 10.7998 14.625H5.2002C4.65067 14.625 4.20072 14.6255 3.83594 14.5957C3.46388 14.5653 3.12523 14.5001 2.80859 14.3389C2.31467 14.0872 1.9128 13.6853 1.66113 13.1914C1.49985 12.8748 1.4347 12.5361 1.4043 12.1641C1.37452 11.7993 1.375 11.3493 1.375 10.7998V5.2002C1.375 4.65067 1.37452 4.20072 1.4043 3.83594C1.4347 3.46388 1.49985 3.12523 1.66113 2.80859C1.9128 2.31467 2.31467 1.9128 2.80859 1.66113C3.12523 1.49985 3.46388 1.4347 3.83594 1.4043C4.20072 1.37452 4.65067 1.375 5.2002 1.375H10.7998C11.3493 1.375 11.7993 1.37452 12.1641 1.4043C12.5361 1.4347 12.8748 1.49986 13.1914 1.66113C13.6853 1.9128 14.0872 2.31467 14.3389 2.80859C14.5001 3.12523 14.5653 3.46388 14.5957 3.83594C14.6255 4.20072 14.625 4.65067 14.625 5.2002V10.7998Z"
fill={color}
/>
</svg>
);

28
packages/propel/src/icons/archive-icon.tsx
View file

@ -2,31 +2,11 @@ import * as React from "react";
import { ISvgIcons } from "./type"; import { ISvgIcons } from "./type";
export const ArchiveIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => ( export const ArchiveIcon: React.FC<ISvgIcons> = ({ className = "text-current", color = "currentColor", ...rest }) => (
<svg <svg viewBox="0 0 16 16" className={`${className} stroke-2`} fill="none" xmlns="http://www.w3.org/2000/svg" {...rest}>
viewBox="0 0 24 24"
className={`${className} stroke-2`}
stroke="currentColor"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...rest}
>
<path <path
d="M21 3H3C2.44772 3 2 3.44772 2 4V7C2 7.55228 2.44772 8 3 8H21C21.5523 8 22 7.55228 22 7V4C22 3.44772 21.5523 3 21 3Z" d="M12.708 5.95804H3.29105V10.7998C3.29105 11.3701 3.29177 11.7604 3.31644 12.0625C3.34052 12.3573 3.38484 12.5129 3.44144 12.6241C3.57326 12.8828 3.7833 13.0938 4.04202 13.2256C4.15311 13.2822 4.30886 13.3256 4.60355 13.3496C4.90567 13.3743 5.29595 13.375 5.86624 13.375H10.1328C10.7031 13.375 11.0934 13.3743 11.3955 13.3496C11.69 13.3256 11.8459 13.2822 11.9571 13.2256C12.2158 13.0938 12.4268 12.8828 12.5586 12.6241C12.6152 12.5129 12.6586 12.357 12.6826 12.0625C12.7073 11.7604 12.708 11.3701 12.708 10.7998V5.95804ZM9.33304 8.04202C9.67822 8.04203 9.95804 8.32185 9.95804 8.66702C9.95786 9.01205 9.67811 9.29202 9.33304 9.29202H6.66605C6.32113 9.29185 6.04122 9.01194 6.04105 8.66702C6.04105 8.32196 6.32102 8.0422 6.66605 8.04202H9.33304ZM14.041 3.66702C14.041 3.32769 14.0379 3.24861 14.0274 3.19534C13.9715 2.91452 13.7525 2.69474 13.4717 2.6387C13.4185 2.62812 13.3395 2.62503 13 2.62503H3.00003C2.66062 2.62503 2.58156 2.62814 2.52835 2.6387C2.24737 2.69459 2.0276 2.91436 1.97171 3.19534C1.96115 3.24855 1.95804 3.32761 1.95804 3.66702C1.95804 4.00648 1.96113 4.08551 1.97171 4.1387C2.02776 4.41946 2.24752 4.63851 2.52835 4.69437C2.54804 4.69828 2.5862 4.70359 2.68265 4.70609C2.68757 4.70622 2.69241 4.7078 2.6973 4.70804H13.3018C13.3067 4.7078 13.3115 4.70622 13.3164 4.70609C13.413 4.70359 13.452 4.69828 13.4717 4.69437C13.7523 4.63834 13.9714 4.41925 14.0274 4.1387C14.038 4.08546 14.041 4.00645 14.041 3.66702ZM15.291 3.66702C15.291 3.94665 15.2945 4.17765 15.2539 4.38187C15.116 5.07554 14.6164 5.63287 13.958 5.85452V10.7998C13.958 11.3494 13.9585 11.7993 13.9287 12.1641C13.8983 12.5362 13.8332 12.8748 13.6719 13.1914C13.4202 13.6854 13.0184 14.0872 12.5244 14.3389C12.2078 14.5002 11.8692 14.5653 11.4971 14.5957C11.1323 14.6255 10.6824 14.625 10.1328 14.625H5.86624C5.31662 14.625 4.8668 14.6255 4.50199 14.5957C4.17639 14.5691 3.87675 14.5155 3.59476 14.3946L3.47464 14.3389C2.98073 14.0872 2.57885 13.6854 2.32718 13.1914C2.16596 12.8748 2.10074 12.5361 2.07034 12.1641C2.04057 11.7993 2.04105 11.3494 2.04105 10.7998V5.85355C1.38301 5.63175 0.88406 5.07532 0.746126 4.38187C0.705511 4.17758 0.708038 3.94664 0.70804 3.66702C0.70804 3.38721 0.70547 3.1556 0.746126 2.9512C0.900699 2.17451 1.50752 1.56769 2.28421 1.41312C2.48861 1.37246 2.72022 1.37503 3.00003 1.37503H13C13.2797 1.37503 13.5106 1.37251 13.7149 1.41312C14.4917 1.56763 15.0994 2.17438 15.2539 2.9512C15.2946 3.15554 15.291 3.38718 15.291 3.66702Z"
strokeLinecap="round" fill={color}
strokeLinejoin="round"
/> />
<path
d="M4 8V19C4 19.5304 4.21071 20.0391 4.58579 20.4142C4.96086 20.7893 5.46957 21 6 21H8"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M20 8V19C20 19.5304 19.7893 20.0391 19.4142 20.4142C19.0391 20.7893 18.5304 21 18 21H16"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path d="M15 18L12 21L9 18" strokeLinecap="round" strokeLinejoin="round" />
<path d="M12 21L12 12" strokeLinecap="round" strokeLinejoin="round" />
</svg> </svg>
); );

37
packages/propel/src/icons/cycle-icon.tsx Normal file
View file

@ -0,0 +1,37 @@
import * as React from "react";
import { ISvgIcons } from "./type";
export const CycleIcon: React.FC<ISvgIcons> = ({
width = "16",
height = "16",
className = "text-current",
color = "currentColor",
...rest
}) => (
<svg
width={width}
height={height}
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={className}
{...rest}
>
<g clip-path="url(#clip0_1612_7015)">
<path
d="M14.041 8C14.041 4.66339 11.3365 1.95818 8 1.95801C4.66328 1.95801 1.95801 4.66328 1.95801 8C1.95818 11.3365 4.66339 14.041 8 14.041C11.3364 14.0408 14.0408 11.3364 14.041 8ZM15.291 8C15.2908 12.0268 12.0268 15.2908 8 15.291C3.97303 15.291 0.708184 12.0269 0.708008 8C0.708008 3.97292 3.97292 0.708008 8 0.708008C12.0269 0.708184 15.291 3.97303 15.291 8Z"
fill={color}
/>
<path
d="M7.99951 12.3337C10.3928 12.3337 12.3328 10.3936 12.3328 8.00033C12.3328 5.60709 10.3928 3.66699 7.99951 3.66699V12.3337Z"
fill={color}
/>
</g>
<defs>
<clipPath id="clip0_1612_7015">
<rect width="16" height="16" fill="white" />
</clipPath>
</defs>
</svg>
);

26
packages/propel/src/icons/dashboard-icon.tsx Normal file
View file

@ -0,0 +1,26 @@
import * as React from "react";
import { ISvgIcons } from "./type";
export const DashboardIcon: React.FC<ISvgIcons> = ({
width = "16",
height = "16",
className = "text-current",
color = "currentColor",
...rest
}) => (
<svg
width={width}
height={height}
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={className}
{...rest}
>
<path
d="M6.04199 11.333C6.04182 11.3101 6.0229 11.292 6 11.292H2.66699C2.64409 11.292 2.62518 11.3101 2.625 11.333V13.333C2.625 13.356 2.64398 13.375 2.66699 13.375H6C6.02301 13.375 6.04199 13.356 6.04199 13.333V11.333ZM13.375 8.66699C13.375 8.64398 13.356 8.625 13.333 8.625H10C9.97699 8.625 9.95801 8.64398 9.95801 8.66699V13.333C9.95801 13.356 9.97699 13.375 10 13.375H13.333C13.356 13.375 13.375 13.356 13.375 13.333V8.66699ZM6.04199 2.66699C6.04199 2.64398 6.02301 2.625 6 2.625H2.66699C2.64398 2.625 2.625 2.64398 2.625 2.66699V7.33301C2.625 7.35602 2.64398 7.375 2.66699 7.375H6C6.02301 7.375 6.04199 7.35602 6.04199 7.33301V2.66699ZM13.375 2.66699C13.375 2.64398 13.356 2.625 13.333 2.625H10C9.97699 2.625 9.95801 2.64398 9.95801 2.66699V4.66699C9.95818 4.68986 9.9771 4.70801 10 4.70801H13.333C13.3559 4.70801 13.3748 4.68985 13.375 4.66699V2.66699ZM7.29199 13.333C7.29199 14.0464 6.71337 14.625 6 14.625H2.66699C1.95362 14.625 1.375 14.0464 1.375 13.333V11.333C1.37518 10.6198 1.95373 10.042 2.66699 10.042H6C6.71326 10.042 7.29182 10.6198 7.29199 11.333V13.333ZM14.625 13.333C14.625 14.0464 14.0464 14.625 13.333 14.625H10C9.28663 14.625 8.70801 14.0464 8.70801 13.333V8.66699C8.70801 7.95362 9.28663 7.375 10 7.375H13.333C14.0464 7.375 14.625 7.95362 14.625 8.66699V13.333ZM7.29199 7.33301C7.29199 8.04638 6.71337 8.625 6 8.625H2.66699C1.95362 8.625 1.375 8.04638 1.375 7.33301V2.66699C1.375 1.95362 1.95362 1.375 2.66699 1.375H6C6.71337 1.375 7.29199 1.95362 7.29199 2.66699V7.33301ZM14.625 4.66699C14.6248 5.38021 14.0463 5.95801 13.333 5.95801H10C9.28674 5.95801 8.70818 5.38021 8.70801 4.66699V2.66699C8.70801 1.95362 9.28663 1.375 10 1.375H13.333C14.0464 1.375 14.625 1.95362 14.625 2.66699V4.66699Z"
fill={color}
/>
</svg>
);

26
packages/propel/src/icons/draft-icon.tsx Normal file
View file

@ -0,0 +1,26 @@
import * as React from "react";
import { ISvgIcons } from "./type";
export const DraftIcon: React.FC<ISvgIcons> = ({
width = "16",
height = "16",
className = "text-current",
color = "currentColor",
...rest
}) => (
<svg
width={width}
height={height}
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={className}
{...rest}
>
<path
d="M10.5577 2.26554C11.3042 1.51896 12.4862 1.47177 13.2872 2.12491L13.4425 2.26554L13.5821 2.41983C14.2354 3.22077 14.189 4.40271 13.4425 5.14933L5.06648 13.5243C4.85708 13.7337 4.68297 13.9138 4.47077 14.0439C4.29575 14.151 4.10496 14.2303 3.90534 14.2782C3.66318 14.3364 3.41264 14.3319 3.11628 14.3319H2.00007C1.65489 14.3319 1.37507 14.0521 1.37507 13.7069V12.5907C1.37507 12.2946 1.37079 12.0446 1.42878 11.8026C1.47675 11.6028 1.55593 11.4113 1.66316 11.2362H1.66413C1.79415 11.0241 1.97323 10.85 2.18269 10.6405L10.5577 2.26554ZM13.5391 11.9521C13.772 11.6975 14.1672 11.6793 14.4219 11.912C14.6767 12.1449 14.6939 12.541 14.461 12.7958L13.795 13.5243V13.5253C13.3294 14.0345 12.6848 14.3319 12.0001 14.3319C11.401 14.3319 10.8332 14.104 10.3887 13.706L10.2061 13.5253C9.96412 13.2617 9.64853 13.1259 9.33308 13.1259C9.01784 13.126 8.703 13.2618 8.46101 13.5253C8.22763 13.7796 7.83155 13.7968 7.57722 13.5634C7.32321 13.3301 7.30605 12.9348 7.53913 12.6806C8.00515 12.1727 8.64906 11.876 9.33308 11.8759C10.0172 11.8759 10.6619 12.1725 11.128 12.6806V12.6816C11.3696 12.9458 11.6848 13.0819 12.0001 13.0819C12.3153 13.0819 12.6305 12.9458 12.8721 12.6816L13.5391 11.9521ZM2.62507 13.0819H3.11628C3.47218 13.0819 3.54863 13.078 3.61335 13.0624C3.68545 13.0451 3.75417 13.0162 3.81745 12.9775C3.87425 12.9426 3.93123 12.892 4.18269 12.6405L12.5577 4.26554C12.8659 3.95734 12.8659 3.45754 12.5577 3.14933V3.14835C12.2494 2.84073 11.7504 2.84139 11.4425 3.14933L3.06648 11.5243C2.81511 11.7757 2.76438 11.8328 2.72956 11.8896C2.69077 11.9529 2.66192 12.0217 2.6446 12.0937C2.62904 12.1585 2.62507 12.2349 2.62507 12.5907V13.0819Z"
fill={color}
/>
</svg>
);

19
packages/propel/src/icons/home-icon.tsx Normal file
View file

@ -0,0 +1,19 @@
import * as React from "react";
import { ISvgIcons } from "./type";
export const HomeIcon: React.FC<ISvgIcons> = ({ width = "16", height = "16", className, color = "currentColor" }) => (
<svg
width={width}
height={height}
viewBox="0 0 16 16"
fill={color}
xmlns="http://www.w3.org/2000/svg"
className={className}
>
<path
d="M9.36825 8.5908C9.3668 8.57319 9.36465 8.5605 9.36337 8.55174C9.36224 8.55047 9.36073 8.54993 9.35946 8.54881C9.35064 8.54753 9.33797 8.54536 9.3204 8.54393C9.24062 8.53741 9.13053 8.53709 8.93368 8.53709H7.06649C6.86964 8.53709 6.75955 8.53741 6.67977 8.54393C6.66156 8.54542 6.64858 8.54751 6.63974 8.54881C6.63851 8.54993 6.63691 8.55048 6.63583 8.55174C6.63456 8.5605 6.63336 8.57328 6.63192 8.5908C6.6254 8.67062 6.62509 8.78148 6.62509 8.9785V13.2871H9.37509V8.9785C9.37509 8.78148 9.37477 8.67061 9.36825 8.5908ZM10.6251 13.2871H11.8663C12.2499 13.2871 12.5005 13.2861 12.6915 13.2705C12.8752 13.2555 12.9486 13.2292 12.9884 13.209L13.0831 13.1513C13.173 13.086 13.247 13.0003 13.2979 12.9004C13.3182 12.8605 13.3444 12.7869 13.3595 12.6035C13.3751 12.4125 13.3751 12.162 13.3751 11.7783V6.95506C13.3751 6.53721 13.3695 6.44728 13.3487 6.37303C13.3255 6.29014 13.2876 6.21187 13.2364 6.14256C13.1906 6.08059 13.123 6.02126 12.7931 5.76463L8.27157 2.24803C8.14754 2.15155 8.08003 2.09893 8.02841 2.06444C8.01732 2.05703 8.00875 2.05221 8.00302 2.04881C8.00102 2.04867 7.99915 2.04867 7.99716 2.04881C7.99143 2.05221 7.98285 2.05703 7.97177 2.06444C7.92015 2.09893 7.85263 2.15155 7.7286 2.24803L3.20712 5.76463C2.8772 6.02125 2.80961 6.08057 2.76376 6.14256C2.71257 6.2118 2.67466 6.29012 2.65145 6.37303C2.63071 6.44726 2.62509 6.53709 2.62509 6.95506V11.7783C2.62509 12.162 2.62511 12.4125 2.64071 12.6035C2.65567 12.7862 2.68197 12.8595 2.70224 12.8994C2.77013 13.0326 2.87866 13.1411 3.01181 13.209L3.10653 13.2422C3.15275 13.253 3.21704 13.263 3.30868 13.2705C3.49965 13.2861 3.75025 13.2871 4.13388 13.2871H5.37509V8.9785C5.37509 8.80211 5.37418 8.63176 5.38583 8.48924C5.39807 8.33956 5.42717 8.16607 5.51571 7.99217L5.56552 7.9033C5.68964 7.70078 5.8676 7.53611 6.08016 7.42772L6.21005 7.37108C6.33947 7.32494 6.46577 7.30702 6.57821 7.29783C6.72062 7.28621 6.8903 7.28709 7.06649 7.28709H8.93368C9.10988 7.28709 9.27956 7.28621 9.42196 7.29783C9.5344 7.30702 9.66071 7.32494 9.79013 7.37108L9.92001 7.42772L10.0089 7.47752C10.2111 7.60162 10.3761 7.77956 10.4845 7.99217C10.573 8.16607 10.6021 8.33956 10.6143 8.48924C10.626 8.63176 10.6251 8.80211 10.6251 8.9785V13.2871ZM14.6251 11.7783C14.6251 12.1413 14.6253 12.4514 14.6046 12.7051C14.5832 12.966 14.5362 13.2224 14.4112 13.4678C14.2235 13.836 13.9241 14.1356 13.5558 14.3232C13.3104 14.4482 13.054 14.4953 12.7931 14.5166C12.5394 14.5373 12.2292 14.5371 11.8663 14.5371H4.13388C3.77098 14.5371 3.46075 14.5373 3.20712 14.5166C2.94616 14.4953 2.6898 14.4482 2.44442 14.3232C2.07603 14.1356 1.7767 13.836 1.58895 13.4678C1.46397 13.2224 1.41693 12.966 1.39559 12.7051C1.37487 12.4514 1.37509 12.1413 1.37509 11.7783V6.95506C1.37509 6.60766 1.36953 6.31438 1.44735 6.03611C1.51154 5.80678 1.61729 5.59086 1.75888 5.3994C1.93074 5.16703 2.16527 4.99065 2.43954 4.77733L6.96102 1.26072C7.14957 1.11407 7.38218 0.918674 7.6622 0.842755C7.88326 0.782884 8.11691 0.782884 8.33798 0.842755C8.618 0.918674 8.8506 1.11407 9.03915 1.26072L13.5606 4.77733C13.8349 4.99063 14.0694 5.16701 14.2413 5.3994L14.3409 5.54686C14.4333 5.69906 14.5046 5.86401 14.5528 6.03611C14.6306 6.31436 14.6251 6.60762 14.6251 6.95506V11.7783Z"
fill={color}
/>
</svg>
);

26
packages/propel/src/icons/inbox-icon.tsx Normal file
View file

@ -0,0 +1,26 @@
import * as React from "react";
import { ISvgIcons } from "./type";
export const InboxIcon: React.FC<ISvgIcons> = ({
width = "16",
height = "16",
className,
color = "currentColor",
...rest
}) => (
<svg
width={width}
height={height}
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={className}
{...rest}
>
<path
d="M14.0401 8.62507H12.0781C11.8582 8.62516 11.657 8.74968 11.5586 8.94636C11.2485 9.56676 10.6144 9.95906 9.92091 9.95906H6.07814C5.38471 9.95897 4.75057 9.56666 4.44044 8.94636C4.34199 8.74967 4.1409 8.62507 3.92091 8.62507H1.959C1.95888 8.66367 1.95802 8.70708 1.95802 8.75593V10.1339C1.95802 10.7042 1.95872 11.0944 1.98341 11.3966C2.00749 11.6912 2.05084 11.847 2.10743 11.9581C2.23925 12.2168 2.45027 12.4269 2.709 12.5587C2.8201 12.6153 2.97574 12.6596 3.27052 12.6837C3.57264 12.7083 3.96298 12.7091 4.53321 12.7091H11.4668C12.0369 12.7091 12.4274 12.7083 12.7295 12.6837C13.0241 12.6596 13.1799 12.6153 13.291 12.5587C13.5496 12.4268 13.7599 12.2167 13.8916 11.9581C13.9482 11.8469 13.9925 11.6913 14.0166 11.3966C14.0413 11.0944 14.041 10.7042 14.041 10.1339V8.75593C14.041 8.70708 14.0402 8.66367 14.0401 8.62507ZM5.97755 3.29207C5.21433 3.29207 4.98135 3.30027 4.78712 3.36726C4.59456 3.43373 4.41898 3.5421 4.27345 3.68464C4.12668 3.82841 4.01513 4.03332 3.67384 4.71589L2.34474 7.37507H3.92091C4.61442 7.37507 5.24844 7.7674 5.5586 8.38777C5.657 8.58446 5.85819 8.70897 6.07814 8.70906H9.92091C10.1409 8.70906 10.342 8.58445 10.4404 8.38777C10.7506 7.76744 11.3847 7.37516 12.0781 7.37507H13.6543L12.3252 4.71589C11.9839 4.03325 11.8724 3.82842 11.7256 3.68464C11.58 3.5421 11.4046 3.4337 11.2119 3.36726C11.0177 3.30027 10.7847 3.29207 10.0215 3.29207H5.97755ZM15.291 10.1339C15.291 10.6835 15.2915 11.1333 15.2617 11.4981C15.2351 11.8236 15.1824 12.1234 15.0615 12.4053L15.0049 12.5255C14.7533 13.0193 14.3522 13.4213 13.8584 13.6729C13.5417 13.8343 13.2032 13.8993 12.8311 13.9298C12.4663 13.9596 12.0164 13.9591 11.4668 13.9591H4.53321C3.98371 13.9591 3.53374 13.9595 3.16896 13.9298C2.79695 13.8994 2.45821 13.8342 2.14161 13.6729C1.70944 13.4527 1.34794 13.1173 1.09571 12.7061L0.994152 12.5255C0.832797 12.2088 0.767723 11.8703 0.737316 11.4981C0.707517 11.1333 0.708019 10.6835 0.708019 10.1339V8.75593C0.708019 8.49089 0.706677 8.29939 0.73341 8.10847C0.755917 7.94781 0.793061 7.78957 0.844738 7.63582L0.896496 7.4991C0.952354 7.36314 1.02352 7.2226 1.11232 7.045L2.55665 4.15632C2.85737 3.55488 3.06727 3.11738 3.39943 2.79207C3.67739 2.51984 4.01208 2.31249 4.37989 2.18562C4.81947 2.03402 5.30497 2.04207 5.97755 2.04207H10.0215C10.694 2.04207 11.1796 2.03412 11.6192 2.18562C11.987 2.31249 12.3226 2.51981 12.6006 2.79207C12.9326 3.11739 13.1426 3.5549 13.4434 4.15632L14.8877 7.045C15.0062 7.28198 15.0928 7.4524 15.1543 7.63484V7.63582C15.206 7.78963 15.2432 7.94783 15.2656 8.10847C15.2924 8.29945 15.291 8.49091 15.291 8.75593V10.1339Z"
fill={color}
/>
</svg>
);

75
packages/propel/src/icons/index.ts
View file

@ -1,59 +1,72 @@
export type { ISvgIcons } from "./type"; export type { ISvgIcons } from "./type";
export * from "./cycle"; export * from "./activity-icon";
export * from "./module"; export * from "./add-icon";
export * from "./state"; export * from "./ai-icon";
export * from "./analytics-icon";
export * from "./archive-icon"; export * from "./archive-icon";
export * from "./at-risk-icon";
export * from "./bar-icon";
export * from "./blocked-icon"; export * from "./blocked-icon";
export * from "./blocker-icon"; export * from "./blocker-icon";
export * from "./brand";
export * from "./calendar-after-icon"; export * from "./calendar-after-icon";
export * from "./calendar-before-icon"; export * from "./calendar-before-icon";
export * from "./center-panel-icon"; export * from "./center-panel-icon";
export * from "./comment-fill-icon"; export * from "./comment-fill-icon";
export * from "./create-icon"; export * from "./create-icon";
export * from "./cycle";
export * from "./cycle-icon";
export * from "./dashboard-icon";
export * from "./dice-icon"; export * from "./dice-icon";
export * from "./discord-icon"; export * from "./discord-icon";
export * from "./display-properties";
export * from "./done-icon";
export * from "./draft-icon";
export * from "./dropdown-icon";
export * from "./epic-icon"; export * from "./epic-icon";
export * from "./favorite-folder-icon";
export * from "./full-screen-panel-icon"; export * from "./full-screen-panel-icon";
export * from "./github-icon"; export * from "./github-icon";
export * from "./gitlab-icon"; export * from "./gitlab-icon";
export * from "./home-icon";
export * from "./inbox-icon";
export * from "./info-fill-icon"; export * from "./info-fill-icon";
export * from "./info-icon"; export * from "./info-icon";
export * from "./in-progress-icon";
export * from "./intake";
export * from "./intake-icon";
export * from "./layer-stack"; export * from "./layer-stack";
export * from "./layers-icon"; export * from "./layers-icon";
export * from "./lead-icon";
export * from "./module";
export * from "./module-icon";
export * from "./monospace-icon"; export * from "./monospace-icon";
export * from "./multiple-sticky";
export * from "./off-track-icon";
export * from "./on-track-icon";
export * from "./overview-icon";
export * from "./page-icon";
export * from "./pending-icon";
export * from "./photo-filter-icon"; export * from "./photo-filter-icon";
export * from "./pi-chat";
export * from "./planned-icon";
export * from "./plane-icon";
export * from "./priority-icon"; export * from "./priority-icon";
export * from "./project-icon";
export * from "./related-icon"; export * from "./related-icon";
export * from "./sans-serif-icon"; export * from "./sans-serif-icon";
export * from "./serif-icon"; export * from "./serif-icon";
export * from "./side-panel-icon"; export * from "./side-panel-icon";
export * from "./transfer-icon"; export * from "./state";
export * from "./info-icon";
export * from "./dropdown-icon";
export * from "./intake";
export * from "./user-activity-icon";
export * from "./favorite-folder-icon";
export * from "./planned-icon";
export * from "./in-progress-icon";
export * from "./done-icon";
export * from "./pending-icon";
export * from "./pi-chat";
export * from "./workspace-icon";
export * from "./teams";
export * from "./lead-icon";
export * from "./activity-icon";
export * from "./updates-icon";
export * from "./overview-icon";
export * from "./on-track-icon";
export * from "./off-track-icon";
export * from "./at-risk-icon";
export * from "./multiple-sticky";
export * from "./sticky-note-icon"; export * from "./sticky-note-icon";
export * from "./bar-icon";
export * from "./tree-map-icon";
export * from "./display-properties";
export * from "./ai-icon";
export * from "./plane-icon";
export * from "./wiki-icon";
export * from "./brand";
export * from "./suspended-user"; export * from "./suspended-user";
export * from "./teams";
export * from "./transfer-icon";
export * from "./tree-map-icon";
export * from "./updates-icon";
export * from "./user-activity-icon";
export * from "./view-icon";
export * from "./wiki-icon";
export * from "./work-items-icon";
export * from "./workspace-icon";
export * from "./your-work-icon";

33
packages/propel/src/icons/intake-icon.tsx Normal file
View file

@ -0,0 +1,33 @@
import * as React from "react";
import { ISvgIcons } from "./type";
export const IntakeIcon: React.FC<ISvgIcons> = ({
width = "16",
height = "16",
className = "text-current",
color = "currentColor",
...rest
}) => (
<svg
width={width}
height={height}
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={className}
{...rest}
>
<g clip-path="url(#clip0_2310_10)">
<path
d="M7.37549 4.31474C7.37549 3.34976 7.35622 3.09637 7.12256 2.76591C7.07287 2.69574 6.92103 2.55664 6.69287 2.41826C6.46459 2.27986 6.2704 2.20923 6.18506 2.19755C5.92379 2.16215 5.79263 2.17621 5.6958 2.20146C5.57897 2.23193 5.46473 2.28854 5.21045 2.42119C3.2767 3.42993 1.9585 5.45229 1.9585 7.78154C1.95856 11.1182 4.66381 13.8235 8.00049 13.8235C11.337 13.8234 14.0414 11.1181 14.0415 7.78154C14.0415 5.54611 12.8284 3.59276 11.021 2.54716C10.7222 2.37432 10.6196 1.99243 10.7925 1.69365C10.9653 1.39492 11.3472 1.29338 11.646 1.46611C13.8238 2.72593 15.2915 5.0818 15.2915 7.78154C15.2914 11.8084 12.0273 15.0734 8.00049 15.0735C3.97345 15.0735 0.708561 11.8085 0.708496 7.78154C0.708496 4.96843 2.30195 2.52843 4.63232 1.31279C4.85634 1.19593 5.1006 1.06446 5.38037 0.991498C5.6802 0.913328 5.98443 0.908355 6.35303 0.958295C6.68627 1.00354 7.0524 1.17437 7.34033 1.34892C7.62835 1.52352 7.94882 1.76962 8.14307 2.04423C8.6434 2.75183 8.62549 3.42545 8.62549 4.31474V8.93876L10.2251 7.33915C10.4692 7.09538 10.8649 7.09527 11.1089 7.33915C11.3529 7.58314 11.3527 7.97884 11.1089 8.22294L8.44189 10.8899C8.32477 11.007 8.1661 11.0734 8.00049 11.0735C7.83473 11.0735 7.67532 11.0071 7.55811 10.8899L4.89111 8.22294C4.64748 7.97885 4.64724 7.58309 4.89111 7.33915C5.13519 7.09508 5.5318 7.09508 5.77588 7.33915L7.37549 8.93876V4.31474Z"
fill={color}
/>
</g>
<defs>
<clipPath id="clip0_2310_10">
<rect width="16" height="16" fill="white" />
</clipPath>
</defs>
</svg>
);

42
packages/propel/src/icons/module-icon.tsx Normal file
View file

@ -0,0 +1,42 @@
import * as React from "react";
import { ISvgIcons } from "./type";
export const ModuleIcon: React.FC<ISvgIcons> = ({
width = "16",
height = "16",
className = "text-current",
color = "currentColor",
...rest
}) => (
<svg
width={width}
height={height}
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={className}
{...rest}
>
<path
d="M13.375 5.2002C13.375 4.62994 13.3743 4.23962 13.3496 3.9375C13.3255 3.64296 13.2821 3.48707 13.2256 3.37598C13.0938 3.11725 12.8827 2.90623 12.624 2.77441C12.5129 2.71788 12.357 2.67445 12.0625 2.65039C11.7604 2.62572 11.3701 2.625 10.7998 2.625H5.2002C4.62994 2.625 4.23962 2.62572 3.9375 2.65039C3.64296 2.67446 3.48707 2.71788 3.37598 2.77441C3.11725 2.90624 2.90624 3.11725 2.77441 3.37598C2.71788 3.48707 2.67446 3.64296 2.65039 3.9375C2.62572 4.23962 2.625 4.62994 2.625 5.2002V10.7998C2.625 11.3701 2.62572 11.7604 2.65039 12.0625C2.67445 12.357 2.71788 12.5129 2.77441 12.624C2.90623 12.8827 3.11725 13.0938 3.37598 13.2256C3.48707 13.2821 3.64295 13.3255 3.9375 13.3496C4.23962 13.3743 4.62994 13.375 5.2002 13.375H10.7998C11.3701 13.375 11.7604 13.3743 12.0625 13.3496C12.357 13.3255 12.5129 13.2821 12.624 13.2256C12.8827 13.0938 13.0938 12.8827 13.2256 12.624C13.2821 12.5129 13.3255 12.357 13.3496 12.0625C13.3743 11.7604 13.375 11.3701 13.375 10.7998V5.2002ZM14.625 10.7998C14.625 11.3493 14.6255 11.7993 14.5957 12.1641C14.5653 12.5361 14.5001 12.8748 14.3389 13.1914C14.0872 13.6854 13.6854 14.0872 13.1914 14.3389C12.8748 14.5001 12.5361 14.5653 12.1641 14.5957C11.7993 14.6255 11.3493 14.625 10.7998 14.625H5.2002C4.65067 14.625 4.20072 14.6255 3.83594 14.5957C3.46388 14.5653 3.12523 14.5002 2.80859 14.3389C2.31467 14.0872 1.91281 13.6854 1.66113 13.1914C1.49987 12.8748 1.4347 12.5361 1.4043 12.1641C1.37452 11.7993 1.375 11.3493 1.375 10.7998V5.2002C1.375 4.65067 1.37452 4.20072 1.4043 3.83594C1.4347 3.46388 1.49985 3.12523 1.66113 2.80859C1.9128 2.31466 2.31466 1.9128 2.80859 1.66113C3.12523 1.49985 3.46388 1.4347 3.83594 1.4043C4.20072 1.37452 4.65067 1.375 5.2002 1.375H10.7998C11.3493 1.375 11.7993 1.37452 12.1641 1.4043C12.5361 1.4347 12.8748 1.49987 13.1914 1.66113C13.6854 1.91281 14.0872 2.31467 14.3389 2.80859C14.5001 3.12523 14.5653 3.46388 14.5957 3.83594C14.6255 4.20072 14.625 4.65067 14.625 5.2002V10.7998Z"
fill={color}
/>
<path
d="M6.54286 5H5.45714C5.29713 5 5.21712 5 5.156 5.03114C5.10224 5.05853 5.05853 5.10224 5.03114 5.156C5 5.21712 5 5.29713 5 5.45714V6.54286C5 6.70287 5 6.78288 5.03114 6.844C5.05853 6.89776 5.10224 6.94147 5.156 6.96886C5.21712 7 5.29713 7 5.45714 7H6.54286C6.70287 7 6.78288 7 6.844 6.96886C6.89776 6.94147 6.94147 6.89776 6.96886 6.844C7 6.78288 7 6.70287 7 6.54286V5.45714C7 5.29713 7 5.21712 6.96886 5.156C6.94147 5.10224 6.89776 5.05853 6.844 5.03114C6.78288 5 6.70287 5 6.54286 5Z"
fill={color}
/>
<path
d="M10.5429 5H9.45714C9.29712 5 9.21711 5 9.156 5.03114C9.10223 5.05853 9.05854 5.10224 9.03114 5.156C9 5.21712 9 5.29713 9 5.45714V6.54286C9 6.70287 9 6.78288 9.03114 6.844C9.05854 6.89776 9.10223 6.94147 9.156 6.96886C9.21711 7 9.29712 7 9.45714 7H10.5429C10.7029 7 10.7829 7 10.844 6.96886C10.8978 6.94147 10.9415 6.89776 10.9689 6.844C11 6.78288 11 6.70287 11 6.54286V5.45714C11 5.29713 11 5.21712 10.9689 5.156C10.9415 5.10224 10.8978 5.05853 10.844 5.03114C10.7829 5 10.7029 5 10.5429 5Z"
fill={color}
/>
<path
d="M10.5429 9H9.45714C9.29712 9 9.21711 9 9.156 9.03114C9.10223 9.05854 9.05854 9.10223 9.03114 9.156C9 9.21711 9 9.29712 9 9.45714V10.5429C9 10.7029 9 10.7829 9.03114 10.844C9.05854 10.8978 9.10223 10.9415 9.156 10.9689C9.21711 11 9.29712 11 9.45714 11H10.5429C10.7029 11 10.7829 11 10.844 10.9689C10.8978 10.9415 10.9415 10.8978 10.9689 10.844C11 10.7829 11 10.7029 11 10.5429V9.45714C11 9.29712 11 9.21711 10.9689 9.156C10.9415 9.10223 10.8978 9.05854 10.844 9.03114C10.7829 9 10.7029 9 10.5429 9Z"
fill={color}
/>
<path
d="M6.54286 9H5.45714C5.29713 9 5.21712 9 5.156 9.03114C5.10224 9.05854 5.05853 9.10223 5.03114 9.156C5 9.21711 5 9.29712 5 9.45714V10.5429C5 10.7029 5 10.7829 5.03114 10.844C5.05853 10.8978 5.10224 10.9415 5.156 10.9689C5.21712 11 5.29713 11 5.45714 11H6.54286C6.70287 11 6.78288 11 6.844 10.9689C6.89776 10.9415 6.94147 10.8978 6.96886 10.844C7 10.7829 7 10.7029 7 10.5429V9.45714C7 9.29712 7 9.21711 6.96886 9.156C6.94147 9.10223 6.89776 9.05854 6.844 9.03114C6.78288 9 6.70287 9 6.54286 9Z"
fill={color}
/>
</svg>
);

26
packages/propel/src/icons/page-icon.tsx Normal file
View file

@ -0,0 +1,26 @@
import * as React from "react";
import { ISvgIcons } from "./type";
export const PageIcon: React.FC<ISvgIcons> = ({
width = "16",
height = "16",
className = "text-current",
color = "currentColor",
...rest
}) => (
<svg
width={width}
height={height}
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={className}
{...rest}
>
<path
d="M2.0415 11.4668V4.53325C2.0415 3.98372 2.04103 3.53377 2.0708 3.16899C2.1012 2.79693 2.16636 2.45828 2.32764 2.14164C2.57931 1.64772 2.98117 1.24585 3.4751 0.994184C3.79173 0.832905 4.13038 0.767746 4.50244 0.737348C4.86722 0.707573 5.31717 0.708051 5.8667 0.708051H8.00732C8.46672 0.708051 8.79883 0.703776 9.11768 0.780317C9.26953 0.816778 9.41655 0.869103 9.55908 0.931684C9.57494 0.937854 9.58978 0.945771 9.60498 0.953168C9.6354 0.96723 9.6669 0.97896 9.69678 0.994184L9.87647 1.09477L10.0796 1.23637C10.2777 1.39055 10.4689 1.58472 10.7124 1.82817L12.8374 3.95414C13.1623 4.27904 13.4005 4.51048 13.5718 4.79008C13.627 4.88022 13.6744 4.97452 13.7183 5.07036C13.7229 5.0804 13.7278 5.0903 13.7319 5.10063C13.7959 5.24517 13.8482 5.39475 13.8853 5.54887C13.9618 5.86762 13.9585 6.19902 13.9585 6.65825V11.4668C13.9585 12.0164 13.959 12.4663 13.9292 12.8311C13.8988 13.2032 13.8337 13.5418 13.6724 13.8584C13.4521 14.2907 13.1168 14.6522 12.7056 14.9043L12.5249 15.0049C12.2082 15.1663 11.8697 15.2314 11.4976 15.2618C11.1327 15.2916 10.683 15.2911 10.1333 15.2911H5.8667C5.31716 15.2911 4.86723 15.2915 4.50244 15.2618C4.13034 15.2314 3.79177 15.1663 3.4751 15.0049C2.98126 14.7533 2.57932 14.3523 2.32764 13.8584C2.16631 13.5418 2.10122 13.2032 2.0708 12.8311C2.041 12.4663 2.0415 12.0164 2.0415 11.4668ZM9.3335 10.7081C9.67852 10.7082 9.9585 10.988 9.9585 11.3331C9.9585 11.6781 9.67852 11.9579 9.3335 11.9581H5.3335C4.98832 11.9581 4.7085 11.6782 4.7085 11.3331C4.7085 10.9879 4.98832 10.7081 5.3335 10.7081H9.3335ZM10.6665 8.04106C11.0116 8.04106 11.2913 8.32103 11.2915 8.66606C11.2915 9.01124 11.0117 9.29106 10.6665 9.29106H5.3335C4.98832 9.29106 4.7085 9.01124 4.7085 8.66606C4.70867 8.32103 4.98843 8.04106 5.3335 8.04106H10.6665ZM3.2915 11.4668C3.2915 12.037 3.29222 12.4275 3.3169 12.7295C3.34099 13.0241 3.38432 13.18 3.44092 13.2911C3.57274 13.5497 3.7838 13.7599 4.04248 13.8916C4.15358 13.9482 4.30934 13.9926 4.604 14.0166C4.90612 14.0413 5.29648 14.0411 5.8667 14.0411H10.1333C10.7036 14.0411 11.0939 14.0413 11.396 14.0166C11.6908 13.9926 11.8464 13.9483 11.9575 13.8916C12.2161 13.7599 12.4263 13.5496 12.5581 13.2911C12.6147 13.18 12.659 13.0241 12.6831 12.7295C12.7078 12.4275 12.7085 12.037 12.7085 11.4668V6.65825C12.7085 6.27228 12.7061 6.08627 12.6909 5.95805H10.3999C10.2235 5.95805 10.0532 5.95895 9.91065 5.94731C9.76096 5.93505 9.58746 5.90599 9.41357 5.81743C9.17042 5.69355 8.97292 5.49581 8.84912 5.25297C8.76041 5.07887 8.73148 4.90475 8.71924 4.75493C8.70762 4.61252 8.7085 4.44283 8.7085 4.26664V1.97465C8.58022 1.95949 8.39368 1.95805 8.00732 1.95805H5.8667C5.29645 1.95805 4.90613 1.95877 4.604 1.98344C4.30946 2.00751 4.15357 2.05093 4.04248 2.10747C3.78376 2.23929 3.57274 2.4503 3.44092 2.70903C3.38439 2.82012 3.34096 2.97601 3.3169 3.27055C3.29222 3.57268 3.2915 3.963 3.2915 4.53325V11.4668ZM9.96533 4.65336C9.96677 4.67091 9.96894 4.6836 9.97022 4.69243C9.97133 4.6937 9.97189 4.69521 9.97315 4.69633C9.98199 4.69763 9.99522 4.69975 10.0132 4.70122C10.093 4.70771 10.2032 4.70805 10.3999 4.70805H11.8237L9.9585 2.84184V4.26664C9.9585 4.46349 9.95882 4.57358 9.96533 4.65336Z"
fill={color}
/>
</svg>
);

26
packages/propel/src/icons/project-icon.tsx Normal file
View file

@ -0,0 +1,26 @@
import * as React from "react";
import { ISvgIcons } from "./type";
export const ProjectIcon: React.FC<ISvgIcons> = ({
width = "16",
height = "16",
className = "text-current",
color = "currentColor",
...rest
}) => (
<svg
width={width}
height={height}
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={className}
{...rest}
>
<path
d="M14.041 9.77251C13.6575 9.86273 13.1544 9.9762 12.5771 10.0879C11.271 10.3407 9.55874 10.5996 8 10.5997C6.44125 10.5997 4.7291 10.3408 3.42285 10.0879C2.84526 9.97614 2.34163 9.86276 1.95801 9.77251V11.8409C1.95801 12.2244 1.95804 12.4751 1.97363 12.6661C1.98864 12.8498 2.01488 12.9231 2.03516 12.9629C2.10308 13.0962 2.21151 13.2046 2.34473 13.2725L2.43945 13.3047C2.48568 13.3156 2.54989 13.3265 2.6416 13.334C2.83257 13.3496 3.0832 13.3497 3.4668 13.3497H12.5332C12.9165 13.3497 13.1665 13.3496 13.3574 13.334C13.5407 13.319 13.6144 13.2928 13.6543 13.2725C13.7875 13.2046 13.896 13.0961 13.9639 12.9629L13.9971 12.8682C14.0079 12.822 14.0179 12.7577 14.0254 12.6661C14.041 12.4751 14.041 12.2245 14.041 11.8409V9.77251ZM3.4668 5.26665C3.08319 5.26665 2.83257 5.26668 2.6416 5.28227C2.45792 5.29728 2.38454 5.32351 2.34473 5.34379C2.22354 5.40557 2.12394 5.50122 2.05566 5.61821C2.05373 5.62932 2.0514 5.64383 2.04883 5.66215C2.03783 5.74053 2.02735 5.85115 2.01758 5.99126C1.99814 6.26994 1.98459 6.63077 1.97559 7.01372C1.96343 7.53069 1.96026 8.07474 1.95898 8.48833C2.00287 8.49907 2.0493 8.51164 2.09863 8.52348C2.48215 8.61553 3.02514 8.73847 3.66016 8.86137C4.9372 9.10854 6.55887 9.34965 8 9.34965C9.44093 9.34962 11.062 9.1085 12.3389 8.86137C12.9737 8.7385 13.5169 8.61552 13.9004 8.52348C13.9493 8.51175 13.9955 8.49898 14.0391 8.48833C14.0378 8.07474 14.0356 7.53069 14.0234 7.01372C14.0144 6.63077 14.0009 6.26994 13.9814 5.99126C13.9717 5.85117 13.9612 5.74052 13.9502 5.66215C13.9475 5.6432 13.9444 5.62848 13.9424 5.61723C13.8741 5.50082 13.7751 5.40536 13.6543 5.34379C13.6145 5.32353 13.5409 5.29727 13.3574 5.28227C13.1665 5.26671 12.9165 5.26665 12.5332 5.26665H3.4668ZM7.375 7.73442V7.72465C7.375 7.37948 7.65482 7.09965 8 7.09965C8.34503 7.09983 8.625 7.37958 8.625 7.72465V7.73442C8.625 8.07949 8.34503 8.35924 8 8.35942C7.65482 8.35942 7.375 8.0796 7.375 7.73442ZM8 2.59965C7.34034 2.59965 7.13232 2.60514 6.97754 2.64653C6.50307 2.77367 6.13203 3.14468 6.00488 3.61919C5.981 3.70849 5.97063 3.81544 5.96484 4.01665H10.0342C10.0284 3.8154 10.018 3.70851 9.99414 3.61919C9.86702 3.14477 9.49683 2.77373 9.02246 2.64653C8.86766 2.60505 8.65998 2.59966 8 2.59965ZM15.291 11.8409C15.291 12.2037 15.2922 12.514 15.2715 12.7676C15.2502 13.0285 15.2031 13.285 15.0781 13.5303C14.8904 13.8988 14.5902 14.1981 14.2217 14.3858C13.9764 14.5107 13.7208 14.5578 13.46 14.5791C13.2063 14.5999 12.8962 14.5997 12.5332 14.5997H3.4668C3.10389 14.5997 2.79368 14.5998 2.54004 14.5791C2.27905 14.5578 2.02275 14.5108 1.77734 14.3858C1.4089 14.1981 1.10958 13.8987 0.921875 13.5303C0.796827 13.2849 0.749839 13.0286 0.728516 12.7676C0.707814 12.514 0.708008 12.2038 0.708008 11.8409V8.97465C0.708008 8.60181 0.708206 7.76501 0.726563 6.98442C0.735721 6.59503 0.749071 6.21171 0.770508 5.90434C0.781165 5.75155 0.794714 5.60812 0.811524 5.48833C0.82359 5.40234 0.849238 5.22862 0.921875 5.08598L0.99707 4.95122C1.18524 4.64429 1.45479 4.39388 1.77734 4.22954C2.0227 4.10455 2.27911 4.0575 2.54004 4.03618C2.79366 4.01548 3.10391 4.01665 3.4668 4.01665H4.71387C4.72148 3.7397 4.74113 3.50667 4.79785 3.29497C5.04064 2.3894 5.74777 1.68228 6.65332 1.4395C7.00717 1.34469 7.42024 1.34965 8 1.34965C8.57959 1.34965 8.99192 1.34471 9.3457 1.4395C10.2514 1.68221 10.9594 2.3892 11.2021 3.29497C11.2589 3.50666 11.2775 3.73971 11.2852 4.01665H12.5332C12.8962 4.01665 13.2063 4.01545 13.46 4.03618C13.7207 4.0575 13.9765 4.1047 14.2217 4.22954C14.5901 4.41727 14.8904 4.71742 15.0781 5.08598C15.1506 5.22855 15.1754 5.40238 15.1875 5.48833C15.2043 5.60812 15.2179 5.75156 15.2285 5.90434C15.25 6.21171 15.2643 6.59503 15.2734 6.98442C15.2918 7.76501 15.291 8.60181 15.291 8.97465V11.8409Z"
fill={color}
/>
</svg>
);

33
packages/propel/src/icons/view-icon.tsx Normal file
View file

@ -0,0 +1,33 @@
import * as React from "react";
import { ISvgIcons } from "./type";
export const ViewsIcon: React.FC<ISvgIcons> = ({
width = "16",
height = "16",
className = "text-current",
color = "currentColor",
...rest
}) => (
<svg
width={width}
height={height}
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={className}
{...rest}
>
<g clip-path="url(#clip0_1612_7029)">
<path
d="M14.3926 10.7735C14.7013 10.6192 15.0771 10.7451 15.2314 11.0538C15.3854 11.3623 15.2604 11.7373 14.9521 11.8917L8.52344 15.1056C8.46846 15.1331 8.33457 15.2069 8.18262 15.2355H8.18164C8.06516 15.2572 7.94558 15.2573 7.8291 15.2355C7.67698 15.2069 7.54234 15.1331 7.4873 15.1056L1.05957 11.8917C0.750903 11.7374 0.626065 11.3625 0.780273 11.0538C0.934594 10.7452 1.30948 10.6194 1.61816 10.7735L8.00488 13.9669L14.3926 10.7735ZM14.3926 7.44054C14.7013 7.28618 15.0771 7.41114 15.2314 7.71983C15.3858 8.02847 15.2607 8.40424 14.9521 8.5587L8.52344 11.7726C8.46839 11.8001 8.33451 11.8739 8.18262 11.9025H8.18164C8.06519 11.9242 7.94554 11.9242 7.8291 11.9025C7.67698 11.8739 7.54234 11.8001 7.4873 11.7726L1.05957 8.5587C0.750834 8.40433 0.625905 8.02857 0.780273 7.71983C0.934713 7.41138 1.30956 7.28634 1.61816 7.44054L8.00488 10.6339L14.3926 7.44054ZM7.91699 0.751084C8.00545 0.742877 8.09504 0.747328 8.18262 0.763779C8.33432 0.79232 8.46833 0.865118 8.52344 0.892686L14.9521 4.10753C15.1636 4.21348 15.2969 4.42959 15.2969 4.66612C15.2969 4.90266 15.1636 5.11875 14.9521 5.22472L8.52344 8.43956C8.46831 8.46714 8.33434 8.53992 8.18262 8.56847H8.18164C8.06513 8.59024 7.94561 8.59028 7.8291 8.56847C7.67698 8.53994 7.54235 8.46708 7.4873 8.43956L1.05957 5.22472C0.84784 5.11884 0.713867 4.90285 0.713867 4.66612C0.713883 4.42941 0.847843 4.21339 1.05957 4.10753L7.4873 0.892686C7.54232 0.865181 7.67699 0.7923 7.8291 0.763779L7.91699 0.751084ZM2.73535 4.66612L8.00488 7.30089L13.2754 4.66612L8.00488 2.03038L2.73535 4.66612Z"
fill={color}
/>
</g>
<defs>
<clipPath id="clip0_1612_7029">
<rect width="16" height="16" fill="white" />
</clipPath>
</defs>
</svg>
);

26
packages/propel/src/icons/work-items-icon.tsx Normal file
View file

@ -0,0 +1,26 @@
import * as React from "react";
import { ISvgIcons } from "./type";
export const WorkItemsIcon: React.FC<ISvgIcons> = ({
width = "16",
height = "16",
className = "text-current",
color = "currentColor",
...rest
}) => (
<svg
width={width}
height={height}
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={className}
{...rest}
>
<path
d="M13.0098 6.04785C13.2265 5.96229 13.4708 5.99175 13.6621 6.12695C13.8534 6.26216 13.9678 6.48597 13.9678 6.72461L13.9639 11.7979C13.9637 12.0975 13.7837 12.366 13.5117 12.4736L8.93457 14.2852C8.7181 14.3706 8.47444 14.3409 8.2832 14.2061C8.09177 14.0709 7.97754 13.8472 7.97754 13.6084V8.53613C7.97754 8.23632 8.15654 7.96701 8.42871 7.85938L13.0098 6.04785ZM9.38672 9.03418V12.5527L12.5547 11.2998L12.5566 7.78027L9.38672 9.03418ZM9.88672 3.89062C10.1043 3.80456 10.3493 3.83523 10.541 3.97168C10.7327 4.10817 10.8465 4.33351 10.8447 4.57324L10.8389 5.30859C10.8357 5.70864 10.518 6.03044 10.1289 6.02734C9.84472 6.02507 9.60081 5.8496 9.49121 5.59961L6.26367 6.87695V10.377C6.49946 10.3943 6.72145 10.5334 6.83887 10.7646C7.01886 11.1194 6.88504 11.557 6.54004 11.7422L5.88574 12.0938C5.66742 12.2109 5.40503 12.2024 5.19434 12.0713C4.98357 11.94 4.85449 11.7046 4.85449 11.4512V6.37891C4.85449 6.07909 5.03447 5.80979 5.30664 5.70215L9.88672 3.89062ZM7.06738 1.71582C7.28499 1.62976 7.52999 1.66042 7.72168 1.79688C7.91338 1.93337 8.02721 2.1587 8.02539 2.39844L8.01953 3.13379C8.01635 3.53383 7.69869 3.85564 7.30957 3.85254C7.02539 3.85026 6.78148 3.67479 6.67188 3.4248L3.44434 4.70215V8.20215C3.68013 8.21954 3.90211 8.35857 4.01953 8.58984C4.19952 8.94458 4.06571 9.38222 3.7207 9.56738L3.06641 9.91895C2.84808 10.0361 2.58569 10.0276 2.375 9.89648C2.16423 9.76516 2.03516 9.52975 2.03516 9.27637V4.2041C2.03516 3.90428 2.21513 3.63498 2.4873 3.52734L7.06738 1.71582Z"
fill={color}
/>
</svg>
);

30
packages/propel/src/icons/your-work-icon.tsx Normal file
View file

@ -0,0 +1,30 @@
import * as React from "react";
import { ISvgIcons } from "./type";
export const YourWorkIcon: React.FC<ISvgIcons> = ({
width = "16",
height = "16",
className = "text-current",
color = "currentColor",
...rest
}) => (
<svg
width={width}
height={height}
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={className}
{...rest}
>
<path
d="M0.7083 14C0.7083 13.1154 0.701518 12.5344 0.849901 12.0449C1.16902 10.9929 1.99225 10.1687 3.04424 9.84961C3.53385 9.70109 4.11539 9.70801 5.00029 9.70801H8.00029C8.34521 9.70818 8.62512 9.98809 8.62529 10.333C8.62529 10.6781 8.34532 10.9578 8.00029 10.958H5.00029C4.0248 10.958 3.67493 10.9649 3.40752 11.0459C2.75503 11.2438 2.24415 11.7548 2.04619 12.4072C1.96506 12.6747 1.9583 13.0242 1.9583 14C1.9583 14.3452 1.67848 14.625 1.3333 14.625C0.988122 14.625 0.7083 14.3452 0.7083 14ZM9.04131 5C9.04131 3.68832 7.97798 2.625 6.66631 2.625C5.35478 2.62518 4.29131 3.68843 4.29131 5C4.29131 6.31157 5.35478 7.37482 6.66631 7.375C7.97798 7.375 9.04131 6.31168 9.04131 5ZM10.2913 5C10.2913 7.00203 8.66834 8.625 6.66631 8.625C4.66442 8.62482 3.04131 7.00192 3.04131 5C3.04131 2.99808 4.66442 1.37518 6.66631 1.375C8.66834 1.375 10.2913 2.99797 10.2913 5Z"
fill={color}
/>
<path
d="M11.6338 9.27539C11.9026 9.27559 12.1415 9.44806 12.2265 9.70312L13.0332 12.124L13.1406 11.8027L13.1797 11.7109C13.2861 11.5072 13.4981 11.375 13.7334 11.375H14.667C15.0119 11.3752 15.2917 11.6551 15.292 12C15.292 12.3451 15.012 12.6248 14.667 12.625H14.1836L13.6259 14.2979C13.5409 14.5531 13.3022 14.7256 13.0332 14.7256C12.7642 14.7255 12.5255 14.553 12.4404 14.2979L11.6328 11.877L11.5263 12.1982C11.4412 12.4533 11.2024 12.6249 10.9336 12.625H9.99997C9.65479 12.625 9.37497 12.3452 9.37497 12C9.37518 11.655 9.65492 11.375 9.99997 11.375H10.4834L11.04 9.70312C11.1251 9.44791 11.3647 9.27539 11.6338 9.27539Z"
fill={color}
/>
</svg>
);

7
packages/propel/src/tabs/tabs.stories.tsx
View file

@ -1,6 +1,7 @@
import { useState } from "react"; import { useState } from "react";
import type { Meta, StoryObj } from "@storybook/react-vite"; import type { Meta, StoryObj } from "@storybook/react-vite";
import { Home, Settings, User, Bell } from "lucide-react"; import { Settings, User, Bell } from "lucide-react";
import { HomeIcon } from "../icons";
import { Tabs } from "./tabs"; import { Tabs } from "./tabs";
type TabOption = { type TabOption = {
@ -152,7 +153,7 @@ export const DisabledTab: Story = {
export const WithIcons: Story = { export const WithIcons: Story = {
render({ defaultValue }) { render({ defaultValue }) {
const tabsWithIcons = [ const tabsWithIcons = [
{ label: "Home", value: "home", icon: Home }, { label: "Home", value: "home", icon: HomeIcon },
{ label: "Profile", value: "profile", icon: User }, { label: "Profile", value: "profile", icon: User },
{ label: "Settings", value: "settings", icon: Settings }, { label: "Settings", value: "settings", icon: Settings },
{ label: "Notifications", value: "notifications", icon: Bell }, { label: "Notifications", value: "notifications", icon: Bell },
@ -184,7 +185,7 @@ export const WithIcons: Story = {
export const IconsOnly: Story = { export const IconsOnly: Story = {
render({ defaultValue }) { render({ defaultValue }) {
const iconTabs = [ const iconTabs = [
{ value: "home", icon: Home }, { value: "home", icon: HomeIcon },
{ value: "profile", icon: User }, { value: "profile", icon: User },
{ value: "settings", icon: Settings }, { value: "settings", icon: Settings },
{ value: "notifications", icon: Bell }, { value: "notifications", icon: Bell },