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) { @@ -68,27 +81,44 @@ return ; }, [icon]); - let subtitleNode; - if (subtitle) { - subtitleNode =

{subtitle}

; - } - return ( - -
-
-
-

- {headerIcon} - {name} -

- {cornerCloseButton} + const subtitleNode = React.useMemo(() => { + if (!subtitle) { + return null; + } + return

{subtitle}

; + }, [subtitle]); + + const modal = React.useMemo( + () => ( + +
+
+
+

+ {headerIcon} + {name} +

+ {headerButtons} +
+ {subtitleNode}
- {subtitleNode} + {children}
- {children} -
- + + ), + [ + children, + headerButtons, + headerIcon, + modalContainerClasses, + modalHeader, + name, + onClose, + subtitleNode, + ], ); + + return modal; } export default Modal; diff --git a/web/modals/user-profile/user-profile-modal.react.js b/web/modals/user-profile/user-profile-modal.react.js --- a/web/modals/user-profile/user-profile-modal.react.js +++ b/web/modals/user-profile/user-profile-modal.react.js @@ -24,7 +24,7 @@ const userProfileModal = React.useMemo( () => ( - + ),