From 5f3c31a315bf83035d96c0a11f49eb14a8c7b28e Mon Sep 17 00:00:00 2001
From: Robert Kossessa <github@kosro.de>
Date: Sun, 4 Feb 2024 00:30:13 +0100
Subject: [PATCH] UPD: DevicePreview transitions

---
 src/components/config/SteppedSlider.vue | 6 +++---
 src/components/config/TabSelect.vue     | 1 +
 src/components/device/DeviceKeys.vue    | 4 ++--
 src/components/device/DevicePreview.vue | 2 +-
 4 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/config/SteppedSlider.vue b/src/components/config/SteppedSlider.vue
index 459c68b..72edea2 100644
--- a/src/components/config/SteppedSlider.vue
+++ b/src/components/config/SteppedSlider.vue
@@ -14,14 +14,14 @@
           'slider-end ml-4': index === positions.length-1}"
         @click="value = position.value">
         <span
-          v-if="index===0" class="rounded-full w-2 h-1.5 inline-block mb-[1px]"
+          v-if="index===0" class="rounded-full w-2 h-1.5 inline-block mb-[1px] transition-colors"
           :class="value===position.value ? 'bg-zinc-100' : 'bg-zinc-600'" />
         <span
-          v-if="position.label" class="text-xs font-mono uppercase mx-1"
+          v-if="position.label" class="text-xs font-mono uppercase mx-1 transition-colors"
           :class="value===position.value ? 'text-zinc-100' : 'text-zinc-600'">{{ position.label }}</span>
         <span
           v-if="!position.label || index === positions.length-1"
-          class="rounded-full w-2 h-1.5 inline-block mb-[1px]"
+          class="rounded-full w-2 h-1.5 inline-block mb-[1px] transition-colors"
           :class="value===position.value ? 'bg-zinc-100' : 'bg-zinc-600'" />
       </button>
     </div>
diff --git a/src/components/config/TabSelect.vue b/src/components/config/TabSelect.vue
index 726ff65..a27f6ba 100644
--- a/src/components/config/TabSelect.vue
+++ b/src/components/config/TabSelect.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="flex font-heading px-4 py-2 gap-2">
+    <div class="absolute"/>
     <TabSelectButton
       v-for="(option, key) in options" :key="key"
       :title="$t(option.titleKey)"
diff --git a/src/components/device/DeviceKeys.vue b/src/components/device/DeviceKeys.vue
index 37ca323..8e94bf9 100644
--- a/src/components/device/DeviceKeys.vue
+++ b/src/components/device/DeviceKeys.vue
@@ -4,11 +4,11 @@
       v-for="(color, key) in keys"
       :key="key" :class="{'outline outline-white ' : key === selected,
       'hover:outline outline-zinc-400' : key !== selected}"
-      class="aspect-square flex-1 rounded-[2px] flex items-center justify-center"
+      class="aspect-square flex-1 rounded-[2px] flex items-center justify-center transition-all"
       :style="`box-shadow: 0 0 20px 0 ${color.hex()}`"
       @click="$emit('select', key)">
       <span
-        class="font-heading text-2xl"
+        class="font-heading text-2xl transition-colors"
         :class="{'opacity-30 text-black': key!==selected}">{{ key }}
       </span>
     </button>
diff --git a/src/components/device/DevicePreview.vue b/src/components/device/DevicePreview.vue
index 9528931..40b499a 100644
--- a/src/components/device/DevicePreview.vue
+++ b/src/components/device/DevicePreview.vue
@@ -25,7 +25,7 @@
         </div>
       </div>
       <button
-        class="rounded-full outline-2 absolute h-[41.5%] top-[24.5%] aspect-square left-0 right-0 mx-auto"
+        class="rounded-full outline-2 absolute h-[41.5%] top-[24.5%] aspect-square left-0 right-0 mx-auto transition-all"
         :class="{'outline outline-white': selected==='ring',
         'hover:outline outline-zinc-400': selected!=='ring'}"
         @click="selected='ring'" />