diff --git a/web/modals/modal.css b/web/modals/modal.css --- a/web/modals/modal.css +++ b/web/modals/modal.css @@ -63,6 +63,10 @@ color: var(--modal-fg); } +.subheaderContainer { + margin-top: 16px; +} + .modalContentContainer { padding: 16px 32px 24px; } diff --git a/web/modals/modal.react.js b/web/modals/modal.react.js --- a/web/modals/modal.react.js +++ b/web/modals/modal.react.js @@ -22,6 +22,7 @@ +size?: ModalSize, +modalHeaderCentered?: boolean, +secondaryHeaderButton?: React.Node, + +subheader?: React.Node, +primaryButton?: React.Node, }; @@ -41,6 +42,7 @@ withCloseButton = true, modalHeaderCentered = false, secondaryHeaderButton, + subheader, primaryButton, } = props; @@ -90,6 +92,14 @@ return

{subtitle}

; }, [subtitle]); + const subheaderContainer = React.useMemo(() => { + if (!subheader) { + return null; + } + + return
{subheader}
; + }, [subheader]); + const buttonContainer = React.useMemo(() => { if (!primaryButton) { return null; @@ -117,6 +127,7 @@ {subtitleNode} + {subheaderContainer}
{children}
{buttonContainer} @@ -131,6 +142,7 @@ modalHeader, name, onClose, + subheaderContainer, subtitleNode, ], );