move timbre style to .css file

src/features/timbre/Timbre.js

@@ -9,22 +9,12 @@ import Amp from './parameters/Amp';
 import LFO from './parameters/LFO';
 import Patches from './parameters/Patches';
 import { selectById } from './timbreSlice.js';
-
+import styles from './Timbre.module.css';
-const timbreStyle = {
-    display: 'flex',
-    flexWrap: 'wrap',
-    flexDirection: 'row',
-    justifyContent: 'center',
-};
-
-const lineBreak = {
-    width: '100%',
-};
 
 export default function Timbre(props) {
     const ids = useSelector((state) => selectById(state, props.id));
     return (
-        <div style={timbreStyle}>
+        <div className={styles.timbreStyle}>
             <VCO
                 id={ids.vco1}
                 waveforms={[
@@ -124,7 +114,7 @@ export default function Timbre(props) {
             <Pitch id={ids.pitch} />
             <Filter id={ids.filter} />
             <Amp id={ids.amp} />
-            <div className="linebreak" style={lineBreak} />
+            <div className={styles.lineBreak} />
             <EG id={ids.eg1} />
             <EG id={ids.eg2} />
             <LFO

src/features/timbre/Timbre.module.css

@@ -0,0 +1,10 @@
+.timbreStyle {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    justify-content: center;
+}
+
+.lineBreak {
+    width: 100%;
+}

src/features/timbre/Vocoder.js

@@ -8,22 +8,12 @@ import EG from './parameters/EG';
 import LFO from './parameters/LFO';
 import { VocoderFilter, FCMod } from './parameters/Filter';
 import { VocoderAmp } from './parameters/Amp';
-
+import styles from './Timbre.module.css';
-const timbreStyle = {
-    display: 'flex',
-    flexWrap: 'wrap',
-    flexDirection: 'row',
-    justifyContent: 'center',
-};
-
-const lineBreak = {
-    width: '100%',
-};
 
 export default function Vocoder(props) {
     const ids = useSelector((state) => selectById(state, props.id));
     return (
-        <div style={timbreStyle}>
+        <div className={styles.timbreStyle}>
             <VCO
                 id={ids.vco}
                 waveforms={[
@@ -109,7 +99,7 @@ export default function Vocoder(props) {
             <Pitch id={ids.pitch} />
             <VocoderFilter id={ids.filter} />
             <FCMod id={ids.fcMod} />
-            <div className="linebreak" style={lineBreak} />
+            <div className={styles.lineBreak} />
             <VocoderAmp id={ids.amp} />
             <EG id={ids.eg} />
             <LFO id={ids.lfo1} />