From 37c86f66bcadb0a1ba347b586e356d1e369d949b Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Fri, 17 Jan 2025 09:54:12 +0100
Subject: [PATCH] fix(front): Trackdetail page top buttons

---
 .../src/components/favorites/TrackFavoriteIcon.vue |  8 +++++---
 .../src/components/playlists/TrackPlaylistIcon.vue | 14 +++++++++-----
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/front/src/components/favorites/TrackFavoriteIcon.vue b/front/src/components/favorites/TrackFavoriteIcon.vue
index 570e420ea..d69615596 100644
--- a/front/src/components/favorites/TrackFavoriteIcon.vue
+++ b/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>
diff --git a/front/src/components/playlists/TrackPlaylistIcon.vue b/front/src/components/playlists/TrackPlaylistIcon.vue
index 62dd273b6..600f57bf1 100644
--- a/front/src/components/playlists/TrackPlaylistIcon.vue
+++ b/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>