added Dropzone and rudimentary styling

src/App.js

@@ -1,6 +1,7 @@
 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() {
@@ -8,6 +9,7 @@ function App() {
         <div className="App">
             <header className="App-header">
                 <MainMenu />
+                <IO />
                 <TimbreSwitcher />
             </header>
         </div>

src/features/io/IO.js

@@ -1,21 +1,78 @@
-import React from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import { useDropzone } from 'react-dropzone';
 
-export default function Dropzone(props) {
+const baseStyle = {
-    const { getRootProps, getInputProps, open, acceptedFiles } = useDropzone({
+    flex: 1,
-        noClick: true,
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    padding: '20px',
+    borderWidth: 2,
+    borderRadius: 2,
+    borderColor: '#eeeeee',
+    borderStyle: 'dashed',
+    backgroundColor: '#fafafa',
+    color: '#bdbdbd',
+    outline: 'none',
+    transition: 'border .24s ease-in-out',
+};
+
+const activeStyle = {
+    borderColor: '#2196f3',
+};
+
+const acceptStyle = {
+    borderColor: '#00e676',
+};
+
+const rejectStyle = {
+    borderColor: '#ff1744',
+};
+
+const Dropzone = ({ setFile }) => {
+    const {
+        getRootProps,
+        getInputProps,
+        isDragAccept,
+        isDragActive,
+        isDragReject,
+    } = useDropzone({
+        multiple: false,
+        maxFiles: 1,
         noKeyboard: true,
+        onDrop: (files) => setFile(files[0]),
+    });
+
+    const style = useMemo(
+        () => ({
+            ...baseStyle,
+            ...(isDragActive ? activeStyle : {}),
+            ...(isDragAccept ? acceptStyle : {}),
+            ...(isDragReject ? rejectStyle : {}),
+        }),
+        [isDragActive, isDragReject, isDragAccept]
+    );
+
+    return (
+        <section className="dropzone-container">
+            <div {...getRootProps({ style })}>
+                <input {...getInputProps()} />
+                <p>Drag and drop file here, or click to select</p>
+            </div>
+        </section>
+    );
+};
+
+export default function IO(props) {
+    const [file, setFile] = useState(null);
+
+    useEffect(() => {
+        console.log(file);
     });
 
     return (
-        <div className="container">
+        <div className="io">
-            <div {...getRootProps}>
+            <Dropzone className="dropzone-modal" setFile={setFile} />
-                <input {...getInputProps} />
-                <p>Drag and drop files here</p>
-                <button type="button" onClick={open}>
-                    Open File
-                </button>
-            </div>
         </div>
     );
 }

src/features/menu/Menu.js

@@ -1,16 +1,12 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux'; // probably temporarily here
-import {
+import { parameterRefreshAll } from '../timbre/parameters/parameterSlice'; // probably temporarily here
-    parameterRefreshAll,
-    parameterFlipUnsaved,
-} from '../timbre/parameters/parameterSlice'; // probably temporarily here
 import logo from '../../1f3b9.svg';
 import './Menu.css';
 
 // for things such as (do you want to save? or do you want to reset things?)
 const Modal = ({ show, handleSave, handleNoSave, handleClose }) => {
     const modalDisplay = show ? 'modal modal-display' : 'modal modal-hide';
-    const dispatch = useDispatch();
     return (
         <div className={modalDisplay}>
             <div className="modal-main">
@@ -47,10 +43,6 @@ export default function MainMenu() {
     const [showModal, setShowModal] = useState(false);
     const dispatch = useDispatch();
 
-    const unSavedUpdate = useCallback(() => dispatch(parameterFlipUnsaved), [
-        dispatch,
-    ]);
-
     const HandleClick = () => {
         setOpen({
             className: open.openState

src/features/timbre/timbreSwitcher.js

@@ -7,38 +7,37 @@ import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
 import styles from './Timbre.module.css';
 
 export default function TimbreSwitcher(props) {
-  return (
+    return (
-    <div className={styles.tabs}>
+        <div className={styles.tabs}>
-      <Tabs
+            <Tabs
-        className={styles.tabs}
+                className={styles.tabs}
-        defaultIndex="0"
+                defaultIndex={0}
-        selectedTabClassName={styles.selected}
+                selectedTabClassName={styles.selected}
-        selectedTabPanelClassName={styles.tabPanel}
+                selectedTabPanelClassName={styles.tabPanel}>
-      >
+                <TabList className={styles.tabList}>
-        <TabList className={styles.tabList}>
+                    <Tab className={styles.tab}>Timbre 1</Tab>
-          <Tab className={styles.tab}>Timbre 1</Tab>
+                    <Tab className={styles.tab}>Timbre 2</Tab>
-          <Tab className={styles.tab}>Timbre 2</Tab>
+                    <Tab className={styles.tab}>Vocoder</Tab>
-          <Tab className={styles.tab}>Vocoder</Tab>
+                    <Tab className={styles.tab}>Effects</Tab>
-          <Tab className={styles.tab}>Effects</Tab>
+                    <Tab className={styles.tab}>Arpeggio</Tab>
-          <Tab className={styles.tab}>Arpeggio</Tab>
+                </TabList>
-        </TabList>
 
-        <TabPanel>
+                <TabPanel>
-          <Timbre id="timbre1" />
+                    <Timbre id="timbre1" />
-        </TabPanel>
+                </TabPanel>
-        <TabPanel>
+                <TabPanel>
-          <Timbre id="timbre2" />
+                    <Timbre id="timbre2" />
-        </TabPanel>
+                </TabPanel>
-        <TabPanel>
+                <TabPanel>
-          <Vocoder id="vocoder" />
+                    <Vocoder id="vocoder" />
-        </TabPanel>
+                </TabPanel>
-        <TabPanel>
+                <TabPanel>
-          <Effects id="effects" />
+                    <Effects id="effects" />
-        </TabPanel>
+                </TabPanel>
-        <TabPanel>
+                <TabPanel>
-          <Arpeggio id="arpeggio" />
+                    <Arpeggio id="arpeggio" />
-        </TabPanel>
+                </TabPanel>
-      </Tabs>
+            </Tabs>
-    </div>
+        </div>
-  );
+    );
 }