1 files changed, 19 insertions, 7 deletions

diff --git a/src/components/ui/Modal/index.js b/src/components/ui/Modal/index.js
index d84e4c713..0b7154760 100644
--- a/src/components/ui/Modal/index.js
+++ b/src/components/ui/Modal/index.js
@@ -3,9 +3,12 @@ import ReactModal from 'react-modal';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import injectCSS from 'react-jss';
+import { Icon } from '@meetfranz/ui';
 
 import styles from './styles';
 
+// ReactModal.setAppElement('#root');
+
 export default @injectCSS(styles) class Modal extends Component {
   static propTypes = {
     children: PropTypes.node.isRequired,
@@ -14,11 +17,15 @@ export default @injectCSS(styles) class Modal extends Component {
     isOpen: PropTypes.bool.isRequired,
     portal: PropTypes.string,
     close: PropTypes.func.isRequired,
+    shouldCloseOnOverlayClick: PropTypes.bool,
+    showClose: PropTypes.bool,
   }
 
   static defaultProps = {
     className: null,
     portal: 'modal-portal',
+    shouldCloseOnOverlayClick: false,
+    showClose: true,
   }
 
   render() {
@@ -29,6 +36,8 @@ export default @injectCSS(styles) class Modal extends Component {
       isOpen,
       portal,
       close,
+      shouldCloseOnOverlayClick,
+      showClose,
     } = this.props;
 
     return (
@@ -42,14 +51,17 @@ export default @injectCSS(styles) class Modal extends Component {
         overlayClassName={classes.overlay}
         portal={portal}
         onRequestClose={close}
+        shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}
       >
-        {/* <button
-          type="button"
-          className={classnames({
-            [`${classes.close}`]: true,
-            'mdi mdi-close': true,
-          })}
-        /> */}
+        {showClose && close && (
+          <button
+            type="button"
+            className={classes.close}
+            onClick={close}
+          >
+            <Icon icon="mdiClose" size={1.5} />
+          </button>
+        )}
         <div className={classes.content}>
           {children}
         </div>