From 26688c4da834bbb8e40ddc6a949a00feac793716 Mon Sep 17 00:00:00 2001
From: Dhruv Bhanushali <dhruv_b@live.com>
Date: Tue, 30 Nov 2021 17:39:48 +0400
Subject: [PATCH] Define the focused state for the waveform

---
 src/components/AudioTrack/Waveform.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/AudioTrack/Waveform.vue b/src/components/AudioTrack/Waveform.vue
index c1bc2cb8d1..6ea59acf62 100644
--- a/src/components/AudioTrack/Waveform.vue
+++ b/src/components/AudioTrack/Waveform.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     ref="el"
-    class="waveform relative bg-dark-charcoal-06 overflow-hidden focus:outline-none focus-visible:ring focus-visible:ring-offset-2 focus-visible:ring-pink"
+    class="waveform relative bg-dark-charcoal-06 border-1.5 border-tx focus:border-pink focus:outline-none overflow-hidden"
     :style="{ '--unusable-height': `${Math.floor((1 - usableFrac) * 100)}%` }"
     tabIndex="0"
     role="slider"
@@ -453,6 +453,10 @@ export default {
   left: var(--seek-time-left);
 }
 
+.waveform:focus {
+  box-shadow: 0 0 0 1px inset white;
+}
+
 .waveform:focus-visible .focus-indicator {
   display: flex;
 }