Replace the border with a ring

Signed-off-by: Olga Bulat <obulat@gmail.com>
WordPress · Nov 2, 2023 · bbac165 · bbac165
1 parent 6f0a5dc
commit bbac165
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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>