From 6a4aaada5cb1046e7d77a91b71b3424783c61352 Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Sun, 5 Jan 2025 15:48:13 +0100
Subject: [PATCH] feat(ui) Tabs use new button component, correct spacing

---
 front/src/components/ui/Tabs.vue  | 8 ++++++--
 front/src/components/ui/tabs.scss | 2 +-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/front/src/components/ui/Tabs.vue b/front/src/components/ui/Tabs.vue
index a00978170..360238a4d 100644
--- a/front/src/components/ui/Tabs.vue
+++ b/front/src/components/ui/Tabs.vue
@@ -2,6 +2,8 @@
 import { TABS_INJECTION_KEY } from '~/injection-keys'
 import { provide, reactive, ref, watch } from 'vue'
 
+import Button from '~/components/ui/Button.vue'
+
 const currentTab = ref()
 const tabs = reactive([] as string[])
 const icons = reactive([] as string[])
@@ -22,14 +24,16 @@ watch(() => tabs.length, (to, from) => {
 <template>
   <div class="funkwhale tabs">
     <div class="tabs-header">
-      <button v-for="(tab, index) in tabs" :key="tab" :class="{ 'is-active': currentTab === tab }"
+      <Button
+        v-for="(tab, index) in tabs" :key="tab" :class="{ 'is-active': currentTab === tab }"
+        ghost
         @click="currentTab = tab"
         @keydown.left="currentTab = tabs[(tabs.findIndex(t => t === currentTab) - 1 + tabs.length) % tabs.length]"
         @keydown.right="currentTab = tabs[(tabs.findIndex(t => t === currentTab) + 1) % tabs.length]" class="tabs-item">
         <div class="is-spacing">{{ tab }}</div>
         <label v-if="icons[index]" class="is-icon">{{ icons[index] }}</label>
         <label>{{ tab }}</label>
-      </button>
+      </Button>
 
       <div class="tabs-right">
         <slot name="tabs-right" />
diff --git a/front/src/components/ui/tabs.scss b/front/src/components/ui/tabs.scss
index 5289a3214..6ca404148 100644
--- a/front/src/components/ui/tabs.scss
+++ b/front/src/components/ui/tabs.scss
@@ -14,7 +14,7 @@
     > .tabs-header {
       display: flex;
       align-items: end;
-      padding-bottom: 0px;
+      padding-bottom: 8px;
       margin-bottom: 23px;
       border-bottom: 1px solid var(--fw-border-color);