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

Merge commit 'b61dfb2de05e494b66ffd1f99da8f8594782764c' into fix-token-dropdowns

Browse Source
This commit is contained in:
Filipe Soccol
2024-11-07 12:06:28 -03:00
parent 659db5ef04 b61dfb2de0
commit 9ddc843c01
19 changed files with 439 additions and 371 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/BuyConfirmedComponent/BuyConfirmedComponent.vue
View File

@@ -86,7 +86,7 @@ onMounted(async () => {
para a sua carteira!
</span>
</div>
<div class="blur-container">
<div class="main-container">
<div
class="flex flex-col w-full bg-white px-10 py-5 rounded-lg border-y-10"
>
@@ -145,13 +145,6 @@ p {
.text {
@apply text-white text-center;
}
.blur-container-row {
@apply flex flex-row justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-8 max-w-screen-sm;
}
.blur-container {
@apply flex w-full max-w-xs md:max-w-lg flex-col justify-center items-center px-8 py-6 gap-4 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-10;
}
.last-release-info {
@apply font-medium text-base text-gray-900;

80
src/components/CustomModal/CustomModal.vue
View File

@@ -17,50 +17,52 @@ if (props.isRedirectModal) {
</script>
<template>
<div
class="modal-overlay inset-0 fixed justify-center backdrop-blur-sm sm:backdrop-blur-none"
v-if="!isRedirectModal"
>
<div class="modal px-5 text-center">
<p
class="text-black tracking-tighter leading-tight my-6 mx-2 text-justify"
>
<strong>ATENÇÃO!</strong>
A transação só será processada após inserir o código de autenticação.
Caso contrário não conseguiremos comprovar o seu depósito e não será
possível transferir os tokens para sua carteira.
</p>
<button
@click="$emit('close-modal')"
class="border-2 border-solid border-amber-400 mt-2"
>
Entendi
</button>
</div>
</div>
<div
class="modal-overlay inset-0 fixed justify-center backdrop-blur-sm"
v-if="isRedirectModal"
>
<div class="modal px-5 text-center">
<p
class="text-black text-lg tracking-tighter leading-tight my-6 mx-2 text-justify font-semibold"
>
Retomar a última compra?
</p>
<div class="flex justify-around items-center px-2">
<div>
<div
class="modal-overlay inset-0 fixed justify-center backdrop-blur-sm sm:backdrop-blur-none"
v-if="!isRedirectModal"
>
<div class="modal px-5 text-center">
<p
class="text-black tracking-tighter leading-tight my-6 mx-2 text-justify"
>
<strong>ATENÇÃO!</strong>
A transação só será processada após inserir o código de autenticação.
Caso contrário não conseguiremos comprovar o seu depósito e não será
possível transferir os tokens para sua carteira.
</p>
<button
@click="$emit('close-modal')"
class="border-2 border-solid border-white-400 mt-2 font-semibold"
class="border-2 border-solid border-amber-400 mt-2"
>
Não
Entendi
</button>
<button
@click="$emit('go-to-lock')"
class="border-2 border-solid border-white-400 mt-2 font-semibold"
</div>
</div>
<div
class="modal-overlay inset-0 fixed justify-center backdrop-blur-sm"
v-if="isRedirectModal"
>
<div class="modal px-5 text-center">
<p
class="text-black text-lg tracking-tighter leading-tight my-6 mx-2 text-justify font-semibold"
>
Sim
</button>
Retomar a última compra?
</p>
<div class="flex justify-around items-center px-2">
<button
@click="$emit('close-modal')"
class="border-2 border-solid border-white-400 mt-2 font-semibold"
>
Não
</button>
<button
@click="$emit('go-to-lock')"
class="border-2 border-solid border-white-400 mt-2 font-semibold"
>
Sim
</button>
</div>
</div>
</div>
</div>

8
src/components/ListingComponent/ListingComponent.vue
View File

@@ -162,10 +162,10 @@ showInitialItems();
</script>
<template>
<div class="blur-container" v-if="loadingWalletTransactions">
<div class="main-container !w-full !max-w-full" v-if="loadingWalletTransactions">
<SpinnerComponent width="8" height="8"></SpinnerComponent>
</div>
<div class="blur-container" v-if="!loadingWalletTransactions">
<div class="main-container !w-full !max-w-full" v-if="!loadingWalletTransactions">
<div
class="w-full bg-white p-4 sm:p-6 rounded-lg"
v-if="props.validDeposits.length > 0"
@@ -389,10 +389,6 @@ p {
@apply text-white text-center;
}
.blur-container {
@apply flex flex-col justify-center items-center px-4 py-3 sm:px-8 sm:py-6 gap-4 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md w-auto;
}
.grid-container {
@apply grid grid-cols-4 grid-flow-row items-center px-8 py-6 gap-4 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-10 w-auto;
}

6
src/components/LoadingComponent/LoadingComponent.vue
View File

@@ -15,7 +15,7 @@ const props = defineProps({
{{ props.title ? props.title : "Confirme em sua carteira" }}
</span>
</div>
<div class="blur-container sm:w-[26rem] w-[20rem]">
<div class="main-container !sm:w-[26rem] !w-[20rem]">
<div
class="flex flex-col w-full bg-white sm:px-10 px-4 py-5 rounded-lg border-y-10"
>
@@ -60,10 +60,6 @@ const props = defineProps({
@apply text-white text-center;
}
.blur-container {
@apply flex flex-col justify-center items-center sm:px-8 px-6 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-10;
}
input[type="number"] {
-moz-appearance: textfield;
}

2
src/components/QrCodeComponent.vue
View File

@@ -97,7 +97,7 @@ onUnmounted(() => {
autenticação para enviar a transação para a rede.
</span>
</div>
<div class="blur-container sm:max-w-[28rem] max-w-[20rem] text-black">
<div class="main-container sm:max-w-[28rem] max-w-[20rem] text-black">
<div
class="flex-col items-center justify-center flex w-full bg-white sm:p-8 p-4 rounded-lg break-normal"
>

56
src/components/SearchComponent.vue
View File

@@ -126,7 +126,7 @@ const enableOrDisableConfirmButton = (): void => {
enableConfirmButton.value = true;
else if (
selectedRootstockDeposit.value &&
networkName.value == NetworkEnum.polygon
networkName.value != NetworkEnum.rootstock
)
enableConfirmButton.value = true;
else enableConfirmButton.value = false;
@@ -155,7 +155,7 @@ watch(walletAddress, (): void => {
tokens após realizar o Pix</span
>
</div>
<div class="blur-container">
<div class="main-container">
<div class="backdrop-blur -z-10 w-full h-full"></div>
<div
class="flex flex-col w-full bg-white sm:px-10 px-6 py-5 rounded-lg border-y-10"
@@ -172,7 +172,7 @@ watch(walletAddress, (): void => {
placeholder="0 "
step=".01"
/>
<div class="relative">
<div class="relative overflow-visible">
<button
ref="tokenDropdownRef"
class="flex flex-row items-center p-2 bg-gray-300 hover:bg-gray-200 focus:outline-indigo-800 focus:outline-2 rounded-3xl min-w-fit gap-2 transition-colors"
@@ -194,35 +194,37 @@ watch(walletAddress, (): void => {
alt="Chevron Down"
/>
</button>
<div
v-if="selectTokenToggle"
class="mt-2 w-[100px] text-gray-900 absolute"
>
<transition name="dropdown">
<div
class="bg-white rounded-xl z-10 border border-gray-300 drop-shadow-md shadow-md overflow-clip"
v-if="selectTokenToggle"
class="mt-2 text-gray-900 absolute right-0 z-50 w-full min-w-max"
>
<div
v-for="token in TokenEnum"
class="flex menu-button gap-2 px-4 cursor-pointer hover:bg-gray-300 transition-colors"
@click="handleSelectedToken(token)"
class="bg-white rounded-xl z-10 border border-gray-300 drop-shadow-md shadow-md overflow-clip"
>
<img
:alt="token + ' logo'"
width="20"
height="20"
:src="getTokenImage(token)"
/>
<span
class="text-gray-900 py-4 text-end font-semibold text-sm"
<div
v-for="token in TokenEnum"
class="flex menu-button gap-2 px-4 cursor-pointer hover:bg-gray-300 transition-colors"
@click="handleSelectedToken(token)"
>
{{ token }}
</span>
</div>
<div class="w-full flex justify-center">
<hr class="w-4/5" />
<img
:alt="token + ' logo'"
width="20"
height="20"
:src="getTokenImage(token)"
/>
<span
class="text-gray-900 py-4 text-end font-semibold text-sm"
>
{{ token }}
</span>
</div>
<div class="w-full flex justify-center">
<hr class="w-4/5" />
</div>
</div>
</div>
</div>
</transition>
</div>
</div>
<div class="custom-divide py-2 mb-2"></div>
@@ -315,10 +317,6 @@ watch(walletAddress, (): void => {
@apply text-white text-center;
}
.blur-container {
@apply flex flex-col justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 mt-10 max-w-screen-sm;
}
input[type="number"] {
-moz-appearance: textfield;
}

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

@@ -54,7 +54,7 @@ const handleInputEvent = (event: any): void => {
tokens após realizar o Pix</span
>
</div>
<div class="blur-container">
<div class="main-container">
<div
class="flex flex-col w-full bg-white px-10 py-5 rounded-lg border-y-10"
>
@@ -153,10 +153,6 @@ const handleInputEvent = (event: any): void => {
@apply text-white text-center;
}
.blur-container {
@apply flex flex-col justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-10;
}
input[type="number"] {
-moz-appearance: textfield;
}

6
src/components/SellerSteps/SendNetwork.vue
View File

@@ -26,7 +26,7 @@ const props = defineProps({
os tokens de volta.</span
>
</div>
<div class="blur-container">
<div class="main-container sm:w-1/3">
<div
class="flex flex-col w-full bg-white px-10 py-5 rounded-lg border-y-10"
>
@@ -75,10 +75,6 @@ p {
@apply text-white text-center;
}
.blur-container {
@apply flex flex-col justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-8 max-w-screen-sm;
}
.last-deposit-info {
@apply font-medium text-base;
}

70
src/components/SellerSteps/WantSellComponent.vue
View File

@@ -101,7 +101,7 @@ const handleSellClick = async (
envio da transação e confirme sua oferta.</span
>
</div>
<div class="blur-container">
<div class="main-container">
<div class="backdrop-blur -z-10 w-full h-full"></div>
<div
class="flex flex-col w-full bg-white sm:px-10 px-6 py-5 rounded-lg border-y-10"
@@ -111,15 +111,15 @@ const handleSellClick = async (
type="number"
v-model="offer"
class="border-none outline-none text-gray-900 sm:w-fit w-3/4"
v-bind:class="{
'font-semibold': offer != undefined,
'text-xl': offer != undefined,
:class="{
'!font-medium': offer !== undefined && offer !== '',
'text-xl': offer !== undefined && offer !== '',
}"
@input="debounce(handleInputEvent, 500)($event)"
placeholder="Digite sua oferta"
step=".01"
/>
<div class="relative">
<div class="relative overflow-visible">
<button
ref="tokenDropdownRef"
class="flex flex-row items-center p-2 bg-gray-300 hover:bg-gray-200 focus:outline-indigo-800 focus:outline-2 rounded-3xl min-w-fit gap-2 transition-colors"
@@ -133,44 +133,44 @@ const handleSellClick = async (
<span
class="text-gray-900 sm:text-lg text-md font-medium"
id="token"
>{{ selectedToken }}</span
>
<ChevronDown
class="pr-4 sm:pr-0 transition-all duration-500 ease-in-out invert"
{{ selectedToken }}
</span>
<img
class="text-gray-900 pr-4 sm:pr-0 transition-all duration-500 ease-in-out"
:class="{ 'scale-y-[-1]': selectTokenToggle }"
alt="Chevron Down"
/>
</button>
<div
v-if="selectTokenToggle"
class="mt-2 w-[100px] text-gray-900 absolute"
>
<transition name="dropdown">
<div
class="bg-white rounded-xl z-10 border border-gray-300 drop-shadow-md shadow-md overflow-clip"
v-if="selectTokenToggle"
class="mt-2 text-gray-900 absolute right-0 z-50 w-full min-w-max"
>
<div
v-for="token in TokenEnum"
:key="token"
class="flex menu-button gap-2 px-4 cursor-pointer hover:bg-gray-300 transition-colors"
@click="handleSelectedToken(token)"
class="bg-white rounded-xl z-10 border border-gray-300 drop-shadow-md shadow-md overflow-clip"
>
<img
:alt="token + ' logo'"
width="20"
height="20"
:src="getTokenImage(token)"
/>
<span
class="text-gray-900 py-4 text-end font-semibold text-sm"
<div
v-for="token in TokenEnum"
:key="token"
class="flex menu-button gap-2 px-4 cursor-pointer hover:bg-gray-300 transition-colors"
@click="handleSelectedToken(token)"
>
{{ token }}
</span>
</div>
<div class="w-full flex justify-center">
<hr class="w-4/5" />
<img
:alt="token + ' logo'"
width="20"
height="20"
:src="getTokenImage(token)"
/>
<span
class="text-gray-900 py-4 text-end font-semibold text-sm"
>
{{ token }}
</span>
</div>
</div>
</div>
</div>
</transition>
</div>
</div>
@@ -194,6 +194,10 @@ const handleSellClick = async (
type="text"
v-model="pixKey"
class="border-none outline-none sm:text-lg text-sm text-gray-900 w-fit"
:class="{
'!font-medium': pixKey !== undefined && pixKey !== '',
'text-xl': pixKey !== undefined && pixKey !== '',
}"
placeholder="Digite a chave Pix"
/>
</div>
@@ -241,10 +245,6 @@ const handleSellClick = async (
@apply text-white text-center;
}
.blur-container {
@apply flex flex-col justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 mt-10 max-w-screen-sm;
}
input[type="number"] {
-moz-appearance: textfield;
appearance: textfield;

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

@@ -113,82 +113,7 @@ onClickOutside(infoMenuRef, () => {
<div class="flex sm:gap-4 gap-2 items-center">
<div class="flex flex-col">
<div
v-show="infoMenuOpenToggle"
class="mt-10 absolute w-full text-gray-900 hidden md:inline-block"
>
<div class="mt-2">
<div class="bg-white rounded-md z-10 -left-32 w-52">
<div class="menu-button gap-2 px-4 rounded-md cursor-pointer">
<span class="text-gray-900 py-4 text-end font-semibold text-sm">
Documentação
</span>
</div>
<div class="w-full flex justify-center">
<hr class="w-4/5" />
</div>
<RouterLink
:to="'/faq'"
class="menu-button gap-2 px-4 rounded-md cursor-pointer"
>
<span
class="text-gray-900 py-4 text-end font-semibold text-sm whitespace-nowrap"
>
Perguntas frequentes
</span>
</RouterLink>
<div class="w-full flex justify-center">
<hr class="w-4/5" />
</div>
<div
class="sm:text-center sm:justify-center ml-8 sm:ml-0 gap-2 px-4 rounded-md float-right"
>
<div class="redirect_button">
<a
href="https://www.twitter.com/doiim"
target="_blank"
rel="noreferrer"
>
<TwitterIcon
alt="Twitter"
width="20"
height="20"
class="cursor-pointer"
/>
</a>
<a
href="https://www.linkedin.com/company/doiim/"
target="_blank"
rel="noreferrer"
>
<LinkedinIcon
alt="LinkedIn"
width="20"
height="20"
class="cursor-pointer"
/>
</a>
<a
href="https://www.github.com/doiim"
target="_blank"
rel="noreferrer"
>
<GithubIcon
alt="Github"
width="20"
height="20"
class="cursor-pointer"
/>
</a>
</div>
</div>
<div class="w-full flex justify-center">
<hr class="w-4/5" />
</div>
</div>
</div>
</div>
<div
<button
ref="infoMenuRef"
class="default-button hidden md:inline-block cursor-pointer"
@click="
@@ -200,16 +125,93 @@ onClickOutside(infoMenuRef, () => {
"
>
<h1
class="text-gray-50 font-semibold sm:text-base"
class="topbar-text topbar-link"
:style="{
'border-bottom': infoMenuOpenToggle
? '2px solid white'
: 'transparent',
: '2px solid transparent',
}"
>
Menu
</h1>
</div>
</button>
<transition name="dropdown">
<div
v-show="infoMenuOpenToggle"
class="mt-10 absolute w-full text-gray-900 lg-view"
>
<div class="mt-2">
<div class="bg-white rounded-md z-10 -left-36 w-52">
<div class="menu-button gap-2 px-4 rounded-md cursor-pointer">
<span
class="text-gray-900 py-4 text-end font-semibold text-sm"
>
Documentação
</span>
</div>
<div class="w-full flex justify-center">
<hr class="w-4/5" />
</div>
<RouterLink
:to="'/faq'"
class="menu-button gap-2 px-4 rounded-md cursor-pointer"
>
<span
class="text-gray-900 py-4 text-end font-semibold text-sm whitespace-nowrap"
>
Perguntas frequentes
</span>
</RouterLink>
<div class="w-full flex justify-center">
<hr class="w-4/5" />
</div>
<div
class="sm:text-center sm:justify-center ml-8 sm:ml-0 gap-2 px-4 rounded-md float-right"
>
<div class="redirect_button flex mr-4">
<div class="mr-6">
<a href="https://www.twitter.com/doiim">
<img
alt="Twitter"
width="20"
height="20"
src="@/assets/twitterIcon.svg"
class="cursor-pointer"
/>
</a>
</div>
<div class="mr-6">
<a href="https://www.linkedin.com/company/doiim/">
<img
alt="LinkedIn"
width="20"
height="20"
src="@/assets/linkedinIcon.svg"
class="cursor-pointer"
href="https://www.linkedin.com/company/doiim/"
/>
</a>
</div>
<div class="mr-6">
<a href="https://www.github.com/doiim">
<img
alt="Github"
width="20"
height="20"
src="@/assets/githubIcon.svg"
class="cursor-pointer"
/>
</a>
</div>
</div>
</div>
<div class="w-full flex justify-center">
<hr class="w-4/5" />
</div>
</div>
</div>
</div>
</transition>
</div>
<RouterLink
:to="'/faq'"
@@ -220,21 +222,26 @@ onClickOutside(infoMenuRef, () => {
</RouterLink>
<RouterLink
:to="sellerView ? '/' : '/seller'"
class="default-button sm:whitespace-normal whitespace-nowrap hidden md:inline-block"
class="default-button sm:whitespace-normal whitespace-nowrap lg-view w-40 sm:w-44 md:w-36"
>
{{ sellerView ? "Quero comprar" : "Quero vender" }}
<div class="topbar-text topbar-link text-center mx-auto inline-block">
{{ sellerView ? "Quero comprar" : "Quero vender" }}
</div>
</RouterLink>
<RouterLink
:to="sellerView ? '/' : '/seller'"
v-if="!walletAddress"
class="default-button sm:whitespace-normal whitespace-nowrap inline-block md:hidden"
class="default-button sm:whitespace-normal whitespace-nowrap sm-view w-40 sm:w-44 md:w-36"
>
{{ sellerView ? "Quero comprar" : "Quero vender" }}
<div class="topbar-text topbar-link text-center mx-auto inline-block">
{{ sellerView ? "Quero comprar" : "Quero vender" }}
</div>
</RouterLink>
<div class="flex flex-col" v-if="walletAddress">
<div class="flex flex-col relative" v-if="walletAddress">
<div
ref="currencyRef"
class="group 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': currencyMenuOpenToggle }"
@click="
[
(currencyMenuOpenToggle = !currencyMenuOpenToggle),
@@ -249,25 +256,36 @@ onClickOutside(infoMenuRef, () => {
height="24"
width="24"
/>
<span class="default-text hidden md:inline-block">
<span
class="default-text text-gray-50 group-hover:text-gray-900 transition-all duration-500 ease-in-out"
:class="{ '!text-gray-900': currencyMenuOpenToggle }"
>
{{ Networks[etherStore.networkName].chainName }}
</span>
<ChevronDown
class="pr-4 sm:pr-0 transition-all duration-300 ease-in-out"
<div
class="transition-all duration-500 ease-in-out mt-1"
:class="{ 'scale-y-[-1]': currencyMenuOpenToggle }"
alt="Chevron Down"
/>
>
<svg
viewBox="0 0 16 16"
class="h-4 w-4 text-white group-hover:text-gray-900"
:class="{ '!text-gray-900': currencyMenuOpenToggle }"
>
<use href="@/assets/chevron.svg#chevronDown"></use>
</svg>
</div>
</div>
<div
v-show="currencyMenuOpenToggle"
class="mt-10 pl-3 absolute w-full text-gray-900 hidden md:inline-block"
>
<div class="mt-2">
<div class="bg-white rounded-md z-10">
<transition name="dropdown">
<div
v-show="currencyMenuOpenToggle"
class="mt-10 absolute text-gray-900 lg-view min-w-max left-0"
>
<div
class="mt-2 bg-white rounded-md border border-gray-300 drop-shadow-md shadow-md overflow-clip"
>
<div
v-for="(chainData, network) in Networks"
:key="network"
class="menu-button gap-2 px-4 rounded-md cursor-pointer"
class="menu-button p-4 gap-2 cursor-pointer hover:bg-gray-200 flex items-center !justify-start whitespace-nowrap transition-colors duration-150 ease-in-out"
@click="networkChange(network)"
>
<img
@@ -275,8 +293,9 @@ onClickOutside(infoMenuRef, () => {
width="20"
height="20"
:src="getNetworkImage(NetworkEnum[network])"
class="mr-2 ml-1"
/>
<span class="text-gray-900 py-4 text-end font-semibold text-sm">
<span class="text-gray-900 font-semibold text-sm">
{{ chainData.chainName }}
</span>
</div>
@@ -285,7 +304,7 @@ onClickOutside(infoMenuRef, () => {
</div>
</div>
</div>
</div>
</transition>
</div>
<button
type="button"
@@ -304,10 +323,11 @@ onClickOutside(infoMenuRef, () => {
Conectar
</button>
<div v-if="walletAddress" class="account-info">
<div class="flex flex-col">
<div class="flex flex-col relative">
<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 }"
@click="
[
(menuOpenToggle = !menuOpenToggle),
@@ -316,41 +336,52 @@ onClickOutside(infoMenuRef, () => {
]
"
>
<Account alt="Account image" />
<span class="default-text">
<img alt="Account image" src="@/assets/account.svg" />
<span
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>
<ChevronDown
class="pr-4 sm:pr-0 transition-all duration-300 ease-in-out"
<div
class="transition-all duration-500 ease-in-out mt-1"
:class="{ 'scale-y-[-1]': menuOpenToggle }"
alt="Chevron Down"
/>
</div>
<div
v-show="menuOpenToggle"
class="mt-10 absolute w-full text-gray-900 hidden md:inline-block"
>
<div class="pl-4 mt-2">
<div class="bg-white rounded-md z-10">
<RouterLink
onclick="closeMenu()"
to="/manage_bids"
class="redirect_button menu-button"
>
Gerenciar Ofertas
</RouterLink>
<div class="w-full flex justify-center">
<hr class="w-4/5" />
</div>
<button
onclick="disconnectUser()"
class="redirect_button menu-button"
>
Desconectar
</button>
</div>
>
<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>
<transition name="dropdown">
<div
v-show="menuOpenToggle"
class="mt-10 absolute w-full text-gray-900 lg-view"
>
<div class="pl-4 mt-2">
<div
class="bg-white rounded-md z-10 border border-gray-300 drop-shadow-md shadow-md overflow-clip"
>
<div class="menu-button" @click="closeMenu()">
<RouterLink to="/manage_bids" class="redirect_button">
Gerenciar Ofertas
</RouterLink>
</div>
<div class="w-full flex justify-center">
<hr class="w-4/5" />
</div>
<div class="menu-button" @click="disconnectUser">
<RouterLink to="/" class="redirect_button">
Desconectar
</RouterLink>
</div>
</div>
</div>
</div>
</transition>
</div>
</div>
</div>
@@ -450,6 +481,13 @@ header {
@apply sm:px-4 px-3 py-2 rounded text-gray-50 font-semibold sm:text-base text-xs hover:bg-transparent;
}
.topbar-text {
@apply text-gray-50 font-semibold sm:text-base mt-0.5 transition-all duration-500;
}
.topbar-link {
@apply mt-0.5 hover:border-b-2 border-b-2 border-transparent hover:!border-white;
}
.account-info {
@apply flex items-center gap-6;
}
@@ -459,7 +497,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 items-center gap-2 px-4 py-2 border-amber-500 border-2 sm:rounded rounded-lg;
}
.redirect_button {
@@ -474,9 +512,26 @@ a:hover {
@apply bg-gray-200 rounded;
}
.lg-view {
display: inline-block;
}
.sm-view {
display: none;
}
.mobile-menu {
margin-top: 1400px;
bottom: 0px;
height: auto;
}
@media screen and (max-width: 500px) {
.lg-view {
display: none;
}
.sm-view {
display: inline-block;
}
}
</style>