From cbd2fc60a09cf2e58ba2bb0604aa1e2c998526e6 Mon Sep 17 00:00:00 2001
From: Xiaohan-Tian <157918347+Xiaohan-Tian@users.noreply.github.com>
Date: Fri, 1 May 2026 20:18:32 -0700
Subject: [PATCH] fix: updated the spectrogram icon

---
 src/components/track/Region.css     | 21 +++++++++++++++++++++
 src/components/track/RegionItem.tsx | 23 ++++++++++++++++++++++-
 2 files changed, 43 insertions(+), 1 deletion(-)

diff --git a/src/components/track/Region.css b/src/components/track/Region.css
index b24ef17..642bb4e 100644
--- a/src/components/track/Region.css
+++ b/src/components/track/Region.css
@@ -119,6 +119,27 @@
   background: rgba(0, 0, 0, 0.35);
 }
 
+.region-waveform-btn {
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  background: rgba(0, 0, 0, 0.25);
+  color: #fff;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 3px;
+  padding: 2px;
+  margin: 0;
+  cursor: pointer;
+  z-index: 2;
+  display: none;
+  align-items: center;
+  justify-content: center;
+}
+
+.region-waveform-btn:hover {
+  background: rgba(0, 0, 0, 0.35);
+}
+
 .region-spectrogram-btn {
   position: absolute;
   top: 4px;
diff --git a/src/components/track/RegionItem.tsx b/src/components/track/RegionItem.tsx
index fdcfca8..1a7b1ee 100644
--- a/src/components/track/RegionItem.tsx
+++ b/src/components/track/RegionItem.tsx
@@ -585,6 +585,23 @@ const RegionItem: React.FC<RegionItemProps> = ({
             <FaPencilAlt size={10} />
           </button>
         )}
+        {audioRegion && (
+          <button
+            className="region-waveform-btn"
+            title="View waveform"
+            onMouseDown={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+            }}
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+            }}
+            aria-label="View waveform"
+          >
+            <MdGraphicEq size={10} />
+          </button>
+        )}
         {audioRegion && (
           <button
             className="region-spectrogram-btn"
@@ -602,7 +619,11 @@ const RegionItem: React.FC<RegionItemProps> = ({
             }}
             aria-label="View spectrogram"
           >
-            <MdGraphicEq size={10} />
+            <svg width="10" height="10" viewBox="0 0 10 10" fill="currentColor">
+              <rect x="3" y="0.5" width="6.5" height="2.5" rx="0.4"/>
+              <rect x="1.5" y="3.75" width="6.5" height="2.5" rx="0.4"/>
+              <rect x="0" y="7" width="6.5" height="2.5" rx="0.4"/>
+            </svg>
           </button>
         )}
         {showHybridButton && (