From 7624e2045f7f9fa2824aefd6d58d8de124880672 Mon Sep 17 00:00:00 2001
From: Robert Kossessa <github@kosro.de>
Date: Sat, 3 Feb 2024 16:42:35 +0100
Subject: [PATCH] UPD: Selection outlines

---
 src/components/config/TabSelect.vue       | 2 +-
 src/components/config/TabSelectButton.vue | 4 ++--
 src/components/ui/slider/Slider.vue       | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/config/TabSelect.vue b/src/components/config/TabSelect.vue
index 5ed4240..726ff65 100644
--- a/src/components/config/TabSelect.vue
+++ b/src/components/config/TabSelect.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex font-heading">
+  <div class="flex font-heading px-4 py-2 gap-2">
     <TabSelectButton
       v-for="(option, key) in options" :key="key"
       :title="$t(option.titleKey)"
diff --git a/src/components/config/TabSelectButton.vue b/src/components/config/TabSelectButton.vue
index aceb5dc..6bb7159 100644
--- a/src/components/config/TabSelectButton.vue
+++ b/src/components/config/TabSelectButton.vue
@@ -1,7 +1,7 @@
 <template>
   <button
-    class="flex-1 flex flex-col items-center rounded-xl my-1 mx-0.5 p-1 gap-2"
-    :class="{'text-black bg-zinc-300 hover:bg-zinc-200': selected,
+    class="flex-1 flex flex-col items-center rounded-xl p-1 gap-2"
+    :class="{'text-black bg-zinc-300 hover:bg-zinc-200 outline outline-zinc-100': selected,
     'hover:bg-zinc-800 text-muted-foreground' : !selected}"
     @click="$emit('select'); $refs.title.scramble()">
     <slot v-if="$slots['replace']" name="replace" />
diff --git a/src/components/ui/slider/Slider.vue b/src/components/ui/slider/Slider.vue
index f1e5d87..2321ad5 100644
--- a/src/components/ui/slider/Slider.vue
+++ b/src/components/ui/slider/Slider.vue
@@ -43,7 +43,7 @@ const emits = defineEmits(['update:modelValue', 'valueCommit'])
       <SliderRange class="absolute h-1.5 bg-primary rounded-full" />
     </SliderTrack>
     <SliderThumb
-      class="flex h-6 w-8 rounded-[8px] border hover:bg-zinc-200 border-zinc-100 bg-zinc-300 transition-colors focus-visible:outline-none focus-visible:ring-1 cursor-pointer focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-zinc-600 justify-center items-center"
+      class="flex h-6 w-8 rounded-[8px] hover:bg-zinc-200 outline outline-zinc-100 bg-zinc-300 transition-colors focus-visible:outline-none focus-visible:ring-1 cursor-pointer focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-zinc-600 justify-center items-center"
       style="box-shadow: 0 0 15px 0 rgba(0,0,0,0.5)">
       <MoreHorizontal class="h-full" />
     </SliderThumb>