add css to components

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" />

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 },
                         })
                     )
                 }

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"

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={[

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}

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) =>

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;
+}

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 },
                         })
                     )
                 }