From 3670eb873653febdf413d62e9d9ee3795a54ab9c Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Fri, 21 Feb 2025 02:10:49 +0100
Subject: [PATCH] Add reset btn and changed icon sizes

---
 src/components/screens/Characters.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/screens/Characters.vue b/src/components/screens/Characters.vue
index 846fa72..8fc4405 100644
--- a/src/components/screens/Characters.vue
+++ b/src/components/screens/Characters.vue
@@ -58,7 +58,14 @@
               <div class="flex flex-col gap-3 w-full">
                 <span class="text-sm">Hair color</span>
                 <div class="flex gap-2 flex-wrap">
-                  <input type="radio" name="hair-color" v-for="color in uniqueHairColors" class="w-6 h-6 m-0 rounded-sm hover:cursor-pointer checked:outline checked:outline-1 checked:outline-white" :style="getHairColorStyle(color)" @click="handleHairColorChange(color)" />
+                  <div class="hair-deselect relative flex justify-center items-center bg-gray default-border w-[18px] h-[18px] p-2 rounded-sm hover:bg-gray-500 hover:border-gray-400 focus-visible:outline-none focus-visible:border-white focus-visible:bg-cyan has-[:checked]:bg-cyan has-[:checked]:border-transparent">
+                    <img src="/assets/icons/x-button-gray.svg" class="w-4 h-4" alt="Empty button" />
+                    <input type="radio" name="hair-color" :value="null" v-model="selectedHairColor" class="h-full w-full absolute left-0 top-0 m-0 z-10 hover:cursor-pointer focus-visible:outline-offset-0 focus-visible:outline-white" />
+                  </div>
+                  <div v-for="color in uniqueHairColors" class="relative flex justify-center items-center default-border w-[18px] h-[18px] p-2 rounded-sm hover:bg-gray-500 hover:border-gray-400 focus-visible:outline-none focus-visible:border-gray-300 focus-visible:bg-gray-500 has-[:checked]:bg-cyan has-[:checked]:border-transparent">
+                    <div class="w-full h-full rounded-sm" :style="getHairColorStyle(color)"></div>
+                    <input type="radio" name="hair-color" :value="color" v-model="selectedHairColor" class="h-full w-full absolute left-0 top-0 m-0 z-10 hover:cursor-pointer focus-visible:outline-offset-0 focus-visible:outline-white" />
+                  </div>
                 </div>
               </div>
               <div class="flex flex-col gap-3 w-full">