UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: приведение delete-модалок к black-glass канону
This commit is contained in:
@@ -8,6 +8,7 @@ import type { LucideIcon } from "lucide-react";
|
||||
import { AlertTriangle, Info } from "lucide-react";
|
||||
import React from "react";
|
||||
// components
|
||||
import { useTranslation } from "@plane/i18n";
|
||||
import type { TButtonVariant } from "@plane/propel/button";
|
||||
import { Button } from "@plane/propel/button";
|
||||
import { cn } from "../utils";
|
||||
@@ -43,16 +44,17 @@ const VARIANT_ICONS: Record<TModalVariant, LucideIcon> = {
|
||||
};
|
||||
|
||||
const BUTTON_VARIANTS: Record<TModalVariant, TButtonVariant> = {
|
||||
danger: "error-fill",
|
||||
danger: "primary",
|
||||
primary: "primary",
|
||||
};
|
||||
|
||||
const VARIANT_CLASSES: Record<TModalVariant, string> = {
|
||||
danger: "bg-danger-subtle text-danger-primary",
|
||||
primary: "bg-accent-primary/20 text-accent-primary",
|
||||
danger: "nodedc-modal-alert-icon nodedc-modal-alert-icon-danger",
|
||||
primary: "nodedc-modal-alert-icon nodedc-modal-alert-icon-primary",
|
||||
};
|
||||
|
||||
export function AlertModalCore(props: Props) {
|
||||
const { t } = useTranslation();
|
||||
const {
|
||||
content,
|
||||
handleClose,
|
||||
@@ -62,10 +64,10 @@ export function AlertModalCore(props: Props) {
|
||||
isOpen,
|
||||
position = EModalPosition.CENTER,
|
||||
primaryButtonText = {
|
||||
loading: "Deleting",
|
||||
default: "Delete",
|
||||
loading: t("deleting"),
|
||||
default: t("delete"),
|
||||
},
|
||||
secondaryButtonText = "Cancel",
|
||||
secondaryButtonText = t("cancel"),
|
||||
title,
|
||||
variant = "danger",
|
||||
width = EModalWidth.XL,
|
||||
@@ -94,11 +96,11 @@ export function AlertModalCore(props: Props) {
|
||||
</span>
|
||||
)}
|
||||
<div className="text-center sm:text-left">
|
||||
<h3 className="text-18 font-medium text-secondary">{title}</h3>
|
||||
<h3 className="text-18 font-medium text-primary">{title}</h3>
|
||||
<p className="mt-1 text-13 text-secondary">{content}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col-reverse gap-3 border-t border-subtle/70 px-6 py-4 sm:flex-row sm:justify-end">
|
||||
<div className="flex flex-col-reverse gap-3 px-6 py-4 sm:flex-row sm:justify-end">
|
||||
<Button variant="secondary" onClick={handleClose} className="nodedc-modal-secondary-button min-w-[8.25rem]">
|
||||
{secondaryButtonText}
|
||||
</Button>
|
||||
@@ -108,8 +110,8 @@ export function AlertModalCore(props: Props) {
|
||||
onClick={handleSubmit}
|
||||
loading={isSubmitting}
|
||||
className={cn("min-w-[8.25rem]", {
|
||||
"nodedc-modal-danger-button": variant === "danger",
|
||||
"nodedc-modal-primary-button": variant === "primary",
|
||||
"nodedc-modal-danger-button": variant === "danger",
|
||||
})}
|
||||
>
|
||||
{isSubmitting ? primaryButtonText.loading : primaryButtonText.default}
|
||||
|
||||
@@ -41,7 +41,7 @@ export function ModalCore(props: Props) {
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 bg-backdrop/70 backdrop-blur-sm transition-opacity" />
|
||||
<div className="fixed inset-0 bg-black/60 backdrop-blur-md transition-opacity" />
|
||||
</Transition.Child>
|
||||
|
||||
<div className="fixed inset-0 z-30 overflow-y-auto">
|
||||
@@ -57,7 +57,7 @@ export function ModalCore(props: Props) {
|
||||
>
|
||||
<Dialog.Panel
|
||||
className={cn(
|
||||
"nodedc-glass-modal relative w-full transform rounded-[28px] border border-subtle/70 bg-surface-1/78 text-left shadow-[0_16px_48px_rgba(0,0,0,0.34)] backdrop-blur-2xl transition-all",
|
||||
"nodedc-glass-modal relative w-full transform rounded-[28px] text-left transition-all",
|
||||
width,
|
||||
className
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user