From 60abf89d82e5cd667617d44e99ce513b4c98e3f3 Mon Sep 17 00:00:00 2001
From: Robert Kossessa <github@kosro.de>
Date: Mon, 5 Feb 2024 01:25:17 +0100
Subject: [PATCH] UPD: Improve config tabs

---
 src/components/config/ConfigPane.vue | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/components/config/ConfigPane.vue b/src/components/config/ConfigPane.vue
index f66fd70..b134bd9 100644
--- a/src/components/config/ConfigPane.vue
+++ b/src/components/config/ConfigPane.vue
@@ -1,14 +1,16 @@
 <template>
   <div>
-    <div v-if="showTabs" class="flex">
-      <!-- TODO: Remove later if not needed -->
-      <button
-        v-for="(option, key) in store.currentConfigPages" :key="key"
-        class="flex-1 h-12 items-center text-center group px-3 font-heading"
-        :class="key===store.currentConfigPage ? 'bg-zinc-900': 'hover:bg-zinc-800 text-zinc-200'"
-        @click="store.setCurrentConfigPage(key)">
-        {{ $t(option.titleKey) }}
-      </button>
+    <div v-if="showTabs" class="p-2 border-solid border-0 border-b">
+      <div class="flex bg-zinc-900 rounded-xl overflow-hidden">
+        <button
+          v-for="(option, key) in store.currentConfigPages" :key="key"
+          class="flex-1 h-12 items-center text-center px-3 font-heading"
+          :class="{'text-black bg-zinc-300 hover:bg-zinc-200': key===store.currentConfigPage,
+          'hover:bg-zinc-800 text-muted-foreground' : key!==store.currentConfigPage}"
+          @click="store.setCurrentConfigPage(key)">
+          {{ $t(option.titleKey) }}
+        </button>
+      </div>
     </div>
     <div class="grow overflow-y-auto">
       <component :is="store.currentConfigComponent" />