remove old styles and begin phase out old elements

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;
-}