Enhance global modal to accept styles from different components

ui/app/components/modals/modal.js

@@ -14,18 +14,63 @@ const EditAccountNameModal = require('./edit-account-name-modal')
 const NewAccountModal = require('./new-account-modal')
 
 const MODALS = {
-  BUY: [
+  BUY: {
+    contents: [
       h(BuyOptions, {}, []),
     ],
-  EDIT_ACCOUNT_NAME: [
+    mobileModalStyle: {
+      width: '95%',
+      top: isPopupOrNotification() === 'popup' ? '48vh' : '36.5vh',
+      boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
+    },
+    laptopModalStyle: {
+      width: '66%',
+      top: 'calc(30% + 10px)',
+      boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
+    },
+  },
+
+  EDIT_ACCOUNT_NAME: {
+    contents: [
       h(EditAccountNameModal, {}, []),
     ],
-  ACCOUNT_DETAILS: [
+    mobileModalStyle: {
+      width: '95%',
+      top: isPopupOrNotification() === 'popup' ? '48vh' : '36.5vh',
+      boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
+    },
+    laptopModalStyle: {
+      width: '45%',
+      top: 'calc(30% + 10px)',
+      boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
+    },
+  },
+
+  ACCOUNT_DETAILS: {
+    contents: [
       h(AccountDetailsModal, {}, []),
     ],
-  NEW_ACCOUNT: [
+    mobileModalStyle: {},
+    laptopModalStyle: {},
+  },
+
+  NEW_ACCOUNT: {
+    contents: [
       h(NewAccountModal, {}, []),
-  ]
+    ],
+    mobileModalStyle: {},
+    laptopModalStyle: {}
+  },
+
+  DEFAULT: {
+    contents: [],
+    mobileModalStyle: {},
+    laptopModalStyle: {},
+  }
+}
+
+const BACKDROPSTYLE = {
+  backgroundColor: 'rgba(245, 245, 245, 0.85)',
 }
 
 function mapStateToProps (state) {
@@ -51,26 +96,11 @@ function Modal () {
 
 module.exports = connect(mapStateToProps, mapDispatchToProps)(Modal)
 
-const mobileModalStyles = {
-  width: '95%',
-  // Used to create matching t/l/r/b space in mobile view.
-  top: isPopupOrNotification() === 'popup' ? '48vh' : '36.5vh',
-  boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
-}
-
-const laptopModalStyles = {
-  width: '66%',
-  top: 'calc(30% + 10px)',
-  boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
-}
-
-const backdropStyles = {
-  backgroundColor: 'rgba(245, 245, 245, 0.85)',
-}
-
 Modal.prototype.render = function () {
+  const modal = MODALS[this.props.modalState.name || 'DEFAULT']
 
-  const children = MODALS[this.props.modalState.name] || []
+  const children = modal.contents
+  const modalStyle = modal[isMobileView() ? 'mobileModalStyle' : 'laptopModalStyle']
 
   return h(FadeModal,
     {
@@ -80,8 +110,8 @@ Modal.prototype.render = function () {
       ref: (ref) => {
         this.modalRef = ref
       },
-      modalStyle: isMobileView() ? mobileModalStyles : laptopModalStyles,
+      modalStyle,
-      backdropStyle: backdropStyles,
+      backdropStyle: BACKDROPSTYLE,
     },
     children,
   )
@@ -109,16 +139,3 @@ Modal.prototype.hide = function() {
 Modal.prototype.show = function() {
   this.modalRef.show()
 }
-
-// TODO: specify default props and proptypes
-// Modal.defaultProps = {}
-
-// const elementType = require('react-prop-types/lib/elementType')
-// const PropTypes from 'prop-types'
-
-// Modal.propTypes = {
-//   active: PropTypes.bool,
-//   hideModal: PropTypes.func.isRequired,
-//   component: elementType,
-//   onHideCallback: PropTypes.func,
-// }