From bcab719010c8b82c7262e097f8349c09feb8a59f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ciar=C3=A1n=20Ainsworth?= <ciaranainsworth@proton.me>
Date: Sun, 12 Nov 2023 22:28:24 +0100
Subject: [PATCH] feat(front): add fw buttons to radio pages

---
 front/src/components/library/Radios.vue | 10 ++++++----
 front/src/components/radios/Button.vue  | 13 ++++++-------
 front/src/components/radios/Card.vue    | 16 +++++++++-------
 3 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/front/src/components/library/Radios.vue b/front/src/components/library/Radios.vue
index f12b41b39..6887e7d54 100644
--- a/front/src/components/library/Radios.vue
+++ b/front/src/components/library/Radios.vue
@@ -11,6 +11,8 @@ import { syncRef } from '@vueuse/core'
 import { sortedUniq } from 'lodash-es'
 import { useStore } from '~/store'
 
+import { FwButton } from '@funkwhale/ui'
+
 import axios from 'axios'
 import $ from 'jquery'
 
@@ -153,13 +155,13 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
       <h3 class="ui header">
         {{ $t('components.library.Radios.header.user') }}
       </h3>
-      <router-link
+      <fw-button
         v-if="isAuthenticated"
-        class="ui success button"
-        to="/library/radios/build"
+        color="primary"
+        @click="$router.push('/library/radios/build')"
       >
         {{ $t('components.library.Radios.button.create') }}
-      </router-link>
+      </fw-button>
       <div class="ui hidden divider" />
       <form
         :class="['ui', {'loading': isLoading}, 'form']"
diff --git a/front/src/components/radios/Button.vue b/front/src/components/radios/Button.vue
index 30da37fe3..f9084b000 100644
--- a/front/src/components/radios/Button.vue
+++ b/front/src/components/radios/Button.vue
@@ -5,6 +5,8 @@ import { useI18n } from 'vue-i18n'
 import { useStore } from '~/store'
 import { computed } from 'vue'
 
+import { FwButton } from '@funkwhale/ui'
+
 interface Props {
   customRadioId?: number | null
   type?: string
@@ -74,14 +76,11 @@ const toggleRadio = () => {
 </script>
 
 <template>
-  <button
-    :class="['ui', 'primary', {'inverted': running}, 'icon', 'labeled', 'button']"
+  <fw-button
+    :outline="running"
+    icon="bi-broadcast"
     @click="toggleRadio"
   >
-    <i
-      class="ui feed icon"
-      role="button"
-    />
     {{ buttonLabel }}
-  </button>
+  </fw-button>
 </template>
diff --git a/front/src/components/radios/Card.vue b/front/src/components/radios/Card.vue
index 7fb9aa068..5fa0686be 100644
--- a/front/src/components/radios/Card.vue
+++ b/front/src/components/radios/Card.vue
@@ -5,6 +5,7 @@ import { ref, computed } from 'vue'
 import { useStore } from '~/store'
 
 import RadioButton from './Button.vue'
+import { FwButton } from '@funkwhale/ui'
 
 interface Props {
   type: string
@@ -60,18 +61,19 @@ const customRadioId = computed(() => props.customRadio?.id ?? null)
       />
       <div class="ui hidden divider" />
       <radio-button
-        class="right floated button"
         :type="type"
+        class="right floated"
         :custom-radio-id="customRadioId"
         :object-id="objectId"
       />
-      <router-link
+      <fw-button
         v-if="$store.state.auth.authenticated && type === 'custom' && radio.user.id === $store.state.auth.profile?.id"
-        class="ui success button right floated"
-        :to="{name: 'library.radios.edit', params: {id: customRadioId }}"
-      >
-        {{ $t('components.radios.Card.button.edit') }}
-      </router-link>
+        color="secondary"
+        class="right floated"
+        icon="bi-pencil"
+        title="{{ $t('components.radios.Card.button.edit') }}"
+        @click="$router.push({name: 'library.radios.edit', params: {id: customRadioId }})"
+      />
     </div>
   </div>
 </template>