From 1cca30a7754cbc0613cdd7a5194279ecba4587f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ciar=C3=A1n=20Ainsworth?= <ciaranainsworth@proton.me>
Date: Sun, 12 Nov 2023 17:21:37 +0100
Subject: [PATCH] feat(front): add widget buttons

---
 front/src/components/audio/album/Widget.vue  |  9 ++++++---
 front/src/components/audio/artist/Widget.vue |  9 ++++++---
 front/src/components/audio/track/Widget.vue  |  9 ++++++---
 front/src/components/playlists/Widget.vue    | 17 ++++++++++-------
 4 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/front/src/components/audio/album/Widget.vue b/front/src/components/audio/album/Widget.vue
index 146ba2df3..366127ed5 100644
--- a/front/src/components/audio/album/Widget.vue
+++ b/front/src/components/audio/album/Widget.vue
@@ -6,6 +6,8 @@ import { useStore } from '~/store'
 
 import axios from 'axios'
 
+import { FwButton } from '@funkwhale/ui'
+
 import AlbumCard from '~/components/audio/album/Card.vue'
 
 import useErrorHandler from '~/composables/useErrorHandler'
@@ -107,13 +109,14 @@ watch(
     </slot>
     <template v-if="nextPage">
       <div class="ui hidden divider" />
-      <button
+      <fw-button
         v-if="nextPage"
-        :class="['ui', 'basic', 'button']"
+        outline
+        color="secondary"
         @click="fetchData(nextPage)"
       >
         {{ $t('components.audio.album.Widget.button.more') }}
-      </button>
+      </fw-button>
     </template>
   </div>
 </template>
diff --git a/front/src/components/audio/artist/Widget.vue b/front/src/components/audio/artist/Widget.vue
index 2890da65d..8a60b517d 100644
--- a/front/src/components/audio/artist/Widget.vue
+++ b/front/src/components/audio/artist/Widget.vue
@@ -8,6 +8,8 @@ import axios from 'axios'
 
 import ArtistCard from '~/components/audio/artist/Card.vue'
 
+import { FwButton } from '@funkwhale/ui'
+
 import useErrorHandler from '~/composables/useErrorHandler'
 
 interface Props {
@@ -103,13 +105,14 @@ watch(
     </slot>
     <template v-if="nextPage">
       <div class="ui hidden divider" />
-      <button
+      <fw-button
         v-if="nextPage"
-        :class="['ui', 'basic', 'button']"
+        outline
+        color="secondary"
         @click="fetchData(nextPage)"
       >
         {{ $t('components.audio.artist.Widget.button.more') }}
-      </button>
+      </fw-button>
     </template>
   </div>
 </template>
diff --git a/front/src/components/audio/track/Widget.vue b/front/src/components/audio/track/Widget.vue
index cce9260be..d8578ceae 100644
--- a/front/src/components/audio/track/Widget.vue
+++ b/front/src/components/audio/track/Widget.vue
@@ -11,6 +11,8 @@ import useWebSocketHandler from '~/composables/useWebSocketHandler'
 import PlayButton from '~/components/audio/PlayButton.vue'
 import TagsList from '~/components/tags/List.vue'
 
+import { FwButton } from '@funkwhale/ui'
+
 import useErrorHandler from '~/composables/useErrorHandler'
 
 interface Events {
@@ -211,12 +213,13 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
     </div>
     <template v-if="nextPage">
       <div class="ui hidden divider" />
-      <button
-        :class="['ui', 'basic', 'button']"
+      <fw-button
+        outline
+        color="secondary"
         @click="fetchData(nextPage as string)"
       >
         {{ $t('components.audio.track.Widget.button.more') }}
-      </button>
+      </fw-button>
     </template>
   </div>
 </template>
diff --git a/front/src/components/playlists/Widget.vue b/front/src/components/playlists/Widget.vue
index 46b69f5e5..35782c71d 100644
--- a/front/src/components/playlists/Widget.vue
+++ b/front/src/components/playlists/Widget.vue
@@ -8,6 +8,8 @@ import axios from 'axios'
 
 import useErrorHandler from '~/composables/useErrorHandler'
 
+import { FwButton } from '@funkwhale/ui'
+
 import PlaylistCard from '~/components/playlists/Card.vue'
 
 interface Props {
@@ -80,24 +82,25 @@ watch(
         <i class="list icon" />
         {{ $t('components.playlists.Widget.placeholder.noPlaylists') }}
       </div>
-      <button
+      <fw-button
         v-if="$store.state.auth.authenticated"
-        class="ui success icon labeled button"
+        color="primary"
+        icon="bi-list-task"
         @click="$store.commit('playlists/chooseTrack', null)"
       >
-        <i class="list icon" />
         {{ $t('components.playlists.Widget.button.create') }}
-      </button>
+      </fw-button>
     </div>
     <template v-if="nextPage">
       <div class="ui hidden divider" />
-      <button
+      <fw-button
         v-if="nextPage"
-        :class="['ui', 'basic', 'button']"
+        outline
+        color="secondary"
         @click="fetchData(nextPage)"
       >
         {{ $t('components.playlists.Widget.button.more') }}
-      </button>
+      </fw-button>
     </template>
   </div>
 </template>