[WEB-5191 | WEB-5197] chore: actions and arrows icon revamp (#7984)

2025-10-29 20:13:08 +05:30 · 2025-10-29 20:13:08 +05:30 · 0e8128594b
commit 0e8128594b
parent 350107d6c1
199 changed files with 700 additions and 539 deletions
--- a/packages/editor/package.json
+++ b/packages/editor/package.json
@ -44,6 +44,7 @@
    "@plane/types": "workspace:*",
    "@plane/ui": "workspace:*",
    "@plane/utils": "workspace:*",
+    "@plane/propel": "workspace:*",
    "@tiptap/core": "catalog:",
    "@tiptap/extension-blockquote": "^2.22.3",
    "@tiptap/extension-character-count": "^2.22.3",
--- a/packages/editor/src/core/components/menus/bubble-menu/node-selector.tsx
+++ b/packages/editor/src/core/components/menus/bubble-menu/node-selector.tsx
@ -1,6 +1,7 @@
 import { Editor } from "@tiptap/react";
-import { Check, ChevronDown } from "lucide-react";
+import { Check } from "lucide-react";
 import { FC } from "react";
+import { ChevronDownIcon } from "@plane/propel/icons";
 // plane utils
 import { cn } from "@plane/utils";
 // components
@ -67,7 +68,7 @@ export const BubbleMenuNodeSelector: FC<Props> = (props) => {
      menuButton={
        <>
          <span>{activeItem?.name}</span>
-          <ChevronDown className="shrink-0 size-3" />
+          <ChevronDownIcon className="shrink-0 size-3" />
        </>
      }
      options={options}
--- a/packages/editor/src/core/extensions/callout/color-selector.tsx
+++ b/packages/editor/src/core/extensions/callout/color-selector.tsx
@ -1,4 +1,5 @@
-import { Ban, ChevronDown } from "lucide-react";
+import { Ban } from "lucide-react";
+import { ChevronDownIcon } from "@plane/propel/icons";
 // plane utils
 import { cn } from "@plane/utils";
 // constants
@ -43,7 +44,7 @@ export const CalloutBlockColorSelector: React.FC<Props> = (props) => {
          disabled={disabled}
        >
          <span>Color</span>
-          <ChevronDown className="flex-shrink-0 size-3" />
+          <ChevronDownIcon className="flex-shrink-0 size-3" />
        </button>
        {isOpen && (
          <section className="absolute top-full right-0 z-10 mt-1 rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 p-2 shadow-custom-shadow-rg animate-in fade-in slide-in-from-top-1">
--- a/packages/editor/src/core/extensions/custom-image/components/toolbar/alignment.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/toolbar/alignment.tsx
@ -1,7 +1,7 @@
-import { ChevronDown } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 // plane imports
 import { useOutsideClickDetector } from "@plane/hooks";
+import { ChevronDownIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/ui";
 // local imports
 import type { TCustomImageAlignment } from "../../types";
@ -38,7 +38,7 @@ export const ImageAlignmentAction: React.FC<Props> = (props) => {
          onClick={() => setIsDropdownOpen((prev) => !prev)}
        >
          {activeAlignmentDetails && <activeAlignmentDetails.icon className="flex-shrink-0 size-3" />}
-          <ChevronDown className="flex-shrink-0 size-2" />
+          <ChevronDownIcon className="flex-shrink-0 size-2" />
        </button>
      </Tooltip>
      {isDropdownOpen && (
--- a/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/modal.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/modal.tsx
@ -1,6 +1,7 @@
-import { Download, ExternalLink, Minus, Plus, X } from "lucide-react";
+import { Download, ExternalLink, Minus, Plus } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import ReactDOM from "react-dom";
+import { CloseIcon } from "@plane/propel/icons";
 // plane imports
 import { cn } from "@plane/utils";

@ -212,7 +213,7 @@ const ImageFullScreenModalWithoutPortal = (props: Props) => {
          className="absolute top-10 right-10 size-8 grid place-items-center"
          aria-label="Close image viewer"
        >
-          <X className="size-8 text-white/60 hover:text-white transition-colors" />
+          <CloseIcon className="size-8 text-white/60 hover:text-white transition-colors" />
        </button>
        <img
          ref={setImageRef}
--- a/packages/editor/src/core/extensions/table/plugins/drag-handles/color-selector.tsx
+++ b/packages/editor/src/core/extensions/table/plugins/drag-handles/color-selector.tsx
@ -1,7 +1,8 @@
 import { Disclosure } from "@headlessui/react";
 import type { Editor } from "@tiptap/core";
-import { Ban, ChevronRight, Palette } from "lucide-react";
+import { Ban, Palette } from "lucide-react";
 // plane imports
+import { ChevronRightIcon } from "@plane/propel/icons";
 import { cn } from "@plane/utils";
 // constants
 import { COLORS_LIST } from "@/constants/common";
@ -50,7 +51,7 @@ export const TableDragHandleDropdownColorSelector: React.FC<Props> = (props) =>
              <Palette className="shrink-0 size-3" />
              Color
            </span>
-            <ChevronRight
+            <ChevronRightIcon
              className={cn("shrink-0 size-3 transition-transform duration-200", {
                "rotate-90": open,
              })}
--- a/packages/editor/src/core/extensions/table/plugins/drag-handles/column/dropdown.tsx
+++ b/packages/editor/src/core/extensions/table/plugins/drag-handles/column/dropdown.tsx
@ -1,7 +1,8 @@
 import type { Editor } from "@tiptap/core";
 import { TableMap } from "@tiptap/pm/tables";
-import { ArrowLeft, ArrowRight, Copy, ToggleRight, Trash2, X, type LucideIcon } from "lucide-react";
+import { ArrowLeft, ArrowRight, Copy, ToggleRight, Trash2, type LucideIcon } from "lucide-react";
 // extensions
+import { CloseIcon, ISvgIcons } from "@plane/propel/icons";
 import { findTable, getSelectedColumns } from "@/extensions/table/table/utilities/helpers";
 // local imports
 import { duplicateColumns } from "../actions";
@ -10,7 +11,7 @@ import { TableDragHandleDropdownColorSelector } from "../color-selector";
 const DROPDOWN_ITEMS: {
  key: string;
  label: string;
-  icon: LucideIcon;
+  icon: LucideIcon | React.FC<ISvgIcons>;
  action: (editor: Editor) => void;
 }[] = [
  {
@ -43,7 +44,7 @@ const DROPDOWN_ITEMS: {
  {
    key: "clear-contents",
    label: "Clear contents",
-    icon: X,
+    icon: CloseIcon,
    action: (editor) => editor.chain().focus().clearSelectedCells().run(),
  },
  {
--- a/packages/editor/src/core/extensions/table/plugins/drag-handles/row/dropdown.tsx
+++ b/packages/editor/src/core/extensions/table/plugins/drag-handles/row/dropdown.tsx
@ -1,7 +1,8 @@
 import type { Editor } from "@tiptap/core";
 import { TableMap } from "@tiptap/pm/tables";
-import { ArrowDown, ArrowUp, Copy, ToggleRight, Trash2, X, type LucideIcon } from "lucide-react";
+import { ArrowDown, ArrowUp, Copy, ToggleRight, Trash2, type LucideIcon } from "lucide-react";
 // extensions
+import { CloseIcon, ISvgIcons } from "@plane/propel/icons";
 import { findTable, getSelectedRows } from "@/extensions/table/table/utilities/helpers";
 // local imports
 import { duplicateRows } from "../actions";
@ -10,7 +11,7 @@ import { TableDragHandleDropdownColorSelector } from "../color-selector";
 const DROPDOWN_ITEMS: {
  key: string;
  label: string;
-  icon: LucideIcon;
+  icon: LucideIcon | React.FC<ISvgIcons>;
  action: (editor: Editor) => void;
 }[] = [
  {
@ -43,7 +44,7 @@ const DROPDOWN_ITEMS: {
  {
    key: "clear-contents",
    label: "Clear contents",
-    icon: X,
+    icon: CloseIcon,
    action: (editor) => editor.chain().focus().clearSelectedCells().run(),
  },
  {