changed spacing and checkboxes

src/features/timbre/parameters/Amp.js

@@ -53,8 +53,8 @@ export default function Amp(props) {
                     )
                 }
             />
-            Distortion
             <Checkbox
+                name="Distortion"
                 parameter={parameters.distortion}
                 onChange={(value) =>
                     dispatch(
@@ -118,8 +118,8 @@ export const VocoderAmp = (props) => {
                     )
                 }
             />
-            Distortion
             <Checkbox
+                name="Distortion"
                 parameter={parameters.distortion}
                 onChange={(value) =>
                     dispatch(

src/features/timbre/parameters/EG.js

@@ -67,8 +67,8 @@ export default function EG(props) {
                     )
                 }
             />
-            EG Reset
             <Checkbox
+                name="EG Reset"
                 parameter={parameters.egReset}
                 onChange={(value) =>
                     dispatch(

src/features/timbre/parameters/LFO.js

@@ -37,8 +37,8 @@ export default function LFO(props) {
                     )
                 }
             />
-            Tempo Sync
             <Checkbox
+                name="Tempo Sync"
                 parameter={parameters.tempoSync}
                 onChange={(value) =>
                     dispatch(

src/features/timbre/parameters/Parameters.module.css

@@ -4,6 +4,7 @@
 }
 
 .container {
+    position: relative;
     font-size: small;
     display: inline-flex;
     flex-direction: column;
@@ -15,10 +16,32 @@
     line-height: 1.5em;
 }
 .container > * {
-    margin: 2.5pt 0;
+    margin: 3pt 0;
+}
+
+.header {
+    font-size: 1.5em;
+    line-height: 1.25em;
+    text-align: center;
+    background-color: white;
+    padding: 0 .25em 0.075em;
+    border-left: 1px solid slategrey;
+    border-right: 1px solid slategrey;
+    box-sizing: border-box;
+}
+.container > .header {
+    position: absolute;
+    top: -7.5%;
+    left: 12%;
+}
+.horizontalContainer > .header, .patchesContainer > .header {
+    position: absolute;
+    top: -5.25%;
+    left: 6%;
 }
 
 .horizontalContainer {
+    position: relative;
     font-size: small;
     display: inline-flex;
     flex-direction: row;
@@ -32,6 +55,7 @@
 }
 
 .patchesContainer {
+    position: relative;
     font-size: small;
     display: inline-flex;
     flex-direction: row;
@@ -60,4 +84,5 @@
 
 .patchesContainer > .divider {
     width: 4px;
-}
+}
+

src/features/timbre/parameters/VCO.js

@@ -118,8 +118,8 @@ export const AudioIn = (props) => {
                     )
                 }
             />
-            HPF Gate
             <Checkbox
+                name="HPF Gate"
                 parameter={parameters.hpfGate}
                 onChange={(value) =>
                     dispatch(