primary color and shadows

Assets/web/src/Components/MidiNoteInfo.js

@@ -1,7 +1,6 @@
 import React, { useState, useEffect, useRef } from "react";
 import PianoKeyboard from "./PianoKeyboard";
 import MidNoteDataReceiver from "../DataRecievers/MidiNoteDataReceiver.js";
-import CenterGrowSlider from "./CenterGrowSlider.js";
 // import { Slider } from "@mui/material";
 // import { styled } from "@mui/material/styles";
 
@@ -9,31 +8,9 @@ import CenterGrowSlider from "./CenterGrowSlider.js";
 
 export default function MidiNoteInfo() {
   const [notes, setNotes] = useState([]);
-  const [inputCents, setInputCents] = useState(0);
-  const [outputCents, setOutputCents] = useState(0);
-  const [autotuneNote, setAutotuneNote] = useState(0);
   const dataReceiverRef = useRef(null);
   const isActiveRef = useRef(true);
 
-  function getCharfromNoteIndex(index) {
-    const NOTE_NAMES = [
-      "C",
-      "C♯",
-      "D",
-      "D♯",
-      "E",
-      "F",
-      "F♯",
-      "G",
-      "G♯",
-      "A",
-      "A♯",
-      "B",
-    ];
-    if (typeof index !== "number" || isNaN(index)) return "";
-    return NOTE_NAMES[index % NOTE_NAMES.length];
-  }
-
   useEffect(() => {
     dataReceiverRef.current = new MidNoteDataReceiver();
     isActiveRef.current = true;
@@ -42,9 +19,6 @@ export default function MidiNoteInfo() {
       if (!isActiveRef.current) return;
       if (dataReceiverRef.current) {
         setNotes(dataReceiverRef.current.getNotes());
-        setInputCents(dataReceiverRef.current.getInputCents());
-        setOutputCents(dataReceiverRef.current.getOutputCents());
-        setAutotuneNote(dataReceiverRef.current.getAutotuneNote());
       }
       window.requestAnimationFrame(render);
     }
@@ -57,13 +31,8 @@ export default function MidiNoteInfo() {
   }, []);
 
   return (
-    <div style={{ marginTop: "1rem" }}>
+    <div className="rounded-lg" style={{ marginTop: "1rem" }}>
       <PianoKeyboard heldNotes={notes} />
-      <h1>Autotune Note: {getCharfromNoteIndex(autotuneNote)}</h1>
-      <label>Input cents</label>
-      <CenterGrowSlider value={inputCents} />
-      <label>Output cents</label>
-      <CenterGrowSlider value={outputCents} />
     </div>
   );
 }