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 ( -
+
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 ( -
+
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 ( -
+
selectById(state, props.id)); const dispatch = useDispatch(); return ( -
+
selectById(state, props.id)); const dispatch = useDispatch(); return ( -
+
selectById(state, props.id)); const dispatch = useDispatch(); return ( -
+
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 ( -
+