fix: updated the spectrogram icon

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;

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 && (