From 0cef35ab28194b905c642a07660bbd50da28106c Mon Sep 17 00:00:00 2001
From: RcleydsonR <rafael.cleydson@gmail.com>
Date: Fri, 30 Dec 2022 17:27:34 -0300
Subject: [PATCH] improve top bar currency menu

---
 .../SellerSteps/SellerSearchComponent.vue     |  1 -
 src/components/TopBar.vue                     | 75 +++++++++----------
 2 files changed, 37 insertions(+), 39 deletions(-)

diff --git a/src/components/SellerSteps/SellerSearchComponent.vue b/src/components/SellerSteps/SellerSearchComponent.vue
index f68d3b9..4fe8059 100644
--- a/src/components/SellerSteps/SellerSearchComponent.vue
+++ b/src/components/SellerSteps/SellerSearchComponent.vue
@@ -35,7 +35,6 @@ const decimalCount = (num: Number) => {
   }
   return 0;
 };
-
 </script>
 
 <template>
diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue
index a4767eb..28fb3e2 100644
--- a/src/components/TopBar.vue
+++ b/src/components/TopBar.vue
@@ -94,7 +94,7 @@ const closeMenu = () => {
           >
             <img alt="Ethereum image" src="@/assets/ethereum.svg" />
             <span
-              class="default-text group-hover:text-black"
+              class="default-text group-hover:text-gray-900"
               :style="{
                 color: currencyMenuOpenToggle
                   ? '#000000'
@@ -106,7 +106,7 @@ const closeMenu = () => {
               Ethereum
             </span>
             <img
-              class="text-black"
+              class="text-gray-900"
               v-if="!currencyMenuHoverToggle && !currencyMenuOpenToggle"
               alt="Chevron Down"
               src="@/assets/chevronDown.svg"
@@ -124,42 +124,38 @@ const closeMenu = () => {
           </div>
           <div
             v-show="currencyMenuOpenToggle"
-            class="mt-10 absolute w-full text-black"
+            class="mt-10 pl-3 absolute w-full text-gray-900"
           >
             <div class="mt-2">
               <div class="bg-white rounded-md z-10">
-                <div class="menu-button px-4 rounded-md cursor-pointer">
-                  <div class="flex justify-between">
-                    <img
-                      alt="Ethereum image"
-                      width="20"
-                      height="20"
-                      src="@/assets/ethereum.svg"
-                    />
-                    <span
-                      class="text-black py-4 text-end font-semibold text-xs"
-                    >
-                      Ethereum
-                    </span>
-                    <img alt="Chevron Down" src="@/assets/chevronDown.svg" />
-                  </div>
-                  <hr />
+                <div class="menu-button gap-2 px-4 rounded-md cursor-pointer">
+                  <img
+                    alt="Ethereum image"
+                    width="20"
+                    height="20"
+                    src="@/assets/ethereum.svg"
+                  />
+                  <span
+                    class="text-gray-900 py-4 text-end font-semibold text-sm"
+                  >
+                    Ethereum
+                  </span>
                 </div>
-                <div class="menu-button px-4 rounded-md cursor-pointer">
-                  <div class="flex justify-between">
-                    <img
-                      alt="Ethereum image"
-                      width="20"
-                      height="20"
-                      src="@/assets/polygon.svg"
-                    />
-                    <span
-                      class="text-black py-4 text-end font-semibold text-xs"
-                    >
-                      Polygon
-                    </span>
-                    <img alt="Chevron Down" src="@/assets/chevronDown.svg" />
-                  </div>
+                <div class="w-full flex justify-center">
+                  <hr class="w-4/5" />
+                </div>
+                <div class="menu-button gap-2 px-4 rounded-md cursor-pointer">
+                  <img
+                    alt="Polygon image"
+                    width="20"
+                    height="20"
+                    src="@/assets/polygon.svg"
+                  />
+                  <span
+                    class="text-gray-900 py-4 text-end font-semibold text-sm"
+                  >
+                    Polygon
+                  </span>
                   <hr />
                 </div>
               </div>
@@ -199,7 +195,7 @@ const closeMenu = () => {
               {{ formatWalletAddress() }}
             </span>
             <img
-              class="text-black"
+              class="text-gray-900"
               v-if="!menuHoverToggle && !menuOpenToggle"
               alt="Chevron Down"
               src="@/assets/chevronDown.svg"
@@ -215,12 +211,15 @@ const closeMenu = () => {
               src="@/assets/chevronDownBlack.svg"
             />
           </div>
-          <div v-show="menuOpenToggle" class="mt-10 absolute w-full text-black">
+          <div
+            v-show="menuOpenToggle"
+            class="mt-10 absolute w-full text-gray-900"
+          >
             <div class="pl-4 mt-2">
               <div class="bg-white rounded-md z-10">
                 <div class="menu-button" @click="closeMenu()">
                   <RouterLink to="/bid_history" class="redirect_button px-0">
-                    Histórico de compras
+                    Histórico de transações
                   </RouterLink>
                 </div>
                 <div class="w-full flex justify-center">
@@ -280,7 +279,7 @@ header {
 }
 
 .menu-button {
-  @apply flex text-center justify-center;
+  @apply flex text-center justify-center hover:bg-gray-200;
 }
 
 a:hover {