From 3cf9cd0cac9d702b07bf7a003328a70ab1c70433 Mon Sep 17 00:00:00 2001
From: Vagner <vagner_domingues@hotmail.com>
Date: Fri, 11 Oct 2024 18:39:51 -0300
Subject: [PATCH] Fix currencymenu using tailwind's and vue's best practices

---
 src/components/TopBar/TopBar.vue | 50 ++++++++++----------------------
 1 file changed, 15 insertions(+), 35 deletions(-)

diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index 3ab2524..4c5cd85 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -213,7 +213,10 @@ onClickOutside(infoMenuRef, () => {
       <div class="flex flex-col" v-if="walletAddress">
         <div
           ref="currencyRef"
-          class="group top-bar-info cursor-pointer hover:bg-white h-10"
+          class="top-bar-info cursor-pointer h-10 group hover:bg-gray-50 transition-all duration-500 ease-in-out"
+          :class="{'bg-gray-50': currencyMenuOpenToggle}"
+          @mouseover="currencyMenuHoverToggle = true"
+          @mouseout="currencyMenuHoverToggle = false"
           @click="
             [
               (currencyMenuOpenToggle = !currencyMenuOpenToggle),
@@ -221,15 +224,6 @@ onClickOutside(infoMenuRef, () => {
               (infoMenuOpenToggle = false),
             ]
           "
-          @mouseover="currencyMenuHoverToggle = true"
-          @mouseout="currencyMenuHoverToggle = false"
-          :style="{
-            backgroundColor: currencyMenuOpenToggle
-              ? '#F9F9F9'
-              : currencyMenuHoverToggle
-              ? '#F9F9F9'
-              : 'transparent',
-          }"
         >
           <img
             alt="Choosed network image"
@@ -238,33 +232,19 @@ onClickOutside(infoMenuRef, () => {
             width="24"
           />
           <span
-            class="default-text group-hover:text-gray-900 lg-view"
-            :style="{
-              color: currencyMenuOpenToggle
-                ? '#000000'
-                : currencyMenuHoverToggle
-                ? '#000000'
-                : 'rgb(249 250 251)',
-            }"
+            class="default-text text-gray-50 group-hover:text-gray-900 transition-all duration-500 ease-in-out"
+            :class="{'!text-gray-900': currencyMenuOpenToggle}"
           >
             {{ Networks[etherStore.networkName].chainName }}
           </span>
-          <img
-            class="text-gray-900"
-            v-if="!currencyMenuHoverToggle && !currencyMenuOpenToggle"
-            alt="Chevron Down"
-            src="@/assets/chevronDown.svg"
-          />
-          <img
-            v-if="currencyMenuOpenToggle"
-            alt="Chevron Up"
-            src="@/assets/chevronUp.svg"
-          />
-          <img
-            v-if="currencyMenuHoverToggle && !currencyMenuOpenToggle"
-            alt="Chevron Down Black"
-            src="@/assets/chevronDownBlack.svg"
-          />
+          <div
+            class="transition-all duration-500 ease-in-out mt-1"
+            :class="{'scale-y-[-1]': currencyMenuOpenToggle}"
+          >
+            <svg viewBox="0 0 16 16" class="h-4 w-4 text-white group-hover:text-gray-900" :class="{'!text-gray-900': currencyMenuOpenToggle}">
+              <use href="@/assets/chevron.svg#chevronDown"></use>
+            </svg>
+          </div>
         </div>
         <div
           v-show="currencyMenuOpenToggle"
@@ -523,4 +503,4 @@ a:hover {
     display: inline-block;
   }
 }
-</style>
+</style>
\ No newline at end of file