Page MenuHomePhabricator
Files F3295700

D9455.id31954.diff
No OneTemporary
Actions

D9455.id31954.diff
View Options

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 = (
+ <Button className={css.modalButton} onClick={onClose}>
+ <SWMansionIcon size={24} icon="cross" />
+ </Button>
+ );
+ }
+
return (
- <Button className={css.modalClose} onClick={onClose}>
- <SWMansionIcon size={24} icon="cross" />
- </Button>
+ <div className={css.modalHeaderButtonsContainer}>
+ <div className={css.modalButton}>{secondaryHeaderButton}</div>
+ {closeButton}
+ </div>
);
- }, [onClose, withCloseButton]);
+ }, [onClose, secondaryHeaderButton, withCloseButton]);
const headerIcon = React.useMemo(() => {
if (!icon) {
@@ -81,7 +94,7 @@
{headerIcon}
{name}
</h2>
- {cornerCloseButton}
+ {headerButtons}
</div>
{subtitleNode}
</div>
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
@@ -23,7 +23,7 @@
);
return (
- <Modal size="fit-content" onClose={popModal} name="">
+ <Modal size="fit-content" onClose={popModal}>
<UserProfile userInfo={userInfo} />
</Modal>
);

File Metadata

Mime Type
text/plain
Expires
Sun, Nov 17, 10:53 PM (21 h, 15 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2532162
Default Alt Text
D9455.id31954.diff (2 KB)

Event Timeline