move timbre style to .css file

This commit is contained in:
[poww10s]
2020-11-20 08:18:43 -05:00
parent b4befcedbf
commit 08cb1e0887
3 changed files with 16 additions and 26 deletions
+3 -13
View File
@@ -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
+10
View File
@@ -0,0 +1,10 @@
.timbreStyle {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
}
.lineBreak {
width: 100%;
}
+3 -13
View File
@@ -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} />