From 38528d61872a423dcd0006fbe92362fee3c2b789 Mon Sep 17 00:00:00 2001
From: Dhruv Bhanushali <dhruv_b@live.com>
Date: Tue, 30 Nov 2021 17:50:57 +0400
Subject: [PATCH] Make a Tailwind utility for inset shadow and replace manually
 defined styles

---
 src/components/AudioTrack/Waveform.vue           | 6 +-----
 src/components/Header/SearchBar/SearchButton.vue | 8 +-------
 src/components/VIconButton/VIconButton.vue       | 9 +--------
 tailwind.config.js                               | 4 ++++
 4 files changed, 7 insertions(+), 20 deletions(-)

diff --git a/src/components/AudioTrack/Waveform.vue b/src/components/AudioTrack/Waveform.vue
index 6ea59acf62..cde9f936b0 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 border-1.5 border-tx focus:border-pink focus:outline-none overflow-hidden"
+    class="waveform relative bg-dark-charcoal-06 border-1.5 border-tx focus:border-pink focus:outline-none focus:shadow-ring overflow-hidden"
     :style="{ '--unusable-height': `${Math.floor((1 - usableFrac) * 100)}%` }"
     tabIndex="0"
     role="slider"
@@ -453,10 +453,6 @@ export default {
   left: var(--seek-time-left);
 }
 
-.waveform:focus {
-  box-shadow: 0 0 0 1px inset white;
-}
-
 .waveform:focus-visible .focus-indicator {
   display: flex;
 }
diff --git a/src/components/Header/SearchBar/SearchButton.vue b/src/components/Header/SearchBar/SearchButton.vue
index 32eea15f4f..86c8394cb9 100644
--- a/src/components/Header/SearchBar/SearchButton.vue
+++ b/src/components/Header/SearchBar/SearchButton.vue
@@ -2,7 +2,7 @@
   <VIconButton
     v-bind="$attrs"
     size="search"
-    class="search-button hover:text-white group-hover:text-white hover:bg-pink group-hover:bg-pink p-0.5px ps-1.5px focus:p-0 border border-s-0 focus:border-1.5 border-dark-charcoal-20 hover:border-pink group-hover:border-pink rounded-e-sm"
+    class="search-button hover:text-white group-hover:text-white hover:bg-pink group-hover:bg-pink p-0.5px ps-1.5px focus:p-0 border border-s-0 focus:border-1.5 border-dark-charcoal-20 hover:border-pink group-hover:border-pink rounded-e-sm active:shadow-ring"
     :icon-props="{ iconPath: searchIcon }"
     :aria-label="$t('search.search')"
     v-on="$listeners"
@@ -23,9 +23,3 @@ export default {
   },
 }
 </script>
-
-<style scoped>
-.search-button:active {
-  box-shadow: 0 0 0 1px inset white;
-}
-</style>
diff --git a/src/components/VIconButton/VIconButton.vue b/src/components/VIconButton/VIconButton.vue
index 5faee6b6cc..f21bc81610 100644
--- a/src/components/VIconButton/VIconButton.vue
+++ b/src/components/VIconButton/VIconButton.vue
@@ -1,6 +1,6 @@
 <template>
   <button
-    class="icon-button flex items-center justify-center border-1.5 focus:border-pink focus:outline-none"
+    class="icon-button flex items-center justify-center border-1.5 focus:border-pink focus:outline-none focus:shadow-ring active:shadow-ring"
     :class="[...buttonSizeClasses]"
     :type="type"
     v-on="$listeners"
@@ -67,10 +67,3 @@ export default {
   },
 }
 </script>
-
-<style scoped>
-.icon-button:focus,
-.icon-button:active {
-  box-shadow: 0 0 0 1px inset white;
-}
-</style>
diff --git a/tailwind.config.js b/tailwind.config.js
index bb45259e8b..41e3dcbfe1 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -178,6 +178,9 @@ module.exports = {
       scale: {
         '-100': '-1',
       },
+      boxShadow: {
+        ring: 'inset 0 0 0 1px white',
+      },
     },
   },
   variants: {
@@ -191,6 +194,7 @@ module.exports = {
       ringWidth: ['focus-visible'],
       borderWidth: ['focus', 'focus-within'],
       padding: ['focus', 'focus-within'],
+      boxShadow: ['focus', 'active'],
     },
   },
   plugins: [require('tailwindcss-rtl')],