From bbac165d4773a39e5c34886ff4cb5105cf3353b9 Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Thu, 2 Nov 2023 14:20:29 +0300
Subject: [PATCH] Replace the border with a ring

Signed-off-by: Olga Bulat <obulat@gmail.com>
---
 .../src/components/VAudioTrack/VGlobalAudioTrack.vue |  2 +-
 .../components/VAudioTrack/layouts/VGlobalLayout.vue | 12 ++++++++----
 .../VGlobalAudioSection/VGlobalAudioSection.vue      | 10 ++--------
 3 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/VAudioTrack/VGlobalAudioTrack.vue b/frontend/src/components/VAudioTrack/VGlobalAudioTrack.vue
index 54d5c86f365..e1c5c73f459 100644
--- a/frontend/src/components/VAudioTrack/VGlobalAudioTrack.vue
+++ b/frontend/src/components/VAudioTrack/VGlobalAudioTrack.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="audio-track relative rounded border border-dark-charcoal border-opacity-20"
+    class="audio-track relative rounded"
     :aria-label="ariaLabel"
     role="region"
   >
diff --git a/frontend/src/components/VAudioTrack/layouts/VGlobalLayout.vue b/frontend/src/components/VAudioTrack/layouts/VGlobalLayout.vue
index b7c56dfff18..9e28ba7f618 100644
--- a/frontend/src/components/VAudioTrack/layouts/VGlobalLayout.vue
+++ b/frontend/src/components/VAudioTrack/layouts/VGlobalLayout.vue
@@ -1,8 +1,10 @@
 <template>
   <div
-    class="global-track grid w-full grid-cols-[3rem,1fr] grid-rows-[3rem,3rem] rounded"
+    class="global-track grid w-full grid-cols-[3rem,1fr] grid-rows-[3rem,3rem] rounded ring ring-dark-charcoal ring-opacity-20"
   >
-    <div class="h-12 w-12 rounded-ss"><VAudioThumbnail :audio="audio" /></div>
+    <div class="h-12 w-12 rounded-ss">
+      <VAudioThumbnail class="rounded-ss" :audio="audio" />
+    </div>
 
     <div class="flex h-12 items-center justify-between rounded-se bg-white">
       <VLink
@@ -51,16 +53,18 @@ export default defineComponent({
 })
 </script>
 
-<style>
+<style scoped>
 .global-track .thumbnail {
   @apply h-12 w-12 rounded-ss;
 }
-.global-track .thumbnail img {
+.global-track .thumbnail img,
+.global-track .thumbnail ~ svg {
   @apply rounded-ss;
 }
 
 .global-track .waveform {
   @apply h-full rounded-ee;
+  --waveform-background-color: theme("colors.white");
 }
 .global-track .audio-control {
   @apply rounded-es;
diff --git a/frontend/src/components/VGlobalAudioSection/VGlobalAudioSection.vue b/frontend/src/components/VGlobalAudioSection/VGlobalAudioSection.vue
index f66318abb31..43404913891 100644
--- a/frontend/src/components/VGlobalAudioSection/VGlobalAudioSection.vue
+++ b/frontend/src/components/VGlobalAudioSection/VGlobalAudioSection.vue
@@ -1,7 +1,7 @@
 <template>
   <div
-    class="global-audio sticky z-global-audio rounded sm:hidden"
-    :class="{ 'mx-2 mb-2': !!audio }"
+    class="global-audio sticky z-global-audio sm:hidden"
+    :class="{ 'bottom-2 mx-2': !!audio }"
   >
     <template v-if="audio">
       <VGlobalAudioTrack :audio="audio" />
@@ -147,9 +147,3 @@ export default defineComponent({
   },
 })
 </script>
-
-<style scoped>
-.global-audio {
-  bottom: 0.5rem;
-}
-</style>