Replace hardcoded dimensions with the size prop

WordPress · Nov 30, 2021 · c7b142c · c7b142c
1 parent 40a4488
commit c7b142c
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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;
 }