Refactor main container

This commit is contained in:
Vagner 2024-10-12 20:47:58 -03:00
parent 6516ae0509
commit c8a5c74c71
10 changed files with 13 additions and 51 deletions

View File

@ -25,3 +25,7 @@ a,
background-color: hsla(160, 100%, 37%, 0.2);
}
}
.main-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 border border-gray-500 backdrop-blur-md drop-shadow-lg shadow-lg mt-10;
}

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 w-1/3;
}
.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;

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;
}

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;
}

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"
>
@ -221,10 +221,6 @@ h2 {
@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-6;
}
input[type="number"] {
-moz-appearance: textfield;
}

View File

@ -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"
@ -314,10 +314,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;
}
input[type="number"] {
-moz-appearance: textfield;
}

View File

@ -46,7 +46,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"
>
@ -139,10 +139,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;
}

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 sm:w-1/3;
}
.last-deposit-info {
@apply font-medium text-base;
}

View File

@ -96,7 +96,7 @@ const handleButtonClick = 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"
@ -225,10 +225,6 @@ const handleButtonClick = 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 w-auto;
}
input[type="number"] {
-moz-appearance: textfield;
}

View File

@ -134,11 +134,4 @@ h4 {
.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 w-1/3;
}
.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 w-1/3;
}
</style>