From 2bf95e85f1eb165aab406c95fdf33701b1a3248a Mon Sep 17 00:00:00 2001
From: Robert Kossessa <github@kosro.de>
Date: Mon, 5 Feb 2024 01:37:59 +0100
Subject: [PATCH] UPD: TabSelect look

---
 src/components/common/TabSelect.vue       | 8 ++------
 src/components/common/TabSelectButton.vue | 6 +++---
 src/components/config/ConfigPane.vue      | 4 ++--
 3 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/src/components/common/TabSelect.vue b/src/components/common/TabSelect.vue
index 9e64df3..07186aa 100644
--- a/src/components/common/TabSelect.vue
+++ b/src/components/common/TabSelect.vue
@@ -1,10 +1,6 @@
 <template>
-  <div class="relative">
-    <div
-      :style="backgroundStyle"
-      :class="{'hidden': !showBackground}"
-      class="absolute bg-zinc-300 outline outline-zinc-100 rounded-xl transition-all duration-75 ease-out" />
-    <div class="flex font-heading px-4 py-2 gap-2 relative">
+  <div class="p-2 border-solid border-0 border-b">
+    <div class="flex bg-zinc-900 rounded-xl overflow-hidden border border-zinc-800">
       <TabSelectButton
         v-for="(option, key) in options" :key="key"
         :ref="(el) => buttons[key] = el"
diff --git a/src/components/common/TabSelectButton.vue b/src/components/common/TabSelectButton.vue
index 6120ed0..3af335f 100644
--- a/src/components/common/TabSelectButton.vue
+++ b/src/components/common/TabSelectButton.vue
@@ -1,8 +1,8 @@
 <template>
   <button
-    class="flex-1 flex flex-col items-center rounded-xl p-1 gap-2 transition-all"
-    :class="{'text-black bg-zinc-300 outline outline-zinc-100 hover:bg-zinc-200': selected,
-    'hover:bg-zinc-800 text-muted-foreground' : !selected}"
+    class="flex-1 flex flex-col items-center p-2 gap-2 font-heading transition-all"
+    :class="{'text-black bg-zinc-300 hover:bg-zinc-200': selected,
+          'hover:bg-zinc-800 text-muted-foreground' : !selected}"
     @click="$emit('select'); $refs.title.scramble()">
     <slot v-if="$slots['replace']" name="replace" />
     <template v-else>
diff --git a/src/components/config/ConfigPane.vue b/src/components/config/ConfigPane.vue
index b134bd9..9abd761 100644
--- a/src/components/config/ConfigPane.vue
+++ b/src/components/config/ConfigPane.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
     <div v-if="showTabs" class="p-2 border-solid border-0 border-b">
-      <div class="flex bg-zinc-900 rounded-xl overflow-hidden">
+      <div class="flex bg-zinc-900 rounded-xl overflow-hidden border border-zinc-800">
         <button
           v-for="(option, key) in store.currentConfigPages" :key="key"
-          class="flex-1 h-12 items-center text-center px-3 font-heading"
+          class="flex-1 h-12 items-center text-center px-3 font-heading transition-all"
           :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)">