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

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

Browse Source
This commit is contained in:
Vagner 2024-10-11 17:53:12 -03:00
parent e6b5bc7748
commit 8a45b3a9f8
2 changed files with 18 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/assets/chevron.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 508 B

50
src/components/TopBar/TopBar.vue
View File

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