From 374e0c3313cb962173e171265e03c5854273a048 Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Sat, 18 Jan 2025 19:17:59 +0100
Subject: [PATCH] fix(ui): tabs display

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

diff --git a/front/src/components/ui/Tabs.vue b/front/src/components/ui/Tabs.vue
index 4dc0aa310..365966fd1 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,15 +24,16 @@ watch(() => tabs.length, (to, from) => {
 <template>
   <div class="funkwhale tabs">
     <div class="tabs-header">
-      <button
+      <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 6ca404148..a57ec073c 100644
--- a/front/src/components/ui/tabs.scss
+++ b/front/src/components/ui/tabs.scss
@@ -22,13 +22,31 @@
         outline:1px dotted currentColor;
       }
 
-      > .tabs-item {
+      > button.tabs-item {
         font-size: 1rem;
         padding: 8px;
         min-width: 96px;
         text-align: center;
         cursor: pointer;
         position: relative;
+        font-weight: normal;
+        border: none;
+
+        &:hover {
+          background-color: transparent;
+
+          &::after {
+            content: '';
+            display: block;
+            height: 4px;
+            background-color: var(--fw-secondary);
+            margin: 0 auto;
+            width: calc(10% + 2rem);
+            position: absolute;
+            inset: auto 0 0px 0;
+            border-radius: 100vh;
+          }
+        }
 
         .is-spacing {
             height: 0;
@@ -53,7 +71,7 @@
             margin: 0 auto;
             width: calc(10% + 2rem);
             position: absolute;
-            inset: auto 0 -2.5px 0;
+            inset: auto 0 0px 0;
             border-radius: 100vh;
           }
         }