From c8a5c74c719d9305e356be56a16b0ac7e17034db Mon Sep 17 00:00:00 2001
From: Vagner <vagner_domingues@hotmail.com>
Date: Sat, 12 Oct 2024 20:47:58 -0300
Subject: [PATCH] Refactor main container

---
 src/assets/main.css                                      | 4 ++++
 .../BuyConfirmedComponent/BuyConfirmedComponent.vue      | 9 +--------
 src/components/ListingComponent/ListingComponent.vue     | 8 ++------
 src/components/LoadingComponent/LoadingComponent.vue     | 6 +-----
 src/components/QrCodeComponent.vue                       | 6 +-----
 src/components/SearchComponent.vue                       | 6 +-----
 src/components/SellerSteps/SellerSearchComponent.vue     | 6 +-----
 src/components/SellerSteps/SendNetwork.vue               | 6 +-----
 src/components/SellerSteps/WantSellComponent.vue         | 6 +-----
 src/views/FaqView.vue                                    | 7 -------
 10 files changed, 13 insertions(+), 51 deletions(-)

diff --git a/src/assets/main.css b/src/assets/main.css
index 06401b6..bed2f2c 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -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;
+}
diff --git a/src/components/BuyConfirmedComponent/BuyConfirmedComponent.vue b/src/components/BuyConfirmedComponent/BuyConfirmedComponent.vue
index 0294d5b..c545e85 100644
--- a/src/components/BuyConfirmedComponent/BuyConfirmedComponent.vue
+++ b/src/components/BuyConfirmedComponent/BuyConfirmedComponent.vue
@@ -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;
diff --git a/src/components/ListingComponent/ListingComponent.vue b/src/components/ListingComponent/ListingComponent.vue
index 3ca10d4..48520db 100644
--- a/src/components/ListingComponent/ListingComponent.vue
+++ b/src/components/ListingComponent/ListingComponent.vue
@@ -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;
 }
diff --git a/src/components/LoadingComponent/LoadingComponent.vue b/src/components/LoadingComponent/LoadingComponent.vue
index 8881c6d..14ea7f6 100644
--- a/src/components/LoadingComponent/LoadingComponent.vue
+++ b/src/components/LoadingComponent/LoadingComponent.vue
@@ -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;
 }
diff --git a/src/components/QrCodeComponent.vue b/src/components/QrCodeComponent.vue
index 2e9357f..4eb338b 100644
--- a/src/components/QrCodeComponent.vue
+++ b/src/components/QrCodeComponent.vue
@@ -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;
 }
diff --git a/src/components/SearchComponent.vue b/src/components/SearchComponent.vue
index d91c508..56cd472 100644
--- a/src/components/SearchComponent.vue
+++ b/src/components/SearchComponent.vue
@@ -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;
 }
diff --git a/src/components/SellerSteps/SellerSearchComponent.vue b/src/components/SellerSteps/SellerSearchComponent.vue
index 60310d3..cc83e27 100644
--- a/src/components/SellerSteps/SellerSearchComponent.vue
+++ b/src/components/SellerSteps/SellerSearchComponent.vue
@@ -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;
 }
diff --git a/src/components/SellerSteps/SendNetwork.vue b/src/components/SellerSteps/SendNetwork.vue
index 6109d35..a01c3b5 100644
--- a/src/components/SellerSteps/SendNetwork.vue
+++ b/src/components/SellerSteps/SendNetwork.vue
@@ -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;
 }
diff --git a/src/components/SellerSteps/WantSellComponent.vue b/src/components/SellerSteps/WantSellComponent.vue
index 0acaa57..e10e64b 100644
--- a/src/components/SellerSteps/WantSellComponent.vue
+++ b/src/components/SellerSteps/WantSellComponent.vue
@@ -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;
 }
diff --git a/src/views/FaqView.vue b/src/views/FaqView.vue
index 7624e09..79dfa94 100644
--- a/src/views/FaqView.vue
+++ b/src/views/FaqView.vue
@@ -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>