fix(front): Trackdetail page top buttons

front/src/components/favorites/TrackFavoriteIcon.vue

@@ -44,13 +44,15 @@ const title = computed(() => isFavorite.value
       {{ t('components.favorites.TrackFavoriteIcon.button.add') }}
     </span>
   </Button>
-  <button
+  <Button
     v-else
+    round
+    outline
+    icon="bi-heart-fill"
     :class="['ui', 'favorite-icon', {'pink': isFavorite}, {'favorited': isFavorite}, 'basic', 'circular', 'icon', {'really': !border}, 'button']"
     :aria-label="title"
     :title="title"
     @click.stop="store.dispatch('favorites/toggle', track.id)"
   >
-    <i :class="['bi', 'bi-heart-fill', {'pink': isFavorite}, 'basic', 'icon']" />
-  </button>
+  </Button>
 </template>

front/src/components/playlists/TrackPlaylistIcon.vue

@@ -6,6 +6,8 @@ import { useI18n } from 'vue-i18n'
 import { computed } from 'vue'
 import { useStore } from '~/store'
 
+import Button from '~/components/ui/Button.vue'
+
 interface Props {
   track?: Track | QueueTrack
   button?: boolean
@@ -27,21 +29,23 @@ const labels = computed(() => ({
 </script>
 
 <template>
-  <button
+  <Button
     v-if="button"
     :class="['ui', 'icon', 'labeled', 'button']"
     @click.stop="store.commit('playlists/chooseTrack', track)"
   >
     <i class="list icon" />
     {{ t('components.playlists.TrackPlaylistIcon.button.add') }}
-  </button>
-  <button
+  </Button>
+  <Button
     v-else
+    round
+    outline
+    icon="bi-list"
     :class="['ui', 'basic', 'circular', 'icon', {'really': !border}, 'button']"
     :aria-label="labels.addToPlaylist"
     :title="labels.addToPlaylist"
     @click.stop="store.commit('playlists/chooseTrack', track)"
   >
-    <i :class="['list', 'basic', 'icon']" />
-  </button>
+  </Button>
 </template>