From 31ea40587e4aa7a6ef75ab274201165cc256d63b Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com> Date: Tue, 24 Mar 2026 14:06:12 +0530 Subject: [PATCH] [WEB-6702] feat: redesign intake action buttons and use design tokens (#6403) * feat: CheckCircleFilledIcon and CloseCircleFilledIcon added to propel * feat: intake action button and tokens updated * chore: code refactoring --- .../content/intake-work-item-header.tsx | 107 ++++++++++-------- .../intake-work-item-mobile-header.tsx | 51 +++++---- .../components/intake/intake-status-icon.tsx | 16 +-- .../icons/misc/check-circle-filled-icon.tsx | 32 ++++++ .../icons/misc/close-circle-filled-icon.tsx | 32 ++++++ packages/propel/src/icons/misc/index.ts | 2 + 6 files changed, 165 insertions(+), 75 deletions(-) create mode 100644 packages/propel/src/icons/misc/check-circle-filled-icon.tsx create mode 100644 packages/propel/src/icons/misc/close-circle-filled-icon.tsx diff --git a/apps/web/core/components/intake/content/intake-work-item-header.tsx b/apps/web/core/components/intake/content/intake-work-item-header.tsx index 61e594a579..52915aa4b0 100644 --- a/apps/web/core/components/intake/content/intake-work-item-header.tsx +++ b/apps/web/core/components/intake/content/intake-work-item-header.tsx @@ -14,12 +14,22 @@ import type { FC } from "react"; import { useCallback, useEffect, useState } from "react"; import { observer } from "mobx-react"; -import { CircleCheck, CircleX, Clock, FileStack, MoveRight } from "lucide-react"; +import { Clock, FileStack, MoreHorizontal, MoveRight } from "lucide-react"; // plane imports import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants"; import { useTranslation } from "@plane/i18n"; import { Button } from "@plane/propel/button"; -import { LinkIcon, CopyIcon, NewTabIcon, TrashIcon, ChevronDownIcon, ChevronUpIcon } from "@plane/propel/icons"; +import { IconButton, getIconButtonStyling } from "@plane/propel/icon-button"; +import { + LinkIcon, + CopyIcon, + NewTabIcon, + TrashIcon, + ChevronDownIcon, + ChevronUpIcon, + CheckCircleFilledIcon, + CloseCircleFilledIcon, +} from "@plane/propel/icons"; import { TOAST_TYPE, setToast } from "@plane/propel/toast"; import type { TNameDescriptionLoader, IInboxIssueStore } from "@plane/types"; import { EInboxIssueStatus } from "@plane/types"; @@ -316,73 +326,70 @@ export const InboxIssueActionsHeader = observer(function InboxIssueActionsHeader
{!isNotificationEmbed && (
- - + />
)}
{canMarkAsAccepted && ( -
- -
+ )} {canMarkAsDeclined && ( -
- -
+ )} {isAcceptedOrDeclined ? (
router.push(workItemLink)} target="_self"> - @@ -390,7 +397,11 @@ export const InboxIssueActionsHeader = observer(function InboxIssueActionsHeader ) : ( <> {isAllowed && ( - + } + customButtonClassName={getIconButtonStyling("secondary", "lg")} + placement="bottom-start" + > {canMarkAsAccepted && ( diff --git a/apps/web/core/components/intake/content/intake-work-item-mobile-header.tsx b/apps/web/core/components/intake/content/intake-work-item-mobile-header.tsx index 9958a95d86..93640fbb0e 100644 --- a/apps/web/core/components/intake/content/intake-work-item-mobile-header.tsx +++ b/apps/web/core/components/intake/content/intake-work-item-mobile-header.tsx @@ -12,8 +12,17 @@ */ import { observer } from "mobx-react"; -import { CircleCheck, CircleX, Clock, FileStack, PanelLeft, MoveRight } from "lucide-react"; -import { LinkIcon, NewTabIcon, TrashIcon, ChevronDownIcon, ChevronUpIcon } from "@plane/propel/icons"; +import { Clock, FileStack, MoreHorizontal, PanelLeft, MoveRight } from "lucide-react"; +import { IconButton, getIconButtonStyling } from "@plane/propel/icon-button"; +import { + LinkIcon, + NewTabIcon, + TrashIcon, + ChevronDownIcon, + ChevronUpIcon, + CheckCircleFilledIcon, + CloseCircleFilledIcon, +} from "@plane/propel/icons"; import type { TNameDescriptionLoader, IInboxIssueStore } from "@plane/types"; import { Header, CustomMenu, EHeaderVariant } from "@plane/ui"; import { cn, findHowManyDaysLeft, generateWorkItemLink } from "@plane/utils"; @@ -107,20 +116,20 @@ export const InboxIssueActionsMobileHeader = observer(function InboxIssueActions />
- - + />
@@ -129,7 +138,11 @@ export const InboxIssueActionsMobileHeader = observer(function InboxIssueActions
- + } + customButtonClassName={getIconButtonStyling("secondary", "lg")} + placement="bottom-start" + > {isAcceptedOrDeclined && (
@@ -188,8 +201,8 @@ export const InboxIssueActionsMobileHeader = observer(function InboxIssueActions ) } > -
- +
+ Accept
@@ -204,8 +217,8 @@ export const InboxIssueActionsMobileHeader = observer(function InboxIssueActions ) } > -
- +
+ Decline
diff --git a/apps/web/core/components/intake/intake-status-icon.tsx b/apps/web/core/components/intake/intake-status-icon.tsx index ca0748721b..5d903c1a15 100644 --- a/apps/web/core/components/intake/intake-status-icon.tsx +++ b/apps/web/core/components/intake/intake-status-icon.tsx @@ -20,28 +20,28 @@ import { cn } from "@plane/utils"; export const ICON_PROPERTIES = { [EInboxIssueStatus.PENDING]: { icon: AlertTriangle, - textColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "text-[#AB6400]"), - bgColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "bg-[#FFF7C2]"), + textColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "text-warning-primary"), + bgColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "bg-warning-subtle"), }, [EInboxIssueStatus.DECLINED]: { icon: XCircle, - textColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "text-[#CE2C31]"), - bgColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "bg-[#FEEBEC]"), + textColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "text-danger-primary"), + bgColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "bg-danger-subtle"), }, [EInboxIssueStatus.SNOOZED]: { icon: Clock, textColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "text-danger-primary" : "text-placeholder"), - bgColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "bg-danger-subtle" : "bg-[#E0E1E6]"), + bgColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "bg-danger-subtle" : "bg-layer-3"), }, [EInboxIssueStatus.ACCEPTED]: { icon: CheckCircle2, - textColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "text-[#3E9B4F]"), - bgColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "bg-[#E9F6E9]"), + textColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "text-success-primary"), + bgColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "bg-success-subtle"), }, [EInboxIssueStatus.DUPLICATE]: { icon: CopyIcon, textColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "text-secondary"), - bgColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "bg-gray-500/10"), + bgColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "bg-layer-3"), }, }; export function InboxStatusIcon({ diff --git a/packages/propel/src/icons/misc/check-circle-filled-icon.tsx b/packages/propel/src/icons/misc/check-circle-filled-icon.tsx new file mode 100644 index 0000000000..0f54b71930 --- /dev/null +++ b/packages/propel/src/icons/misc/check-circle-filled-icon.tsx @@ -0,0 +1,32 @@ +/** + * SPDX-FileCopyrightText: 2023-present Plane Software, Inc. + * SPDX-License-Identifier: LicenseRef-Plane-Commercial + * + * Licensed under the Plane Commercial License (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * https://plane.so/legals/eula + * + * DO NOT remove or modify this notice. + * NOTICE: Proprietary and confidential. Unauthorized use or distribution is prohibited. + */ + +import * as React from "react"; + +import { IconWrapper } from "../icon-wrapper"; +import type { ISvgIcons } from "../type"; + +export const CheckCircleFilledIcon: React.FC = ({ color = "currentColor", ...rest }) => { + const clipPathId = React.useId(); + + return ( + + + + ); +}; diff --git a/packages/propel/src/icons/misc/close-circle-filled-icon.tsx b/packages/propel/src/icons/misc/close-circle-filled-icon.tsx new file mode 100644 index 0000000000..710f52b4cb --- /dev/null +++ b/packages/propel/src/icons/misc/close-circle-filled-icon.tsx @@ -0,0 +1,32 @@ +/** + * SPDX-FileCopyrightText: 2023-present Plane Software, Inc. + * SPDX-License-Identifier: LicenseRef-Plane-Commercial + * + * Licensed under the Plane Commercial License (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * https://plane.so/legals/eula + * + * DO NOT remove or modify this notice. + * NOTICE: Proprietary and confidential. Unauthorized use or distribution is prohibited. + */ + +import * as React from "react"; + +import { IconWrapper } from "../icon-wrapper"; +import type { ISvgIcons } from "../type"; + +export const CloseCircleFilledIcon: React.FC = ({ color = "currentColor", ...rest }) => { + const clipPathId = React.useId(); + + return ( + + + + ); +}; diff --git a/packages/propel/src/icons/misc/index.ts b/packages/propel/src/icons/misc/index.ts index e9cfb4037c..95d13e68fd 100644 --- a/packages/propel/src/icons/misc/index.ts +++ b/packages/propel/src/icons/misc/index.ts @@ -17,3 +17,5 @@ export * from "./activity-icon"; export * from "./info-icon"; export * from "./updates-icon"; export * from "./shift-icon"; +export * from "./check-circle-filled-icon"; +export * from "./close-circle-filled-icon";