hueso/P2Pix-Front-End
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve top bar currency menu

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/SellerSteps/SellerSearchComponent.vue
View File

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

75
src/components/TopBar.vue
View File

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