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 739b201a083..5243521731e 100644 --- a/apps/web/core/components/inbox/content/inbox-issue-header.tsx +++ b/apps/web/core/components/inbox/content/inbox-issue-header.tsx @@ -4,15 +4,24 @@ * See the LICENSE file for details. */ -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 } from "@plane/types"; import { EInboxIssueStatus } from "@plane/types"; @@ -68,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(); @@ -297,73 +307,70 @@ export const InboxIssueActionsHeader = observer(function InboxIssueActionsHeader
{!isNotificationEmbed && (
- - + />
)}
{canMarkAsAccepted && ( -
- -
+ )} {canMarkAsDeclined && ( -
- -
+ )} {isAcceptedOrDeclined ? (
router.push(workItemLink)} target="_self"> - @@ -371,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 0d9f98e9c9d..bde81665d54 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 86bcf791288..ceaf5826d25 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/button/helper.tsx b/packages/propel/src/button/helper.tsx index 9e332d55f0b..18130b113c9 100644 --- a/packages/propel/src/button/helper.tsx +++ b/packages/propel/src/button/helper.tsx @@ -17,9 +17,9 @@ export const buttonVariants = cva( "error-fill": "bg-danger-primary text-on-color hover:bg-danger-primary-hover active:bg-danger-primary-active disabled:bg-layer-disabled disabled:text-disabled", "error-outline": - "bg-layer-2 hover:bg-danger-subtle active:bg-danger-subtle-hover disabled:bg-layer-2 text-danger-secondary disabled:text-disabled border border-danger-strong disabled:border-subtle-1", + "border border-danger-strong bg-layer-2 text-danger-secondary hover:bg-danger-subtle active:bg-danger-subtle-hover disabled:border-subtle-1 disabled:bg-layer-2 disabled:text-disabled", secondary: - "bg-layer-2 hover:bg-layer-2-hover active:bg-layer-2-active disabled:bg-layer-transparent text-secondary disabled:text-disabled border border-strong disabled:border-subtle-1 shadow-raised-100", + "border border-strong bg-layer-2 text-secondary shadow-raised-100 hover:bg-layer-2-hover active:bg-layer-2-active disabled:border-subtle-1 disabled:bg-layer-transparent disabled:text-disabled", tertiary: "bg-layer-3 text-secondary hover:bg-layer-3-hover active:bg-layer-3-active disabled:bg-layer-transparent disabled:text-disabled", ghost: 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 00000000000..c0227cbc38a --- /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 00000000000..2b927d62ced --- /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 fc387e1d171..34716ecbe6e 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";