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

---
 front/src/components/playlists/Form.vue       | 10 +++--
 .../components/playlists/PlaylistModal.vue    | 44 +++++++++++--------
 2 files changed, 32 insertions(+), 22 deletions(-)

diff --git a/front/src/components/playlists/Form.vue b/front/src/components/playlists/Form.vue
index b935b8a28..f67437da4 100644
--- a/front/src/components/playlists/Form.vue
+++ b/front/src/components/playlists/Form.vue
@@ -6,6 +6,8 @@ import { ref, computed, onMounted, nextTick } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useStore } from '~/store'
 
+import { FwButton } from '@funkwhale/ui'
+
 import axios from 'axios'
 import $ from 'jquery'
 
@@ -173,8 +175,10 @@ const submit = async () => {
       </div>
       <div class="field">
         <span id="updatePlaylistLabel" />
-        <button
-          :class="['ui', 'fluid', {'loading': isLoading}, 'button']"
+        <fw-button
+          class="right floated"
+          color="primary"
+          :is-loading="isLoading"
           type="submit"
         >
           <template v-if="playlist">
@@ -183,7 +187,7 @@ const submit = async () => {
           <template v-else>
             {{ $t('components.playlists.Form.button.create') }}
           </template>
-        </button>
+        </fw-button>
       </div>
     </div>
   </form>
diff --git a/front/src/components/playlists/PlaylistModal.vue b/front/src/components/playlists/PlaylistModal.vue
index 19c6a9ae1..fff1f947d 100644
--- a/front/src/components/playlists/PlaylistModal.vue
+++ b/front/src/components/playlists/PlaylistModal.vue
@@ -11,6 +11,8 @@ import { useStore } from '~/store'
 import { ref, computed, watch } from 'vue'
 import { useRouter } from 'vue-router'
 
+import { FwButton } from '@funkwhale/ui'
+
 const logger = useLogger()
 const store = useStore()
 
@@ -113,18 +115,19 @@ store.dispatch('playlists/fetchOwn')
               <strong>{{ duplicateTrackAddInfo.playlist_name }}</strong>
             </i18n-t>
           </p>
-          <button
-            class="ui small basic cancel button"
+          <fw-button
+            color="secondary"
+            outline
             @click="showDuplicateTrackAddConfirmation = false"
           >
             {{ $t('components.playlists.PlaylistModal.button.cancel') }}
-          </button>
-          <button
-            class="ui small success button"
+          </fw-button>
+          <fw-button
+            primary
             @click="addToPlaylist(lastSelectedPlaylist, true)"
           >
             {{ $t('components.playlists.PlaylistModal.button.addDuplicate') }}
-          </button>
+          </fw-button>
         </div>
         <div
           v-if="errors.length > 0"
@@ -184,13 +187,11 @@ store.dispatch('playlists/fetchOwn')
               :key="key"
             >
               <td>
-                <router-link
-                  class="ui icon basic small button"
-                  :to="{name: 'library.playlists.detail', params: {id: playlist.id }, query: {mode: 'edit'}}"
-                >
-                  <i class="ui pencil icon" />
-                  <span class="visually-hidden">{{ $t('components.playlists.PlaylistModal.button.edit') }}</span>
-                </router-link>
+                <fw-button
+                  color="secondary"
+                  icon="bi-pencil"
+                  @click="$router.push({name: 'library.playlists.detail', params: {id: playlist.id }, query: {mode: 'edit'}})"
+                />
               </td>
               <td>
                 <router-link
@@ -203,15 +204,16 @@ store.dispatch('playlists/fetchOwn')
               <td><human-date :date="playlist.modification_date" /></td>
               <td>{{ playlist.tracks_count }}</td>
               <td>
-                <button
+                <fw-button
                   v-if="track"
-                  class="ui success icon basic small right floated button"
+                  class="right floated"
+                  color="primary"
+                  icon="bi-plus"
                   :title="labels.addToPlaylist"
                   @click.prevent="addToPlaylist(playlist.id, false)"
                 >
-                  <i class="plus icon" />
                   {{ $t('components.playlists.PlaylistModal.button.addTrack') }}
-                </button>
+                </fw-button>
               </td>
             </tr>
           </tbody>
@@ -235,9 +237,13 @@ store.dispatch('playlists/fetchOwn')
       </div>
     </div>
     <div class="actions">
-      <button class="ui basic cancel button">
+      <fw-button
+        color="secondary"
+        outline
+        @click="$store.state.playlists.showModal = false"
+      >
         {{ $t('components.playlists.PlaylistModal.button.cancel') }}
-      </button>
+      </fw-button>
     </div>
   </semantic-modal>
 </template>