diff --git a/app/components/modals/Create/Create.container.tsx b/app/components/modals/Create/Create.container.tsx index 0390eb2..180f528 100644 --- a/app/components/modals/Create/Create.container.tsx +++ b/app/components/modals/Create/Create.container.tsx @@ -25,6 +25,7 @@ const CreateContainer = memo( className = "", ariaLabel, ariaLabelledBy, + backdropVariant = "default", }) => { const createRef = useRef(null); const overlayRef = useRef(null); @@ -132,6 +133,7 @@ const CreateContainer = memo( ariaLabelledBy={ariaLabelledBy} createRef={createRef} overlayRef={overlayRef} + backdropVariant={backdropVariant} /> ); }, diff --git a/app/components/modals/Create/Create.types.ts b/app/components/modals/Create/Create.types.ts index 4b6214a..7f0a7ee 100644 --- a/app/components/modals/Create/Create.types.ts +++ b/app/components/modals/Create/Create.types.ts @@ -27,6 +27,11 @@ export interface CreateProps { multiSelect?: boolean; upload?: boolean; proportion?: boolean; + /** + * Backdrop behind the dialog. `loginYellow` matches the Login modal’s blurred brand overlay. + * @default "default" + */ + backdropVariant?: "default" | "loginYellow"; } export interface CreateViewProps { @@ -51,4 +56,5 @@ export interface CreateViewProps { ariaLabelledBy?: string; createRef: React.RefObject; overlayRef: React.RefObject; + backdropVariant: "default" | "loginYellow"; } diff --git a/app/components/modals/Create/Create.view.tsx b/app/components/modals/Create/Create.view.tsx index 112d624..98933bb 100644 --- a/app/components/modals/Create/Create.view.tsx +++ b/app/components/modals/Create/Create.view.tsx @@ -6,6 +6,15 @@ import ModalFooter from "../../utility/ModalFooter"; import ModalHeader from "../../utility/ModalHeader"; import type { CreateViewProps } from "./Create.types"; +const backdropOverlayClasses: Record< + CreateViewProps["backdropVariant"], + string +> = { + default: "fixed inset-0 bg-black/50 z-[9998]", + loginYellow: + "fixed inset-0 z-[9998] bg-[var(--color-surface-inverse-brand-primary)]/85 backdrop-blur-md supports-[backdrop-filter]:bg-[var(--color-surface-inverse-brand-primary)]/75", +}; + export function CreateView({ isOpen, onClose, @@ -28,6 +37,7 @@ export function CreateView({ ariaLabelledBy, createRef, overlayRef, + backdropVariant, }: CreateViewProps) { if (!isOpen) return null; @@ -36,7 +46,7 @@ export function CreateView({ {/* Overlay */} + } + showBackButton={false} + showNextButton + onNext={handleModalConfirm} + nextButtonText={detailModal.addValueButton} + ariaLabel={modalChipLabel || "Core value details"} + > +
+