Squashed commit of the following:

commit 1c83bf85b13a426c9b74d3e7d4ec2613b2aaff39
Author: [poww10s] <[theironminer@gmail.com]>
Date:   Thu Nov 19 22:12:31 2020 -0500

    Styling Timbre Sections

commit e662f36f78e0d89a2f4ef195b768e955a0130094
Author: [poww10s] <[theironminer@gmail.com]>
Date:   Thu Nov 19 21:08:12 2020 -0500

    update styling

commit f9a87e5749799406e9a00a45c0c02f1b5e8c8f2d
Author: [poww10s] <[theironminer@gmail.com]>
Date:   Thu Nov 19 20:54:36 2020 -0500

    fix initialState for dwgsOrModType

commit 15b89fa96f224fec3d5df982433536951e99ba21
Author: [poww10s] <[theironminer@gmail.com]>
Date:   Thu Nov 19 20:47:38 2020 -0500

    implemented react-select

commit 23dddc2d6bcd25ed01ef68e3040d9d7375761e5f
Author: [poww10s] <[theironminer@gmail.com]>
Date:   Thu Nov 19 15:23:47 2020 -0500

    add react-select

commit 47b74abadfd125b90c883d43786149a51bb7cdba
Author: [poww10s] <[theironminer@gmail.com]>
Date:   Thu Nov 19 14:15:03 2020 -0500

    custom rc-slider style and include

commit b2d1161cbc7eabb6a2c512606b66104084c25754
Author: [poww10s] <[theironminer@gmail.com]>
Date:   Thu Nov 19 14:14:45 2020 -0500

    include rc-slider package

commit fca611edc959935b09dcd70cfaa737680f22d559
Author: [poww10s] <[theironminer@gmail.com]>
Date:   Thu Nov 19 03:09:47 2020 -0500

    add styled-components

commit 86bec44f1ea5f631107aad0c561a5788728946c8
Author: [poww10s] <[theironminer@gmail.com]>
Date:   Thu Nov 19 01:13:09 2020 -0500

    added timbre2 to App

commit d1c275b9915861fde8ca9225e5dcb591c707949d
Author: [poww10s] <[theironminer@gmail.com]>
Date:   Thu Nov 19 01:13:00 2020 -0500

    updated parameterSlice with correct ID's

commit 3e694c135722c4c63c489e6c2691b18fea4f977a
Author: [poww10s] <[theironminer@gmail.com]>
Date:   Thu Nov 19 01:12:30 2020 -0500

    added timbre reducer to store

commit 251693a3fd35aca039de51dda79a17e4154afb89
Author: [poww10s] <[theironminer@gmail.com]>
Date:   Thu Nov 19 01:12:11 2020 -0500

    added support for seperate timbres

commit a2b24c1e6f7cf1b95bfeffb828418319932658ec
Author: [poww10s] <[theironminer@gmail.com]>
Date:   Thu Nov 19 01:11:54 2020 -0500

    added timbreSlice

package-lock.json

@@ -1191,6 +1191,16 @@
       "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
       "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
     },
+    "@emotion/utils": {
+      "version": "0.11.3",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz",
+      "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw=="
+    },
+    "@emotion/weak-memoize": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
+      "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
+    },
     "@eslint/eslintrc": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.2.1.tgz",
@@ -3378,6 +3388,23 @@
         "object.assign": "^4.1.0"
       }
     },
+    "babel-plugin-emotion": {
+      "version": "10.0.33",
+      "resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-10.0.33.tgz",
+      "integrity": "sha512-bxZbTTGz0AJQDHm8k6Rf3RQJ8tX2scsfsRyKVgAbiUPUNIRtlK+7JxP+TAd1kRLABFxe0CFm2VdK4ePkoA9FxQ==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@emotion/hash": "0.8.0",
+        "@emotion/memoize": "0.7.4",
+        "@emotion/serialize": "^0.11.16",
+        "babel-plugin-macros": "^2.0.0",
+        "babel-plugin-syntax-jsx": "^6.18.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^1.0.5",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7"
+      }
+    },
     "babel-plugin-istanbul": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-6.0.0.tgz",
@@ -5252,6 +5279,15 @@
         "utila": "~0.4"
       }
     },
+    "dom-helpers": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.0.tgz",
+      "integrity": "sha512-Ru5o9+V8CpunKnz5LGgWXkmrH/20cGKwcHwS4m73zIvs54CN9epEmT/HLqFJW3kXpakAFkEdzgy1hzlJe3E4OQ==",
+      "requires": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "dom-serializer": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
@@ -6653,6 +6689,11 @@
         "pkg-dir": "^3.0.0"
       }
     },
+    "find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+    },
     "find-up": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
@@ -10067,6 +10108,11 @@
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
       "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g="
     },
+    "memoize-one": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.1.1.tgz",
+      "integrity": "sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA=="
+    },
     "memory-fs": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
@@ -12650,6 +12696,14 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.8.tgz",
       "integrity": "sha512-HvPuUQnLp5H7TouGq3kzBeioJmXms1wHy9EGjz2OURWBp4qZO6AfGEcnxts1D/CbwPLRAgTMPCEgYhA3sEM4vw=="
     },
+    "react-input-autosize": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/react-input-autosize/-/react-input-autosize-2.2.2.tgz",
+      "integrity": "sha512-jQJgYCA3S0j+cuOwzuCd1OjmBmnZLdqQdiLKRYrsMMzbjUrVDS5RvJUDwJqA7sKuksDuzFtm6hZGKFu7Mjk5aw==",
+      "requires": {
+        "prop-types": "^15.5.8"
+      }
+    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -12737,6 +12791,32 @@
         "workbox-webpack-plugin": "5.1.4"
       }
     },
+    "react-select": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/react-select/-/react-select-3.1.0.tgz",
+      "integrity": "sha512-wBFVblBH1iuCBprtpyGtd1dGMadsG36W5/t2Aj8OE6WbByDg5jIFyT7X5gT+l0qmT5TqWhxX+VsKJvCEl2uL9g==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@emotion/cache": "^10.0.9",
+        "@emotion/core": "^10.0.9",
+        "@emotion/css": "^10.0.9",
+        "memoize-one": "^5.0.0",
+        "prop-types": "^15.6.0",
+        "react-input-autosize": "^2.2.2",
+        "react-transition-group": "^4.3.0"
+      }
+    },
+    "react-transition-group": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
+      "integrity": "sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      }
+    },
     "read-pkg": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",

package.json

@@ -12,6 +12,7 @@
     "react-dom": "^17.0.1",
     "react-redux": "^7.2.2",
     "react-scripts": "4.0.0",
+    "react-select": "^3.1.0",
     "styled-components": "^5.2.1"
   },
   "scripts": {

src/App.js

@@ -7,7 +7,7 @@ function App() {
         <div className="App">
             <header className="App-header">
                 <Timbre id="timbre1" />
-                <Timbre id="timbre2" />
+                {/*<Timbre id="timbre2" />*/}
             </header>
         </div>
     );

src/features/helpers/Helpers.js

@@ -1,9 +1,17 @@
 import React from 'react';
 import RCSlider, { createSliderWithTooltip } from 'rc-slider';
-import './index.css';
+import Select from 'react-select';
+import './rcSelectTheme.css';
 
 const SliderWithToolTip = createSliderWithTooltip(RCSlider);
 
+const SelectStyle = {
+    control: (provided) => ({
+        ...provided,
+        width: '100%',
+    }),
+};
+
 const Slider = (props) => {
     return (
         <SliderWithToolTip
@@ -17,17 +25,22 @@ const Slider = (props) => {
 };
 
 const SelectList = (props) => {
-    const options = props.list.map((option, index) => (
-        <option value={option} key={index}>
-            {option}
-        </option>
-    ));
     return (
+<<<<<<< HEAD
         <select
             value={props.value}
             onChange={(e) => props.onChange(e.target.value)}>
             {options}
         </select>
+=======
+        <Select
+            value={{ value: props.value }}
+            options={props.list}
+            getOptionLabel={(option) => `${option.value}`}
+            onChange={(e) => props.onChange(e.value)}
+            styles={SelectStyle}
+        />
+>>>>>>> v2-styling-react-select
     );
 };
 

src/features/helpers/rcSelectTheme.css

@@ -0,0 +1,251 @@
+.rc-slider {
+    position: relative;
+    height: 14px;
+    padding: 5px 0;
+    width: 100%;
+    border-radius: 6px;
+    touch-action: none;
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    margin: 5px 0;
+}
+.rc-slider * {
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+.rc-slider-rail {
+    position: absolute;
+    width: 100%;
+    background-color: lightgray;
+    height: 4px;
+    border-radius: 6px;
+}
+.rc-slider-track {
+    position: absolute;
+    left: 0;
+    height: 4px;
+    border-radius: 6px;
+    background-color: lightgrey;
+}
+.rc-slider-handle {
+    position: absolute;
+    width: 14px;
+    height: 14px;
+    cursor: pointer;
+    cursor: -webkit-grab;
+    margin-top: -5px;
+    cursor: grab;
+    border-radius: 50%;
+    background-color: slategrey;
+    touch-action: pan-x;
+}
+.rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging {
+    background-color: slateblue;
+}
+.rc-slider-handle:focus {
+    outline: none;
+}
+.rc-slider-handle-click-focused:focus {
+    background-color: slateblue;
+}
+.rc-slider-handle:hover {
+    background-color: slateblue;
+}
+.rc-slider-handle:active {
+    background-color: slateblue;
+    cursor: -webkit-grabbing;
+    cursor: grabbing;
+}
+.rc-slider-mark {
+    position: absolute;
+    top: 18px;
+    left: 0;
+    width: 100%;
+    font-size: 12px;
+}
+.rc-slider-mark-text {
+    position: absolute;
+    display: inline-block;
+    vertical-align: middle;
+    text-align: center;
+    cursor: pointer;
+    color: #999;
+}
+.rc-slider-mark-text-active {
+    color: #666;
+}
+.rc-slider-step {
+    position: absolute;
+    width: 100%;
+    height: 4px;
+    background: transparent;
+}
+.rc-slider-dot {
+    position: absolute;
+    bottom: -2px;
+    margin-left: -4px;
+    width: 8px;
+    height: 8px;
+    border: 2px solid #e9e9e9;
+    background-color: #fff;
+    cursor: pointer;
+    border-radius: 50%;
+    vertical-align: middle;
+}
+.rc-slider-dot-active {
+    border-color: #96dbfa;
+}
+.rc-slider-dot-reverse {
+    margin-right: -4px;
+}
+.rc-slider-disabled {
+    background-color: #e9e9e9;
+}
+.rc-slider-disabled .rc-slider-track {
+    background-color: #ccc;
+}
+.rc-slider-disabled .rc-slider-handle,
+.rc-slider-disabled .rc-slider-dot {
+    border-color: #ccc;
+    box-shadow: none;
+    background-color: #fff;
+    cursor: not-allowed;
+}
+.rc-slider-disabled .rc-slider-mark-text,
+.rc-slider-disabled .rc-slider-dot {
+    cursor: not-allowed !important;
+}
+.rc-slider-vertical {
+    width: 14px;
+    height: 100%;
+    padding: 0 5px;
+}
+.rc-slider-vertical .rc-slider-rail {
+    height: 100%;
+    width: 4px;
+}
+.rc-slider-vertical .rc-slider-track {
+    left: 5px;
+    bottom: 0;
+    width: 4px;
+}
+.rc-slider-vertical .rc-slider-handle {
+    margin-left: -5px;
+    touch-action: pan-y;
+}
+.rc-slider-vertical .rc-slider-mark {
+    top: 0;
+    left: 18px;
+    height: 100%;
+}
+.rc-slider-vertical .rc-slider-step {
+    height: 100%;
+    width: 4px;
+}
+.rc-slider-vertical .rc-slider-dot {
+    left: 2px;
+    margin-bottom: -4px;
+}
+.rc-slider-vertical .rc-slider-dot:first-child {
+    margin-bottom: -4px;
+}
+.rc-slider-vertical .rc-slider-dot:last-child {
+    margin-bottom: -4px;
+}
+.rc-slider-tooltip-zoom-down-enter,
+.rc-slider-tooltip-zoom-down-appear {
+    animation-duration: 0.3s;
+    animation-fill-mode: both;
+    display: block !important;
+    animation-play-state: paused;
+}
+.rc-slider-tooltip-zoom-down-leave {
+    animation-duration: 0.3s;
+    animation-fill-mode: both;
+    display: block !important;
+    animation-play-state: paused;
+}
+.rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active,
+.rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active {
+    animation-name: rcSliderTooltipZoomDownIn;
+    animation-play-state: running;
+}
+.rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active {
+    animation-name: rcSliderTooltipZoomDownOut;
+    animation-play-state: running;
+}
+.rc-slider-tooltip-zoom-down-enter,
+.rc-slider-tooltip-zoom-down-appear {
+    transform: scale(0, 0);
+    animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+}
+.rc-slider-tooltip-zoom-down-leave {
+    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+}
+@keyframes rcSliderTooltipZoomDownIn {
+    0% {
+        opacity: 0;
+        transform-origin: 50% 100%;
+        transform: scale(0, 0);
+    }
+    100% {
+        transform-origin: 50% 100%;
+        transform: scale(1, 1);
+    }
+}
+@keyframes rcSliderTooltipZoomDownOut {
+    0% {
+        transform-origin: 50% 100%;
+        transform: scale(1, 1);
+    }
+    100% {
+        opacity: 0;
+        transform-origin: 50% 100%;
+        transform: scale(0, 0);
+    }
+}
+.rc-slider-tooltip {
+    position: absolute;
+    left: -9999px;
+    top: -9999px;
+    visibility: visible;
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+.rc-slider-tooltip * {
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+.rc-slider-tooltip-hidden {
+    display: none;
+}
+.rc-slider-tooltip-placement-top {
+    padding: 4px 0 8px 0;
+}
+.rc-slider-tooltip-inner {
+    padding: 6px 2px;
+    min-width: 24px;
+    height: 24px;
+    font-size: 12px;
+    line-height: 1;
+    color: #fff;
+    text-align: center;
+    text-decoration: none;
+    background-color: #6c6c6c;
+    border-radius: 6px;
+    box-shadow: 0 0 4px #d9d9d9;
+}
+.rc-slider-tooltip-arrow {
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-color: transparent;
+    border-style: solid;
+}
+.rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow {
+    bottom: 4px;
+    left: 50%;
+    margin-left: -4px;
+    border-width: 4px 4px 0;
+    border-top-color: #6c6c6c;
+}

src/features/timbre/Timbre.js

@@ -9,114 +9,155 @@ import Amp from './parameters/Amp';
 import LFO from './parameters/LFO';
 import { selectById } from './timbreSlice.js';
 
-const style = {
+const timbreStyle = {
     display: 'flex',
+    flexWrap: 'wrap',
     flexDirection: 'row',
+    justifyContent: 'center',
+};
+
+const lineBreak = {
+    width: '100%',
 };
 
 export function Timbre(props) {
     const ids = useSelector((state) => selectById(state, props.id));
     return (
-        <div style={style}>
+        <div style={timbreStyle}>
             <VCO
                 id={ids.vco1}
                 waveforms={[
-                    'Saw',
+                    { value: 'Saw' },
-                    'Square',
+                    { value: 'Square' },
-                    'Triangle',
+                    { value: 'Triangle' },
-                    'Sine',
+                    { value: 'Sine' },
-                    'Vox Wave',
+                    { value: 'Vox Wave' },
-                    'DWGS',
+                    { value: 'DWGS' },
-                    'Noise',
+                    { value: 'Noise' },
-                    'Audio In',
+                    { value: 'Audio In' },
                 ]}
                 dwgsOrModTypeName="DWGS"
                 dwgsOrModType={[
-                    'SynSine1',
+                    { value: 'SynSine1' },
-                    'SynSine2',
+                    { value: 'SynSine2' },
-                    'SynSine3',
+                    { value: 'SynSine3' },
-                    'SynSine4',
+                    { value: 'SynSine4' },
-                    'SynSine5',
+                    { value: 'SynSine5' },
-                    'SynSine6',
+                    { value: 'SynSine6' },
-                    'SynSine7',
+                    { value: 'SynSine7' },
-                    'SynBass1',
+                    { value: 'SynBass1' },
-                    'SynBass2',
+                    { value: 'SynBass2' },
-                    'SynBass3',
+                    { value: 'SynBass3' },
-                    'SynBass4',
+                    { value: 'SynBass4' },
-                    'SynBass5',
+                    { value: 'SynBass5' },
-                    'SynBass6',
+                    { value: 'SynBass6' },
-                    'SynBass7',
+                    { value: 'SynBass7' },
-                    'SynWave1',
+                    { value: 'SynWave1' },
-                    'SynWave2',
+                    { value: 'SynWave2' },
-                    'SynWave3',
+                    { value: 'SynWave3' },
-                    'SynWave4',
+                    { value: 'SynWave4' },
-                    'SynWave5',
+                    { value: 'SynWave5' },
-                    'SynWave6',
+                    { value: 'SynWave6' },
-                    'SynWave7',
+                    { value: 'SynWave7' },
-                    'SynWave8',
+                    { value: 'SynWave8' },
-                    'SynWave9',
+                    { value: 'SynWave9' },
-                    '5thWave1',
+                    { value: '5thWave1' },
-                    '5thWave2',
+                    { value: '5thWave2' },
-                    '5thWave3',
+                    { value: '5thWave3' },
-                    'Digi1',
+                    { value: 'Digi1' },
-                    'Digi2',
+                    { value: 'Digi2' },
-                    'Digi3',
+                    { value: 'Digi3' },
-                    'Digi4',
+                    { value: 'Digi4' },
-                    'Digi5',
+                    { value: 'Digi5' },
-                    'Digi6',
+                    { value: 'Digi6' },
-                    'Digi7',
+                    { value: 'Digi7' },
-                    'Digi8',
+                    { value: 'Digi8' },
-                    'Endless',
+                    { value: 'Endless' },
-                    'E.Piano1',
+                    { value: 'E.Piano1' },
-                    'E.Piano2',
+                    { value: 'E.Piano2' },
-                    'E.Piano3',
+                    { value: 'E.Piano3' },
-                    'E.Piano4',
+                    { value: 'E.Piano4' },
-                    'Organ1',
+                    { value: 'Organ1' },
-                    'Organ2',
+                    { value: 'Organ2' },
-                    'Organ3',
+                    { value: 'Organ3' },
-                    'Organ4',
+                    { value: 'Organ4' },
-                    'Organ5',
+                    { value: 'Organ5' },
-                    'Organ6',
+                    { value: 'Organ6' },
-                    'Organ7',
+                    { value: 'Organ7' },
-                    'Clav1',
+                    { value: 'Clav1' },
-                    'Clav2',
+                    { value: 'Clav2' },
-                    'Guitar1',
+                    { value: 'Guitar1' },
-                    'Guitar2',
+                    { value: 'Guitar2' },
-                    'Guitar3',
+                    { value: 'Guitar3' },
-                    'Bass1',
+                    { value: 'Bass1' },
-                    'Bass2',
+                    { value: 'Bass2' },
-                    'Bass3',
+                    { value: 'Bass3' },
-                    'Bass4',
+                    { value: 'Bass4' },
-                    'Bass5',
+                    { value: 'Bass5' },
-                    'Bell1',
+                    { value: 'Bell1' },
-                    'Bell2',
+                    { value: 'Bell2' },
-                    'Bell3',
+                    { value: 'Bell3' },
-                    'Bell4',
+                    { value: 'Bell4' },
-                    'Voice1',
+                    { value: 'Voice1' },
-                    'Voice2',
+                    { value: 'Voice2' },
-                    'Voice3',
+                    { value: 'Voice3' },
-                    'Voice4',
+                    { value: 'Voice4' },
                 ]}
             />
             <VCO
                 id={ids.vco2}
+<<<<<<< HEAD
                 waveforms={['Saw', 'Square', 'Triangle']}
+=======
+                waveforms={[
+                    { value: 'Saw' },
+                    { value: 'Square' },
+                    { value: 'Triangle' },
+                ]}
+>>>>>>> v2-styling-react-select
                 dwgsOrModTypeName="Mod Type"
-                dwgsOrModType={['Off', 'Ring', 'Sync', 'RingSync']}
+                dwgsOrModType={[
+                    { value: 'Off' },
+                    { value: 'Ring' },
+                    { value: 'Sync' },
+                    { value: 'RingSync' },
+                ]}
             />
             <Mixer id={ids.mixer} />
             <Pitch id={ids.pitch} />
             <Filter id={ids.filter} />
+<<<<<<< HEAD
+=======
+            <div className="linebreak" style={lineBreak} />
+>>>>>>> v2-styling-react-select
             <EG id={ids.eg1} />
             <Amp id={ids.amp} />
             <EG id={ids.eg2} />
             <LFO
                 id={ids.lfo1}
+<<<<<<< HEAD
                 waveforms={['Saw', 'Square 1', 'Triangle', 'Sample & Hold']}
             />
             <LFO
                 id={ids.lfo2}
                 waveforms={['Saw', 'Square 2', 'Sine', 'Sample & Hold']}
+=======
+                waveforms={[
+                    { value: 'Saw' },
+                    { value: 'Square 1' },
+                    { value: 'Triangle' },
+                    { value: 'Sample & Hold' },
+                ]}
+            />
+            <LFO
+                id={ids.lfo2}
+                waveforms={[
+                    { value: 'Saw' },
+                    { value: 'Square 2' },
+                    { value: 'Sine' },
+                    { value: 'Sample & Hold' },
+                ]}
+>>>>>>> v2-styling-react-select
             />
         </div>
     );

src/features/timbre/parameters/Amp.js

@@ -10,6 +10,7 @@ export default function Amp(props) {
 
     return (
         <div className={styles.container}>
+            Amp Level
             <Slider
                 parameter={parameters.ampLevel}
                 min={0}
@@ -23,6 +24,7 @@ export default function Amp(props) {
                     )
                 }
             />
+            PanPot
             <Slider
                 parameter={parameters.panpot}
                 min={-63}
@@ -36,6 +38,7 @@ export default function Amp(props) {
                     )
                 }
             />
+            Amp Keyboard Tracking
             <Slider
                 parameter={parameters.ampTrack}
                 min={-63}
@@ -49,6 +52,7 @@ export default function Amp(props) {
                     )
                 }
             />
+            Distortion
             <Checkbox
                 parameter={parameters.distortion}
                 onChange={(value) =>

src/features/timbre/parameters/EG.js

@@ -10,6 +10,7 @@ export default function EG(props) {
 
     return (
         <div className={styles.container}>
+            Attack
             <Slider
                 parameter={parameters.attack}
                 min={0}
@@ -23,6 +24,7 @@ export default function EG(props) {
                     )
                 }
             />
+            Decay
             <Slider
                 parameter={parameters.decay}
                 min={0}
@@ -36,6 +38,7 @@ export default function EG(props) {
                     )
                 }
             />
+            Sustain
             <Slider
                 parameter={parameters.sustain}
                 min={0}
@@ -49,6 +52,7 @@ export default function EG(props) {
                     )
                 }
             />
+            Release
             <Slider
                 parameter={parameters.release}
                 min={0}
@@ -62,6 +66,7 @@ export default function EG(props) {
                     )
                 }
             />
+            EG Reset
             <Checkbox
                 parameter={parameters.egReset}
                 onChange={(value) =>

src/features/timbre/parameters/Filter.js

@@ -10,13 +10,14 @@ export default function Filter(props) {
 
     return (
         <div className={styles.container}>
+            Filter Type
             <SelectList
                 value={parameters.filterType}
                 list={[
-                    '-24db Low Pass',
+                    { value: '-24db Low Pass' },
-                    '-12db Low Pass',
+                    { value: '-12db Low Pass' },
-                    'Band Pass',
+                    { value: 'Band Pass' },
-                    'High Pass',
+                    { value: 'High Pass' },
                 ]}
                 onChange={(value) =>
                     dispatch(
@@ -27,6 +28,7 @@ export default function Filter(props) {
                     )
                 }
             />
+            Cutoff
             <Slider
                 parameter={parameters.cutoff}
                 min={0}
@@ -40,6 +42,7 @@ export default function Filter(props) {
                     )
                 }
             />
+            Resonance
             <Slider
                 parameter={parameters.resonance}
                 min={0}
@@ -53,6 +56,7 @@ export default function Filter(props) {
                     )
                 }
             />
+            EG Intensity
             <Slider
                 parameter={parameters.egIntensity}
                 min={-63}
@@ -66,6 +70,7 @@ export default function Filter(props) {
                     )
                 }
             />
+            Keyboard Tracking
             <Slider
                 parameter={parameters.keyboardTrack}
                 min={-63}

src/features/timbre/parameters/LFO.js

@@ -10,6 +10,7 @@ export default function LFO(props) {
 
     return (
         <div className={styles.container}>
+            LFO Waveform
             <SelectList
                 value={parameters.waveform}
                 list={props.waveforms}
@@ -22,6 +23,7 @@ export default function LFO(props) {
                     )
                 }
             />
+            Key Sync
             <SelectList
                 value={parameters.keySync}
                 list={['Off', 'Timbre', 'Voice']}
@@ -34,6 +36,7 @@ export default function LFO(props) {
                     )
                 }
             />
+            Tempo Sync
             <Checkbox
                 parameter={parameters.tempoSync}
                 onChange={(value) =>
@@ -45,6 +48,7 @@ export default function LFO(props) {
                     )
                 }
             />
+            Frequency
             <Slider
                 parameter={parameters.frequency}
                 onChange={(value) =>

src/features/timbre/parameters/Mixer.js

@@ -10,6 +10,7 @@ export default function Mixer(props) {
 
     return (
         <div className={styles.container}>
+            Volume 1
             <Slider
                 min={0}
                 max={127}
@@ -23,6 +24,7 @@ export default function Mixer(props) {
                     )
                 }
             />
+            Volume 2
             <Slider
                 min={0}
                 max={127}
@@ -36,6 +38,7 @@ export default function Mixer(props) {
                     )
                 }
             />
+            Volume 3
             <Slider
                 className={styles.slider}
                 min={0}

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

@@ -3,12 +3,39 @@
     display: inline-flex;
     flex-direction: column;
     justify-content: center;
-    padding: 10pt;
+    padding: 16pt;
-    margin: 2pt;
+    margin: 10pt;
     border: solid 1pt black;
-    width: 120px;
+    width: 160px;
-    flex-basis: 100%;
+    height: 214px;
+    line-height: 1.5em;
 }
 .container > * {
     margin: 2.5pt 0;
 }
+
+.pitchContainer {
+    font-size: small;
+    display: inline-flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    padding: 16pt 8pt 16pt 8pt;
+    margin: 10pt;
+    border: solid 1pt black;
+    width: 420px;
+    height: 214px;
+}
+.pitchContainer > .container {
+    padding: 0 16pt;
+    width: 100%;
+    margin: 10pt 0;
+    border: none;
+}
+
+.divider {
+    height: 214px;
+    width: 1px;
+    background-color: black;
+    margin: 0 4pt;
+}

src/features/timbre/parameters/Pitch.js

@@ -9,6 +9,7 @@ export default function Pitch(props) {
     const dispatch = useDispatch();
 
     return (
+<<<<<<< HEAD
         <div className={styles.container}>
             <SelectList
                 value={parameters.voiceAssign}
@@ -112,6 +113,128 @@ export default function Pitch(props) {
                     )
                 }
             />
+=======
+        <div className={styles.pitchContainer}>
+            <div className={styles.container}>
+                Voice Assign
+                <SelectList
+                    value={parameters.voiceAssign}
+                    list={[
+                        { value: 'Mono' },
+                        { value: 'Poly' },
+                        { value: 'Unison' },
+                    ]}
+                    onChange={(value) =>
+                        dispatch(
+                            parameterUpdated({
+                                id: props.id,
+                                changes: { voiceAssign: value },
+                            })
+                        )
+                    }
+                />
+                Trigger Mode
+                <SelectList
+                    value={parameters.triggerMode}
+                    list={[{ value: 'Single' }, { value: 'Multiple' }]}
+                    onChange={(value) =>
+                        dispatch(
+                            parameterUpdated({
+                                id: props.id,
+                                changes: { triggerMode: value },
+                            })
+                        )
+                    }
+                />
+                Transpose
+                <Slider
+                    parameter={parameters.transpose}
+                    min={-24}
+                    max={24}
+                    onChange={(value) =>
+                        dispatch(
+                            parameterUpdated({
+                                id: props.id,
+                                changes: { transpose: value },
+                            })
+                        )
+                    }
+                />
+            </div>
+            <div className={styles.divider} />
+            <div className={styles.container}>
+                Tune
+                <Slider
+                    parameter={parameters.tune}
+                    min={-50}
+                    max={50}
+                    onChange={(value) =>
+                        dispatch(
+                            parameterUpdated({
+                                id: props.id,
+                                changes: { tune: value },
+                            })
+                        )
+                    }
+                />
+                Unisone Detune
+                <Slider
+                    parameter={parameters.unisonDetune}
+                    min={0}
+                    max={99}
+                    onChange={(value) =>
+                        dispatch(
+                            parameterUpdated({
+                                id: props.id,
+                                changes: { unisonDetune: value },
+                            })
+                        )
+                    }
+                />
+                Portamento
+                <Slider
+                    parameter={parameters.portamento}
+                    min={0}
+                    max={127}
+                    onChange={(value) =>
+                        dispatch(
+                            parameterUpdated({
+                                id: props.id,
+                                changes: { portamento: value },
+                            })
+                        )
+                    }
+                />
+                Bend Range
+                <Slider
+                    parameter={parameters.bendRange}
+                    min={-12}
+                    max={12}
+                    onChange={(value) =>
+                        dispatch(
+                            parameterUpdated({
+                                id: props.id,
+                                changes: { bendRange: value },
+                            })
+                        )
+                    }
+                />
+                Vibrato Intensity
+                <Slider
+                    parameter={parameters.vibratoIntensity}
+                    min={-63}
+                    max={63}
+                    onChange={(value) =>
+                        dispatch(
+                            parameterUpdated({
+                                id: props.id,
+                                changes: { vibratoIntensity: value },
+                            })
+                        )
+                    }
+                />
+            </div>
+>>>>>>> v2-styling-react-select
         </div>
     );
 }

src/features/timbre/parameters/parameterSlice.js

@@ -33,28 +33,36 @@ const parametersSlice = createSlice({
             'vco1': {
                 id: 'vco1',
                 waveform: 'Saw',
-                dwgsOrModType: 0,
+                dwgsOrModType: 'SynWave1',
                 waveMod: 0,
                 lfoMod: 0,
             },
             'vco2': {
                 id: 'vco2',
                 waveform: 'Square',
-                dwgsOrModType: 0,
+                dwgsOrModType: 'Off',
                 waveMod: 0,
                 lfoMod: 0,
             },
             'vco3': {
                 id: 'vco3',
                 waveform: 'Sine',
+<<<<<<< HEAD
                 dwgsOrModType: 0,
+=======
+                dwgsOrModType: 'SynWave1',
+>>>>>>> v2-styling-react-select
                 waveMod: 100,
                 lfoMod: 0,
             },
             'vco4': {
                 id: 'vco4',
                 waveform: 'Triangle',
+<<<<<<< HEAD
                 dwgsOrModType: 0,
+=======
+                dwgsOrModType: 'Off',
+>>>>>>> v2-styling-react-select
                 waveMod: 0,
                 lfoMod: 100,
             },