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

[WEB-5129] chore: icons revamp (#7958)

Browse source 
* chore: code refactor

* chore: code refactor
This commit is contained in:
Anmol Singh Bhatia 2025-10-14 12:47:53 +05:30 • committed by GitHub
parent cfb4a8212c
commit 56007e7d47
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 21 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,10 +1,9 @@
"use client"; "use client";
import { isNil } from "lodash-es"; import { isNil } from "lodash-es";
import { ContrastIcon } from "lucide-react";
// types // types
import { EIconSize, ISSUE_PRIORITIES } from "@plane/constants"; import { EIconSize, ISSUE_PRIORITIES } from "@plane/constants";
import { CycleGroupIcon, ModuleIcon, PriorityIcon, StateGroupIcon } from "@plane/propel/icons"; import { CycleGroupIcon, CycleIcon, ModuleIcon, PriorityIcon, StateGroupIcon } from "@plane/propel/icons";
import type { import type {
GroupByColumnTypes, GroupByColumnTypes,
IGroupByColumn, IGroupByColumn,
@ -76,7 +75,7 @@ const getCycleColumns = (cycleStore: ICycleStore): IGroupByColumn[] | undefined
cycleGroups.push({ cycleGroups.push({
id: "None", id: "None",
name: "None", name: "None",
icon: <ContrastIcon className="h-3.5 w-3.5" />, icon: <CycleIcon className="h-3.5 w-3.5" />,
payload: { cycle_id: null }, payload: { cycle_id: null },
}); });

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

@ -3,7 +3,6 @@ import {
CalendarCheck2, CalendarCheck2,
CalendarClock, CalendarClock,
CalendarDays, CalendarDays,
ContrastIcon,
LayersIcon, LayersIcon,
Link2, Link2,
Paperclip, Paperclip,
@ -13,7 +12,7 @@ import {
Users, Users,
} from "lucide-react"; } from "lucide-react";
// types // types
import { DoubleCircleIcon, ISvgIcons, ModuleIcon } from "@plane/propel/icons"; import { CycleIcon, 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 {
@ -72,7 +71,7 @@ export const SpreadSheetPropertyIconMap: Record<string, FC<ISvgIcons>> = {
Triangle: Triangle, Triangle: Triangle,
Tag: Tag, Tag: Tag,
ModuleIcon: ModuleIcon, ModuleIcon: ModuleIcon,
ContrastIcon: ContrastIcon, ContrastIcon: CycleIcon,
Signal: Signal, Signal: Signal,
CalendarClock: CalendarClock, CalendarClock: CalendarClock,
DoubleCircleIcon: DoubleCircleIcon, DoubleCircleIcon: DoubleCircleIcon,

10
apps/web/ce/hooks/work-item-filters/use-work-item-filters-config.tsx
View file

@ -12,9 +12,9 @@ import {
} from "lucide-react"; } from "lucide-react";
// plane imports // plane imports
import { import {
ContrastIcon,
CycleGroupIcon, CycleGroupIcon,
DiceIcon, CycleIcon,
ModuleIcon,
DoubleCircleIcon, DoubleCircleIcon,
PriorityIcon, PriorityIcon,
StateGroupIcon, StateGroupIcon,
@ -189,7 +189,7 @@ export const useWorkItemFiltersConfig = (props: TUseWorkItemFiltersConfigProps):
() => () =>
getCycleFilterConfig<TWorkItemFilterProperty>("cycle_id")({ getCycleFilterConfig<TWorkItemFilterProperty>("cycle_id")({
isEnabled: isFilterEnabled("cycle_id") && project?.cycle_view === true && cycles !== undefined, isEnabled: isFilterEnabled("cycle_id") && project?.cycle_view === true && cycles !== undefined,
filterIcon: ContrastIcon, filterIcon: CycleIcon,
getOptionIcon: (cycleGroup) => <CycleGroupIcon cycleGroup={cycleGroup} className="h-3.5 w-3.5 flex-shrink-0" />, getOptionIcon: (cycleGroup) => <CycleGroupIcon cycleGroup={cycleGroup} className="h-3.5 w-3.5 flex-shrink-0" />,
cycles: cycles ?? [], cycles: cycles ?? [],
...operatorConfigs, ...operatorConfigs,
@ -202,8 +202,8 @@ export const useWorkItemFiltersConfig = (props: TUseWorkItemFiltersConfigProps):
() => () =>
getModuleFilterConfig<TWorkItemFilterProperty>("module_id")({ getModuleFilterConfig<TWorkItemFilterProperty>("module_id")({
isEnabled: isFilterEnabled("module_id") && project?.module_view === true && modules !== undefined, isEnabled: isFilterEnabled("module_id") && project?.module_view === true && modules !== undefined,
filterIcon: DiceIcon, filterIcon: ModuleIcon,
getOptionIcon: () => <DiceIcon className="h-3 w-3 flex-shrink-0" />, getOptionIcon: () => <ModuleIcon className="h-3 w-3 flex-shrink-0" />,
modules: modules ?? [], modules: modules ?? [],
...operatorConfigs, ...operatorConfigs,
}), }),

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

@ -1,7 +1,6 @@
"use client"; "use client";
import { Command } from "cmdk"; import { Command } from "cmdk";
import { ContrastIcon } from "lucide-react";
// hooks // hooks
import { import {
CYCLE_TRACKER_ELEMENTS, CYCLE_TRACKER_ELEMENTS,
@ -9,7 +8,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 { ModuleIcon, PageIcon, ViewsIcon } from "@plane/propel/icons"; import { CycleIcon, 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
@ -36,7 +35,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">
<ContrastIcon className="h-3.5 w-3.5" /> <CycleIcon className="h-3.5 w-3.5" />
Create new cycle Create new cycle
</div> </div>
<kbd>Q</kbd> <kbd>Q</kbd>

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

@ -13,7 +13,6 @@ import {
Users2Icon, Users2Icon,
ArchiveIcon, ArchiveIcon,
PaperclipIcon, PaperclipIcon,
ContrastIcon,
TriangleIcon, TriangleIcon,
LayoutGridIcon, LayoutGridIcon,
SignalMediumIcon, SignalMediumIcon,
@ -23,6 +22,7 @@ import {
import { import {
BlockedIcon, BlockedIcon,
BlockerIcon, BlockerIcon,
CycleIcon,
EpicIcon, EpicIcon,
IntakeIcon, IntakeIcon,
ModuleIcon, ModuleIcon,
@ -470,7 +470,7 @@ const activityDetails: {
</> </>
); );
}, },
icon: <ContrastIcon size={12} className="text-custom-text-200" aria-hidden="true" />, icon: <CycleIcon height={12} width={12} className="text-custom-text-200" aria-hidden="true" />,
}, },
modules: { modules: {
message: (activity, showIssue, workspaceSlug) => { message: (activity, showIssue, workspaceSlug) => {

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

@ -4,10 +4,9 @@ import { CSSProperties, FC } from "react";
import { extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item"; import { extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
import { clone, isNil, pull, uniq, concat } from "lodash-es"; import { clone, isNil, pull, uniq, concat } from "lodash-es";
import scrollIntoView from "smooth-scroll-into-view-if-needed"; import scrollIntoView from "smooth-scroll-into-view-if-needed";
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, ISvgIcons, ModuleIcon, PriorityIcon, StateGroupIcon } from "@plane/propel/icons"; import { CycleGroupIcon, CycleIcon, ISvgIcons, ModuleIcon, PriorityIcon, StateGroupIcon } from "@plane/propel/icons";
import { import {
EIssuesStoreType, EIssuesStoreType,
GroupByColumnTypes, GroupByColumnTypes,
@ -172,7 +171,7 @@ const getCycleColumns = (): IGroupByColumn[] | undefined => {
cycles.push({ cycles.push({
id: "None", id: "None",
name: "None", name: "None",
icon: <ContrastIcon className="h-3.5 w-3.5" />, icon: <CycleIcon className="h-3.5 w-3.5" />,
payload: {}, payload: {},
}); });
return cycles; return cycles;

4
apps/web/core/components/readonly/cycle.tsx
View file

@ -4,7 +4,7 @@ import { useEffect } from "react";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
// plane imports // plane imports
import { useTranslation } from "@plane/i18n"; import { useTranslation } from "@plane/i18n";
import { ContrastIcon } from "@plane/propel/icons"; import { CycleIcon } from "@plane/propel/icons";
import { cn } from "@plane/utils"; import { cn } from "@plane/utils";
// hooks // hooks
import { useCycle } from "@/hooks/store/use-cycle"; import { useCycle } from "@/hooks/store/use-cycle";
@ -33,7 +33,7 @@ export const ReadonlyCycle: React.FC<TReadonlyCycleProps> = observer((props) =>
return ( return (
<div className={cn("flex items-center gap-1 text-sm", className)}> <div className={cn("flex items-center gap-1 text-sm", className)}>
{!hideIcon && <ContrastIcon className="size-4 flex-shrink-0" />} {!hideIcon && <CycleIcon className="size-4 flex-shrink-0" />}
<span className="flex-grow truncate">{cycleName ?? placeholder ?? t("common.none")}</span> <span className="flex-grow truncate">{cycleName ?? placeholder ?? t("common.none")}</span>
</div> </div>
); );

7
packages/propel/src/icons/cycle/cycle-group-icon.tsx
View file

@ -1,13 +1,12 @@
import * as React from "react"; import * as React from "react";
import { CircleDotDashed, Circle } from "lucide-react"; import { CircleDotDashed, Circle } from "lucide-react";
import { CycleIcon } from "../cycle-icon";
import { CircleDotFullIcon } from "./circle-dot-full-icon"; import { CircleDotFullIcon } from "./circle-dot-full-icon";
import { ContrastIcon } from "./contrast-icon";
import { CYCLE_GROUP_COLORS, ICycleGroupIcon } from "./helper"; import { CYCLE_GROUP_COLORS, ICycleGroupIcon } from "./helper";
const iconComponents = { const iconComponents = {
current: ContrastIcon, current: CycleIcon,
upcoming: CircleDotDashed, upcoming: CircleDotDashed,
completed: CircleDotFullIcon, completed: CircleDotFullIcon,
draft: Circle, draft: Circle,
@ -20,7 +19,7 @@ export const CycleGroupIcon: React.FC<ICycleGroupIcon> = ({
height = "12px", height = "12px",
width = "12px", width = "12px",
}) => { }) => {
const CycleIconComponent = iconComponents[cycleGroup] || ContrastIcon; const CycleIconComponent = iconComponents[cycleGroup] || CycleIcon;
return ( return (
<CycleIconComponent <CycleIconComponent

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

@ -19,7 +19,7 @@ export const DashboardIcon: React.FC<ISvgIcons> = ({
{...rest} {...rest}
> >
<path <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" d="M13.3752 2.625H2.62524V7.4668C2.62524 8.03711 2.62497 8.42737 2.64966 8.72949C2.67375 9.02428 2.71803 9.17987 2.77466 9.29102C2.90641 9.54958 3.11671 9.75977 3.37524 9.8916C3.4863 9.94819 3.6422 9.9925 3.93677 10.0166C4.23884 10.0413 4.62934 10.042 5.19946 10.042H10.8C11.3704 10.042 11.7606 10.0413 12.0627 10.0166C12.3575 9.99251 12.5131 9.94823 12.6243 9.8916C12.8829 9.75981 13.0931 9.54963 13.2249 9.29102C13.2815 9.17988 13.3258 9.02426 13.3499 8.72949C13.3745 8.42737 13.3752 8.03711 13.3752 7.4668V2.625ZM10.5598 4.55566C10.8049 4.31293 11.2006 4.3148 11.4436 4.55957C11.6866 4.80474 11.6849 5.20135 11.4397 5.44434L9.6311 7.23633C9.5999 7.26726 9.46941 7.41161 9.29126 7.4873C9.19299 7.52903 9.08863 7.55175 8.98364 7.55566L8.87817 7.55371C8.69021 7.53788 8.52264 7.44647 8.47974 7.42578L7.12622 6.77148L5.4397 8.44434C5.19457 8.68696 4.79881 8.68531 4.55591 8.44043C4.31293 8.19526 4.31465 7.79865 4.55981 7.55566L6.36841 5.76367C6.39962 5.73274 6.53015 5.5884 6.70825 5.5127C6.83939 5.45697 6.9815 5.43463 7.12134 5.44629H7.12231C7.3101 5.46221 7.47687 5.55353 7.51978 5.57422L8.87231 6.22754L10.5598 4.55566ZM14.6252 7.4668C14.6252 8.01642 14.6257 8.46625 14.5959 8.83105C14.5693 9.15661 14.5157 9.45632 14.3948 9.73828L14.3391 9.8584C14.1189 10.2906 13.7836 10.6521 13.3723 10.9043L13.1917 11.0059C12.875 11.1672 12.5364 11.2323 12.1643 11.2627C11.7995 11.2925 11.3497 11.292 10.8 11.292H9.72681L12.3997 13.5195C12.6648 13.7405 12.7007 14.1352 12.4797 14.4004C12.2588 14.6652 11.8649 14.7012 11.5999 14.4805L8.62524 12.001V14C8.62524 14.3451 8.34527 14.6248 8.00024 14.625C7.65507 14.625 7.37524 14.3452 7.37524 14V12L4.39966 14.4805C4.13454 14.701 3.74067 14.6653 3.51978 14.4004C3.2988 14.1352 3.33468 13.7405 3.59985 13.5195L6.27271 11.292H5.19946C4.64993 11.292 4.19996 11.2925 3.83521 11.2627C3.46312 11.2323 3.12451 11.1672 2.80786 11.0059C2.37566 10.7856 2.01416 10.4503 1.76196 10.0391L1.66138 9.8584C1.50002 9.54169 1.43495 9.20321 1.40454 8.83105C1.37474 8.46624 1.37524 8.01645 1.37524 7.4668V2.625H1.33325C0.988074 2.625 0.708252 2.34518 0.708252 2C0.708252 1.65482 0.988074 1.375 1.33325 1.375H14.6663C15.0114 1.375 15.2913 1.65482 15.2913 2C15.2913 2.34518 15.0114 2.625 14.6663 2.625H14.6252V7.4668Z"
fill={color} fill={color}
/> />
</svg> </svg>