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 { getRootProps, getInputProps, open, acceptedFiles } = useDropzone({
-        noClick: true,
+const baseStyle = {
+    flex: 1,
+    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 {...getRootProps}>
-                <input {...getInputProps} />
-                <p>Drag and drop files here</p>
-                <button type="button" onClick={open}>
-                    Open File
-                </button>
-            </div>
+        <div className="io">
+            <Dropzone className="dropzone-modal" setFile={setFile} />
         </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 {
-    parameterRefreshAll,
-    parameterFlipUnsaved,
-} from '../timbre/parameters/parameterSlice'; // probably temporarily here
+import { parameterRefreshAll } 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

@@ -11,10 +11,9 @@ export default function TimbreSwitcher(props) {
         <div className={styles.tabs}>
             <Tabs
                 className={styles.tabs}
-        defaultIndex="0"
+                defaultIndex={0}
                 selectedTabClassName={styles.selected}
-        selectedTabPanelClassName={styles.tabPanel}
-      >
+                selectedTabPanelClassName={styles.tabPanel}>
                 <TabList className={styles.tabList}>
                     <Tab className={styles.tab}>Timbre 1</Tab>
                     <Tab className={styles.tab}>Timbre 2</Tab>