refactor: actions icon migration (#8219)

* chore: gitignore updated

* chore: check icon added to propel package

* feat: search icon migration

* chore: check icon migration

* chore: plus icon added to propel package

* chore: code refactor

* chore: plus icon migration and code refactor

* chore: trash icon added to propel package

* chore: code refactor

* chore: trash icon migration

* chore: edit icon added to propel package

* chore: new tab icon added to propel package

* chore: edit icon migration

* chore: newtab icon migration

* chore: lock icon added to propel package

* chore: lock icon migration

* chore: globe icon added to propel package

* chore: globe icon migration

* chore: copy icon added to propel package

* chore: copy icon migration

* chore: link icon added to propel package

* chore: link icon migration

* chore: link icon migration

* chore: info icon added to propel package

* chore: code refactor

* chore: code refactor

* chore: code refactor

* chore: code refactor

apps/web/core/components/comments/card/display.tsx

@@ -2,10 +2,10 @@ import type { ReactNode } from "react";
 import { useCallback, useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { usePathname } from "next/navigation";
-import { Globe2, Lock } from "lucide-react";
 // plane imports
 import type { EditorRefApi } from "@plane/editor";
 import { useHashScroll } from "@plane/hooks";
+import { GlobeIcon, LockIcon } from "@plane/propel/icons";
 import { EIssueCommentAccessSpecifier } from "@plane/types";
 import type { TCommentsOperations, TIssueComment } from "@plane/types";
 import { calculateTimeAgo, cn, getFileURL, renderFormattedDate, renderFormattedTime } from "@plane/utils";
@@ -104,9 +104,9 @@ export const CommentCardDisplay = observer(function CommentCardDisplay(props: TC
       {showAccessSpecifier && (
         <div className="absolute right-2.5 top-2.5 z-[1] text-tertiary">
           {comment.access === EIssueCommentAccessSpecifier.INTERNAL ? (
-            <Lock className="size-3" />
+            <LockIcon className="size-3" />
           ) : (
-            <Globe2 className="size-3" />
+            <GlobeIcon className="size-3" />
           )}
         </div>
       )}

apps/web/core/components/comments/card/edit-form.tsx

@@ -1,9 +1,8 @@
 import React, { useEffect, useRef } from "react";
 import { observer } from "mobx-react";
 import { useForm } from "react-hook-form";
-import { Check } from "lucide-react";
 import type { EditorRefApi } from "@plane/editor";
-import { CloseIcon } from "@plane/propel/icons";
+import { CheckIcon, CloseIcon } from "@plane/propel/icons";
 // plane imports
 import type { TCommentsOperations, TIssueComment } from "@plane/types";
 import { cn, isCommentEmpty } from "@plane/utils";
@@ -118,7 +117,7 @@ export const CommentCardEditForm = observer(function CommentCardEditForm(props:
                 : "border-success-strong bg-success-primary hover:bg-green-500"
             )}
           >
-            <Check
+            <CheckIcon
               className={cn(
                 "size-4 duration-300",
                 isDisabled ? "text-success-primary/50" : "text-success-primary group-hover:text-on-color"

apps/web/core/components/comments/quick-actions.tsx

@@ -1,10 +1,11 @@
 import { useMemo } from "react";
 import { observer } from "mobx-react";
-import { Globe2, Link, Lock, Pencil, Trash2, MoreHorizontal } from "lucide-react";
+import { MoreHorizontal } from "lucide-react";
 // plane imports
 import { EIssueCommentAccessSpecifier } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { IconButton } from "@plane/propel/icon-button";
+import { LinkIcon, GlobeIcon, LockIcon, EditIcon, TrashIcon } from "@plane/propel/icons";
 import type { TIssueComment, TCommentsOperations } from "@plane/types";
 import type { TContextMenuItem } from "@plane/ui";
 import { CustomMenu } from "@plane/ui";
@@ -38,14 +39,14 @@ export const CommentQuickActions = observer(function CommentQuickActions(props:
           key: "edit",
           action: setEditMode,
           title: t("common.actions.edit"),
-          icon: Pencil,
+          icon: EditIcon,
           shouldRender: canEdit,
         },
         {
           key: "copy_link",
           action: () => activityOperations.copyCommentLink(comment.id),
           title: t("common.actions.copy_link"),
-          icon: Link,
+          icon: LinkIcon,
           shouldRender: showCopyLinkOption,
         },
         {
@@ -61,14 +62,14 @@ export const CommentQuickActions = observer(function CommentQuickActions(props:
             comment.access === EIssueCommentAccessSpecifier.INTERNAL
               ? t("issue.comments.switch.public")
               : t("issue.comments.switch.private"),
-          icon: comment.access === EIssueCommentAccessSpecifier.INTERNAL ? Globe2 : Lock,
+          icon: comment.access === EIssueCommentAccessSpecifier.INTERNAL ? GlobeIcon : LockIcon,
           shouldRender: showAccessSpecifier,
         },
         {
           key: "delete",
           action: () => activityOperations.removeComment(comment.id),
           title: t("common.actions.delete"),
-          icon: Trash2,
+          icon: TrashIcon,
           shouldRender: canDelete,
         },
       ];