regression: red and green color backgrounds (#8456)

This commit is contained in:
Aaryan Khandelwal
2025-12-26 19:17:03 +05:30
committed by GitHub
parent 2980c2d76b
commit 6cc5c1946a
42 changed files with 86 additions and 177 deletions

View File

@@ -10,7 +10,7 @@ export function Banner(props: TBanner) {
return (
<div
className={`rounded-md p-2 w-full border ${type === "error" ? "bg-danger-primary border-danger-strong" : "bg-success-primary border-success-strong"}`}
className={`rounded-md p-2 w-full border ${type === "error" ? "bg-danger-subtle border-danger-strong" : "bg-success-subtle border-success-strong"}`}
>
<div className="flex items-center justify-center">
<div className="flex-shrink-0">

View File

@@ -68,7 +68,7 @@ export const AuthEmailForm = observer(function AuthEmailForm(props: TAuthEmailFo
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="name@company.com"
className={`disable-autofill-style h-10 w-full placeholder:text-placeholder autofill:bg-danger-primary border-0 focus:bg-none active:bg-transparent`}
className={`disable-autofill-style h-10 w-full placeholder:text-placeholder autofill:bg-danger-subtle border-0 focus:bg-none active:bg-transparent`}
autoComplete="on"
autoFocus
ref={inputRef}

View File

@@ -132,22 +132,16 @@ export const CommentCard = observer(function CommentCard(props: Props) {
<button
type="submit"
disabled={isSubmitting}
className="group rounded-sm border border-success-strong bg-success-primary p-2 shadow-md duration-300 hover:bg-green-500"
className="group rounded-sm border border-success-strong bg-success-primary p-2 shadow-md duration-300 hover:bg-success-primary"
>
<CheckIcon
className="h-3 w-3 text-success-primary duration-300 group-hover:text-on-color"
strokeWidth={2}
/>
<CheckIcon className="h-3 w-3 text-on-color" strokeWidth={2} />
</button>
<button
type="button"
className="group rounded-sm border border-danger-strong bg-danger-primary p-2 shadow-md duration-300 hover:bg-danger-primary-hover"
onClick={() => setIsEditing(false)}
>
<CloseIcon
className="h-3 w-3 text-danger-primary duration-300 group-hover:text-on-color"
strokeWidth={2}
/>
<CloseIcon className="h-3 w-3 text-on-color" strokeWidth={2} />
</button>
</div>
</form>

View File

@@ -23,7 +23,7 @@ export const ISSUE_RELATION_OPTIONS: Record<TIssueRelationTypes, TRelationObject
blocked_by: {
key: "blocked_by",
i18n_label: "issue.relation.blocked_by",
className: "bg-danger-primary text-danger-primary",
className: "bg-danger-subtle text-danger-primary",
icon: (size) => <CircleDot size={size} className="text-secondary" />,
placeholder: "None",
},

View File

@@ -67,7 +67,7 @@ export const AuthEmailForm = observer(function AuthEmailForm(props: TAuthEmailFo
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder={t("auth.common.email.placeholder")}
className={`disable-autofill-style h-10 w-full placeholder:text-placeholder autofill:bg-red-500 border-0 focus:bg-none active:bg-transparent`}
className={`disable-autofill-style h-10 w-full placeholder:text-placeholder autofill:bg-danger-primary border-0 focus:bg-none active:bg-transparent`}
autoComplete="on"
autoFocus
ref={inputRef}

View File

@@ -124,19 +124,20 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
return (
<>
{isBannerMessage && mode === EAuthModes.SIGN_UP && (
<div className="relative flex items-center p-2 rounded-md gap-2 border border-danger-strong/50 bg-danger-primary">
<div className="w-4 h-4 flex-shrink-0 relative flex justify-center items-center">
<div className="relative flex items-center p-2 rounded-md gap-2 border border-danger-strong/50 bg-danger-subtle">
<div className="w-4 h-4 shrink-0 relative flex justify-center items-center">
<Info size={16} className="text-danger-primary" />
</div>
<div className="w-full text-13 font-medium text-danger-primary">
{t("auth.sign_up.errors.password.strength")}
</div>
<div
className="relative ml-auto w-6 h-6 rounded-xs flex justify-center items-center transition-all cursor-pointer hover:bg-danger-primary text-accent-primary/80"
<button
type="button"
className="relative ml-auto w-6 h-6 rounded-xs flex justify-center items-center transition-all cursor-pointer hover:bg-danger-subtle-hover text-accent-primary/80"
onClick={() => setBannerMessage(false)}
>
<CloseIcon className="w-4 h-4 flex-shrink-0 text-danger-primary" />
</div>
<CloseIcon className="w-4 h-4 shrink-0 text-danger-primary" />
</button>
</div>
)}
<form

View File

@@ -67,7 +67,7 @@ export function DeactivateAccountModal(props: Props) {
<div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
<div className="">
<div className="flex items-start gap-x-4">
<div className="mt-3 grid place-items-center rounded-full bg-danger-primary p-2 sm:mt-3 sm:p-2 md:mt-0 md:p-4 lg:mt-0 lg:p-4 ">
<div className="mt-3 grid place-items-center rounded-full bg-danger-subtle p-2 sm:mt-3 sm:p-2 md:mt-0 md:p-4 lg:mt-0 lg:p-4 ">
<TrashIcon
className="h-4 w-4 text-danger-primary sm:h-4 sm:w-4 md:h-6 md:w-6 lg:h-6 lg:w-6"
aria-hidden="true"

View File

@@ -43,9 +43,9 @@ const variants: Record<NonNullable<Props["variant"]>, Record<"ontrack" | "offtra
atrisk: "text-danger-primary border border-danger-strong",
},
tinted: {
ontrack: "text-success-primary bg-success-primary",
ontrack: "text-success-primary bg-success-subtle",
offtrack: "text-yellow-500 bg-yellow-500/10",
atrisk: "text-danger-primary bg-danger-primary",
atrisk: "text-danger-primary bg-danger-subtle",
},
} as const;

View File

@@ -38,7 +38,7 @@ export function ApiTokenListItem(props: Props) {
<h5 className="truncate text-13 font-medium">{token.label}</h5>
<span
className={`${
token.is_active ? "bg-success-primary text-success-primary" : "bg-layer-1 text-placeholder"
token.is_active ? "bg-success-subtle text-success-primary" : "bg-layer-1 text-placeholder"
} ml-2 flex h-4 max-h-fit items-center rounded-xs px-2 text-11 font-medium`}
>
{token.is_active ? "Active" : "Expired"}

View File

@@ -1,4 +1,4 @@
import React, { useEffect, useRef } from "react";
import { useEffect, useRef } from "react";
import { observer } from "mobx-react";
import { useForm } from "react-hook-form";
import type { EditorRefApi } from "@plane/editor";
@@ -111,40 +111,26 @@ export const CommentCardEditForm = observer(function CommentCardEditForm(props:
onClick={handleSubmit(onEnter)}
disabled={isDisabled}
className={cn(
"group rounded-lg border size-7 flex items-center justify-center shadow-md duration-300",
isDisabled
? "cursor-not-allowed border-success-strong/50 bg-success-primary"
: "border-success-strong bg-success-primary hover:bg-green-500"
"group rounded-lg border border-success-subtle size-7 grid place-items-center shadow-raised-100 bg-success-subtle duration-300",
isDisabled ? "" : "hover:bg-success-subtle-1"
)}
>
<CheckIcon
className={cn(
"size-4 duration-300",
isDisabled ? "text-success-primary/50" : "text-success-primary group-hover:text-on-color"
)}
/>
<CheckIcon className="size-4 text-success-primary" />
</button>
)}
<button
type="button"
disabled={isSubmitting}
className={cn(
"group rounded-lg border size-7 flex items-center justify-center shadow-md duration-300",
isSubmitting
? "cursor-not-allowed border-danger-strong/50 bg-danger-primary"
: "border-danger-strong bg-danger-primary hover:bg-red-500"
"group rounded-lg border border-danger-subtle size-7 grid place-items-center shadow-raised-100 bg-danger-subtle duration-300",
isSubmitting ? "" : "hover:bg-danger-subtle-hover"
)}
onClick={() => {
setIsEditing(false);
editorRef.current?.setEditorValue(comment.comment_html ?? "<p></p>");
}}
>
<CloseIcon
className={cn(
"size-5 duration-300",
isSubmitting ? "text-danger-primary/50" : "text-danger-primary group-hover:text-on-color"
)}
/>
<CloseIcon className="size-4 text-danger-primary" />
</button>
</div>
</form>

View File

@@ -72,11 +72,11 @@ export const useExportColumns = () => {
<span
className={`rounded-sm text-11 px-2 py-1 capitalize ${
rowData.status === "completed"
? "bg-success-primary text-success-primary"
? "bg-success-subtle text-success-primary"
: rowData.status === "processing"
? "bg-yellow-500/20 text-yellow-500"
: rowData.status === "failed"
? "bg-danger-primary text-danger-primary"
? "bg-danger-subtle text-danger-primary"
: rowData.status === "expired"
? "bg-orange-500/20 text-orange-500"
: "bg-gray-500/20 text-gray-500"

View File

@@ -38,11 +38,11 @@ export function SingleExport({ service, refreshing }: Props) {
<span
className={`rounded-sm px-2 py-0.5 text-11 capitalize ${
service.status === "completed"
? "bg-success-primary text-success-primary"
? "bg-success-subtle text-success-primary"
: service.status === "processing"
? "bg-yellow-500/20 text-yellow-500"
: service.status === "failed"
? "bg-danger-primary text-danger-primary"
? "bg-danger-subtle text-danger-primary"
: service.status === "expired"
? "bg-orange-500/20 text-orange-500"
: ""

View File

@@ -270,7 +270,7 @@ export const InboxIssueActionsHeader = observer(function InboxIssueActionsHeader
/>
</>
<Row className="hidden relative lg:flex h-full w-full items-center justify-between gap-2 bg-surface-1 z-[15] border-b border-subtle">
<Row className="hidden relative lg:flex h-full w-full items-center justify-between gap-2 bg-surface-1 z-15 border-b border-subtle">
<div className="flex items-center gap-4">
{isNotificationEmbed && (
<button onClick={embedRemoveCurrentNotification}>
@@ -310,11 +310,11 @@ export const InboxIssueActionsHeader = observer(function InboxIssueActionsHeader
<div className="flex flex-wrap items-center gap-2">
{canMarkAsAccepted && (
<div className="flex-shrink-0">
<div className="shrink-0">
<Button
variant="secondary"
prependIcon={<CircleCheck className="w-3 h-3" />}
className="text-success-primary border border-success-strong bg-success-primary focus:bg-success-primary focus:text-success-primary hover:bg-success-primary"
className="text-on-color border border-success-strong bg-success-primary focus:bg-success-primary focus:text-success-primary hover:bg-success-primary"
onClick={() =>
handleActionWithPermission(
isProjectAdmin,
@@ -329,11 +329,11 @@ export const InboxIssueActionsHeader = observer(function InboxIssueActionsHeader
)}
{canMarkAsDeclined && (
<div className="flex-shrink-0">
<div className="shrink-0">
<Button
variant="secondary"
prependIcon={<CircleX className="w-3 h-3" />}
className="text-danger-primary border border-danger-strong bg-danger-primary focus:bg-danger-primary focus:text-danger-primary hover:bg-danger-primary-hover"
className="text-on-color border border-danger-strong bg-danger-primary focus:bg-danger-primary focus:text-danger-primary hover:bg-danger-primary-hover"
onClick={() =>
handleActionWithPermission(
isProjectAdmin,

View File

@@ -18,7 +18,7 @@ export const ICON_PROPERTIES = {
[EInboxIssueStatus.SNOOZED]: {
icon: Clock,
textColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "text-danger-primary" : "text-placeholder"),
bgColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "bg-danger-primary" : "bg-[#E0E1E6]"),
bgColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "bg-danger-subtle" : "bg-[#E0E1E6]"),
},
[EInboxIssueStatus.ACCEPTED]: {
icon: CheckCircle2,

View File

@@ -59,7 +59,7 @@ export function DeleteImportModal({ isOpen, handleClose, data }: Props) {
<ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
<div className="flex flex-col gap-6 p-6">
<div className="flex w-full items-center justify-start gap-6">
<span className="place-items-center rounded-full bg-danger-primary p-4">
<span className="place-items-center rounded-full bg-danger-subtle p-4">
<AlertTriangle className="h-6 w-6 text-danger-primary" aria-hidden="true" />
</span>
<span className="flex items-center justify-start">

View File

@@ -36,11 +36,11 @@ export const SingleImport = observer(function SingleImport({ service, refreshing
<span
className={`rounded-sm px-2 py-0.5 text-11 capitalize ${
service.status === "completed"
? "bg-success-primary text-success-primary"
? "bg-success-subtle text-success-primary"
: service.status === "processing"
? "bg-yellow-500/20 text-yellow-500"
: service.status === "failed"
? "bg-danger-primary text-danger-primary"
? "bg-danger-subtle text-danger-primary"
: ""
}`}
>

View File

@@ -144,13 +144,17 @@ export function LabelCreate(props: ILabelCreate) {
/>
<button
type="button"
className="grid place-items-center rounded-sm bg-red-500 p-1"
className="grid place-items-center rounded-sm bg-danger-primary p-1"
onClick={() => setIsCreateToggle(false)}
disabled={disabled}
>
<CloseIcon className="h-3.5 w-3.5 text-on-color" />
</button>
<button type="submit" className="grid place-items-center rounded-sm bg-green-500 p-1" disabled={isSubmitting}>
<button
type="submit"
className="grid place-items-center rounded-sm bg-success-primary p-1"
disabled={isSubmitting}
>
{isSubmitting ? (
<Loader className="spin h-3.5 w-3.5 text-on-color" />
) : (

View File

@@ -47,8 +47,8 @@ export function GroupDragOverlay(props: Props) {
className={cn(
`absolute top-0 left-0 h-full w-full items-center text-13 font-medium text-tertiary rounded-sm bg-layer-1/85 ${dragColumnOrientation}`,
{
"flex flex-col border-[1px] border-strong z-[2]": shouldOverlayBeVisible,
"bg-danger-primary": workflowDisabledSource && isDropDisabled,
"flex flex-col border-[1px] border-strong z-2": shouldOverlayBeVisible,
"bg-danger-subtle": workflowDisabledSource && isDropDisabled,
},
{ hidden: !shouldOverlayBeVisible }
)}

View File

@@ -258,7 +258,7 @@ export const BaseKanBanRoot = observer(function BaseKanBanRoot(props: IBaseKanBa
className={`${
isDragging ? `opacity-100` : `opacity-0`
} flex w-full items-center justify-center rounded-sm border-2 border-danger-strong/20 bg-surface-1 px-3 py-5 text-11 font-medium italic text-danger-primary ${
isDragOverDelete ? "bg-red-500 opacity-70 blur-2xl" : ""
isDragOverDelete ? "bg-danger-primary blur-2xl" : ""
} transition duration-300`}
>
Drop here to delete the work item.

View File

@@ -8,7 +8,7 @@ export const GanttQuickAddIssueForm = observer(function GanttQuickAddIssueForm(p
const { ref, projectDetail, hasError, register, onSubmit, isEpic } = props;
const { t } = useTranslation();
return (
<div className={cn("shadow-raised-200", hasError && "border border-danger-strong/20 bg-danger-primary")}>
<div className={cn("shadow-raised-200", hasError && "border border-danger-strong/20 bg-danger-subtle")}>
<form
ref={ref}
onSubmit={onSubmit}

View File

@@ -151,7 +151,7 @@ export const QuickAddIssueRoot = observer(function QuickAddIssueRoot(props: TQui
<div
className={cn(
containerClassName,
errors && errors?.name && errors?.name?.message ? `border-danger-strong bg-danger-primary` : ``
errors && errors?.name && errors?.name?.message ? `border-danger-strong bg-danger-subtle` : ``
)}
>
{isOpen ? (

View File

@@ -21,7 +21,7 @@ export function OnboardingStepIndicator({ currentStep, totalSteps }: OnboardingS
<div
key={`line-${i}`}
className={cn("h-1.5 -ml-0.5 w-full", {
"bg-green-700": isCompleted,
"bg-success-primary": isCompleted,
"bg-surface-1": !isCompleted,
"rounded-l-full": isFirstStep,
"rounded-r-full": isLastStep || isActive,

View File

@@ -34,7 +34,7 @@ export const SwitchAccountDropdown = observer(function SwitchAccountDropdown(pro
<SwitchAccountModal isOpen={showSwitchAccountModal} onClose={() => setShowSwitchAccountModal(false)} />
<Menu as="div" className="relative">
<Menu.Button className="flex items-center gap-x-2.5 px-2 py-1.5 rounded-lg bg-layer-1 z-10">
<div className="size-6 rounded-full bg-green-700 flex items-center justify-center text-on-color font-semibold text-13 capitalize">
<div className="size-6 rounded-full bg-success-primary flex items-center justify-center text-on-color font-semibold text-13 capitalize">
{user?.avatar_url ? (
<img
src={getFileURL(user?.avatar_url)}

View File

@@ -167,10 +167,10 @@ export const ProfileSidebar = observer(function ProfileSidebar(props: TProfileSi
<div
className={`rounded-sm px-1 py-0.5 text-11 font-medium ${
completedIssuePercentage <= 35
? "bg-danger-primary text-danger-primary"
? "bg-danger-subtle text-danger-primary"
: completedIssuePercentage <= 70
? "bg-yellow-500/10 text-yellow-500"
: "bg-success-primary text-success-primary"
: "bg-success-subtle text-success-primary"
}`}
>
{completedIssuePercentage}%

View File

@@ -50,7 +50,7 @@ export const ConfirmProjectMemberRemove = observer(function ConfirmProjectMember
<ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
<div className="bg-surface-1 px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
<div className="sm:flex sm:items-start">
<div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-danger-primary sm:mx-0 sm:h-10 sm:w-10">
<div className="mx-auto flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-danger-subtle sm:mx-0 sm:h-10 sm:w-10">
<AlertTriangle className="h-6 w-6 text-danger-primary" aria-hidden="true" />
</div>
<div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">

View File

@@ -91,7 +91,7 @@ export function DeleteProjectModal(props: DeleteProjectModal) {
<ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
<form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-6 p-6">
<div className="flex w-full items-center justify-start gap-6">
<span className="place-items-center rounded-full bg-danger-primary p-4">
<span className="place-items-center rounded-full bg-danger-subtle p-4">
<AlertTriangle className="h-6 w-6 text-danger-primary" aria-hidden="true" />
</span>
<span className="flex items-center justify-start">

View File

@@ -110,7 +110,7 @@ export const LeaveProjectModal = observer(function LeaveProjectModal(props: ILea
<ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
<form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-6 p-6">
<div className="flex w-full items-center justify-start gap-6">
<span className="place-items-center rounded-full bg-danger-primary p-4">
<span className="place-items-center rounded-full bg-danger-subtle p-4">
<AlertTriangleIcon className="h-6 w-6 text-danger-primary" aria-hidden="true" />
</span>
<span className="flex items-center justify-start">

View File

@@ -96,10 +96,10 @@ export const ViewListItemAction = observer(function ViewListItemAction(props: Pr
{view?.anchor && publishLink ? (
<div
className="px-3 py-1.5 bg-success-primary text-success-primary rounded-sm text-11 font-medium flex items-center gap-1.5 cursor-pointer"
className="px-3 py-1.5 bg-success-subtle text-success-primary rounded-sm text-11 font-medium flex items-center gap-1.5 cursor-pointer"
onClick={() => setPublishModalOpen(true)}
>
<span className="flex-shrink-0 rounded-full size-1.5 bg-green-500" />
<span className="flex-shrink-0 rounded-full size-1.5 bg-success-primary" />
Live
</div>
) : (

View File

@@ -55,7 +55,7 @@ export const ConfirmWorkspaceMemberRemove = observer(function ConfirmWorkspaceMe
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-raised-200 transition-all sm:my-8 sm:w-[40rem]">
<div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
<div className="sm:flex sm:items-start">
<div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
<div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-danger-subtle sm:mx-0 sm:h-10 sm:w-10">
<AlertTriangle className="h-6 w-6 text-danger-primary" aria-hidden="true" />
</div>
<div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">

View File

@@ -29,7 +29,7 @@ export const CYCLE_STATUS: {
i18n_title: "project_cycles.status.completed",
color: "#16A34A",
textColor: "text-success-primary",
bgColor: "bg-green-50",
bgColor: "bg-success-subtle",
},
{
i18n_label: "project_cycles.status.draft",

View File

@@ -44,8 +44,8 @@ export const DURATION_FILTER_OPTIONS: {
// random background colors for project cards
export const PROJECT_BACKGROUND_COLORS = [
"bg-gray-500/20",
"bg-success-primary",
"bg-danger-primary",
"bg-success-subtle",
"bg-danger-subtle",
"bg-orange-500/20",
"bg-blue-500/20",
"bg-yellow-500/20",

View File

@@ -52,14 +52,14 @@ export const MODULE_STATUS: {
value: "completed",
color: MODULE_STATUS_COLORS.completed,
textColor: "text-success-primary",
bgColor: "bg-green-100",
bgColor: "bg-success-subtle",
},
{
i18n_label: "project_modules.status.cancelled",
value: "cancelled",
color: MODULE_STATUS_COLORS.cancelled,
textColor: "text-danger-primary",
bgColor: "bg-red-50",
bgColor: "bg-danger-subtle",
},
];

View File

@@ -90,7 +90,7 @@ export function BubbleMenuLinkSelector(props: Props) {
{editor.getAttributes("link").href ? (
<button
type="button"
className="grid place-items-center rounded-xs p-1 text-danger-primary hover:bg-danger-primary transition-all"
className="grid place-items-center rounded-xs p-1 text-danger-primary hover:bg-danger-subtle-hover transition-all"
onClick={(e) => {
unsetLinkEditor(editor);
e.stopPropagation();

View File

@@ -41,7 +41,7 @@ export function CodeBlockComponent({ node }: Props) {
className={cn(
"group/button hidden group-hover/code:flex items-center justify-center absolute top-2 right-2 z-10 size-8 rounded-md bg-layer-1 border border-subtle transition duration-150 ease-in-out backdrop-blur-sm",
{
"bg-success-primary hover:bg-success-primary active:bg-success-primary": copied,
"bg-success-subtle hover:bg-success-subtle-1 active:bg-success-subtle-1": copied,
}
)}
onClick={copyToClipboard}

View File

@@ -168,7 +168,8 @@ export function CustomImageUploader(props: CustomImageUploaderProps) {
[uploadFile, editor, getPos]
);
const isErrorState = failedToLoadImage || hasDuplicationFailed;
// const isErrorState = failedToLoadImage || hasDuplicationFailed;
const isErrorState = true;
const borderColor =
selected && editor.isEditable && !isErrorState
@@ -212,10 +213,10 @@ export function CustomImageUploader(props: CustomImageUploaderProps) {
"bg-layer-3-hover text-secondary": draggedInside && editor.isEditable && !isErrorState,
"text-accent-secondary bg-accent-primary/10 hover:bg-accent-primary/10 hover:text-accent-secondary":
selected && editor.isEditable && !isErrorState,
"text-danger-primary cursor-default": isErrorState,
"hover:text-danger-primary hover:bg-danger-primary": isErrorState && editor.isEditable,
"bg-danger-primary": isErrorState && selected,
"hover:bg-danger-primary": isErrorState && selected && editor.isEditable,
"text-danger-primary bg-danger-subtle cursor-default": isErrorState,
"hover:text-danger-primary hover:bg-danger-subtle-hover": isErrorState && editor.isEditable,
"bg-danger-subtle-selected": isErrorState && selected,
"hover:bg-danger-subtle-active": isErrorState && selected && editor.isEditable,
}
)}
style={borderColor ? { borderColor } : undefined}
@@ -236,9 +237,9 @@ export function CustomImageUploader(props: CustomImageUploaderProps) {
type="button"
onClick={handleRetryClick}
className={cn(
"flex items-center gap-1 px-2 py-1 font-medium text-danger-primary rounded-md transition-all duration-200 ease-in-out hover:bg-danger-primary hover:text-danger-primary",
"flex items-center gap-1 px-2 py-1 font-medium text-danger-primary rounded-md transition-all duration-200 ease-in-out hover:bg-danger-subtle-hover",
{
"hover:bg-danger-primary": selected,
"hover:bg-danger-subtle-hover": selected,
}
)}
title="Retry duplication"

View File

@@ -14,8 +14,8 @@ export const bannerSizeStyling = {
// TODO: update this with new color once its implemented
// Banner variant styling
export const bannerStyling: IBannerStyling = {
success: "bg-success-primary",
error: "bg-danger-primary",
success: "bg-success-subtle",
error: "bg-danger-subtle",
warning: "bg-yellow-500/10",
info: "bg-blue-500/10",
};

View File

@@ -129,7 +129,7 @@ const buttonVariants = {
outline:
"border border-accent-strong text-accent-primary bg-transparent hover:bg-accent-primary/10 focus:bg-accent-primary/20",
ghost: "text-secondary hover:bg-surface-2 focus:bg-surface-2",
destructive: "bg-red-500 text-on-color hover:bg-red-600 focus:bg-red-600",
destructive: "bg-danger-primary text-on-color hover:bg-danger-primary-hover focus:bg-danger-primary-selected",
};
const ToolbarSubmitButton = React.forwardRef(function ToolbarSubmitButton(

View File

@@ -2,7 +2,7 @@ import type { ICycle } from "./cycle";
import type { TIssue } from "./issues/issue";
import type { IModule } from "./module";
import type { IProjectLite } from "./project";
import type { IStateLite } from "./state";
import type { TStateGroups } from "./state";
import type { IUserLite } from "./users";
import type {
IIssueDisplayProperties,
@@ -11,7 +11,7 @@ import type {
TIssueGroupingFilters,
TIssueOrderByOptions,
} from "./view-props";
import type { IWorkspaceLite, Properties } from "./workspace";
import type { IWorkspaceLite } from "./workspace";
export interface IIssueCycle {
id: string;
@@ -39,23 +39,6 @@ export interface IIssueModule {
workspace: string;
}
export interface IIssueParent {
description: any;
id: string;
name: string;
priority: string | null;
project_detail: IProjectLite;
sequence_id: number;
start_date: string | null;
state_detail: IStateLite;
target_date: string | null;
}
export interface IIssueLink {
title: string;
url: string;
}
export interface ILinkDetails {
created_at: Date;
created_by: string;
@@ -65,37 +48,11 @@ export interface ILinkDetails {
url: string;
}
export interface ISubIssuesState {
backlog: number;
unstarted: number;
started: number;
completed: number;
cancelled: number;
}
export interface ISubIssueResponse {
state_distribution: ISubIssuesState;
state_distribution: Record<TStateGroups, number>;
sub_issues: TIssue[];
}
export interface BlockeIssueDetail {
id: string;
name: string;
sequence_id: number;
project_detail: IProjectLite;
}
export type IssuePriorities = {
id: string;
created_at: Date;
updated_at: Date;
uuid: string;
properties: Properties;
created_by: number;
updated_by: number;
user: string;
};
export interface IIssueLabel {
id: string;
name: string;
@@ -145,31 +102,6 @@ export interface IIssueActivity {
workspace_detail?: IWorkspaceLite;
}
export interface IIssueLite {
id: string;
name: string;
project_id: string;
start_date?: string | null;
target_date?: string | null;
workspace__slug: string;
}
export interface IIssueAttachment {
asset: string;
attributes: {
name: string;
size: number;
};
created_at: string;
created_by: string;
id: string;
issue: string;
project: string;
updated_at: string;
updated_by: string;
workspace: string;
}
export type TIssuePriorities = "urgent" | "high" | "medium" | "low" | "none";
export interface ViewFlags {
@@ -208,15 +140,6 @@ export interface IIssueMap {
[key: string]: TIssue;
}
export interface IIssueListRow {
id: string;
groupId: string;
type: "HEADER" | "NO_ISSUES" | "QUICK_ADD" | "ISSUE";
name?: string;
icon?: React.ReactElement | undefined;
payload?: Partial<TIssue>;
}
export interface ILayoutDisplayFiltersOptions {
display_properties: (keyof IIssueDisplayProperties)[];
display_filters: {

View File

@@ -73,7 +73,7 @@ export type TBaseIssue = {
is_intake?: boolean;
};
export type IssueRelation = {
type IssueRelation = {
id: string;
name: string;
project_id: string;
@@ -182,7 +182,7 @@ export interface IPublicIssue extends Pick<
vote_items: IPublicVote[];
}
export type TPublicIssueResponseResults =
type TPublicIssueResponseResults =
| IPublicIssue[]
| {
[key: string]: {

View File

@@ -54,11 +54,11 @@ export const getFragmentColor = (fragmentIndex: number, activeFragments: number)
switch (activeFragments) {
case 1:
return "bg-red-500";
return "bg-danger-primary";
case 2:
return "bg-orange-500";
case 3:
return "bg-green-500";
return "bg-success-primary";
default:
return "bg-layer-1";
}

View File

@@ -47,7 +47,7 @@ const TextArea = React.forwardRef(function TextArea(
"px-3 py-2": textAreaSize === "sm",
"p-3": textAreaSize === "md",
"border-danger-strong": hasError,
"bg-red-100": hasError && mode === "primary",
"bg-danger-subtle": hasError && mode === "primary",
},
className
)}

View File

@@ -42,7 +42,7 @@ const BUTTON_VARIANTS: Record<TModalVariant, TButtonVariant> = {
};
const VARIANT_CLASSES: Record<TModalVariant, string> = {
danger: "bg-danger-primary text-danger-primary",
danger: "bg-danger-subtle text-danger-primary",
primary: "bg-accent-primary/20 text-accent-primary",
};