diff --git a/web/modals/modal.css b/web/modals/modal.css --- a/web/modals/modal.css +++ b/web/modals/modal.css @@ -15,11 +15,18 @@ width: 500px; } -.modalClose { +.modalHeaderButtonsContainer { + margin-left: 24px; + display: flex; + column-gap: 8px; + align-items: center; +} + +.modalButton { color: var(--modal-close-color); } -.modalClose:hover { +.modalButton:hover { color: var(--modal-close-color-hover); } 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 @@ -14,13 +14,14 @@ export type ModalSize = 'small' | 'large' | 'fit-content'; export type ModalOverridableProps = { - +name: string, + +name?: string, +subtitle?: string, +icon?: Icon, +onClose: () => void, +withCloseButton?: boolean, +size?: ModalSize, +modalHeaderCentered?: boolean, + +secondaryHeaderButton?: React.Node, }; type ModalProps = { @@ -38,6 +39,7 @@ icon, withCloseButton = true, modalHeaderCentered = false, + secondaryHeaderButton, } = props; const modalContainerClasses = classNames(css.modalContainer, { @@ -50,16 +52,27 @@ [css.modalHeaderCentered]: modalHeaderCentered, }); - const cornerCloseButton = React.useMemo(() => { - if (!withCloseButton) { + const headerButtons = React.useMemo(() => { + if (!withCloseButton && !secondaryHeaderButton) { return null; } + + let closeButton; + if (withCloseButton) { + closeButton = ( + + ); + } + return ( - +
+
{secondaryHeaderButton}
+ {closeButton} +
); - }, [onClose, withCloseButton]); + }, [onClose, secondaryHeaderButton, withCloseButton]); const headerIcon = React.useMemo(() => { if (!icon) { @@ -81,7 +94,7 @@ {headerIcon} {name} - {cornerCloseButton} + {headerButtons} {subtitleNode}