changed spacing and checkboxes

src/features/helpers/Helpers.js

@@ -38,12 +38,15 @@ const SelectList = (props) => {
 
 const Checkbox = (props) => {
     return (
+        <div>
+        <span>{`${props.name}:`}</span>
         <input
             type="checkbox"
             value={props.parameter}
             defaultChecked={props.parameter}
             onChange={(e) => props.onChange(e.target.checked)}
         />
+        </div>
     );
 };
 

src/features/helpers/rcSelectTheme.css

@@ -249,3 +249,16 @@
     border-width: 4px 4px 0;
     border-top-color: #6c6c6c;
 }
+span {
+    font-size: 1em;
+    line-height: 1.5em;
+}
+[type="checkbox"]:not(:checked),
+[type="checkbox"]:checked {
+    transform: matrix(1.5, 0, 0, 1.5, 0, 1.5);
+    margin: 0.75em 1em;
+}
+[type="checkbox"]:checked {
+    filter: hue-rotate(40deg);
+}
+

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(