From 08cb1e088772628281eb774bdc3e838bcf5aaac3 Mon Sep 17 00:00:00 2001
From: "[poww10s]" <[theironminer@gmail.com]>
Date: Fri, 20 Nov 2020 08:18:43 -0500
Subject: [PATCH] move timbre style to .css file

---
 src/features/timbre/Timbre.js         | 16 +++-------------
 src/features/timbre/Timbre.module.css | 10 ++++++++++
 src/features/timbre/Vocoder.js        | 16 +++-------------
 3 files changed, 16 insertions(+), 26 deletions(-)
 create mode 100644 src/features/timbre/Timbre.module.css

diff --git a/src/features/timbre/Timbre.js b/src/features/timbre/Timbre.js
index 493fe1b..2e077c4 100644
--- a/src/features/timbre/Timbre.js
+++ b/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';
-
-const timbreStyle = {
-    display: 'flex',
-    flexWrap: 'wrap',
-    flexDirection: 'row',
-    justifyContent: 'center',
-};
-
-const lineBreak = {
-    width: '100%',
-};
+import styles from './Timbre.module.css';
 
 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
diff --git a/src/features/timbre/Timbre.module.css b/src/features/timbre/Timbre.module.css
new file mode 100644
index 0000000..835dde7
--- /dev/null
+++ b/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%;
+}
diff --git a/src/features/timbre/Vocoder.js b/src/features/timbre/Vocoder.js
index ee3f82b..019f8aa 100644
--- a/src/features/timbre/Vocoder.js
+++ b/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';
-
-const timbreStyle = {
-    display: 'flex',
-    flexWrap: 'wrap',
-    flexDirection: 'row',
-    justifyContent: 'center',
-};
-
-const lineBreak = {
-    width: '100%',
-};
+import styles from './Timbre.module.css';
 
 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} />