From 8a45b3a9f8dff895e6e2bb91deb55d9b1c1372d3 Mon Sep 17 00:00:00 2001
From: Vagner <vagner_domingues@hotmail.com>
Date: Fri, 11 Oct 2024 17:53:12 -0300
Subject: [PATCH] Fix walletmenu using tailwind's and vue's best practices

---
 src/assets/chevron.svg           |  3 ++
 src/components/TopBar/TopBar.vue | 50 ++++++++++----------------------
 2 files changed, 18 insertions(+), 35 deletions(-)
 create mode 100644 src/assets/chevron.svg

diff --git a/src/assets/chevron.svg b/src/assets/chevron.svg
new file mode 100644
index 0000000..d5b4633
--- /dev/null
+++ b/src/assets/chevron.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="chevronDown" fill-rule="evenodd" clip-rule="evenodd" d="M1.64645 4.64645C1.84171 4.45118 2.15829 4.45118 2.35355 4.64645L8 10.2929L13.6464 4.64645C13.8417 4.45118 14.1583 4.45118 14.3536 4.64645C14.5488 4.84171 14.5488 5.15829 14.3536 5.35355L8.35355 11.3536C8.15829 11.5488 7.84171 11.5488 7.64645 11.3536L1.64645 5.35355C1.45118 5.15829 1.45118 4.84171 1.64645 4.64645Z" fill="currentColor"/>
+</svg>
diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index 696f939..3ab2524 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -314,7 +314,10 @@ onClickOutside(infoMenuRef, () => {
         <div class="flex flex-col">
           <div
             ref="walletAddressRef"
-            class="top-bar-info cursor-pointer 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': menuOpenToggle}"
+            @mouseover="menuHoverToggle = true"
+            @mouseout="menuHoverToggle = false"
             @click="
               [
                 (menuOpenToggle = !menuOpenToggle),
@@ -322,45 +325,22 @@ onClickOutside(infoMenuRef, () => {
                 (infoMenuOpenToggle = false),
               ]
             "
-            @mouseover="menuHoverToggle = true"
-            @mouseout="menuHoverToggle = false"
-            :style="{
-              backgroundColor: menuOpenToggle
-                ? '#F9F9F9'
-                : menuHoverToggle
-                ? '#F9F9F9'
-                : 'transparent',
-            }"
           >
             <img alt="Account image" src="@/assets/account.svg" />
             <span
-              class="default-text"
-              :style="{
-                color: menuOpenToggle
-                  ? '#000000'
-                  : menuHoverToggle
-                  ? '#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': menuOpenToggle}"
             >
               {{ formatWalletAddress() }}
             </span>
-            <img
-              class="text-gray-900"
-              v-if="!menuHoverToggle && !menuOpenToggle"
-              alt="Chevron Down"
-              src="@/assets/chevronDown.svg"
-            />
-            <img
-              v-if="menuOpenToggle"
-              alt="Chevron Up"
-              src="@/assets/chevronUp.svg"
-            />
-            <img
-              v-if="menuHoverToggle && !menuOpenToggle"
-              alt="Chevron Down Black"
-              src="@/assets/chevronDownBlack.svg"
-            />
+            <div
+              class="transition-all duration-500 ease-in-out mt-1"
+              :class="{'scale-y-[-1]': menuOpenToggle}"
+            >
+              <svg viewBox="0 0 16 16" class="h-4 w-4 text-white group-hover:text-gray-900" :class="{'!text-gray-900': menuOpenToggle}">
+                <use href="@/assets/chevron.svg#chevronDown"></use>
+              </svg>
+            </div>
           </div>
           <div
             v-show="menuOpenToggle"
@@ -506,7 +486,7 @@ header {
 }
 
 .top-bar-info {
-  @apply flex justify-between gap-2 px-4 py-2 border-amber-500 border-2 sm:rounded rounded-lg items-center;
+  @apply flex justify-between gap-2 px-4 py-2 border-amber-500 border-2 sm:rounded rounded-lg;
 }
 
 .redirect_button {