From e2ee7a57e6b63ae80ba3f8b18148c8bc320c6abf Mon Sep 17 00:00:00 2001
From: Oliver Bryan <ob248@proton.me>
Date: Sun, 25 Jan 2026 11:45:18 +0000
Subject: [PATCH] wider black keys and better contrast on D key

---
 src/components/controls/ColorKeyboard.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/controls/ColorKeyboard.tsx b/src/components/controls/ColorKeyboard.tsx
index 8e25918..34eaa3c 100644
--- a/src/components/controls/ColorKeyboard.tsx
+++ b/src/components/controls/ColorKeyboard.tsx
@@ -49,8 +49,8 @@ export default function ColorKeyboard({
                             style={
                                 isActive
                                     ? {
-                                          backgroundColor: note === "E" ? "#000000" : "#ffffff",
-                                          color: note === "E" ? "#ffffff" : "#000000",
+                                          backgroundColor: ["D", "E"].includes(note) ? "#000000" : "#ffffff",
+                                          color: ["D", "E"].includes(note) ? "#ffffff" : "#000000",
                                       }
                                     : { backgroundColor: color }
                             }
@@ -64,6 +64,7 @@ export default function ColorKeyboard({
             {BLACK_KEYS.map((key) => {
                 const color = colorByNote[key.note];
                 const isActive = color.toLowerCase() === value.toLowerCase();
+                const width = 10;
 
                 return (
                     <Toggle
@@ -76,8 +77,8 @@ export default function ColorKeyboard({
                             isActive ? "" : "",
                         )}
                         style={{
-                            width: "8%",
-                            left: `${(key.position + 1) * (100 / WHITE_KEYS.length) - 4}%`,
+                            width: `${width}%`,
+                            left: `${(key.position + 1) * (100 / WHITE_KEYS.length) - width / 2}%`,
                             backgroundColor: color,
                         }}
                         aria-label={`Select ${key.note}`}