From c47f55f51d74b3ff4879ade16efd041754596f5e Mon Sep 17 00:00:00 2001
From: Robert Kossessa <github@kosro.de>
Date: Sun, 4 Feb 2024 01:28:22 +0100
Subject: [PATCH] ADD: Hover transitions

---
 src/components/config/SteppedSlider.vue  |  8 ++++----
 src/components/profile/ProfileButton.vue | 17 +++++++++--------
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/components/config/SteppedSlider.vue b/src/components/config/SteppedSlider.vue
index 72edea2..af0448c 100644
--- a/src/components/config/SteppedSlider.vue
+++ b/src/components/config/SteppedSlider.vue
@@ -7,7 +7,7 @@
     <div class="flex justify-between py-2">
       <button
         v-for="(position, index) in positions" :key="position"
-        class="min-w-0 text-nowrap"
+        class="min-w-0 text-nowrap group"
         :class="{
           'slider-start mr-4': index===0,
           'slider-center': index > 0 && index < positions.length-1,
@@ -15,14 +15,14 @@
         @click="value = position.value">
         <span
           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'" />
+          :class="value===position.value ? 'bg-zinc-100' : 'bg-zinc-600 group-hover:bg-zinc-500'" />
         <span
           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>
+          :class="value===position.value ? 'text-zinc-100' : 'text-zinc-600 group-hover:text-zinc-500'">{{ position.label }}</span>
         <span
           v-if="!position.label || index === positions.length-1"
           class="rounded-full w-2 h-1.5 inline-block mb-[1px] transition-colors"
-          :class="value===position.value ? 'bg-zinc-100' : 'bg-zinc-600'" />
+          :class="value===position.value ? 'bg-zinc-100' : 'bg-zinc-600 group-hover:bg-zinc-500'" />
       </button>
     </div>
   </div>
diff --git a/src/components/profile/ProfileButton.vue b/src/components/profile/ProfileButton.vue
index 9960280..4228ed0 100644
--- a/src/components/profile/ProfileButton.vue
+++ b/src/components/profile/ProfileButton.vue
@@ -10,7 +10,7 @@
       <input
         ref="profileNameInput" v-model="nameInput"
         onfocus="this.select()" :placeholder="$t('profiles.name_placeholder')"
-        class="flex-1 pl-6 h-full bg-transparent focus-visible:ring-0 focus-visible:outline-none min-w-0"
+        class="flex-1 pl-6 h-full bg-transparent focus-visible:ring-0 focus-visible:outline-none min-w-0 transition-colors"
         :class="{'font-semibold bg-zinc-300 hover:bg-zinc-200 text-black' : selected,
         'hover:bg-zinc-900 bg-opacity-50 text-muted-foreground': !selected}"
         @blur="onNameInputBlur">
@@ -19,7 +19,7 @@
         type="submit"
         :class="{'bg-zinc-200 hover:bg-zinc-100 text-black' : selected,
                 'hover:bg-opacity-100 bg-zinc-900 text-zinc-100 bg-opacity-50': !selected}"
-        class="flex h-full aspect-square justify-center items-center flex-shrink-0">
+        class="flex h-full aspect-square justify-center items-center flex-shrink-0 transition-colors  ">
         <Check class="h-4 w-4" />
       </button>
     </form>
@@ -27,7 +27,7 @@
       v-else
       :class="{'font-semibold bg-zinc-200 hover:bg-zinc-100 text-black' : selected,
       'hover:bg-zinc-900 bg-opacity-50 text-muted-foreground': !selected}"
-      class="flex-1 h-12 text-left whitespace-nowrap overflow-hidden text-ellipsis pr-4"
+      class="flex-1 h-12 text-left whitespace-nowrap overflow-hidden text-ellipsis pr-4 transition-colors"
       @click="!editing && $emit('select') && $refs.profileTitle.scramble()">
       <span class="ml-4 w-4 mr-2" :class="{'ml-4': !draggable}">
         <GripHorizontal
@@ -38,6 +38,7 @@
       </span>
       <ScrambleText
         ref="profileTitle"
+        class="transition-colors"
         :class="{'text-black': selected, 'text-muted-foreground': !selected}"
         :text="profile.name" />
       <span
@@ -51,7 +52,7 @@
         :class="{'bg-zinc-200 hover:bg-zinc-100 text-black' : selected,
                 'hover:bg-opacity-100 bg-zinc-900 text-zinc-100 bg-opacity-50': !selected,
                 'w-12' : hover && !editing}"
-        class="flex w-0 h-12 justify-center items-center flex-shrink-0"
+        class="flex w-0 h-12 justify-center items-center flex-shrink-0 transition-colors"
         @click="startEditing">
         <PenLine class="h-4 w-4" />
       </button>
@@ -59,7 +60,7 @@
         :class="{'bg-zinc-200 hover:bg-zinc-100 text-black' : selected,
                 'hover:bg-opacity-100 bg-zinc-900 text-zinc-100 bg-opacity-50': !selected,
                 'w-12' : hover && !editing}"
-        class="flex w-0 h-12 justify-center items-center flex-shrink-0"
+        class="flex w-0 h-12 justify-center items-center flex-shrink-0 transition-colors"
         @click="$emit('duplicate')">
         <Copy class="h-4 w-4" />
       </button>
@@ -67,7 +68,7 @@
         :class="{'bg-orange-600 hover:bg-orange-500 text-black' : selected,
                 'hover:bg-opacity-100 bg-orange-900 text-zinc-100 bg-opacity-50': !selected,
                 'w-12' : hover && !editing}"
-        class="flex w-0 h-12 justify-center items-center flex-shrink-0"
+        class="flex w-0 h-12 justify-center items-center flex-shrink-0 transition-colors"
         @click="confirmDelete=true">
         <Trash2 class="h-4 w-4" />
       </button>
@@ -77,7 +78,7 @@
         :class="{'bg-orange-600 hover:bg-orange-500 text-black' : selected,
                 'hover:bg-opacity-100 bg-orange-900 text-zinc-100 bg-opacity-50': !selected,
                 'w-12' : hover && !editing}"
-        class="flex w-0 h-12 justify-center items-center flex-shrink-0"
+        class="flex w-0 h-12 justify-center items-center flex-shrink-0 transition-colors"
         @click="$emit('delete', profile.id)">
         <Check class="h-4 w-4" />
       </button>
@@ -85,7 +86,7 @@
         :class="{'bg-zinc-200 hover:bg-zinc-100 text-black' : selected,
                 'hover:bg-opacity-100 bg-zinc-900 text-zinc-100 bg-opacity-50': !selected,
                 'w-12' : hover && !editing}"
-        class="flex w-0 h-12 justify-center items-center flex-shrink-0"
+        class="flex w-0 h-12 justify-center items-center flex-shrink-0 transition-colors"
         @click="confirmDelete=false">
         <X class="h-4 w-4" />
       </button>