mirror of
https://github.com/makeplane/plane.git
synced 2026-02-04 21:21:03 -06:00
regression: red and green color backgrounds (#8456)
This commit is contained in:
committed by
GitHub
parent
2980c2d76b
commit
6cc5c1946a
@@ -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">
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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",
|
||||
},
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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;
|
||||
|
||||
|
||||
@@ -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"}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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"
|
||||
: ""
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
|
||||
@@ -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" />
|
||||
) : (
|
||||
|
||||
@@ -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 }
|
||||
)}
|
||||
|
||||
@@ -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.
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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 ? (
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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)}
|
||||
|
||||
@@ -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}%
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
) : (
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
@@ -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();
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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",
|
||||
};
|
||||
|
||||
@@ -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(
|
||||
|
||||
@@ -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: {
|
||||
|
||||
@@ -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]: {
|
||||
|
||||
@@ -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";
|
||||
}
|
||||
|
||||
@@ -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
|
||||
)}
|
||||
|
||||
@@ -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",
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user