added simple file modal toggle

src/App.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import MainMenu from './features/menu/Menu';
 import TimbreSwitcher from './features/timbre/timbreSwitcher';
-import IO from './features/io/IO';
 import './App.css';
 
 function App() {
@@ -9,7 +8,6 @@ function App() {
         <div className="App">
             <header className="App-header">
                 <MainMenu />
-                <IO />
                 <TimbreSwitcher />
             </header>
         </div>

src/features/io/IO.css

@@ -0,0 +1,24 @@
+.dropzone-container {
+    background: white;
+    padding: 0.95em;
+    position: fixed;
+    margin: auto;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: calc(7.5em);
+    box-sizing: border-box;
+    width: 14em;
+    z-index: 100;
+    border: 0.09em solid slategray;
+    border-radius: 6px;
+}
+
+.show {
+    display: flex;
+}
+
+.hide {
+    display: none;
+}

src/features/io/IO.js

@@ -1,32 +1,34 @@
 import React, { useState, useEffect, useMemo } from 'react';
 import { useDropzone } from 'react-dropzone';
+import './IO.css';
 
 const baseStyle = {
     flex: 1,
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
-    padding: '20px',
+    height: '4.25em',
+    padding: '0.5em',
     borderWidth: 2,
     borderRadius: 2,
-    borderColor: '#eeeeee',
+    borderColor: 'slategrey',
     borderStyle: 'dashed',
-    backgroundColor: '#fafafa',
-    color: '#bdbdbd',
+    backgroundColor: 'ghostwhite',
+    color: 'slategray',
     outline: 'none',
     transition: 'border .24s ease-in-out',
 };
 
 const activeStyle = {
-    borderColor: '#2196f3',
+    borderColor: 'slateblue',
 };
 
 const acceptStyle = {
-    borderColor: '#00e676',
+    borderColor: 'mediumseagreen',
 };
 
 const rejectStyle = {
-    borderColor: '#ff1744',
+    borderColor: 'crimson',
 };
 
 const Dropzone = ({ setFile }) => {
@@ -54,16 +56,20 @@ const Dropzone = ({ setFile }) => {
     );
 
     return (
-        <section className="dropzone-container">
+        <div className="dropzone-container">
             <div {...getRootProps({ style })}>
                 <input {...getInputProps()} />
                 <p>Drag and drop file here, or click to select</p>
             </div>
-        </section>
+        </div>
     );
 };
 
-export default function IO(props) {
+export default function IO({ show }) {
+    const display = show
+        ? 'dropzone-container show'
+        : 'dropzone-container hide';
+
     const [file, setFile] = useState(null);
 
     useEffect(() => {
@@ -71,7 +77,7 @@ export default function IO(props) {
     });
 
     return (
-        <div className="io">
+        <div className={display}>
             <Dropzone className="dropzone-modal" setFile={setFile} />
         </div>
     );

src/features/menu/Menu.css

@@ -182,7 +182,7 @@ h2 {
 .modal-main {
     background: white;
     padding: 0.75em 0 1em;
-    border: solid 1pt slategrey;
+    border: solid 0.09em slategrey;
     border-radius: 6px;
     display: flex;
     flex-wrap: wrap;

src/features/menu/Menu.js

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import IO from '../io/IO';
 import { useDispatch, useSelector } from 'react-redux'; // probably temporarily here
 import { parameterRefreshAll } from '../timbre/parameters/parameterSlice'; // probably temporarily here
 import logo from '../../1f3b9.svg';
@@ -40,7 +41,10 @@ export default function MainMenu() {
         className: '',
         openState: true,
     });
-    const [showModal, setShowModal] = useState(false);
+    const [showModal, setShowModal] = useState({
+        saveCheck: false,
+        ioModal: false,
+    });
     const dispatch = useDispatch();
 
     const HandleClick = () => {
@@ -59,22 +63,26 @@ export default function MainMenu() {
         });
     };
 
-    const modalState = () => {
-        setShowModal(!showModal);
+    const showSaveCheck = () => {
+        setShowModal({ ...showModal, saveCheck: !showModal.saveCheck });
+    };
+
+    const showIOModal = () => {
+        setShowModal({ ...showModal, ioModal: !showModal.ioModal });
     };
 
     return (
         <div>
             <Modal
-                show={showModal}
-                handleClose={modalState}
+                show={showModal.saveCheck}
+                handleClose={showSaveCheck}
                 handleSave={() => {
-                    modalState();
+                    showSaveCheck();
                     HandleClick(); // temporary while I implement the binary parsing stuff
                 }}
                 handleNoSave={() => {
                     dispatch(parameterRefreshAll());
-                    modalState();
+                    showSaveCheck();
                     HandleClick();
                 }}
             />
@@ -90,14 +98,20 @@ export default function MainMenu() {
                     <button
                         className="menu-button"
                         onClick={() => {
-                            !unsaved ? HandleClick() : modalState();
+                            !unsaved ? HandleClick() : showSaveCheck();
                         }}>
                         New Patch
                     </button>
-                    <button className="menu-button">Load Patch</button>
+                    <button
+                        className="menu-button"
+                        onClick={() => {
+                            !unsaved ? showIOModal() : showSaveCheck();
+                        }}>
+                        Load Patch
+                    </button>
                 </div>
             </div>
-
+            <IO show={showModal.ioModal} />
             <button className="menu-open-button" onClick={HandleClick} />
         </div>
     );