diff options
Diffstat (limited to 'ui/app/components/modal')
-rw-r--r-- | ui/app/components/modal/index.scss | 8 | ||||
-rw-r--r-- | ui/app/components/modal/modal.component.js | 18 |
2 files changed, 22 insertions, 4 deletions
diff --git a/ui/app/components/modal/index.scss b/ui/app/components/modal/index.scss index e57156d71..2beb14633 100644 --- a/ui/app/components/modal/index.scss +++ b/ui/app/components/modal/index.scss @@ -8,12 +8,13 @@ flex-flow: column; border-radius: 8px; + @media screen and (max-width: 575px) { + max-height: 450px; + } + &__content { overflow-y: auto; flex: 1; - display: flex; - flex-direction: column; - align-items: center; padding: 16px 32px; @media screen and (max-width: 575px) { @@ -28,6 +29,7 @@ padding: 12px; justify-content: center; border-bottom: 1px solid #d2d8dd; + flex: 0 0 auto; } &__header-close::after { diff --git a/ui/app/components/modal/modal.component.js b/ui/app/components/modal/modal.component.js index 81bdd0010..f9d8c5867 100644 --- a/ui/app/components/modal/modal.component.js +++ b/ui/app/components/modal/modal.component.js @@ -22,6 +22,22 @@ export default class Modal extends PureComponent { cancelType: 'default', } + handleClose = () => { + const { onCancel, onSubmit } = this.props + + /** + * The close button should be used to dismiss the modal, without performing any actions, which + * is typically what props.onCancel does. However, if props.onCancel is undefined, that should + * mean that the modal is a simple notification modal and props.onSubmit can be used to dismiss + * it. + */ + if (onCancel && typeof onCancel === 'function') { + onCancel() + } else { + onSubmit() + } + } + render () { const { children, @@ -44,7 +60,7 @@ export default class Modal extends PureComponent { </div> <div className="modal-container__header-close" - onClick={() => onCancel()} + onClick={this.handleClose} /> </div> ) |