Add TransactionDetails modal

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>
           )