From 85d485bfdc8d1ad8807f26d16559b31255cfee9a Mon Sep 17 00:00:00 2001
From: Valentin Kaelin <kalanehd@gmail.com>
Date: Tue, 25 Aug 2020 15:15:20 +0200
Subject: [PATCH] feat(search): add times icon to delete current search text

---
 client/src/components/Form/SearchForm.vue     | 20 +++++++++----------
 .../components/Form/SearchFormDropdown.vue    | 14 +++++++++++--
 2 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/client/src/components/Form/SearchForm.vue b/client/src/components/Form/SearchForm.vue
index 9423b50..c86e24e 100644
--- a/client/src/components/Form/SearchForm.vue
+++ b/client/src/components/Form/SearchForm.vue
@@ -11,16 +11,6 @@
       class="fixed inset-0 z-20 bg-gray-900"
     ></div>
     <div class="relative w-full">
-      <button
-        v-if="homepage"
-        ref="submit"
-        class="absolute right-0 z-40 w-12 h-full hover:text-teal-200"
-        type="submit"
-      >
-        <svg class="absolute w-4 h-4 vertical-center horizontal-center">
-          <use xlink:href="#search" />
-        </svg>
-      </button>
       <input
         v-if="homepage"
         ref="input"
@@ -32,6 +22,16 @@
         type="text"
         placeholder="Search summoner"
       />
+      <button
+        v-if="homepage"
+        ref="submit"
+        class="absolute right-0 z-40 w-12 h-full hover:text-teal-200"
+        type="submit"
+      >
+        <svg class="absolute w-4 h-4 vertical-center horizontal-center">
+          <use xlink:href="#search" />
+        </svg>
+      </button>
       <button
         v-if="!homepage"
         @click="open = true"
diff --git a/client/src/components/Form/SearchFormDropdown.vue b/client/src/components/Form/SearchFormDropdown.vue
index e4c352f..955bb48 100644
--- a/client/src/components/Form/SearchFormDropdown.vue
+++ b/client/src/components/Form/SearchFormDropdown.vue
@@ -6,7 +6,7 @@
     <div class="shadow">
       <div class="pt-3">
         <div v-if="!homepage" class="relative px-3 bypass-click">
-          <button class="absolute w-12 h-full text-blue-300 hover:text-white" type="submit">
+          <button class="absolute w-12 h-full text-blue-200 hover:text-white" type="submit">
             <svg class="absolute w-4 h-4 vertical-center horizontal-center">
               <use xlink:href="#search" />
             </svg>
@@ -15,11 +15,21 @@
             ref="input"
             @input="$emit('input', $event.target.value)"
             :value="value"
-            class="w-full px-12 py-2 pr-4 placeholder-blue-200 placeholder-opacity-75 bg-blue-700 border border-blue-500 rounded-md outline-none focus:bg-blue-760 summoner-input"
+            class="w-full py-2 pl-12 pr-32 placeholder-blue-200 placeholder-opacity-75 bg-blue-700 border border-blue-500 rounded-md outline-none focus:bg-blue-760 summoner-input"
             type="text"
             placeholder="Search summoner"
             spellcheck="false"
           />
+          <button
+            v-if="!homepage && value.length"
+            @click="$emit('input', '')"
+            class="absolute right-0 flex items-center justify-center p-1 mr-24 text-blue-200 rounded-full vertical-center hover:text-white"
+            type="button"
+          >
+            <svg class="w-4 h-4">
+              <use xlink:href="#times" />
+            </svg>
+          </button>
           <div v-if="!homepage" ref="region-dropdown">
             <SearchFormRegion @toggle="toggle" :dropdown="dropdown" :homepage="homepage" />
           </div>