Page MenuHomePhabricator
Files F3507905

D10228.id37126.diff
No OneTemporary
Actions

D10228.id37126.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
@@ -62,3 +62,16 @@
line-height: 18px;
color: var(--modal-fg);
}
+
+.modalContentContainer {
+ padding: 16px 32px 24px;
+}
+
+.buttonContainer {
+ background-color: var(--modal-background-secondary-default);
+ padding: 16px 32px;
+}
+
+.primaryButtonContainer > button {
+ width: 100%;
+}
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,
+ +primaryButton?: React.Node,
};
type ModalProps = {
@@ -40,6 +41,7 @@
withCloseButton = true,
modalHeaderCentered = false,
secondaryHeaderButton,
+ primaryButton,
} = props;
const modalContainerClasses = classNames(css.modalContainer, {
@@ -88,6 +90,19 @@
return <h2 className={css.subtitle}>{subtitle}</h2>;
}, [subtitle]);
+ const buttonContainer = React.useMemo(() => {
+ if (!primaryButton) {
+ return null;
+ }
+
+ const className = classNames(
+ css.buttonContainer,
+ css.primaryButtonContainer,
+ );
+
+ return <div className={className}>{primaryButton}</div>;
+ }, [primaryButton]);
+
const modal = React.useMemo(
() => (
<ModalOverlay onClose={onClose}>
@@ -102,11 +117,13 @@
</div>
{subtitleNode}
</div>
- {children}
+ <div className={css.modalContentContainer}>{children}</div>
+ {buttonContainer}
</div>
</ModalOverlay>
),
[
+ buttonContainer,
children,
headerButtons,
headerIcon,

File Metadata

Mime Type
text/plain
Expires
Sat, Dec 21, 9:43 PM (21 h, 13 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2688814
Default Alt Text
D10228.id37126.diff (1 KB)

Event Timeline