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

* chore: code refactor

* chore: code refactor

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

@@ -1,10 +1,9 @@
 "use client";
 
 import { isNil } from "lodash-es";
-import { ContrastIcon } from "lucide-react";
 // types
 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 {
   GroupByColumnTypes,
   IGroupByColumn,
@@ -76,7 +75,7 @@ const getCycleColumns = (cycleStore: ICycleStore): IGroupByColumn[] | undefined
   cycleGroups.push({
     id: "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 },
   });
 

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

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

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

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

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

@@ -1,7 +1,6 @@
 "use client";
 
 import { Command } from "cmdk";
-import { ContrastIcon } from "lucide-react";
 // hooks
 import {
   CYCLE_TRACKER_ELEMENTS,
@@ -9,7 +8,7 @@ import {
   PROJECT_PAGE_TRACKER_ELEMENTS,
   PROJECT_VIEW_TRACKER_ELEMENTS,
 } from "@plane/constants";
-import { ModuleIcon, PageIcon, ViewsIcon } from "@plane/propel/icons";
+import { CycleIcon, ModuleIcon, PageIcon, ViewsIcon } from "@plane/propel/icons";
 // hooks
 import { useCommandPalette } from "@/hooks/store/use-command-palette";
 // ui
@@ -36,7 +35,7 @@ export const CommandPaletteProjectActions: React.FC<Props> = (props) => {
           className="focus:outline-none"
         >
           <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
           </div>
           <kbd>Q</kbd>

apps/web/core/components/core/activity.tsx

@@ -13,7 +13,6 @@ import {
   Users2Icon,
   ArchiveIcon,
   PaperclipIcon,
-  ContrastIcon,
   TriangleIcon,
   LayoutGridIcon,
   SignalMediumIcon,
@@ -23,6 +22,7 @@ import {
 import {
   BlockedIcon,
   BlockerIcon,
+  CycleIcon,
   EpicIcon,
   IntakeIcon,
   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: {
     message: (activity, showIssue, workspaceSlug) => {

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

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

apps/web/core/components/readonly/cycle.tsx

@@ -4,7 +4,7 @@ import { useEffect } from "react";
 import { observer } from "mobx-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { ContrastIcon } from "@plane/propel/icons";
+import { CycleIcon } from "@plane/propel/icons";
 import { cn } from "@plane/utils";
 // hooks
 import { useCycle } from "@/hooks/store/use-cycle";
@@ -33,7 +33,7 @@ export const ReadonlyCycle: React.FC<TReadonlyCycleProps> = observer((props) =>
 
   return (
     <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>
     </div>
   );

packages/propel/src/icons/cycle/cycle-group-icon.tsx

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

packages/propel/src/icons/dashboard-icon.tsx

@@ -19,7 +19,7 @@ export const DashboardIcon: React.FC<ISvgIcons> = ({
     {...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"
+      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}
     />
   </svg>