From f04f404bea4615b4110ef3a78a7fff0ba40c1309 Mon Sep 17 00:00:00 2001
From: Aoife <aoife@spinlock.icu>
Date: Mon, 5 Apr 2021 02:02:03 -0400
Subject: [PATCH] finish vocoder page redesign

---
 src/features/editor/Vocoder.js                |  51 +++-
 src/features/editor/parameters/Amp.js         | 120 +++++----
 src/features/editor/parameters/EG.js          |  87 ++++++
 src/features/editor/parameters/Filter.js      | 181 +++++++------
 src/features/editor/parameters/LFO.js         |   2 +-
 src/features/editor/parameters/Levels.js      | 245 +++++++++--------
 src/features/editor/parameters/Pans.js        | 253 ++++++++++--------
 src/features/editor/parameters/VCO.js         | 128 +++++----
 .../editor/parameters/parameterSlice.js       |   3 +-
 src/features/editor/timbreSlice.js            |   1 +
 src/features/menu/index.js                    |  21 +-
 src/features/utils/components.js              |  18 +-
 src/index.css                                 |   3 +
 13 files changed, 647 insertions(+), 466 deletions(-)

diff --git a/src/features/editor/Vocoder.js b/src/features/editor/Vocoder.js
index 9f79232..dbf93c5 100644
--- a/src/features/editor/Vocoder.js
+++ b/src/features/editor/Vocoder.js
@@ -4,7 +4,7 @@ import { selectById } from './timbreSlice';
 import VCO, { AudioIn } from './parameters/VCO';
 import Mixer from './parameters/Mixer';
 import Pitch from './parameters/Pitch';
-import EG from './parameters/EG';
+import { VocoderEG } from './parameters/EG';
 import LFO from './parameters/LFO';
 import { VocoderFilter, FCMod } from './parameters/Filter';
 import { VocoderAmp } from './parameters/Amp';
@@ -14,8 +14,9 @@ import Pans from './parameters/Pans';
 export default function Vocoder(props) {
   const ids = useSelector((state) => selectById(state, props.id));
   return (
-    <div>
+    <div className='h-screen grid grid-cols-8 grid-rows-3 gap-4 p-6'>
       <VCO
+        className='col-span-2'
         name='VCO'
         id={ids.vco}
         waveforms={[
@@ -96,18 +97,40 @@ export default function Vocoder(props) {
           { value: 'Voice4' },
         ]}
       />
-      <AudioIn name='Audio In' id={ids.audioIn} />
-      <Mixer name='Mixer' id={ids.mixer} />
-      <Pitch name='Pitch' id={ids.pitch} />
-      <VocoderFilter name='Filter' id={ids.filter} />
-      <FCMod name='FC Mod' id={ids.fcMod} />
-      <VocoderAmp name='Amp' id={ids.amp} />
-      <EG name='EG' id={ids.eg} />
-      <div />
-      <LFO name='LFO 1' id={ids.lfo1} />
-      <LFO name='LFO 2' id={ids.lfo2} />
-      <Levels name='Levels' id={ids.levels} />
-      <Pans name='Pans' id={ids.pans} />
+      <AudioIn className='col-span-2' name='Audio In' id={ids.audioIn} />
+      <Mixer className='col-span-1' name='Mixer' id={ids.mixer} />
+      <Pitch className='col-span-3' name='Pitch' id={ids.pitch} />
+      <div className='col-span-8 grid grid-cols-9 grid-rows-1 gap-4'>
+        <div />
+        <VocoderFilter name='Filter' id={ids.filter} />
+        <FCMod name='FC Mod' id={ids.fcMod} />
+        <VocoderAmp className='col-span-2' name='Amp' id={ids.amp} />
+        <VocoderEG className='col-span-3' name='EG' id1={ids.eg} />
+      </div>
+      <LFO
+        className='col-span-2'
+        name='LFO 1'
+        id={ids.lfo1}
+        waveforms={[
+          { value: 'Saw' },
+          { value: 'Square 1' },
+          { value: 'Triangle' },
+          { value: 'Sample & Hold' },
+        ]}
+      />
+      <LFO
+        className='col-span-2'
+        name='LFO 2'
+        id={ids.lfo2}
+        waveforms={[
+          { value: 'Saw' },
+          { value: 'Square 2' },
+          { value: 'Sine' },
+          { value: 'Sample & Hold' },
+        ]}
+      />
+      <Levels className='col-span-2' name='Levels' id={ids.levels} />
+      <Pans className='col-span-2' name='Pans' id={ids.pans} />
     </div>
   );
 }
diff --git a/src/features/editor/parameters/Amp.js b/src/features/editor/parameters/Amp.js
index 2826042..7e68086 100644
--- a/src/features/editor/parameters/Amp.js
+++ b/src/features/editor/parameters/Amp.js
@@ -84,59 +84,71 @@ export const VocoderAmp = (props) => {
   const dispatch = useDispatch();
 
   return (
-    <div className={props.className}>
-      <span>{`${props.name}`}</span>
-      Amp Level
-      <Knob
-        value={parameters.ampLevel}
-        max={127}
-        onChange={(value) =>
-          dispatch(
-            parameterUpdated({
-              id: props.id,
-              changes: { ampLevel: value },
-            })
-          )
-        }
-      />
-      Direct Level
-      <Knob
-        value={parameters.directLevel}
-        max={127}
-        onChange={(value) =>
-          dispatch(
-            parameterUpdated({
-              id: props.id,
-              changes: { directLevel: value },
-            })
-          )
-        }
-      />
-      Amp Keyboard Tracking
-      <Knob
-        value={parameters.ampTrack}
-        dual={true}
-        max={63}
-        onChange={(value) =>
-          dispatch(
-            parameterUpdated({
-              id: props.id,
-              changes: { ampTrack: value },
-            })
-          )
-        }
-      />
-      <Checkbox
-        value={parameters.distortion}
-        onChange={(value) =>
-          dispatch(
-            parameterUpdated({
-              id: props.id,
-              changes: { distortion: value },
-            })
-          )
-        }
-      />
-    </div>
+    <Card className={props.className} header={props.name}>
+      <div className='flex flex-row'>
+        <div className='flex flex-col items-center w-1/2'>
+          <h3>Amp Level</h3>
+          <Knob
+            value={parameters.ampLevel}
+            max={127}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id,
+                  changes: { ampLevel: value },
+                })
+              )
+            }
+          />
+        </div>
+        <div className='flex flex-col items-center w-1/2'>
+          <h3>Direct Level</h3>
+          <Knob
+            value={parameters.directLevel}
+            max={127}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id,
+                  changes: { directLevel: value },
+                })
+              )
+            }
+          />
+        </div>
+      </div>
+      <div className='flex flex-row'>
+        <div className='flex flex-col items-center w-1/2'>
+          <h3>Keyboard Track</h3>
+          <Knob
+            value={parameters.ampTrack}
+            dual={true}
+            max={63}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id,
+                  changes: { ampTrack: value },
+                })
+              )
+            }
+          />
+        </div>
+        <div className='flex flex-col items-center w-1/2'>
+          <h3>Distortion</h3>
+          <Checkbox
+            value={parameters.distortion}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id,
+                  changes: { distortion: value },
+                })
+              )
+            }
+          />
+        </div>
+      </div>
+    </Card>
   );
 };
diff --git a/src/features/editor/parameters/EG.js b/src/features/editor/parameters/EG.js
index 787ac3f..9063e13 100644
--- a/src/features/editor/parameters/EG.js
+++ b/src/features/editor/parameters/EG.js
@@ -168,3 +168,90 @@ export default function EG(props) {
     </Card>
   );
 }
+
+export function VocoderEG(props) {
+  const parameters_eg_1 = useSelector((state) => selectById(state, props.id1));
+  const dispatch = useDispatch();
+
+  return (
+    <Card className={props.className} header={props.name}>
+      <div className='-mt-1 flex flex-row justify-evenly'>
+        <div className='flex flex-col items-center'>
+          <h3>Attack</h3>
+          <Knob
+            value={parameters_eg_1.attack}
+            max={127}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id1,
+                  changes: { attack: value },
+                })
+              )
+            }
+          />
+        </div>
+        <div className='flex flex-col items-center'>
+          <h3>Decay</h3>
+          <Knob
+            value={parameters_eg_1.decay}
+            max={127}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id1,
+                  changes: { decay: value },
+                })
+              )
+            }
+          />
+        </div>
+        <div className='flex flex-col items-center'>
+          <h3>Sustain</h3>
+          <Knob
+            value={parameters_eg_1.sustain}
+            max={127}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id1,
+                  changes: { sustain: value },
+                })
+              )
+            }
+          />
+        </div>
+        <div className='flex flex-col items-center'>
+          <h3>Release</h3>
+          <Knob
+            value={parameters_eg_1.release}
+            max={127}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id1,
+                  changes: { release: value },
+                })
+              )
+            }
+          />
+        </div>
+      </div>
+      <div className='-mt-8 flex flex-col items-center'>
+        <h3>EG Reset</h3>
+        <Checkbox
+          className='checkbox'
+          value={parameters_eg_1.egReset}
+          onChange={(value) =>
+            dispatch(
+              parameterUpdated({
+                id: props.id1,
+                changes: { egReset: value },
+              })
+            )
+          }
+        />
+      </div>
+    </Card>
+  );
+}
diff --git a/src/features/editor/parameters/Filter.js b/src/features/editor/parameters/Filter.js
index 326bcb5..2a89a69 100644
--- a/src/features/editor/parameters/Filter.js
+++ b/src/features/editor/parameters/Filter.js
@@ -3,7 +3,7 @@ import Card from '../card';
 import { Select, Knob } from '../../utils/components';
 import { useSelector, useDispatch } from 'react-redux';
 import { selectById, parameterUpdated } from './parameterSlice.js';
-import { Slider, SelectList } from '../../helpers/Helpers';
+import { Slider } from '../../helpers/Helpers';
 
 export default function Filter(props) {
   const parameters = useSelector((state) => selectById(state, props.id));
@@ -38,7 +38,7 @@ export default function Filter(props) {
             <h3 className='text-lg font-semibold text-gray-900'>Cutoff</h3>
             <Knob
               value={parameters.cutoff}
-              maxValue={127}
+              max={127}
               onChange={(value) =>
                 dispatch(
                   parameterUpdated({
@@ -74,7 +74,7 @@ export default function Filter(props) {
             <Knob
               value={parameters.egIntensity}
               dual={true}
-              maxValue={63}
+              max={63}
               onChange={(value) =>
                 dispatch(
                   parameterUpdated({
@@ -113,51 +113,55 @@ export const VocoderFilter = (props) => {
   const parameters = useSelector((state) => selectById(state, props.id));
   const dispatch = useDispatch();
   return (
-    <div className={props.className}>
-      <span>{`${props.name}`}</span>
-      Cutoff
-      <Slider
-        parameter={parameters.cutoff}
-        min={0}
-        max={127}
-        onChange={(value) =>
-          dispatch(
-            parameterUpdated({
-              id: props.id,
-              changes: { cutoff: value },
-            })
-          )
-        }
-      />
-      Resonance
-      <Slider
-        parameter={parameters.resonance}
-        min={0}
-        max={127}
-        onChange={(value) =>
-          dispatch(
-            parameterUpdated({
-              id: props.id,
-              changes: { resonance: value },
-            })
-          )
-        }
-      />
-      EF Sense
-      <Slider
-        parameter={parameters.efSense}
-        min={0}
-        max={127}
-        onChange={(value) =>
-          dispatch(
-            parameterUpdated({
-              id: props.id,
-              changes: { efSense: value },
-            })
-          )
-        }
-      />
-    </div>
+    <Card className={props.className} header={props.name}>
+      <div className='-mt-3 flex flex-col justify-around'>
+        <div className='flex flex-col items-center'>
+          <h3>Cutoff</h3>
+          <Knob
+            value={parameters.cutoff}
+            max={127}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id,
+                  changes: { cutoff: value },
+                })
+              )
+            }
+          />
+        </div>
+        <div className='flex flex-col items-center'>
+          <h3>Resonance</h3>
+          <Knob
+            value={parameters.resonance}
+            max={127}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id,
+                  changes: { resonance: value },
+                })
+              )
+            }
+          />
+        </div>
+        <div className='flex flex-col items-center'>
+          <h3>EF Sense</h3>
+          <Knob
+            value={parameters.efSense}
+            max={127}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id,
+                  changes: { efSense: value },
+                })
+              )
+            }
+          />
+        </div>
+      </div>
+    </Card>
   );
 };
 
@@ -165,43 +169,48 @@ export const FCMod = (props) => {
   const parameters = useSelector((state) => selectById(state, props.id));
   const dispatch = useDispatch();
   return (
-    <div>
-      <span>{`${props.name}`}</span>
-      Source
-      <SelectList
-        value={parameters.source}
-        list={[
-          { value: 'Amp EG' },
-          { value: 'LFO 1' },
-          { value: 'LFO 2' },
-          { value: 'Velocity' },
-          { value: 'Keyboard Track' },
-          { value: 'Pitch Bend' },
-          { value: 'Mod Wheel' },
-        ]}
-        onChange={(value) =>
-          dispatch(
-            parameterUpdated({
-              id: props.id,
-              changes: { source: value },
-            })
-          )
-        }
-      />
-      Intensity
-      <Slider
-        parameter={parameters.intensity}
-        min={0}
-        max={127}
-        onChange={(value) =>
-          dispatch(
-            parameterUpdated({
-              id: props.id,
-              changes: { intensity: value },
-            })
-          )
-        }
-      />
-    </div>
+    <Card className={props.className} header={props.name}>
+      <div className='-mt-4 flex flex-col justify-around space-y-4'>
+        <div className='flex flex-col items-center space-y-0.5'>
+          <h3>Source</h3>
+          <Select
+            className='select w-full'
+            value={parameters.source}
+            list={[
+              { value: 'Amp EG' },
+              { value: 'LFO 1' },
+              { value: 'LFO 2' },
+              { value: 'Velocity' },
+              { value: 'Keyboard Track' },
+              { value: 'Pitch Bend' },
+              { value: 'Mod Wheel' },
+            ]}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id,
+                  changes: { source: value },
+                })
+              )
+            }
+          />
+        </div>
+        <div className='flex flex-col items-center'>
+          <h3>Intensity</h3>
+          <Knob
+            value={parameters.intensity}
+            max={127}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id,
+                  changes: { intensity: value },
+                })
+              )
+            }
+          />
+        </div>
+      </div>
+    </Card>
   );
 };
diff --git a/src/features/editor/parameters/LFO.js b/src/features/editor/parameters/LFO.js
index 83041a3..639ebed 100644
--- a/src/features/editor/parameters/LFO.js
+++ b/src/features/editor/parameters/LFO.js
@@ -88,7 +88,7 @@ export default function LFO(props) {
             />
           </div>
         </div>
-        <div className='flex flex-col items-center w-1/2'>
+        <div className='flex flex-col items-center w-1/2 space-y-1'>
           <h3>Frequency</h3>
           <Knob
             value={parameters.frequency}
diff --git a/src/features/editor/parameters/Levels.js b/src/features/editor/parameters/Levels.js
index 35b7dc4..db21631 100644
--- a/src/features/editor/parameters/Levels.js
+++ b/src/features/editor/parameters/Levels.js
@@ -1,132 +1,139 @@
 import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
+import Card from '../card';
 import { selectById, parameterUpdated } from './parameterSlice.js';
-import { Slider } from '../../helpers/Helpers';
+import { Knob } from '../../utils/components';
 
 export default function Levels(props) {
   const parameters = useSelector((state) => selectById(state, props.id));
   const dispatch = useDispatch();
 
   return (
-    <div>
-      <span>{`${props.name}`}</span>
-      <div>
-        Level 1
-        <Slider
-          min={0}
-          max={127}
-          parameter={parameters.level1}
-          onChange={(value) =>
-            dispatch(
-              parameterUpdated({
-                id: props.id,
-                changes: { level1: value },
-              })
-            )
-          }
-        />
-        Level 2
-        <Slider
-          min={0}
-          max={127}
-          parameter={parameters.level2}
-          onChange={(value) =>
-            dispatch(
-              parameterUpdated({
-                id: props.id,
-                changes: { level2: value },
-              })
-            )
-          }
-        />
-        Level 3
-        <Slider
-          min={0}
-          max={127}
-          parameter={parameters.level3}
-          onChange={(value) =>
-            dispatch(
-              parameterUpdated({
-                id: props.id,
-                changes: { level3: value },
-              })
-            )
-          }
-        />
-        Level 4
-        <Slider
-          min={0}
-          max={127}
-          parameter={parameters.level4}
-          onChange={(value) =>
-            dispatch(
-              parameterUpdated({
-                id: props.id,
-                changes: { level4: value },
-              })
-            )
-          }
-        />
+    <Card className={props.className} header={props.name}>
+      <div className='flex flex-row'>
+        <div className='flex flex-col items-center w-1/4'>
+          <h3>Level 1</h3>
+          <Knob
+            max={127}
+            value={parameters.level1}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id,
+                  changes: { level1: value },
+                })
+              )
+            }
+          />
+        </div>
+        <div className='flex flex-col items-center w-1/4'>
+          <h3>Level 2</h3>
+          <Knob
+            max={127}
+            value={parameters.level2}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id,
+                  changes: { level2: value },
+                })
+              )
+            }
+          />
+        </div>
+        <div className='flex flex-col items-center w-1/4'>
+          <h3>Level 3</h3>
+          <Knob
+            max={127}
+            value={parameters.level3}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id,
+                  changes: { level3: value },
+                })
+              )
+            }
+          />
+        </div>
+        <div className='flex flex-col items-center w-1/4'>
+          <h3>Level 4</h3>
+          <Knob
+            max={127}
+            value={parameters.level4}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id,
+                  changes: { level4: value },
+                })
+              )
+            }
+          />
+        </div>
       </div>
-      <div />
-      <div>
-        Level 5
-        <Slider
-          min={0}
-          max={127}
-          parameter={parameters.level5}
-          onChange={(value) =>
-            dispatch(
-              parameterUpdated({
-                id: props.id,
-                changes: { level5: value },
-              })
-            )
-          }
-        />
-        Level 6
-        <Slider
-          min={0}
-          max={127}
-          parameter={parameters.level6}
-          onChange={(value) =>
-            dispatch(
-              parameterUpdated({
-                id: props.id,
-                changes: { level6: value },
-              })
-            )
-          }
-        />
-        Level 7
-        <Slider
-          min={0}
-          max={127}
-          parameter={parameters.level7}
-          onChange={(value) =>
-            dispatch(
-              parameterUpdated({
-                id: props.id,
-                changes: { level7: value },
-              })
-            )
-          }
-        />
-        Level 8
-        <Slider
-          min={0}
-          max={127}
-          parameter={parameters.level8}
-          onChange={(value) =>
-            dispatch(
-              parameterUpdated({
-                id: props.id,
-                changes: { level8: value },
-              })
-            )
-          }
-        />
+      <div className='flex flex-row'>
+        <div className='flex flex-col items-center w-1/4'>
+          <h3>Level 5</h3>
+          <Knob
+            max={127}
+            value={parameters.level5}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id,
+                  changes: { level5: value },
+                })
+              )
+            }
+          />
+        </div>
+        <div className='flex flex-col items-center w-1/4'>
+          <h3>Level 6</h3>
+          <Knob
+            max={127}
+            value={parameters.level6}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id,
+                  changes: { level6: value },
+                })
+              )
+            }
+          />
+        </div>
+        <div className='flex flex-col items-center w-1/4'>
+          <h3>Level 7</h3>
+          <Knob
+            max={127}
+            value={parameters.level7}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id,
+                  changes: { level7: value },
+                })
+              )
+            }
+          />
+        </div>
+        <div className='flex flex-col items-center w-1/4'>
+          <h3>Level 8</h3>
+          <Knob
+            max={127}
+            value={parameters.level8}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id,
+                  changes: { level8: value },
+                })
+              )
+            }
+          />
+        </div>
       </div>
-    </div>
+    </Card>
   );
 }
diff --git a/src/features/editor/parameters/Pans.js b/src/features/editor/parameters/Pans.js
index c6022f3..6df1e55 100644
--- a/src/features/editor/parameters/Pans.js
+++ b/src/features/editor/parameters/Pans.js
@@ -1,132 +1,147 @@
 import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { selectById, parameterUpdated } from './parameterSlice.js';
-import { Slider } from '../../helpers/Helpers';
+import Card from '../card';
+import { Knob } from '../../utils/components';
 
 export default function Pans(props) {
   const parameters = useSelector((state) => selectById(state, props.id));
   const dispatch = useDispatch();
 
   return (
-    <div>
-      <span>{`${props.name}`}</span>
-      <div>
-        Pan 1
-        <Slider
-          min={0}
-          max={127}
-          parameter={parameters.pan1}
-          onChange={(value) =>
-            dispatch(
-              parameterUpdated({
-                id: props.id,
-                changes: { pan1: value },
-              })
-            )
-          }
-        />
-        Pan 2
-        <Slider
-          min={0}
-          max={127}
-          parameter={parameters.pan2}
-          onChange={(value) =>
-            dispatch(
-              parameterUpdated({
-                id: props.id,
-                changes: { pan2: value },
-              })
-            )
-          }
-        />
-        Pan 3
-        <Slider
-          min={0}
-          max={127}
-          parameter={parameters.pan3}
-          onChange={(value) =>
-            dispatch(
-              parameterUpdated({
-                id: props.id,
-                changes: { pan3: value },
-              })
-            )
-          }
-        />
-        Pan 4
-        <Slider
-          min={0}
-          max={127}
-          parameter={parameters.pan4}
-          onChange={(value) =>
-            dispatch(
-              parameterUpdated({
-                id: props.id,
-                changes: { pan4: value },
-              })
-            )
-          }
-        />
+    <Card className={props.className} header={props.name}>
+      <div className='flex flex-row'>
+        <div className='flex flex-col items-center w-1/4'>
+          <h3>Pan 1</h3>
+          <Knob
+            dual={true}
+            max={63}
+            value={parameters.pan1}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id,
+                  changes: { pan1: value },
+                })
+              )
+            }
+          />
+        </div>
+        <div className='flex flex-col items-center w-1/4'>
+          <h3>Pan 2</h3>
+          <Knob
+            dual={true}
+            max={63}
+            value={parameters.pan2}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id,
+                  changes: { pan2: value },
+                })
+              )
+            }
+          />
+        </div>
+        <div className='flex flex-col items-center w-1/4'>
+          <h3>Pan 3</h3>
+          <Knob
+            dual={true}
+            max={63}
+            value={parameters.pan3}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id,
+                  changes: { pan3: value },
+                })
+              )
+            }
+          />
+        </div>
+        <div className='flex flex-col items-center w-1/4'>
+          <h3>Pan 4</h3>
+          <Knob
+            dual={true}
+            max={63}
+            value={parameters.pan4}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id,
+                  changes: { pan4: value },
+                })
+              )
+            }
+          />
+        </div>
       </div>
-      <div />
-      <div>
-        Pan 5
-        <Slider
-          min={0}
-          max={127}
-          parameter={parameters.pan5}
-          onChange={(value) =>
-            dispatch(
-              parameterUpdated({
-                id: props.id,
-                changes: { pan5: value },
-              })
-            )
-          }
-        />
-        Pan 6
-        <Slider
-          min={0}
-          max={127}
-          parameter={parameters.pan6}
-          onChange={(value) =>
-            dispatch(
-              parameterUpdated({
-                id: props.id,
-                changes: { pan6: value },
-              })
-            )
-          }
-        />
-        Pan 7
-        <Slider
-          min={0}
-          max={127}
-          parameter={parameters.pan7}
-          onChange={(value) =>
-            dispatch(
-              parameterUpdated({
-                id: props.id,
-                changes: { pan7: value },
-              })
-            )
-          }
-        />
-        Pan 8
-        <Slider
-          min={0}
-          max={127}
-          parameter={parameters.pan8}
-          onChange={(value) =>
-            dispatch(
-              parameterUpdated({
-                id: props.id,
-                changes: { pan8: value },
-              })
-            )
-          }
-        />
+      <div className='flex flex-row'>
+        <div className='flex flex-col items-center w-1/4'>
+          <h3>Pan 5</h3>
+          <Knob
+            dual={true}
+            max={63}
+            value={parameters.pan5}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id,
+                  changes: { pan5: value },
+                })
+              )
+            }
+          />
+        </div>
+        <div className='flex flex-col items-center w-1/4'>
+          <h3>Pan 6</h3>
+          <Knob
+            dual={true}
+            max={63}
+            value={parameters.pan6}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id,
+                  changes: { pan6: value },
+                })
+              )
+            }
+          />
+        </div>
+        <div className='flex flex-col items-center w-1/4'>
+          <h3>Pan 7</h3>
+          <Knob
+            dual={true}
+            max={63}
+            value={parameters.pan7}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id,
+                  changes: { pan7: value },
+                })
+              )
+            }
+          />
+        </div>
+        <div className='flex flex-col items-center w-1/4'>
+          <h3>Pan 8</h3>
+          <Knob
+            dual={true}
+            max={63}
+            value={parameters.pan8}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id,
+                  changes: { pan8: value },
+                })
+              )
+            }
+          />
+        </div>
       </div>
-    </div>
+    </Card>
   );
 }
diff --git a/src/features/editor/parameters/VCO.js b/src/features/editor/parameters/VCO.js
index e8107a4..20ecbad 100644
--- a/src/features/editor/parameters/VCO.js
+++ b/src/features/editor/parameters/VCO.js
@@ -2,8 +2,7 @@ import React from 'react';
 import Card from '../card';
 import { useSelector, useDispatch } from 'react-redux';
 import { selectById, parameterUpdated } from './parameterSlice.js';
-import { Select, Knob } from '../../utils/components';
-import { Slider, Checkbox } from '../../helpers/Helpers';
+import { Select, Knob, Checkbox } from '../../utils/components';
 
 export default function VCO(props) {
   const parameters = useSelector((state) => selectById(state, props.id));
@@ -84,62 +83,73 @@ export const AudioIn = (props) => {
   const dispatch = useDispatch();
 
   return (
-    <div className={props.className}>
-      <span>{`${props.name}`}</span>
-      Gate
-      <Slider
-        min={0}
-        max={127}
-        parameter={parameters.gate}
-        onChange={(value) =>
-          dispatch(
-            parameterUpdated({
-              id: props.id,
-              changes: { gate: value },
-            })
-          )
-        }
-      />
-      Threshold
-      <Slider
-        min={0}
-        max={127}
-        parameter={parameters.threshold}
-        onChange={(value) =>
-          dispatch(
-            parameterUpdated({
-              id: props.id,
-              changes: { threshold: value },
-            })
-          )
-        }
-      />
-      HPF Level
-      <Slider
-        min={0}
-        max={127}
-        parameter={parameters.hpfLevel}
-        onChange={(value) =>
-          dispatch(
-            parameterUpdated({
-              id: props.id,
-              changes: { hpfLevel: value },
-            })
-          )
-        }
-      />
-      <Checkbox
-        name='HPF Gate'
-        parameter={parameters.hpfGate}
-        onChange={(value) =>
-          dispatch(
-            parameterUpdated({
-              id: props.id,
-              changes: { hpfGate: value },
-            })
-          )
-        }
-      />
-    </div>
+    <Card className={props.className} header={props.name}>
+      <div className='-mt-3 flex flex-col items-stretch space-y-4'>
+        <div className='flex flex-row'>
+          <div className='flex flex-col items-center w-1/2'>
+            <h3>Gate Sense</h3>
+            <Knob
+              max={127}
+              value={parameters.gate}
+              onChange={(value) =>
+                dispatch(
+                  parameterUpdated({
+                    id: props.id,
+                    changes: { gate: value },
+                  })
+                )
+              }
+            />
+          </div>
+          <div className='flex flex-col items-center w-1/2'>
+            <h3>Threshold</h3>
+            <Knob
+              max={127}
+              value={parameters.threshold}
+              onChange={(value) =>
+                dispatch(
+                  parameterUpdated({
+                    id: props.id,
+                    changes: { threshold: value },
+                  })
+                )
+              }
+            />
+          </div>
+        </div>
+        <div className='flex flex-row'>
+          <div className='flex flex-col items-center w-1/2'>
+            <h3>HPF Level</h3>
+            <Knob
+              max={127}
+              value={parameters.hpfLevel}
+              onChange={(value) =>
+                dispatch(
+                  parameterUpdated({
+                    id: props.id,
+                    changes: { hpfLevel: value },
+                  })
+                )
+              }
+            />
+          </div>
+          <div className='flex flex-col items-center w-1/2'>
+            <h3>HPF Gate</h3>
+            <Checkbox
+              className='checkbox'
+              value={parameters.hpfGate}
+              onChange={(value) =>
+                dispatch(
+                  parameterUpdated({
+                    id: props.id,
+                    changes: { hpfGate: value },
+                  })
+                )
+              }
+            />
+          </div>
+        </div>
+      </div>
+    </Card>
   );
 };
diff --git a/src/features/editor/parameters/parameterSlice.js b/src/features/editor/parameters/parameterSlice.js
index 9e2c3db..b8df48e 100644
--- a/src/features/editor/parameters/parameterSlice.js
+++ b/src/features/editor/parameters/parameterSlice.js
@@ -275,7 +275,8 @@ const defaultState = {
       waveform: 'Saw',
       keySync: 'Off',
       tempoSync: false,
-      frequency: '1/1',
+      frequency: 0,
+      syncNote: '1/1',
     },
     patches1: {
       id: 'patches1',
diff --git a/src/features/editor/timbreSlice.js b/src/features/editor/timbreSlice.js
index fe2937f..eaaa8eb 100644
--- a/src/features/editor/timbreSlice.js
+++ b/src/features/editor/timbreSlice.js
@@ -44,6 +44,7 @@ const timbreSlice = createSlice({
         filter: 'filter3',
         fcMod: 'fcMod',
         eg: 'eg5',
+        eg2: 'unusedVocoder',
         amp: 'amp3',
         lfo1: 'lfo5',
         lfo2: 'lfo6',
diff --git a/src/features/menu/index.js b/src/features/menu/index.js
index ccf84c6..3d44d2f 100644
--- a/src/features/menu/index.js
+++ b/src/features/menu/index.js
@@ -14,6 +14,8 @@ export default function Menu() {
   const [file, setFile] = useState(null);
   const fileRef = useRef(null);
   const state = useSelector((state) => selectEntities(state));
+  const activeTab = useSelector((state) => state.parameters.activeTab);
+  console.log(activeTab);
   const dispatch = useDispatch();
   const reader = new FileReader();
   const loadFile = (f) => {
@@ -29,6 +31,15 @@ export default function Menu() {
     }
   }, [file, dispatch]);
 
+  useEffect(() => {
+    if (state.patch.mode === 'Vocoder') {
+      dispatch(parameterUpdateTab('Vocoder'));
+    }
+    if (state.patch.mode === 'Single' || state.patch.mode === 'Multiple') {
+      dispatch(parameterUpdateTab('Timbre1'));
+    }
+  }, [state.patch.mode, dispatch]);
+
   return (
     <div className='col-span-1 flex flex-col justify-around border-solid border-r border-gray-300 bg-white px-4'>
       <div className='menu-patch-container'>
@@ -104,7 +115,7 @@ export default function Menu() {
       <div className='my-1 flex flex-col items-center space-y-2'>
         <button
           disabled={state.patch.mode === 'Vocoder'}
-          className='btn'
+          className={activeTab === 'Timbre1' ? `btn btn-active` : `btn`}
           onClick={() => {
             dispatch(parameterUpdateTab('Timbre1'));
           }}>
@@ -112,7 +123,7 @@ export default function Menu() {
         </button>
         <button
           disabled={state.patch.mode !== 'Multiple'}
-          className='btn'
+          className={activeTab === 'Timbre2' ? `btn btn-active` : `btn`}
           onClick={() => {
             dispatch(parameterUpdateTab('Timbre2'));
           }}>
@@ -120,21 +131,21 @@ export default function Menu() {
         </button>
         <button
           disabled={state.patch.mode !== 'Vocoder'}
-          className='btn'
+          className={activeTab === 'Vocoder' ? `btn btn-active` : `btn`}
           onClick={() => {
             dispatch(parameterUpdateTab('Vocoder'));
           }}>
           Vocoder
         </button>
         <button
-          className='btn'
+          className={activeTab === 'Effects' ? `btn btn-active` : `btn`}
           onClick={() => {
             dispatch(parameterUpdateTab('Effects'));
           }}>
           Effects
         </button>
         <button
-          className='btn'
+          className={activeTab === 'Arpeggio' ? `btn btn-active` : `btn`}
           onClick={() => {
             dispatch(parameterUpdateTab('Arpeggio'));
           }}>
diff --git a/src/features/utils/components.js b/src/features/utils/components.js
index 5a00155..36a7d40 100644
--- a/src/features/utils/components.js
+++ b/src/features/utils/components.js
@@ -83,14 +83,14 @@ function getKnobValue(dragStart, currentY, bipolar) {
 let knob_id = 0;
 
 function Knob({
-  maxValue = 127,
+  max = 127,
   dual = false,
   size = 42,
   value = 0,
   fillWidth = 4,
   onChange,
 }) {
-  value = value / maxValue;
+  value = value / max;
   const uid = useMemo(() => knob_id++, []);
   const radius = size / 2;
   const dial_zero = dual ? Math.PI / 2 : START_ANGLE;
@@ -115,9 +115,9 @@ function Knob({
       if (!dragStart) return;
 
       const newValue = getKnobValue(dragStart, e.clientY, dual);
-      onChange(Math.round(newValue * maxValue));
+      onChange(Math.round(newValue * max));
     },
-    [dragStart, onChange, dual, maxValue]
+    [dragStart, onChange, dual, max]
   );
   const onMouseDown = useCallback(
     (e) => {
@@ -158,19 +158,21 @@ function Knob({
       {/* TOOLTIP */}
       <div
         className={` ${
-          isDragging ? 'opacity-100' : 'opacity-0'
+          isDragging ? 'opacity-100' : 'opacity-0 hidden'
         } transition duration-75 ease-in select-none pointer-events-none absolute -mt-6 bg-gray-800 text-white truncate text-xs box-content rounded text-center w-8 py-0.5`}>
-        {Math.round(value * maxValue)}
+        {Math.round(value * max)}
       </div>
       <svg
         className={` ${
-          isDragging ? 'opacity-100' : 'opacity-0'
+          isDragging ? 'opacity-100' : 'opacity-0 hidden'
         } transition duration-75 ease-in absolute text-gray-800 w-full h-2 -mt-1`}
         x='0px'
         y='0px'
         viewBox='0 0 255 255'
         xmlSpace='preserve'>
-        <polygon class='fill-current' points='0,0 127.5,127.5 255,0'></polygon>
+        <polygon
+          className='fill-current'
+          points='0,0 127.5,127.5 255,0'></polygon>
       </svg>
       <div
         style={{
diff --git a/src/index.css b/src/index.css
index d2a5c7c..554c729 100644
--- a/src/index.css
+++ b/src/index.css
@@ -31,6 +31,9 @@ code {
   .btn:disabled {
     @apply line-through opacity-50 hover:bg-white cursor-default;
   }
+  .btn-active {
+    @apply ring ring-blue-500;
+  }
   .select {
     @apply select-none block rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50;
   }