Fix walletmenu using tailwind's and vue's best practices

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>

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"
+              class="default-text text-gray-50 group-hover:text-gray-900 transition-all duration-500 ease-in-out"
-              :style="{
+              :class="{'!text-gray-900': menuOpenToggle}"
-                color: menuOpenToggle
-                  ? '#000000'
-                  : menuHoverToggle
-                  ? '#000000'
-                  : 'rgb(249 250 251)',
-              }"
             >
               {{ formatWalletAddress() }}
             </span>
-            <img
+            <div
-              class="text-gray-900"
+              class="transition-all duration-500 ease-in-out mt-1"
-              v-if="!menuHoverToggle && !menuOpenToggle"
+              :class="{'scale-y-[-1]': menuOpenToggle}"
-              alt="Chevron Down"
+            >
-              src="@/assets/chevronDown.svg"
+              <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>
-            <img
+              </svg>
-              v-if="menuOpenToggle"
+            </div>
-              alt="Chevron Up"
-              src="@/assets/chevronUp.svg"
-            />
-            <img
-              v-if="menuHoverToggle && !menuOpenToggle"
-              alt="Chevron Down Black"
-              src="@/assets/chevronDownBlack.svg"
-            />
           </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 {