primary color and shadows

Assets/web/src/Components/PianoKeyboard.js

@@ -1,6 +1,5 @@
 /* eslint-disable react/prop-types */
 import React /*, { useRef, useEffect, useState }*/ from "react";
-
 const NOTE_NAMES = [
   "C",
   "C♯",
@@ -96,14 +95,18 @@ export default function PianoKeyboard({ heldNotes }) {
           height: "100%",
         }}
       >
-        {whiteKeys.map((k) => (
+        {whiteKeys.map((k, i) => (
           <div
             key={k.midi}
+            className={
+              k.held
+                ? "bg-primary shadow-primary/30 shadow-[0_0_16px,inset_0_1px_2px_rgba(255,255,255,0.2)]"
+                : "bg-[#222]"
+            }
             style={{
               flex: "1 1 0",
               height: "100%",
               border: "1px solid #2a2a2a",
-              background: k.held ? "#7fff7f" : "#222",
               position: "relative",
               boxSizing: "border-box",
               marginRight: -1,
@@ -114,6 +117,10 @@ export default function PianoKeyboard({ heldNotes }) {
               fontSize: 10,
               fontFamily: "monospace",
               overflow: "hidden",
+              borderTopLeftRadius: i === 0 ? 6 : 0, // round left edge of first key
+              borderBottomLeftRadius: i === 0 ? 6 : 0,
+              borderTopRightRadius: i === whiteKeys.length - 1 ? 6 : 0, // round right edge of last key
+              borderBottomRightRadius: i === whiteKeys.length - 1 ? 6 : 0,
             }}
           >
             <div
@@ -156,12 +163,16 @@ export default function PianoKeyboard({ heldNotes }) {
         {blackKeys.map((k) => (
           <div
             key={k.midi}
+            className={
+              k.held
+                ? "bg-primary shadow-primary/30 shadow-[0_0_16px,inset_0_1px_2px_rgba(255,255,255,0.2)]"
+                : "bg-[#111]"
+            }
             style={{
               position: "absolute",
               left: `${getBlackKeyPercent(k.midi)}%`,
               width: `${(100 / numWhite) * 0.65}%`,
               height: "100%",
-              background: k.held ? "#7fff7f" : "#111",
               border: "1px solid #333",
               borderRadius: 3,
               display: "flex",