From 180372bf0d09b30d83b3f07499eb60eee91de54d Mon Sep 17 00:00:00 2001
From: Robert Kossessa <github@kosro.de>
Date: Mon, 5 Feb 2024 13:09:31 +0100
Subject: [PATCH] UPD: Button consistency

---
 src/assets/main.css                       |  6 ++++++
 src/components/common/HSVInput.vue        |  6 +++---
 src/components/common/TabSelectButton.vue |  6 +++---
 src/components/profile/ProfileButton.vue  | 20 +++++++++++---------
 src/components/ui/slider/Slider.vue       |  2 +-
 5 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/src/assets/main.css b/src/assets/main.css
index 6689889..944ed52 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -25,4 +25,10 @@ body {
 
 ::-webkit-scrollbar-track { /* Background */
     background: var(--scrollbar-background);
+}
+
+::selection {
+    background: #c66936;
+    color: black;
+    text-shadow: none;
 }
\ No newline at end of file
diff --git a/src/components/common/HSVInput.vue b/src/components/common/HSVInput.vue
index 36d756e..ccc99a7 100644
--- a/src/components/common/HSVInput.vue
+++ b/src/components/common/HSVInput.vue
@@ -87,7 +87,7 @@
             class="relative h-2.5 w-full grow overflow-hidden rounded-full border-2 border-zinc-900"
             style="background: linear-gradient(90deg, rgba(255, 0, 0, 1) 0%, rgba(255, 154, 0, 1) 10%, rgba(208, 222, 33, 1) 20%, rgba(79, 220, 74, 1) 30%, rgba(63, 218, 216, 1) 40%, rgba(47, 201, 226, 1) 50%, rgba(28, 127, 238, 1) 60%, rgba(95, 21, 242, 1) 70%, rgba(186, 12, 248, 1) 80%, rgba(251, 7, 217, 1) 90%, rgba(255, 0, 0, 1) 100%)" />
           <SliderThumb
-            class="flex h-6 w-8 rounded-[8px] hover:bg-zinc-200 outline outline-zinc-100 bg-zinc-300 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 border border-zinc-100 bg-zinc-300 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: -3px 0 15px 0 rgba(0,0,0,0.6)">
             <MoreHorizontal class="h-full" />
           </SliderThumb>
@@ -101,7 +101,7 @@
             class="relative h-2.5 w-full grow overflow-hidden rounded-full border-2 border-zinc-900"
             :style="{background: `linear-gradient(90deg, hsl(0, 0%, ${saturationSliderColor.lightness()}%) 0%, hsl(${saturationSliderColor.hue()}, 100%, ${saturationSliderColor.lightness()}%) 100%)`}" />
           <SliderThumb
-            class="flex h-6 w-8 rounded-[8px] hover:bg-zinc-200 outline outline-zinc-100 bg-zinc-300 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 border border-zinc-100 bg-zinc-300 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: -3px 0 15px 0 rgba(0,0,0,0.6)">
             <MoreHorizontal class="h-full" />
           </SliderThumb>
@@ -115,7 +115,7 @@
             class="relative h-2.5 w-full grow overflow-hidden rounded-full border-2 border-zinc-900"
             :style="{background: `linear-gradient(90deg, black, ${valueSliderColor.hex()} 100%`}" />
           <SliderThumb
-            class="flex h-6 w-8 rounded-[8px] hover:bg-zinc-200 outline outline-zinc-100 bg-zinc-300 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 border border-zinc-100 bg-zinc-300 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: -3px 0 15px 0 rgba(0,0,0,0.6)">
             <MoreHorizontal class="h-full" />
           </SliderThumb>
diff --git a/src/components/common/TabSelectButton.vue b/src/components/common/TabSelectButton.vue
index 9c93faf..945413f 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-lg 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}"
+    class="flex-1 flex flex-col items-center rounded-lg p-2 gap-2 font-heading transition-all border"
+    :class="{'text-black bg-zinc-300 hover:bg-zinc-200 border-zinc-100': selected,
+          'hover:bg-zinc-800 text-muted-foreground border-transparent' : !selected}"
     @click="$emit('select'); $refs.title.scramble()">
     <slot v-if="$slots['replace']" name="replace" />
     <template v-else>
diff --git a/src/components/profile/ProfileButton.vue b/src/components/profile/ProfileButton.vue
index bf08505..ffd5efa 100644
--- a/src/components/profile/ProfileButton.vue
+++ b/src/components/profile/ProfileButton.vue
@@ -1,6 +1,7 @@
 <template>
   <div
     class="h-12 flex overflow-hidden rounded-lg m-2"
+    :class="{'border border-zinc-100 bg-zinc-300': selected}"
     @mouseenter="hover=true" @mouseleave="hover=false">
     <form
       v-if="nameEditable && editing"
@@ -10,7 +11,7 @@
       <input
         ref="profileNameInput" v-model="nameInput"
         onfocus="this.select()" :placeholder="$t('profiles.name_placeholder')"
-        class="flex-1 pl-6 h-full text-sm bg-transparent focus-visible:ring-0 focus-visible:outline-none min-w-0 transition-colors"
+        class="flex-1 pl-6 h-full rounded-r-lg text-sm bg-transparent focus-visible:ring-0 focus-visible:outline-none min-w-0 transition-all"
         :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 +20,7 @@
         type="submit"
         :class="{'bg-zinc-300 hover:bg-zinc-200 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 transition-colors  ">
+        class="flex h-full rounded-l-lg aspect-square justify-center items-center flex-shrink-0 transition-all">
         <Check class="h-4 w-4" />
       </button>
     </form>
@@ -27,7 +28,7 @@
       v-else
       :class="{'font-semibold bg-zinc-300 hover:bg-zinc-200 text-black' : selected,
       'hover:bg-zinc-900 bg-opacity-50 text-muted-foreground': !selected}"
-      class="flex-1 h-12 text-left text-sm whitespace-nowrap overflow-hidden text-ellipsis pr-4 transition-colors"
+      class="flex-1 h-12 rounded-r-lg text-left text-sm whitespace-nowrap overflow-hidden text-ellipsis pr-4 transition-all"
       @click="!editing && $emit('select') && $refs.profileTitle.scramble()">
       <span class="ml-4 w-4 mr-2" :class="{'ml-4': !draggable}">
         <GripHorizontal
@@ -52,15 +53,16 @@
         :class="{'bg-zinc-300 hover:bg-zinc-200 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 transition-colors"
+        class="flex w-0 h-12 rounded-l-lg justify-center items-center flex-shrink-0 transition-all"
         @click="startEditing">
         <PenLine class="h-4 w-4" />
       </button>
       <button
         :class="{'bg-zinc-300 hover:bg-zinc-200 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 transition-colors"
+                'w-12' : hover && !editing,
+                'rounded-l-lg': !nameEditable}"
+        class="flex w-0 h-12 justify-center items-center flex-shrink-0 transition-all"
         @click="$emit('duplicate')">
         <Copy class="h-4 w-4" />
       </button>
@@ -68,7 +70,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 transition-colors"
+        class="flex w-0 h-12 justify-center items-center flex-shrink-0 transition-all"
         @click="confirmDelete=true">
         <Trash2 class="h-4 w-4" />
       </button>
@@ -78,7 +80,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 transition-colors"
+        class="flex w-0 h-12 justify-center items-center flex-shrink-0 transition-all"
         @click="$emit('delete', profile.id)">
         <Check class="h-4 w-4" />
       </button>
@@ -86,7 +88,7 @@
         :class="{'bg-zinc-300 hover:bg-zinc-200 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 transition-colors"
+        class="flex w-0 h-12 justify-center items-center flex-shrink-0 transition-all"
         @click="confirmDelete=false">
         <X class="h-4 w-4" />
       </button>
diff --git a/src/components/ui/slider/Slider.vue b/src/components/ui/slider/Slider.vue
index 8a9dd74..8478c10 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] hover:bg-zinc-200 outline outline-zinc-100 bg-zinc-300 transition-all duration-75 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 border border-zinc-100 bg-zinc-300 transition-all duration-75 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: -3px 0 15px 0 rgba(0,0,0,0.6)">
       <MoreHorizontal class="h-full" />
     </SliderThumb>