From c8463a0db8f3f13b8b0ff933452bd3d5f81be2fd Mon Sep 17 00:00:00 2001
From: Aoife <aoifeebradley@gmail.com>
Date: Fri, 20 Nov 2020 22:46:44 -0500
Subject: [PATCH] changed spacing and checkboxes

---
 src/features/helpers/Helpers.js               |  3 ++
 src/features/helpers/rcSelectTheme.css        | 13 +++++++++
 src/features/timbre/parameters/Amp.js         |  4 +--
 src/features/timbre/parameters/EG.js          |  2 +-
 src/features/timbre/parameters/LFO.js         |  2 +-
 .../timbre/parameters/Parameters.module.css   | 29 +++++++++++++++++--
 src/features/timbre/parameters/VCO.js         |  2 +-
 7 files changed, 48 insertions(+), 7 deletions(-)

diff --git a/src/features/helpers/Helpers.js b/src/features/helpers/Helpers.js
index d7b8f95..42e8d63 100644
--- a/src/features/helpers/Helpers.js
+++ b/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>
     );
 };
 
diff --git a/src/features/helpers/rcSelectTheme.css b/src/features/helpers/rcSelectTheme.css
index 1ef1fc9..62a7c6c 100644
--- a/src/features/helpers/rcSelectTheme.css
+++ b/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);
+}
+
diff --git a/src/features/timbre/parameters/Amp.js b/src/features/timbre/parameters/Amp.js
index 6ddb27f..c0afbb8 100644
--- a/src/features/timbre/parameters/Amp.js
+++ b/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(
diff --git a/src/features/timbre/parameters/EG.js b/src/features/timbre/parameters/EG.js
index 2855e77..2ab2106 100644
--- a/src/features/timbre/parameters/EG.js
+++ b/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(
diff --git a/src/features/timbre/parameters/LFO.js b/src/features/timbre/parameters/LFO.js
index 3eead01..f220e6a 100644
--- a/src/features/timbre/parameters/LFO.js
+++ b/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(
diff --git a/src/features/timbre/parameters/Parameters.module.css b/src/features/timbre/parameters/Parameters.module.css
index a810905..3edf14b 100644
--- a/src/features/timbre/parameters/Parameters.module.css
+++ b/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;
-}
\ No newline at end of file
+}
+
diff --git a/src/features/timbre/parameters/VCO.js b/src/features/timbre/parameters/VCO.js
index ec6fa54..4d34d4c 100644
--- a/src/features/timbre/parameters/VCO.js
+++ b/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(