Wire up EmailConfirmationModal's close button

src/components/dropdown-banner/email-confirmation/banner.jsx

@@ -10,7 +10,12 @@ const EmailConfirmationBanner = ({onRequestDismiss}) => {
     const [showEmailConfirmationModal, setShowEmailConfirmationModal] = useState(false);
     return (
         <React.Fragment>
-            {(showEmailConfirmationModal && <EmailConfirmationModal />)}
+            {(showEmailConfirmationModal && <EmailConfirmationModal
+                isOpen
+                onRequestClose={() => {
+                    setShowEmailConfirmationModal(false);
+                }}
+            />)}
             <DropdownBanner
                 className="warning"
                 key="confirmedEmail"

src/components/modal/email-confirmation/modal.jsx

@@ -12,7 +12,8 @@ import ModalTitle from '../base/modal-title.jsx';
 
 const EmailConfirmationModal = props => (
     <Modal
-        isOpen
+        isOpen={props.isOpen}
+        onRequestClose={props.onRequestClose}
     >
         <ModalTitle />
         <p>{props.email}</p>
@@ -21,7 +22,8 @@ const EmailConfirmationModal = props => (
 
 EmailConfirmationModal.propTypes = {
     email: PropTypes.string,
-    handleClose: PropTypes.func
+    isOpen: PropTypes.bool,
+    onRequestClose: PropTypes.func
 };
 const mapStateToProps = state => ({
     email: state.session.session.user.email

src/views/preview/presentation.jsx

@@ -93,6 +93,7 @@ const PreviewPresentation = ({
     onAddToStudioClicked,
     onAddToStudioClosed,
     onCloseAdminPanel,
+    onCloseEmailConfirmationModal,
     onDeleteComment,
     onFavoriteClicked,
     onGreenFlag,
@@ -223,7 +224,10 @@ const PreviewPresentation = ({
     );
     return (
         <div className="preview">
-            {showEmailConfirmationModal && <EmailConfirmationModal />}
+            {showEmailConfirmationModal && <EmailConfirmationModal
+                isOpen={true}
+                onRequestClose={onCloseEmailConfirmationModal}
+            />}
             {showAdminPanel && (
                 <AdminPanel
                     className={classNames('project-admin-panel', {
@@ -746,6 +750,7 @@ PreviewPresentation.propTypes = {
     onAddToStudioClicked: PropTypes.func,
     onAddToStudioClosed: PropTypes.func,
     onCloseAdminPanel: PropTypes.func,
+    onCloseEmailConfirmationModal: PropTypes.func,
     onDeleteComment: PropTypes.func,
     onFavoriteClicked: PropTypes.func,
     onGreenFlag: PropTypes.func,

src/views/preview/project-view.jsx

@@ -62,6 +62,7 @@ class Preview extends React.Component {
             'handleMessage',
             'handlePopState',
             'handleCloseAdminPanel',
+            'handleCloseEmailConfirmationModal',
             'handleIsRemixing',
             'handleOpenAdminPanel',
             'handleReportClick',
@@ -626,6 +627,9 @@ class Preview extends React.Component {
             showEmailConfirmationModal: true
         });
     }
+    handleCloseEmailConfirmationModal () {
+        this.setState({showEmailConfirmationModal: false});
+    }
     handleUpdateProjectTitle (title) {
         this.props.updateProject(
             this.props.projectInfo.id,
@@ -781,6 +785,7 @@ class Preview extends React.Component {
                             onAddToStudioClicked={this.handleAddToStudioClick}
                             onAddToStudioClosed={this.handleAddToStudioClose}
                             onCloseAdminPanel={this.handleCloseAdminPanel}
+                            onCloseEmailConfirmationModal={this.handleCloseEmailConfirmationModal}
                             onDeleteComment={this.handleDeleteComment}
                             onFavoriteClicked={this.handleFavoriteToggle}
                             onGreenFlag={this.handleGreenFlag}