improve top bar currency menu

This commit is contained in:
RcleydsonR 2022-12-30 17:27:34 -03:00
parent 43ba937a07
commit 0cef35ab28
2 changed files with 37 additions and 39 deletions

View File

@ -35,7 +35,6 @@ const decimalCount = (num: Number) => {
}
return 0;
};
</script>
<template>

View File

@ -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 {