From c7b142cec8025d864ea75147cb1c59d0dda22943 Mon Sep 17 00:00:00 2001
From: Dhruv Bhanushali <dhruv_b@live.com>
Date: Tue, 30 Nov 2021 15:10:00 +0400
Subject: [PATCH] Replace hardcoded dimensions with the `size` prop

---
 src/components/AudioTrack/layouts/Full.vue   |  4 ++--
 src/components/AudioTrack/layouts/Global.vue |  3 +--
 src/components/AudioTrack/layouts/Row.vue    | 12 ++----------
 3 files changed, 5 insertions(+), 14 deletions(-)

diff --git a/src/components/AudioTrack/layouts/Full.vue b/src/components/AudioTrack/layouts/Full.vue
index 4abe57cc13..d06bc1cb3c 100644
--- a/src/components/AudioTrack/layouts/Full.vue
+++ b/src/components/AudioTrack/layouts/Full.vue
@@ -4,7 +4,7 @@
 
     <div class="flex flex-row justify-between items-top mx-16 my-6">
       <div class="left-content flex flex-row items-top gap-6">
-        <slot name="play-pause" />
+        <slot name="play-pause" size="medium" />
 
         <div class="audio-info">
           <h1 class="text-3xl font-heading font-semibold">{{ audio.title }}</h1>
@@ -108,6 +108,6 @@ export default {
 }
 
 .full-track .play-pause {
-  @apply h-14 w-14 rounded-sm;
+  @apply rounded-sm;
 }
 </style>
diff --git a/src/components/AudioTrack/layouts/Global.vue b/src/components/AudioTrack/layouts/Global.vue
index 5eb56f5fb5..5e7c9a79ca 100644
--- a/src/components/AudioTrack/layouts/Global.vue
+++ b/src/components/AudioTrack/layouts/Global.vue
@@ -2,7 +2,7 @@
   <div class="global-track flex flex-row w-full">
     <div class="flex-shrink-0">
       <AudioThumbnail :audio="audio" />
-      <slot name="play-pause" />
+      <slot name="play-pause" size="medium" />
     </div>
 
     <div class="relative flex-grow">
@@ -28,7 +28,6 @@ export default {
 </script>
 
 <style>
-.global-track .play-pause,
 .global-track .thumbnail {
   @apply h-14 w-14;
 }
diff --git a/src/components/AudioTrack/layouts/Row.vue b/src/components/AudioTrack/layouts/Row.vue
index d4a91b8234..d2f5b94542 100644
--- a/src/components/AudioTrack/layouts/Row.vue
+++ b/src/components/AudioTrack/layouts/Row.vue
@@ -6,7 +6,7 @@
     >
       <AudioThumbnail :audio="audio" />
       <div v-if="isSmall" class="absolute bottom-0 end-0">
-        <slot name="play-pause" />
+        <slot name="play-pause" size="tiny" />
       </div>
     </div>
 
@@ -70,7 +70,7 @@
           'flex-grow': isMedium,
         }"
       >
-        <slot name="play-pause" />
+        <slot name="play-pause" :size="isLarge ? 'medium' : 'large'" />
         <slot name="controller" />
       </div>
     </div>
@@ -131,18 +131,10 @@ export default {
   @apply rounded-te-sm rounded-be-sm;
 }
 
-.row-track.size-m .play-pause {
-  @apply h-20 w-20;
-}
-
 .row-track.size-m .waveform {
   @apply h-20;
 }
 
-.row-track.size-l .play-pause {
-  @apply h-14 w-14;
-}
-
 .row-track.size-l .waveform {
   @apply h-14;
 }