Add Card Component

.commit to change branch

src/App.js

@@ -4,9 +4,9 @@ import Editor from './features/editor';
 
 function App() {
   return (
-    <div className='grid grid-cols-6 grid-rows-1 gap-4 h-screen'>
-      <Menu className='col-span-1' />
-      <Editor className='col-span-5' />
+    <div className='bg-gray-100 grid grid-cols-6 grid-rows-1 gap-4 h-screen'>
+      <Menu />
+      <Editor />
     </div>
   );
 }

src/features/editor/Timbre.js

@@ -13,8 +13,9 @@ import { selectById } from './timbreSlice.js';
 export default function Timbre(props) {
   const ids = useSelector((state) => selectById(state, props.id));
   return (
-    <div>
+    <div className='h-screen grid grid-cols-8 grid-rows-3 gap-4 m-6'>
       <VCO
+        className='col-span-2'
         name='VCO 1'
         id={ids.vco1}
         waveforms={[
@@ -96,6 +97,7 @@ export default function Timbre(props) {
         ]}
       />
       <VCO
+        className='col-span-2'
         name='VCO 2'
         id={ids.vco2}
         waveforms={[
@@ -111,14 +113,14 @@ export default function Timbre(props) {
           { value: 'Ring Sync' },
         ]}
       />
-      <Mixer name='Mixer' id={ids.mixer} />
-      <Pitch name='Pitch' id={ids.pitch} />
-      <Filter name='Filter' id={ids.filter} />
-      <Amp name='Amp' id={ids.amp} />
-      <EG name='EG 1' id={ids.eg1} />
-      <EG name='EG 2' id={ids.eg2} />
-      <div />
+      <Mixer className='col-span-1' name='Mixer' id={ids.mixer} />
+      <Pitch className='col-span-3' name='Pitch' id={ids.pitch} />
+      <Filter className='col-span-2' name='Filter' id={ids.filter} />
+      <Amp className='col-span-2' name='Amp' id={ids.amp} />
+      <EG className='col-span-2' name='EG 1' id={ids.eg1} />
+      <EG className='col-span-2' name='EG 2' id={ids.eg2} />
       <LFO
+        className='col-span-2'
         name='LFO 1'
         id={ids.lfo1}
         waveforms={[
@@ -129,6 +131,7 @@ export default function Timbre(props) {
         ]}
       />
       <LFO
+        className='col-span-2'
         name='LFO 2'
         id={ids.lfo2}
         waveforms={[
@@ -138,7 +141,7 @@ export default function Timbre(props) {
           { value: 'Sample & Hold' },
         ]}
       />
-      <Patches name='Patches' id={ids.patches} />
+      <Patches className='col-span-2' name='Patches' id={ids.patches} />
     </div>
   );
 }

src/features/editor/card.js

@@ -0,0 +1,16 @@
+export default function Card(props = { className: 'col-span-2' }) {
+  return (
+    <div
+      className={
+        props.className +
+        ' flex flex-col justify-start border border-gray-200 rounded-md shadow-md bg-white'
+      }>
+      <header className='flex items-start justify-between py-3 px-4 border-b border-solid border-gray-200'>
+        <h3 className='text-xl font-semibold text-gray-900'>{props.header}</h3>
+      </header>
+      <section className='flex-grow flex flex-col justify-evenly px-6'>
+        {props.children}
+      </section>
+    </div>
+  );
+}

src/features/editor/index.js

@@ -4,10 +4,10 @@ import Effects from './Effects';
 import Arpeggio from './Arpeggio';
 import { useSelector } from 'react-redux';
 
-const Editor = () => {
+export default function Editor() {
   const activeTab = useSelector((state) => state.parameters.activeTab);
   return (
-    <div>
+    <div className='col-span-5'>
       {activeTab === 'Timbre1' ? <Timbre id='timbre1' /> : null}
       {activeTab === 'Timbre2' ? <Timbre id='timbre2' /> : null}
       {activeTab === 'Vocoder' ? <Vocoder id='vocoder' /> : null}
@@ -15,6 +15,4 @@ const Editor = () => {
       {activeTab === 'Arpeggio' ? <Arpeggio id='arpeggio' /> : null}
     </div>
   );
-};
-
-export default Editor;
+}

src/features/editor/parameters/Amp.js

@@ -8,7 +8,7 @@ export default function Amp(props) {
   const dispatch = useDispatch();
 
   return (
-    <div>
+    <div className={props.className}>
       <span>{`${props.name}`}</span>
       Amp Level
       <Slider
@@ -73,7 +73,7 @@ export const VocoderAmp = (props) => {
   const dispatch = useDispatch();
 
   return (
-    <div>
+    <div className={props.className}>
       <span>{`${props.name}`}</span>
       Amp Level
       <Slider

src/features/editor/parameters/EG.js

@@ -8,7 +8,7 @@ export default function EG(props) {
   const dispatch = useDispatch();
 
   return (
-    <div>
+    <div className={props.className}>
       <span>{`${props.name}`}</span>
       Attack
       <Slider

src/features/editor/parameters/Filter.js

@@ -8,7 +8,7 @@ export default function Filter(props) {
   const dispatch = useDispatch();
 
   return (
-    <div>
+    <div className={props.className}>
       <span>{`${props.name}`}</span>
       Filter Type
       <SelectList
@@ -92,7 +92,7 @@ export const VocoderFilter = (props) => {
   const parameters = useSelector((state) => selectById(state, props.id));
   const dispatch = useDispatch();
   return (
-    <div>
+    <div className={props.className}>
       <span>{`${props.name}`}</span>
       Cutoff
       <Slider

src/features/editor/parameters/LFO.js

@@ -8,7 +8,7 @@ export default function LFO(props) {
   const dispatch = useDispatch();
 
   return (
-    <div>
+    <div className={props.className}>
       <span>{`${props.name}`}</span>
       LFO Waveform
       <SelectList

src/features/editor/parameters/Mixer.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import Card from '../card';
 import { useSelector, useDispatch } from 'react-redux';
 import { selectById, parameterUpdated } from './parameterSlice.js';
 import { Slider } from '../../helpers/Helpers';
@@ -8,9 +9,9 @@ export default function Mixer(props) {
   const dispatch = useDispatch();
 
   return (
-    <div>
-      <span>{`${props.name}`}</span>
-      Volume 1
+    <Card header={props.name}>
+      <div className='-mt-2'>
+        <h3 className='text-lg font-semibold'>Volume 1</h3>
         <Slider
           min={0}
           max={127}
@@ -24,7 +25,9 @@ export default function Mixer(props) {
             )
           }
         />
-      Volume 2
+      </div>
+      <div className='-mt-2'>
+        <h3 className='text-lg font-semibold'>Volume 2</h3>
         <Slider
           min={0}
           max={127}
@@ -38,7 +41,9 @@ export default function Mixer(props) {
             )
           }
         />
-      Volume 3
+      </div>
+      <div>
+        <h3 className='text-lg font-semibold'>Volume 3</h3>
         <Slider
           min={0}
           max={127}
@@ -53,5 +58,6 @@ export default function Mixer(props) {
           }
         />
       </div>
+    </Card>
   );
 }

src/features/editor/parameters/Patches.js

@@ -70,7 +70,7 @@ export default function Patches(props) {
   const dispatch = useDispatch();
 
   return (
-    <div id='patches'>
+    <div className={props.className} id='patches'>
       <span>{`${props.name}`}</span>
       <Patch
         patch={parameters.patch1}

src/features/editor/parameters/Pitch.js

@@ -1,18 +1,21 @@
 import React from 'react';
+import Card from '../card';
 import { useSelector, useDispatch } from 'react-redux';
 import { selectById, parameterUpdated } from './parameterSlice.js';
-import { Slider, SelectList } from '../../helpers/Helpers';
+import { Select } from '../../utils/components';
+import { Slider } from '../../helpers/Helpers';
 
 export default function Pitch(props) {
   const parameters = useSelector((state) => selectById(state, props.id));
   const dispatch = useDispatch();
 
   return (
-    <div>
-      <span>{`${props.name}`}</span>
-      <div>
-        Voice Assign
-        <SelectList
+    <Card className={props.className} header={props.name}>
+      <div className='flex flex-row justify-evenly'>
+        <div className='flex flex-col w-1/2'>
+          <h3 className='text-lg font-semibold text-gray-900'>Voice Assign</h3>
+          <Select
+            className='select w-2/4'
             value={parameters.voiceAssign}
             list={[{ value: 'Mono' }, { value: 'Poly' }, { value: 'Unison' }]}
             onChange={(value) =>
@@ -24,8 +27,9 @@ export default function Pitch(props) {
               )
             }
           />
-        Trigger Mode
-        <SelectList
+          <h3 className='text-lg font-semibold text-gray-900'>Trigger Mode</h3>
+          <Select
+            className='select w-2/4'
             value={parameters.triggerMode}
             list={[{ value: 'Single' }, { value: 'Multiple' }]}
             onChange={(value) =>
@@ -37,7 +41,7 @@ export default function Pitch(props) {
               )
             }
           />
-        Transpose
+          <h3 className='font-normal mt-1'>Transpose</h3>
           <Slider
             parameter={parameters.transpose}
             min={-24}
@@ -51,10 +55,7 @@ export default function Pitch(props) {
               )
             }
           />
-      </div>
-      <div />
-      <div>
-        Tune
+          <h3 className='font-normal'>Tune</h3>
           <Slider
             parameter={parameters.tune}
             min={-50}
@@ -68,7 +69,10 @@ export default function Pitch(props) {
               )
             }
           />
-        Unisone Detune
+        </div>
+        <div className='w-10'></div>
+        <div className='flex flex-col justify-evenly w-1/2'>
+          <h3 className='font-normal mt-1'>Unison Detune</h3>
           <Slider
             parameter={parameters.unisonDetune}
             min={0}
@@ -82,7 +86,7 @@ export default function Pitch(props) {
               )
             }
           />
-        Portamento
+          <h3 className='font-normal mt-1'>Portamento</h3>
           <Slider
             parameter={parameters.portamento}
             min={0}
@@ -96,7 +100,7 @@ export default function Pitch(props) {
               )
             }
           />
-        Bend Range
+          <h3 className='font-normal mt-1'>Bend Range</h3>
           <Slider
             parameter={parameters.bendRange}
             min={-12}
@@ -110,7 +114,7 @@ export default function Pitch(props) {
               )
             }
           />
-        Vibrato Intensity
+          <h3 className='font-normal mt-1'>Vibrato Intensity</h3>
           <Slider
             parameter={parameters.vibratoIntensity}
             min={-63}
@@ -126,5 +130,6 @@ export default function Pitch(props) {
           />
         </div>
       </div>
+    </Card>
   );
 }

src/features/editor/parameters/VCO.js

@@ -1,17 +1,20 @@
 import React from 'react';
+import Card from '../card';
 import { useSelector, useDispatch } from 'react-redux';
 import { selectById, parameterUpdated } from './parameterSlice.js';
-import { Slider, SelectList, Checkbox } from '../../helpers/Helpers';
+import { Select } from '../../utils/components';
+import { Slider, Checkbox } from '../../helpers/Helpers';
 
 export default function VCO(props) {
   const parameters = useSelector((state) => selectById(state, props.id));
-
   const dispatch = useDispatch();
+
   return (
-    <div>
-      <span>{`${props.name}`}</span>
-      Waveform
-      <SelectList
+    <Card className='col-span-2' header={props.name}>
+      <div className='flex items-center justify-between'>
+        <h3 className='text-lg font-semibold text-gray-900'>Waveform</h3>
+        <Select
+          className='select w-3/5'
           value={parameters.waveform}
           list={props.waveforms}
           onChange={(value) =>
@@ -23,8 +26,11 @@ export default function VCO(props) {
             )
           }
         />
-      {`${props.dwgsOrModTypeName}`}
-      <SelectList
+      </div>
+      <div className='flex items-center justify-between'>
+        <h3 className='text-lg font-semibold text-gray-900'>{`${props.dwgsOrModTypeName}`}</h3>
+        <Select
+          className='select w-3/5'
           value={parameters.dwgsOrModType}
           list={props.dwgsOrModType}
           onChange={(value) =>
@@ -36,7 +42,9 @@ export default function VCO(props) {
             )
           }
         />
-      Waveform Mod
+      </div>
+      <div className='flex items-center justify-center'>
+        <h3 className='text-lg font-semibold text-gray-900'>Waveform Mod</h3>
         <Slider
           min={0}
           max={127}
@@ -50,7 +58,9 @@ export default function VCO(props) {
             )
           }
         />
-      LFO Mod
+      </div>
+      <div className='flex items-center justify-center'>
+        <h3 className='text-lg font-semibold text-gray-900'>LFO Mod</h3>
         <Slider
           min={0}
           max={127}
@@ -65,6 +75,7 @@ export default function VCO(props) {
           }
         />
       </div>
+    </Card>
   );
 }
 
@@ -73,7 +84,7 @@ export const AudioIn = (props) => {
   const dispatch = useDispatch();
 
   return (
-    <div>
+    <div className={props.className}>
       <span>{`${props.name}`}</span>
       Gate
       <Slider

src/features/menu/index.js

@@ -30,7 +30,7 @@ export default function Menu() {
   }, [file, dispatch]);
 
   return (
-    <div className='flex flex-col justify-around border-solid border-r border-black px-4'>
+    <div className='col-span-1 flex flex-col justify-around border-solid border-r border-black bg-white px-4'>
       <div className='menu-patch-container'>
         <div className='patch-name'>
           <input
@@ -83,7 +83,7 @@ export default function Menu() {
         </div>
         <div className='patch-settings'>
           <Select
-            className='w-full bg-gray-100 rounded-md border-transparent hover:bg-gray-200 focus:bg-white focus:ring-1'
+            className='w-full select'
             value={state.patch.mode}
             list={[
               { value: 'Single' },

src/index.css

@@ -25,4 +25,7 @@ code {
   .btn:disabled {
     @apply opacity-60 hover:bg-gray-100 cursor-default;
   }
+  .select {
+    @apply block rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50;
+  }
 }