From 942d2b98efb25cb024316a89c43e4e6b067d7ff0 Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com> Date: Thu, 26 Mar 2026 18:12:24 +0530 Subject: [PATCH] [WEB-6702] feat: redesign intake action buttons and use design tokens (#8801) * feat: intake action buttons redesign * chore: code refactoring --- .../inbox/content/inbox-issue-header.tsx | 110 ++++++++++-------- .../content/inbox-issue-mobile-header.tsx | 56 +++++---- .../components/inbox/inbox-status-icon.tsx | 16 +-- .../icons/misc/check-circle-filled-icon.tsx | 25 ++++ .../icons/misc/close-circle-filled-icon.tsx | 25 ++++ packages/propel/src/icons/misc/index.ts | 2 + 6 files changed, 156 insertions(+), 78 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/inbox/content/inbox-issue-header.tsx b/apps/web/core/components/inbox/content/inbox-issue-header.tsx index cda57dbc6..524352173 100644 --- a/apps/web/core/components/inbox/content/inbox-issue-header.tsx +++ b/apps/web/core/components/inbox/content/inbox-issue-header.tsx @@ -6,12 +6,22 @@ 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 } from "@plane/types"; import { EInboxIssueStatus } from "@plane/types"; @@ -67,7 +77,8 @@ export const InboxIssueActionsHeader = observer(function InboxIssueActionsHeader const { currentTab, deleteInboxIssue, filteredInboxIssueIds } = useProjectInbox(); const { data: currentUser } = useUser(); const { allowPermissions } = useUserPermissions(); - const { currentProjectDetails } = useProject(); + const { getPartialProjectById } = useProject(); + const currentProjectDetails = getPartialProjectById(projectId); const { t } = useTranslation(); const router = useAppRouter(); @@ -296,73 +307,70 @@ export const InboxIssueActionsHeader = observer(function InboxIssueActionsHeader
{!isNotificationEmbed && (
- - + />
)}
{canMarkAsAccepted && ( -
- -
+ )} {canMarkAsDeclined && ( -
- -
+ )} {isAcceptedOrDeclined ? (
router.push(workItemLink)} target="_self"> - @@ -370,7 +378,11 @@ export const InboxIssueActionsHeader = observer(function InboxIssueActionsHeader ) : ( <> {isAllowed && ( - + } + customButtonClassName={getIconButtonStyling("secondary", "lg")} + placement="bottom-start" + > {canMarkAsAccepted && ( diff --git a/apps/web/core/components/inbox/content/inbox-issue-mobile-header.tsx b/apps/web/core/components/inbox/content/inbox-issue-mobile-header.tsx index 0d9f98e9c..bde81665d 100644 --- a/apps/web/core/components/inbox/content/inbox-issue-mobile-header.tsx +++ b/apps/web/core/components/inbox/content/inbox-issue-mobile-header.tsx @@ -4,11 +4,20 @@ * See the LICENSE file for details. */ -import React from "react"; 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 } from "@plane/types"; + import { Header, CustomMenu, EHeaderVariant } from "@plane/ui"; import { cn, findHowManyDaysLeft, generateWorkItemLink } from "@plane/utils"; // components @@ -18,6 +27,7 @@ import { useProject } from "@/hooks/store/use-project"; import { useAppRouter } from "@/hooks/use-app-router"; // store types import type { IInboxIssueStore } from "@/store/inbox/inbox-issue.store"; + // local imports import { InboxIssueStatus } from "../inbox-issue-status"; @@ -102,20 +112,20 @@ export const InboxIssueActionsMobileHeader = observer(function InboxIssueActions />
- - + />
@@ -124,7 +134,11 @@ export const InboxIssueActionsMobileHeader = observer(function InboxIssueActions
- + } + customButtonClassName={getIconButtonStyling("secondary", "lg")} + placement="bottom-start" + > {isAcceptedOrDeclined && (
@@ -183,8 +197,8 @@ export const InboxIssueActionsMobileHeader = observer(function InboxIssueActions ) } > -
- +
+ Accept
@@ -199,8 +213,8 @@ export const InboxIssueActionsMobileHeader = observer(function InboxIssueActions ) } > -
- +
+ Decline
@@ -208,7 +222,7 @@ export const InboxIssueActionsMobileHeader = observer(function InboxIssueActions {canDelete && !isAcceptedOrDeclined && ( setDeleteIssueModal(true)}>
- + Delete
diff --git a/apps/web/core/components/inbox/inbox-status-icon.tsx b/apps/web/core/components/inbox/inbox-status-icon.tsx index 86bcf7912..ceaf5826d 100644 --- a/apps/web/core/components/inbox/inbox-status-icon.tsx +++ b/apps/web/core/components/inbox/inbox-status-icon.tsx @@ -13,28 +13,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 000000000..c0227cbc3 --- /dev/null +++ b/packages/propel/src/icons/misc/check-circle-filled-icon.tsx @@ -0,0 +1,25 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +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 000000000..2b927d62c --- /dev/null +++ b/packages/propel/src/icons/misc/close-circle-filled-icon.tsx @@ -0,0 +1,25 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +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 fc387e1d1..34716ecbe 100644 --- a/packages/propel/src/icons/misc/index.ts +++ b/packages/propel/src/icons/misc/index.ts @@ -4,4 +4,6 @@ * See the LICENSE file for details. */ +export * from "./check-circle-filled-icon"; +export * from "./close-circle-filled-icon"; export * from "./info-icon";