finish UI

package-lock.json

@@ -11203,6 +11203,18 @@
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
+    "react-redux": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.1.tgz",
+      "integrity": "sha512-T+VfD/bvgGTUA74iW9d2i5THrDQWbweXP0AVNI8tNd1Rk5ch1rnMiJkDD67ejw7YBKM4+REvcvqRuWJb7BLuEg==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "hoist-non-react-statics": "^3.3.0",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.9.0"
+      }
+    },
     "react-scripts": {
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.4.3.tgz",
@@ -11336,6 +11348,15 @@
         "strip-indent": "^3.0.0"
       }
     },
+    "redux": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.0.5.tgz",
+      "integrity": "sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w==",
+      "requires": {
+        "loose-envify": "^1.4.0",
+        "symbol-observable": "^1.2.0"
+      }
+    },
     "regenerate": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.1.tgz",
@@ -12889,6 +12910,11 @@
         "util.promisify": "~1.0.0"
       }
     },
+    "symbol-observable": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
+      "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
+    },
     "symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",

package.json

@@ -13,8 +13,10 @@
         "node-sass": "^4.14.1",
         "react": "^16.13.1",
         "react-dom": "^16.13.1",
+        "react-redux": "^7.2.1",
         "react-scripts": "3.4.3",
         "react-transition-group": "^2.5.1",
+        "redux": "^4.0.5",
         "styled-components": "^5.2.0"
     },
     "scripts": {

src/components/EditorTabComponent.js

@@ -1494,6 +1494,83 @@ function Delay(props) {
     );
 }
 
+function EQ(props) {
+    const [lowFreq, setLowFreq] = useReducer(reducer, 40);
+    const [hiFreq, setHiFreq] = useReducer(reducer, 100);
+    const [lowGain, setLowGain] = useReducer(reducer, 0);
+    const [hiGain, setHiGain] = useReducer(reducer, 0);
+
+    return (
+        <Stack fill anchor="top-left" guidingChild="first">
+            <Box
+                background={{ "color": "background" }}
+                elevation="small"
+                round="small"
+                pad="large"
+                gap="medium"
+                fill>
+                <Box
+                    align="center"
+                    justify="center"
+                    fill="horizontal"
+                    gap="small"
+                    pad={{ "top": "medium" }}>
+                    <Box
+                        align="center"
+                        justify="start"
+                        direction="column"
+                        fill="horizontal"
+                        gap="medium">
+                        <LabeledSlider
+                            label="Low EQ Freq"
+                            min={40}
+                            max={100}
+                            step={1}
+                            value={lowFreq}
+                            onChange={setLowFreq}
+                        />
+                        <LabeledSlider
+                            label="Low EQ Gain"
+                            min={-12}
+                            max={12}
+                            step={1}
+                            value={lowGain}
+                            onChange={setLowGain}
+                        />
+                        <LabeledSlider
+                            label="Hi EQ Freq"
+                            min={100}
+                            max={180}
+                            step={1}
+                            value={hiFreq}
+                            onChange={setHiFreq}
+                        />
+                        <LabeledSlider
+                            label="Hi EQ Gain"
+                            min={-12}
+                            max={12}
+                            step={1}
+                            value={hiGain}
+                            onChange={setHiGain}
+                        />
+                    </Box>
+                </Box>
+            </Box>
+            <Heading
+                textAlign="start"
+                size="small"
+                level="2"
+                margin={{ "top": "xsmall", "left": "small" }}>
+                EQ
+            </Heading>
+        </Stack>
+    );
+}
+
+function ArpegA(props) {}
+
+function ArpegB(props) {}
+
 function TimbreComponent(props) {
     return (
         <Grid
@@ -1625,6 +1702,31 @@ function VocoderComponent(props) {
 }
 
 function EffectsComponent(props) {
+    return (
+        <Grid
+            rows={["small", "xsmall", "small", "xsmall"]}
+            columns={["small", "small", "small", "small"]}
+            areas={[
+                { "name": "modFX", "start": [1, 0], "end": [2, 1] },
+                { "name": "Delay", "start": [0, 2], "end": [1, 3] },
+                { "name": "EQ", "start": [2, 2], "end": [3, 3] },
+            ]}
+            gap="medium"
+            fill="vertical">
+            <Box align="center" justify="center" gridArea="modFX">
+                <ModFX />
+            </Box>
+            <Box align="center" justify="center" gridArea="Delay">
+                <Delay />
+            </Box>
+            <Box align="center" justify="center" gridArea="EQ">
+                <EQ />
+            </Box>
+        </Grid>
+    );
+}
+
+function ArpeggioComponent(props) {
     return (
         <Grid
             rows={["small", "xsmall", "small", "xsmall"]}
@@ -1640,11 +1742,9 @@ function EffectsComponent(props) {
             </Box>
             <Box align="center" justify="center" gridArea="Delay">
                 <Delay />
-            </Box>  
+            </Box>
         </Grid>
     );
 }
 
-function ArpeggioComponent(props) {}
-
 export { TimbreComponent, VocoderComponent, EffectsComponent };

src/index.js

@@ -1,14 +1,14 @@
-import React from 'react';
+import React from "react";
-import ReactDOM from 'react-dom';
+import ReactDOM from "react-dom";
-import './index.css';
+import "./index.css";
-import App from './App';
+import App from "./App";
-import * as serviceWorker from './serviceWorker';
+import * as serviceWorker from "./serviceWorker";
 
 ReactDOM.render(
-  <React.StrictMode>
+    <React.StrictMode>
-    <App />
+        <App />
-  </React.StrictMode>,
+    </React.StrictMode>,
-  document.getElementById('root')
+    document.getElementById("root")
 );
 
 // If you want your app to work offline and load faster, you can change