From fcf45a690cc39ffcdf46c3f97c2960bc8edfa51b Mon Sep 17 00:00:00 2001
From: "[poww10s]" <[theironminer@gmail.com]>
Date: Thu, 19 Nov 2020 00:48:41 -0500
Subject: [PATCH] add css to components

---
 src/features/timbre/Timbre.js                     |  9 ++++++++-
 src/features/timbre/parameters/Amp.js             | 14 +++++++++-----
 src/features/timbre/parameters/EG.js              |  3 ++-
 src/features/timbre/parameters/Filter.js          |  3 ++-
 src/features/timbre/parameters/LFO.js             |  3 ++-
 src/features/timbre/parameters/Mixer.js           |  3 ++-
 .../timbre/parameters/Parameters.module.css       | 15 +++++++++++++++
 src/features/timbre/parameters/Pitch.js           |  5 +++--
 8 files changed, 43 insertions(+), 12 deletions(-)

diff --git a/src/features/timbre/Timbre.js b/src/features/timbre/Timbre.js
index 3ce663e..45cfb2e 100644
--- a/src/features/timbre/Timbre.js
+++ b/src/features/timbre/Timbre.js
@@ -7,9 +7,14 @@ import EG from './parameters/EG';
 import Amp from './parameters/Amp';
 import LFO from './parameters/LFO';
 
+const style = {
+    display: 'flex',
+    flexDirection: 'row',
+};
+
 export function Timbre(props) {
     return (
-        <div>
+        <div style={style}>
             <VCO
                 id="vco1"
                 waveforms={[
@@ -22,6 +27,7 @@ export function Timbre(props) {
                     'Noise',
                     'Audio In',
                 ]}
+                dwgsOrModTypeName="DWGS"
                 dwgsOrModType={[
                     'SynSine1',
                     'SynSine2',
@@ -92,6 +98,7 @@ export function Timbre(props) {
             <VCO
                 id="vco2"
                 waveforms={['Saw', 'Square', 'Triangle']}
+                dwgsOrModTypeName="Mod Type"
                 dwgsOrModType={['Off', 'Ring', 'Sync', 'RingSync']}
             />
             <Mixer id="mixer1" />
diff --git a/src/features/timbre/parameters/Amp.js b/src/features/timbre/parameters/Amp.js
index 7111d68..78216a4 100644
--- a/src/features/timbre/parameters/Amp.js
+++ b/src/features/timbre/parameters/Amp.js
@@ -2,20 +2,21 @@ import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { selectById, parameterUpdated } from './parameterSlice.js';
 import { Slider, Checkbox } from '../../helpers/Helpers';
+import styles from './Parameters.module.css';
 
 export default function Amp(props) {
     const parameters = useSelector((state) => selectById(state, props.id));
     const dispatch = useDispatch();
 
     return (
-        <div>
+        <div className={styles.container}>
             <Slider
                 parameter={parameters.ampLevel}
                 min="0"
                 max="127"
                 onChange={(value) =>
                     dispatch(
-                        parameters({
+                        parameterUpdated({
                             id: props.id,
                             changes: { ampLevel: value },
                         })
@@ -28,7 +29,10 @@ export default function Amp(props) {
                 max="63"
                 onChange={(value) =>
                     dispatch(
-                        parameters({ id: props.id, changes: { panpot: value } })
+                        parameterUpdated({
+                            id: props.id,
+                            changes: { panpot: value },
+                        })
                     )
                 }
             />
@@ -38,7 +42,7 @@ export default function Amp(props) {
                 max="63"
                 onChange={(value) =>
                     dispatch(
-                        parameters({
+                        parameterUpdated({
                             id: props.id,
                             changes: { ampTrack: value },
                         })
@@ -51,7 +55,7 @@ export default function Amp(props) {
                     dispatch(
                         parameterUpdated({
                             id: props.id,
-                            changes: { egReset: value },
+                            changes: { distortion: value },
                         })
                     )
                 }
diff --git a/src/features/timbre/parameters/EG.js b/src/features/timbre/parameters/EG.js
index 1b82a82..569d48e 100644
--- a/src/features/timbre/parameters/EG.js
+++ b/src/features/timbre/parameters/EG.js
@@ -2,13 +2,14 @@ import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { selectById, parameterUpdated } from './parameterSlice.js';
 import { Slider, Checkbox } from '../../helpers/Helpers';
+import styles from './Parameters.module.css';
 
 export default function EG(props) {
     const parameters = useSelector((state) => selectById(state, props.id));
     const dispatch = useDispatch();
 
     return (
-        <div>
+        <div className={styles.container}>
             <Slider
                 parameter={parameters.attack}
                 min="0"
diff --git a/src/features/timbre/parameters/Filter.js b/src/features/timbre/parameters/Filter.js
index 66c05ba..df7a193 100644
--- a/src/features/timbre/parameters/Filter.js
+++ b/src/features/timbre/parameters/Filter.js
@@ -2,13 +2,14 @@ import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { selectById, parameterUpdated } from './parameterSlice.js';
 import { Slider, SelectList } from '../../helpers/Helpers';
+import styles from './Parameters.module.css';
 
 export default function Filter(props) {
     const parameters = useSelector((state) => selectById(state, props.id));
     const dispatch = useDispatch();
 
     return (
-        <div>
+        <div className={styles.container}>
             <SelectList
                 value={parameters.filterType}
                 list={[
diff --git a/src/features/timbre/parameters/LFO.js b/src/features/timbre/parameters/LFO.js
index abd7fa1..8410a27 100644
--- a/src/features/timbre/parameters/LFO.js
+++ b/src/features/timbre/parameters/LFO.js
@@ -2,13 +2,14 @@ import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { selectById, parameterUpdated } from './parameterSlice.js';
 import { Slider, SelectList, Checkbox } from '../../helpers/Helpers';
+import styles from './Parameters.module.css';
 
 export default function LFO(props) {
     const parameters = useSelector((state) => selectById(state, props.id));
     const dispatch = useDispatch();
 
     return (
-        <div>
+        <div className={styles.container}>
             <SelectList
                 value={parameters.waveform}
                 list={props.waveforms}
diff --git a/src/features/timbre/parameters/Mixer.js b/src/features/timbre/parameters/Mixer.js
index f65b80f..ffe5fa2 100644
--- a/src/features/timbre/parameters/Mixer.js
+++ b/src/features/timbre/parameters/Mixer.js
@@ -2,13 +2,14 @@ import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { selectById, parameterUpdated } from './parameterSlice.js';
 import { Slider } from '../../helpers/Helpers';
+import styles from './Parameters.module.css';
 
 export default function Mixer(props) {
     const parameters = useSelector((state) => selectById(state, props.id));
     const dispatch = useDispatch();
 
     return (
-        <div>
+        <div className={styles.container}>
             <Slider
                 parameter={parameters.vol1}
                 onChange={(value) =>
diff --git a/src/features/timbre/parameters/Parameters.module.css b/src/features/timbre/parameters/Parameters.module.css
index e69de29..4a4b478 100644
--- a/src/features/timbre/parameters/Parameters.module.css
+++ b/src/features/timbre/parameters/Parameters.module.css
@@ -0,0 +1,15 @@
+.container {
+    font-size: small;
+    display: inline-flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 10pt;
+    margin: 2pt;
+    border: solid 1pt black;
+}
+.container > input {
+    margin: 7pt 0;
+}
+.container > select {
+    margin: 2.5pt 0;
+}
diff --git a/src/features/timbre/parameters/Pitch.js b/src/features/timbre/parameters/Pitch.js
index e5c2ee2..a83d365 100644
--- a/src/features/timbre/parameters/Pitch.js
+++ b/src/features/timbre/parameters/Pitch.js
@@ -2,13 +2,14 @@ import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { selectById, parameterUpdated } from './parameterSlice.js';
 import { Slider, SelectList } from '../../helpers/Helpers';
+import styles from './Parameters.module.css';
 
 export default function Pitch(props) {
     const parameters = useSelector((state) => selectById(state, props.id));
     const dispatch = useDispatch();
 
     return (
-        <div>
+        <div className={styles.container}>
             <SelectList
                 value={parameters.voiceAssign}
                 list={['Mono', 'Poly', 'Unison']}
@@ -67,7 +68,7 @@ export default function Pitch(props) {
                     dispatch(
                         parameterUpdated({
                             id: props.id,
-                            changes: { unisoneDetune: value },
+                            changes: { unisonDetune: value },
                         })
                     )
                 }