From 42b9662bb40f781941ea36308f76135f03685817 Mon Sep 17 00:00:00 2001
From: Xiaohan-Tian <xiaohan.tian@gmail.com>
Date: Thu, 14 May 2026 23:15:38 -0700
Subject: [PATCH] fix: minor UI adjustments

---
 src/components/piano-roll/PianoRoll.css | 14 +++++++-------
 src/util/scaleUtil.test.ts              |  2 ++
 src/util/scaleUtil.ts                   | 11 +++++------
 3 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/components/piano-roll/PianoRoll.css b/src/components/piano-roll/PianoRoll.css
index 56730dd..56c8d46 100644
--- a/src/components/piano-roll/PianoRoll.css
+++ b/src/components/piano-roll/PianoRoll.css
@@ -610,9 +610,9 @@
   position: absolute;
   left: 0;
   right: 0;
-  background-color: rgba(123, 104, 238, 0.15);
-  border-top: 1px solid rgba(123, 104, 238, 0.3);
-  border-bottom: 1px solid rgba(123, 104, 238, 0.3);
+  background-color: rgba(135, 206, 250, 0.15);
+  border-top: 1px solid rgba(135, 206, 250, 0.3);
+  border-bottom: 1px solid rgba(135, 206, 250, 0.3);
   pointer-events: none;
   z-index: 1;
   transition: opacity 0.1s ease;
@@ -622,9 +622,9 @@
   position: absolute;
   top: 0;
   bottom: 0;
-  background-color: rgba(123, 104, 238, 0.1);
-  border-left: 1px solid rgba(123, 104, 238, 0.25);
-  border-right: 1px solid rgba(123, 104, 238, 0.25);
+  background-color: rgba(135, 206, 250, 0.1);
+  border-left: 1px solid rgba(135, 206, 250, 0.25);
+  border-right: 1px solid rgba(135, 206, 250, 0.25);
   pointer-events: none;
   z-index: 1;
   transition: opacity 0.1s ease;
@@ -802,4 +802,4 @@
   color: #e0e0e0;
   min-width: 20px;
   text-align: center;
-}
\ No newline at end of file
+}
diff --git a/src/util/scaleUtil.test.ts b/src/util/scaleUtil.test.ts
index baa6852..c1c11a0 100644
--- a/src/util/scaleUtil.test.ts
+++ b/src/util/scaleUtil.test.ts
@@ -385,6 +385,8 @@ describe('scaleUtil', () => {
       const result = generatePianoGridBackground('ionian', 'C major');
       expect(result).toContain('linear-gradient');
       expect(typeof result).toBe('string');
+      expect(result).toContain('#282828');
+      expect(result).toContain('#303030');
     });
 
     it('should generate different backgrounds for different modes', () => {
diff --git a/src/util/scaleUtil.ts b/src/util/scaleUtil.ts
index 0b87037..5cb72ac 100644
--- a/src/util/scaleUtil.ts
+++ b/src/util/scaleUtil.ts
@@ -320,19 +320,18 @@ export const generatePianoGridBackground = (
     const rowBottomMinusOne = `calc(var(--region-piano-key-height) * ${index + 1} - 1px)`;
     const rowBottom = `calc(var(--region-piano-key-height) * ${index + 1})`;
 
-    // For scale notes: highlight the full row with a semi-transparent blue background
-    // For non-scale notes: use transparent background with just the separator line
+    // Match the event list palette while preserving scale-aware row distinction.
     if (isInScale) {
       return `
-        rgba(90, 123, 154, 0.15) ${rowTop},
-        rgba(90, 123, 154, 0.15) ${rowBottomMinusOne},
+        #282828 ${rowTop},
+        #282828 ${rowBottomMinusOne},
         #3a3a3a ${rowBottomMinusOne},
         #3a3a3a ${rowBottom}
       `.trim();
     } else {
       return `
-        transparent ${rowTop},
-        transparent ${rowBottomMinusOne},
+        #303030 ${rowTop},
+        #303030 ${rowBottomMinusOne},
         #3a3a3a ${rowBottomMinusOne},
         #3a3a3a ${rowBottom}
       `.trim();