fixed export modal, also added pointer cursor for export modal exit

Author: ChristianEdwardPadilla

src/components/SimpleModal.jsx

@@ -46,39 +46,52 @@ const SimpleModal = (props) => {
         onClose={closeModal}
         open={open}
       >
-        <div style={{
-          top: '50%',
-          left: '50%',
-          transform: 'translate(-50%, -50%)',
-        }} className={classes.paper}>
+        <div
+          style={{
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+          }}
+          className={classes.paper}
+        >
           <Icon
             onClick={closeModal}
-            className='closeIcon'
+            className="closeIcon"
             style={{
               position: 'absolute',
               top: '2%',
               right: '1%',
               fontSize: '17px',
               fontWeight: 'bold',
             }}
-          >close</Icon>
+          >
+            close
+          </Icon>
           <Typography variant="title" id="modal-title">
             {message}
           </Typography>
+          <div>{children}</div>
           <div>
-            {children}
-          </div>
-          <div>
-            {
-              secBtnLabel ? <Button variant='extendedFab' color="secondary" className={classes.button} onClick={secBtnAction}>
+            {secBtnLabel ? (
+              <Button
+                variant="extendedFab"
+                color="secondary"
+                className={classes.button}
+                onClick={secBtnAction}
+              >
                 {secBtnLabel}
-              </Button> : null
-            }
-            {
-              primBtnLabel ? <Button variant='extendedFab' color="primary" className={classes.button} onClick={primBtnAction}>
+              </Button>
+            ) : null}
+            {primBtnLabel ? (
+              <Button
+                variant="extendedFab"
+                color="primary"
+                className={classes.button}
+                onClick={primBtnAction}
+              >
                 {primBtnLabel}
-              </Button> : null
-            }
+              </Button>
+            ) : null}
           </div>
         </div>
       </Modal>

src/containers/MainContainer.tsx

@@ -19,7 +19,7 @@ import {
 } from '../actions/components';
 import KonvaStage from '../components/KonvaStage.jsx';
 import MainContainerHeader from '../components/MainContainerHeader.jsx';
-// import createModal from '../utils/createModal.util';
+import createModal from '../utils/createModal.util';
 
 const IPC = require('electron').ipcRenderer;
 
@@ -158,6 +158,7 @@ class MainContainer extends Component {
   };
 
   showGenerateAppModal = () => {
+    console.log('clicked on export button');
     const { closeModal, chooseGenOptions } = this;
     const { genOptions } = this.state;
     const children = (
@@ -174,13 +175,13 @@ class MainContainer extends Component {
         ))}
       </List>
     );
-    // this.setState({
-    //   modal: createModal({
-    //     closeModal,
-    //     children,
-    //     message: 'Choose export preference:',
-    //   }),
-    // });
+    this.setState({
+      modal: createModal({
+        closeModal,
+        children,
+        message: 'Choose export preference:',
+      }),
+    });
   };
 
   render() {

src/public/styles/style.css

@@ -269,3 +269,7 @@ div.rst__rowContents {
 .rst__rowLabel {
   padding-right: 5px;
 }
+
+.closeIcon:hover {
+  cursor: pointer;
+}