From 15099c602fbaf0433bbbcfae69d0f1efe35ab919 Mon Sep 17 00:00:00 2001
From: Vagner <vagner_domingues@hotmail.com>
Date: Fri, 11 Oct 2024 11:58:25 -0300
Subject: [PATCH] Add chevron animation when selection is opened

---
 src/components/SearchComponent.vue               | 5 +++--
 src/components/SellerSteps/WantSellComponent.vue | 5 +++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/SearchComponent.vue b/src/components/SearchComponent.vue
index 5cc6885..ab42362 100644
--- a/src/components/SearchComponent.vue
+++ b/src/components/SearchComponent.vue
@@ -175,7 +175,7 @@ watch(walletAddress, (): void => {
           <div class="relative">
             <button
               ref="tokenDropdownRef"
-              class="flex flex-row items-center p-2 bg-gray-300 rounded-3xl min-w-fit gap-2"
+              class="flex flex-row items-center p-2 bg-gray-300 hover:bg-gray-200 focus:outline-indigo-800 focus:outline-2 rounded-3xl min-w-fit gap-2 transition-colors"
               @click="openTokenSelection()"
             >
               <img
@@ -187,7 +187,8 @@ watch(walletAddress, (): void => {
                 selectedToken
               }}</span>              
               <img
-                class="text-gray-900"
+                class="text-gray-900 pr-4 sm:pr-0 transition-all duration-500 ease-in-out"
+                :class="{'scale-y-[-1]': selectTokenToggle}"
                 alt="Chevron Down"
                 src="@/assets/chevronDownBlack.svg"
               />
diff --git a/src/components/SellerSteps/WantSellComponent.vue b/src/components/SellerSteps/WantSellComponent.vue
index 29980a2..6e3243f 100644
--- a/src/components/SellerSteps/WantSellComponent.vue
+++ b/src/components/SellerSteps/WantSellComponent.vue
@@ -117,7 +117,7 @@ const handleButtonClick = async (
           <div class="relative">
             <button
               ref="tokenDropdownRef"
-              class="flex flex-row items-center p-2 bg-gray-300 rounded-3xl min-w-fit gap-2"
+              class="flex flex-row items-center p-2 bg-gray-300 hover:bg-gray-200 focus:outline-indigo-800 focus:outline-2 rounded-3xl min-w-fit gap-2 transition-colors"
               @click="openTokenSelection()"
             >
               <img
@@ -129,7 +129,8 @@ const handleButtonClick = async (
                 selectedToken
               }}</span>
               <img
-                class="text-gray-900 pr-4 sm:pr-0"
+                class="text-gray-900 pr-4 sm:pr-0 transition-all duration-500 ease-in-out"
+                :class="{'scale-y-[-1]': selectTokenToggle}"
                 alt="Chevron Down"
                 src="@/assets/chevronDownBlack.svg"
               />