remove old styles and begin phase out old elements

craco.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  style: {
+    postcss: {
+      plugins: [require('tailwindcss'), require('autoprefixer')],
+    },
+  },
+};

package.json

@@ -3,7 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@reduxjs/toolkit": "^1.4.0",
+    "@craco/craco": "^6.1.1",
+    "@reduxjs/toolkit": "^1.5.1",
+    "@tailwindcss/forms": "^0.3.2",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
@@ -20,9 +22,9 @@
     "styled-components": "^5.2.1"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
+    "start": "craco start",
+    "build": "craco build",
+    "test": "craco test",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
@@ -41,6 +43,10 @@
     ]
   },
   "devDependencies": {
-    "babel-plugin-styled-components": "^1.11.1"
+    "@tailwindcss/postcss7-compat": "^2.0.4",
+    "autoprefixer": "^9.8.6",
+    "babel-plugin-styled-components": "^1.11.1",
+    "postcss": "^7.0.35",
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.4"
   }
 }

src/App.css

@@ -1,44 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-float infinite 3s ease-in-out;
-  }
-}
-
-.App-header {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-}
-
-.App-link {
-  color: rgb(112, 76, 182);
-}
-.App-spacer {
-  min-height: 100vh;
-  min-width: 15vw;
-  border-right: 1px solid black;
-}
-
-@keyframes App-logo-float {
-  0% {
-    transform: translateY(0);
-  }
-  50% {
-    transform: translateY(10px);
-  }
-  100% {
-    transform: translateY(0px);
-  }
-}

src/App.js

@@ -1,17 +1,12 @@
 import React from 'react';
 import Menu from './features/menu';
 import TimbreSwitcher from './features/timbre/timbreSwitcher';
-import './App.css';
 
 function App() {
   return (
-    <div className='App'>
-      <header className='App-header'>
-        <div className='App-spacer'>
-          <Menu />
-        </div>
-        <TimbreSwitcher />
-      </header>
+    <div className='grid grid-cols-6 grid-rows-1 gap-4 h-screen'>
+      <Menu className='col-span-1' />
+      <TimbreSwitcher className='col-span-5' />
     </div>
   );
 }

src/features/menu/index.js

@@ -1,6 +1,5 @@
 import { useRef, useState, useEffect } from 'react';
-import './menu.css';
-import { SelectList } from '../helpers/Helpers';
+import { Select } from '../utils/components';
 import { useDispatch, useSelector } from 'react-redux';
 import {
   parameterUpdateIndex,
@@ -31,10 +30,11 @@ export default function Menu() {
   }, [file, dispatch]);
 
   return (
-    <div className='menu'>
+    <div className='flex flex-col justify-around border-solid border-r-2 border-gray-400 px-4'>
       <div className='menu-patch-container'>
         <div className='patch-name'>
           <input
+            className='block w-full rounded-md bg-gray-100 border-transparent hover:bg-gray-200 focus:bg-white focus:ring-1'
             placeholder='Patch Name'
             type='text'
             maxLength='12'
@@ -49,32 +49,32 @@ export default function Menu() {
             }}
           />
         </div>
-        <div className='patch-load'>
+        <div className='my-1 flex flex-col items-center'>
           <button
-            className='menu-button'
+            className='mx-4 my-1 bg-gray-100 rounded-md w-32 h-10 border-transparent hover:bg-gray-200'
             onClick={() => {
               dispatch(parameterRefreshAll());
             }}>
             New Patch
           </button>
           <button
-            className='menu-button'
+            className='mx-4 my-1 bg-gray-100 rounded-md w-32 h-10 border-transparent hover:bg-gray-200'
             onClick={() => {
               fileRef.current.click();
             }}>
             Load Patch
           </button>
           <button
-            className='menu-button'
+            className='mx-4 my-1 bg-gray-100 rounded-md w-32 h-10 border-transparent hover:bg-gray-200'
             onClick={() => {
               return_file_from_store(state);
             }}>
             Save Patch
           </button>
           <input
+            className='hidden'
             type='file'
             accept='.syx'
-            className='menu-file-input'
             ref={fileRef}
             onChange={(e) => {
               loadFile(e.target.files[0]);
@@ -82,7 +82,8 @@ export default function Menu() {
           />
         </div>
         <div className='patch-settings'>
-          <SelectList
+          <Select
+            className=''
             value={state.patch.mode}
             list={[
               { value: 'Single' },

src/features/menu/menu.css

@@ -1,54 +0,0 @@
-.menu {
-  height: 100vh;
-  min-width: 15vw;
-  display: flex;
-  flex-direction: column;
-  flex-wrap: nowrap;
-  justify-content: space-around;
-  align-items: stretch;
-}
-
-.menu-patch-container > * {
-  margin-top: 10pt;
-}
-
-input[type='text'] {
-  font-family: 'Roboto', sans-serif;
-  text-indent: 8pt;
-  width: 70%;
-  padding: 6pt 0;
-  outline: none;
-  border-radius: 4pt;
-  border: 1px solid gainsboro;
-}
-input[type='text']:hover {
-  border-color: silver;
-}
-input[type='text']:focus {
-  border: 2px solid dodgerblue;
-}
-
-.menu-button {
-  width: 65%;
-  display: block;
-  padding: 4pt;
-  margin: 8px auto;
-  outline: none;
-}
-
-h2 {
-  text-align: left;
-  font-size: x-large;
-  font-weight: 400;
-}
-
-.menu-file-input {
-  display: none;
-}
-
-.patch-settings {
-  font-size: small;
-  width: 75%;
-  margin: 10pt auto;
-  line-height: 1.5em;
-}

src/features/timbre/Arpeggio.js

@@ -2,12 +2,11 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 import { selectById } from './timbreSlice.js';
 import { ArpeggA, ArpeggB } from './parameters/Arpeggios';
-import styles from './Timbre.module.css';
 
 export default function Arpeggio(props) {
   const ids = useSelector((state) => selectById(state, props.id));
   return (
-    <div className={styles.timbreStyle}>
+    <div>
       <ArpeggA id={ids.arpeggA} />
       <ArpeggB id={ids.arpeggB} />
     </div>

src/features/timbre/Effects.js

@@ -2,12 +2,11 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 import { ModFX, Delay, EQ } from './parameters/ModFX';
 import { selectById } from './timbreSlice.js';
-import styles from './Timbre.module.css';
 
 export default function Effects(props) {
   const ids = useSelector((state) => selectById(state, props.id));
   return (
-    <div className={styles.timbreStyle}>
+    <div>
       <ModFX id={ids.modfx} />
       <Delay id={ids.delay} />
       <EQ id={ids.eq} />

src/features/timbre/Timbre.js

@@ -9,12 +9,11 @@ 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';
 
 export default function Timbre(props) {
   const ids = useSelector((state) => selectById(state, props.id));
   return (
-    <div className={styles.timbreStyle}>
+    <div>
       <VCO
         name='VCO 1'
         id={ids.vco1}
@@ -118,7 +117,7 @@ export default function Timbre(props) {
       <Amp name='Amp' id={ids.amp} />
       <EG name='EG 1' id={ids.eg1} />
       <EG name='EG 2' id={ids.eg2} />
-      <div className={styles.lineBreak} />
+      <div />
       <LFO
         name='LFO 1'
         id={ids.lfo1}

src/features/timbre/Timbre.module.css

@@ -1,130 +0,0 @@
-.timbreStyle {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: row;
-  justify-content: center;
-}
-
-.lineBreak {
-  width: 0%;
-}
-
-@media only screen and (max-width: 1920px) {
-  .lineBreak {
-    width: 100%;
-  }
-}
-
-@media only screen and (max-width: 1440px) {
-  .lineBreak {
-    width: 0%;
-  }
-}
-
-@media only screen and (max-width: 990px) {
-  .lineBreak {
-    width: 0%;
-  }
-}
-
-@media only screen and (max-width: 920px) {
-  .lineBreak {
-    width: 100%;
-  }
-}
-
-.buttonContainer {
-  position: fixed;
-  top: 0;
-  left: 25%;
-}
-
-.buttonContainer > button:hover {
-  background: white;
-  color: slateblue;
-  border: 2px solid slateblue;
-}
-.buttonContainer > button:focus {
-  background: slateblue;
-  color: white;
-  border: 2px solid slateblue;
-}
-
-.tabs {
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-}
-
-.tabList {
-  border-bottom: 1px solid black;
-  display: none;
-  flex-direction: row;
-  list-style-type: none;
-  justify-content: center;
-  top: 0;
-  padding: 0;
-  margin: 0;
-  width: 85vw;
-  background: white;
-}
-.tab {
-  height: 1.25em;
-  width: 4em;
-  background: white;
-  color: slategrey;
-  font-size: 0.75em;
-  margin: 0.75em 1em;
-  padding: 0.25em 1em;
-  border: 2px solid slategrey;
-  border-radius: 3px;
-  outline: none;
-  -webkit-touch-callout: none; /* iOS Safari */
-  -webkit-user-select: none; /* Safari */
-  -khtml-user-select: none; /* Konqueror HTML */
-  -moz-user-select: none; /* Old versions of Firefox */
-  -ms-user-select: none; /* Internet Explorer/Edge */
-  user-select: none;
-  transition: all 0.2s ease-in-out;
-}
-
-.tab:hover {
-  background: white;
-  color: slateblue;
-  border: 2px solid slateblue;
-}
-.selected,
-.selected:hover {
-  background: slateblue;
-  color: white;
-  border: 2px solid slateblue;
-  transition: 0.2s ease-in-out;
-}
-@keyframes slideeffect {
-  0% {
-    opacity: 0.5;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.tabPanel {
-  padding: 1em 0;
-  height: 100%;
-  animation: slideeffect 0.6s ease-in-out;
-  opacity: 1;
-  overflow-y: scroll;
-}
-.tabPanel::-webkit-scrollbar {
-  width: 0.3em;
-}
-
-.tabPanel::-webkit-scrollbar-track,
-.tabPanel::-webkit-scrollbar-thumb {
-  background-color: transparent;
-}
-
-.tabPanel:hover::-webkit-scrollbar-thumb {
-  background-color: lightgray;
-  border-radius: 6px;
-}

src/features/timbre/Vocoder.js

@@ -10,14 +10,13 @@ import { VocoderFilter, FCMod } from './parameters/Filter';
 import { VocoderAmp } from './parameters/Amp';
 import Levels from './parameters/Levels';
 import Pans from './parameters/Pans';
-import styles from './Timbre.module.css';
 
 export default function Vocoder(props) {
   const ids = useSelector((state) => selectById(state, props.id));
   return (
-        <div className={styles.timbreStyle}>
+    <div>
       <VCO
-                name="VCO"
+        name='VCO'
         id={ids.vco}
         waveforms={[
           { value: 'Saw' },
@@ -29,7 +28,7 @@ export default function Vocoder(props) {
           { value: 'Noise' },
           { value: 'Audio In' },
         ]}
-                dwgsOrModTypeName="DWGS"
+        dwgsOrModTypeName='DWGS'
         dwgsOrModType={[
           { value: 'SynSine1' },
           { value: 'SynSine2' },
@@ -97,18 +96,18 @@ export default function Vocoder(props) {
           { value: 'Voice4' },
         ]}
       />
-            <AudioIn name="Audio In" id={ids.audioIn} />
-            <Mixer name="Mixer" id={ids.mixer} />
-            <Pitch name="Pitch" id={ids.pitch} />
-            <VocoderFilter name="Filter" id={ids.filter} />
-            <FCMod name="FC Mod" id={ids.fcMod} />
-            <VocoderAmp name="Amp" id={ids.amp} />
-            <EG name="EG" id={ids.eg} />
-            <div className={styles.lineBreak} />
-            <LFO name="LFO 1" id={ids.lfo1} />
-            <LFO name="LFO 2" id={ids.lfo2} />
-            <Levels name="Levels" id={ids.levels} />
-            <Pans name="Pans" id={ids.pans} />
+      <AudioIn name='Audio In' id={ids.audioIn} />
+      <Mixer name='Mixer' id={ids.mixer} />
+      <Pitch name='Pitch' id={ids.pitch} />
+      <VocoderFilter name='Filter' id={ids.filter} />
+      <FCMod name='FC Mod' id={ids.fcMod} />
+      <VocoderAmp name='Amp' id={ids.amp} />
+      <EG name='EG' id={ids.eg} />
+      <div />
+      <LFO name='LFO 1' id={ids.lfo1} />
+      <LFO name='LFO 2' id={ids.lfo2} />
+      <Levels name='Levels' id={ids.levels} />
+      <Pans name='Pans' id={ids.pans} />
     </div>
   );
 }

src/features/timbre/parameters/Amp.js

@@ -2,15 +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 Amp(props) {
   const parameters = useSelector((state) => selectById(state, props.id));
   const dispatch = useDispatch();
 
   return (
-        <div className={styles.container}>
-            <span className={styles.header}>{`${props.name}`}</span>
+    <div>
+      <span>{`${props.name}`}</span>
       Amp Level
       <Slider
         parameter={parameters.ampLevel}
@@ -54,7 +53,7 @@ export default function Amp(props) {
         }
       />
       <Checkbox
-                name="Distortion"
+        name='Distortion'
         parameter={parameters.distortion}
         onChange={(value) =>
           dispatch(
@@ -74,8 +73,8 @@ export const VocoderAmp = (props) => {
   const dispatch = useDispatch();
 
   return (
-        <div className={styles.container}>
-            <span className={styles.header}>{`${props.name}`}</span>
+    <div>
+      <span>{`${props.name}`}</span>
       Amp Level
       <Slider
         parameter={parameters.ampLevel}
@@ -119,7 +118,7 @@ export const VocoderAmp = (props) => {
         }
       />
       <Checkbox
-                name="Distortion"
+        name='Distortion'
         parameter={parameters.distortion}
         onChange={(value) =>
           dispatch(

src/features/timbre/parameters/Arpeggios.js

@@ -2,16 +2,15 @@ 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';
 
 const ArpeggA = (props) => {
   const parameters = useSelector((state) => selectById(state, props.id));
   const dispatch = useDispatch();
 
   return (
-    <div className={styles.horizontalContainer}>
-      <span className={styles.header}>Arpeggio A.</span>
-      <div className={styles.container}>
+    <div>
+      <span>Arpeggio A.</span>
+      <div>
         Tempo
         <Slider
           min={20}
@@ -61,8 +60,8 @@ const ArpeggA = (props) => {
           }
         />
       </div>
-      <div className={styles.divider} />
-      <div className={styles.container}>
+      <div />
+      <div>
         Type
         <SelectList
           value={parameters.type}
@@ -107,11 +106,11 @@ const ArpeggB = (props) => {
   const dispatch = useDispatch();
 
   return (
-    <div className={styles.horizontalContainer}>
-      <span className={styles.header}>Arpeggio B.</span>
-      <div className={styles.container}>
+    <div>
+      <span>Arpeggio B.</span>
+      <div>
         <Checkbox
-          name="Latch"
+          name='Latch'
           parameter={parameters.latch}
           onChange={(value) =>
             dispatch(
@@ -137,7 +136,7 @@ const ArpeggB = (props) => {
           }
         />
         <Checkbox
-          name="Key Sync"
+          name='Key Sync'
           parameter={parameters.keySync}
           onChange={(value) =>
             dispatch(
@@ -149,8 +148,8 @@ const ArpeggB = (props) => {
           }
         />
       </div>
-      <div className={styles.divider} />
-      <div className={styles.container}>
+      <div />
+      <div>
         Last Step
         <SelectList
           labelFunction={(v) => `Step ${v.value}`}

src/features/timbre/parameters/EG.js

@@ -2,15 +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 className={styles.container}>
-            <span className={styles.header}>{`${props.name}`}</span>
+    <div>
+      <span>{`${props.name}`}</span>
       Attack
       <Slider
         parameter={parameters.attack}
@@ -68,7 +67,7 @@ export default function EG(props) {
         }
       />
       <Checkbox
-                name="EG Reset"
+        name='EG Reset'
         parameter={parameters.egReset}
         onChange={(value) =>
           dispatch(

src/features/timbre/parameters/Filter.js

@@ -2,15 +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 className={styles.container}>
-            <span className={styles.header}>{`${props.name}`}</span>
+    <div>
+      <span>{`${props.name}`}</span>
       Filter Type
       <SelectList
         value={parameters.filterType}
@@ -93,8 +92,8 @@ export const VocoderFilter = (props) => {
   const parameters = useSelector((state) => selectById(state, props.id));
   const dispatch = useDispatch();
   return (
-        <div className={styles.container}>
-            <span className={styles.header}>{`${props.name}`}</span>
+    <div>
+      <span>{`${props.name}`}</span>
       Cutoff
       <Slider
         parameter={parameters.cutoff}
@@ -145,8 +144,8 @@ export const FCMod = (props) => {
   const parameters = useSelector((state) => selectById(state, props.id));
   const dispatch = useDispatch();
   return (
-        <div className={styles.container}>
-            <span className={styles.header}>{`${props.name}`}</span>
+    <div>
+      <span>{`${props.name}`}</span>
       Source
       <SelectList
         value={parameters.source}

src/features/timbre/parameters/LFO.js

@@ -2,15 +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 className={styles.lfo}>
-      <span className={styles.header}>{`${props.name}`}</span>
+    <div>
+      <span>{`${props.name}`}</span>
       LFO Waveform
       <SelectList
         value={parameters.waveform}

src/features/timbre/parameters/Levels.js

@@ -1,17 +1,16 @@
 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';
+import { Slider } from '../../helpers/Helpers';
 
 export default function Levels(props) {
   const parameters = useSelector((state) => selectById(state, props.id));
   const dispatch = useDispatch();
 
   return (
-        <div className={styles.horizontalContainer}>
-            <span className={styles.header}>{`${props.name}`}</span>
-            <div className={styles.container}>
+    <div>
+      <span>{`${props.name}`}</span>
+      <div>
         Level 1
         <Slider
           min={0}
@@ -69,8 +68,8 @@ export default function Levels(props) {
           }
         />
       </div>
-            <div className={styles.divider}/>
-            <div className={styles.container}>
+      <div />
+      <div>
         Level 5
         <Slider
           min={0}

src/features/timbre/parameters/Mixer.js

@@ -2,15 +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 className={styles.container}>
-            <span className={styles.header}>{`${props.name}`}</span>
+    <div>
+      <span>{`${props.name}`}</span>
       Volume 1
       <Slider
         min={0}
@@ -41,7 +40,6 @@ export default function Mixer(props) {
       />
       Volume 3
       <Slider
-                className={styles.slider}
         min={0}
         max={127}
         parameter={parameters.vol3}

src/features/timbre/parameters/ModFX.js

@@ -2,15 +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';
 
 const ModFX = (props) => {
   const parameters = useSelector((state) => selectById(state, props.id));
   const dispatch = useDispatch();
 
   return (
-    <div className={styles.container}>
-      <span className={styles.header}>Mod FX</span>
+    <div>
+      <span>Mod FX</span>
       Mod Type
       <SelectList
         value={parameters.type}
@@ -65,8 +64,8 @@ const Delay = (props) => {
   const dispatch = useDispatch();
 
   return (
-    <div className={styles.container}>
-      <span className={styles.header}>Delay</span>
+    <div>
+      <span>Delay</span>
       Delay Type
       <SelectList
         value={parameters.type}
@@ -85,7 +84,7 @@ const Delay = (props) => {
         }
       />
       <Checkbox
-        name="Tempo Sync"
+        name='Tempo Sync'
         parameter={parameters.tempoSync}
         onChange={(value) =>
           dispatch(
@@ -169,8 +168,8 @@ const EQ = (props) => {
   const dispatch = useDispatch();
 
   return (
-    <div className={styles.container}>
-      <span className={styles.header}>EQ</span>
+    <div>
+      <span>EQ</span>
       Low EQ Frequency
       <SelectList
         labelFunction={(e) => `${e.value}kHz`}

src/features/timbre/parameters/Pans.js

@@ -1,17 +1,16 @@
 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';
+import { Slider } from '../../helpers/Helpers';
 
 export default function Pans(props) {
   const parameters = useSelector((state) => selectById(state, props.id));
   const dispatch = useDispatch();
 
   return (
-        <div className={styles.horizontalContainer}>
-            <span className={styles.header}>{`${props.name}`}</span>
-            <div className={styles.container}>
+    <div>
+      <span>{`${props.name}`}</span>
+      <div>
         Pan 1
         <Slider
           min={0}
@@ -69,8 +68,8 @@ export default function Pans(props) {
           }
         />
       </div>
-            <div className={styles.divider}/>
-            <div className={styles.container}>
+      <div />
+      <div>
         Pan 5
         <Slider
           min={0}

src/features/timbre/parameters/Parameters.module.css

@@ -1,98 +0,0 @@
-.container,
-.lfo,
-.horizontalContainer,
-.patchesContainer {
-  border: solid 1pt slategrey;
-  border-radius: 6px;
-}
-
-.container,
-.lfo {
-  position: relative;
-  font-size: small;
-  display: inline-flex;
-  flex-direction: column;
-  justify-content: center;
-  padding: 16pt;
-  margin: 10pt;
-  min-width: 15%;
-  height: 214px;
-  line-height: 1.5em;
-}
-
-.lfo {
-  height: 250px;
-}
-
-.lfo > *,
-.container > * {
-  margin: 3pt 0;
-}
-
-.header {
-  font-size: 1.5em;
-  line-height: 1.25em;
-  text-align: center;
-  background-color: white;
-  padding: 0 0.25em 0.075em;
-  border-left: 1px solid slategrey;
-  border-right: 1px solid slategrey;
-  box-sizing: border-box;
-}
-.lfo > .header,
-.container > .header {
-  position: absolute;
-  top: -7.5%;
-  left: 12%;
-}
-.horizontalContainer > .header,
-.patchesContainer > .header {
-  position: absolute;
-  top: -5.25%;
-  left: 6%;
-}
-
-.horizontalContainer {
-  position: relative;
-  font-size: small;
-  display: inline-flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  padding: 16pt 8pt 16pt 8pt;
-  margin: 10pt;
-  width: 448px;
-  height: 214px;
-}
-
-.patchesContainer {
-  position: relative;
-  font-size: small;
-  display: inline-flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  padding: 16pt 8pt 16pt 8pt;
-  margin: 10pt;
-  width: 680px;
-  height: 250px;
-}
-
-.horizontalContainer > .container,
-.patchesContainer > .container {
-  padding: 0 16pt;
-  width: 100%;
-  margin: 10pt 0;
-  border: none;
-}
-
-.divider {
-  height: 214px;
-  width: 2px;
-  background-color: slategrey;
-  margin: 0 8pt;
-}
-
-.patchesContainer > .divider {
-  width: 4px;
-}

src/features/timbre/parameters/Patches.js

@@ -2,11 +2,10 @@ 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';
 
 const Patch = (props) => {
   return (
-        <div className={styles.container}>
+    <div>
       Source
       <SelectList
         value={props.patch.source}
@@ -71,8 +70,8 @@ export default function Patches(props) {
   const dispatch = useDispatch();
 
   return (
-        <div id="patches" className={styles.patchesContainer}>
-            <span className={styles.header}>{`${props.name}`}</span>
+    <div id='patches'>
+      <span>{`${props.name}`}</span>
       <Patch
         patch={parameters.patch1}
         onChange={(value) =>
@@ -86,7 +85,7 @@ export default function Patches(props) {
           )
         }
       />
-            <div className={styles.divider} />
+      <div />
       <Patch
         patch={parameters.patch2}
         onChange={(value, parameter) =>
@@ -100,7 +99,7 @@ export default function Patches(props) {
           )
         }
       />
-            <div className={styles.divider} />
+      <div />
       <Patch
         patch={parameters.patch3}
         onChange={(value, parameter) =>
@@ -112,7 +111,7 @@ export default function Patches(props) {
           )
         }
       />
-            <div className={styles.divider} />
+      <div />
       <Patch
         patch={parameters.patch4}
         onChange={(value, parameter) =>

src/features/timbre/parameters/Pitch.js

@@ -2,24 +2,19 @@ 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 className={styles.horizontalContainer}>
-            <span className={styles.header}>{`${props.name}`}</span>
-            <div className={styles.container}>
+    <div>
+      <span>{`${props.name}`}</span>
+      <div>
         Voice Assign
         <SelectList
           value={parameters.voiceAssign}
-                    list={[
-                        { value: 'Mono' },
-                        { value: 'Poly' },
-                        { value: 'Unison' },
-                    ]}
+          list={[{ value: 'Mono' }, { value: 'Poly' }, { value: 'Unison' }]}
           onChange={(value) =>
             dispatch(
               parameterUpdated({
@@ -57,8 +52,8 @@ export default function Pitch(props) {
           }
         />
       </div>
-            <div className={styles.divider} />
-            <div className={styles.container}>
+      <div />
+      <div>
         Tune
         <Slider
           parameter={parameters.tune}

src/features/timbre/parameters/VCO.js

@@ -2,15 +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 VCO(props) {
   const parameters = useSelector((state) => selectById(state, props.id));
 
   const dispatch = useDispatch();
   return (
-        <div className={styles.container}>
-            <span className={styles.header}>{`${props.name}`}</span>
+    <div>
+      <span>{`${props.name}`}</span>
       Waveform
       <SelectList
         value={parameters.waveform}
@@ -74,8 +73,8 @@ export const AudioIn = (props) => {
   const dispatch = useDispatch();
 
   return (
-        <div className={styles.container}>
-            <span className={styles.header}>{`${props.name}`}</span>
+    <div>
+      <span>{`${props.name}`}</span>
       Gate
       <Slider
         min={0}
@@ -119,7 +118,7 @@ export const AudioIn = (props) => {
         }
       />
       <Checkbox
-                name="HPF Gate"
+        name='HPF Gate'
         parameter={parameters.hpfGate}
         onChange={(value) =>
           dispatch(

src/features/timbre/timbreSwitcher.js

@@ -5,24 +5,18 @@ import Effects from './Effects';
 import Arpeggio from './Arpeggio';
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
 import { useSelector } from 'react-redux';
-import styles from './Timbre.module.css';
 
 export default function TimbreSwitcher() {
   const index = useSelector((state) => state.parameters.tabIndex);
   return (
-    <div className={styles.tabs}>
-      <Tabs
-        className={styles.tabs}
-        selectedIndex={index}
-        onSelect={() => {}}
-        selectedTabClassName={styles.selected}
-        selectedTabPanelClassName={styles.tabPanel}>
-        <TabList className={styles.tabList}>
-          <Tab className={styles.tab}>Timbre 1</Tab>
-          <Tab className={styles.tab}>Timbre 2</Tab>
-          <Tab className={styles.tab}>Vocoder</Tab>
-          <Tab className={styles.tab}>Effects</Tab>
-          <Tab className={styles.tab}>Arpeggio</Tab>
+    <div>
+      <Tabs selectedIndex={index} onSelect={() => {}}>
+        <TabList>
+          <Tab>Timbre 1</Tab>
+          <Tab>Timbre 2</Tab>
+          <Tab>Vocoder</Tab>
+          <Tab>Effects</Tab>
+          <Tab>Arpeggio</Tab>
         </TabList>
 
         <TabPanel>

src/features/utils/components.js

@@ -0,0 +1,14 @@
+const Select = (props) => {
+  return (
+    <select
+      className={props.className}
+      onChange={(e) => props.onChange(e.target.value)}
+      value={props.value}>
+      {props.list.map((element) => (
+        <option value={element.value}>{element.value}</option>
+      ))}
+    </select>
+  );
+};
+
+export { Select };

src/index.css

@@ -13,3 +13,7 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

tailwind.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    extend: {},
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [require('@tailwindcss/forms')],
+};