feat(ui): playbutton discrete is icon only round

front/src/components/audio/PlayButton.vue

@@ -8,7 +8,7 @@ import usePlayOptions from '~/composables/audio/usePlayOptions'
 import useReport from '~/composables/moderation/useReport'
 import { useStore } from '~/store'
 import { useRouter, useRoute } from 'vue-router'
-import { color } from "~/composables/color.ts";
+import { color } from '~/composables/color.ts'
 
 import Button from '~/components/ui/Button.vue'
 import OptionsButton from '~/components/ui/button/Options.vue'
@@ -132,7 +132,6 @@ const isOpen = ref(false)
       :class="[...buttonClasses]"
       :isloading="isLoading"
       :dropdownOnly="dropdownOnly"
-      :tiny="discrete"
       @click.stop.prevent="replacePlay()"
       @split-click="isOpen = !isOpen"
     >
@@ -242,21 +241,16 @@ const isOpen = ref(false)
     :aria-label="labels.replacePlay"
     :class="[...buttonClasses]"
     :isloading="isLoading"
+    :tiny="discrete"
+    :icon="!playing ? playIconClass : 'bi-pause-fill'"
+    :round="iconOnly"
+    :secondary="iconOnly"
     @click.stop.prevent="replacePlay()"
   >
-      <i
-        v-if="playing"
-        class="bi bi-pause-fill"
-      />
-      <i
-        v-else
-        :class="[playIconClass, 'icon']"
-      />
-      <template v-if="!discrete && !iconOnly">
-        &nbsp;
-        <slot>
-          {{ t('components.audio.PlayButton.button.discretePlay') }}
-        </slot>
-      </template>
+    <template v-if="!discrete || !iconOnly">
+      <span>
+        {{ t('components.audio.PlayButton.button.discretePlay') }}
+      </span>
+    </template>
   </Button>
 </template>

front/src/components/ui/Button.vue

@@ -163,6 +163,7 @@ onMounted(() => {
 
     --padding: 16px;
     --shift-by: 0.5px;
+    gap: 8px;
 
     position: relative;
     display: inline-flex;