From fa78897b5e62448484b5dcd54772dc7c4b0d43c0 Mon Sep 17 00:00:00 2001
From: enzoggqs <eggqsaraiva@gmail.com>
Date: Wed, 1 Feb 2023 12:29:09 -0300
Subject: [PATCH] Fix mobile screen

---
 src/components/SearchComponent.vue               | 15 ++++++++++-----
 src/components/SellerSteps/WantSellComponent.vue | 15 +++++++++++----
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/src/components/SearchComponent.vue b/src/components/SearchComponent.vue
index 984bebc..e250dc8 100644
--- a/src/components/SearchComponent.vue
+++ b/src/components/SearchComponent.vue
@@ -115,7 +115,7 @@ watch(networkName, (): void => {
   <div class="page">
     <div class="text-container">
       <span
-        class="text font-extrabold sm:text-5xl text-3xl sm:max-w-[29rem] msx-w-[20rem]"
+        class="text font-extrabold sm:text-5xl text-3xl sm:max-w-[29rem] max-w-[20rem]"
       >
         Adquira cripto com apenas um Pix</span
       >
@@ -125,13 +125,14 @@ watch(networkName, (): void => {
       >
     </div>
     <div class="blur-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"
       >
         <div class="flex justify-between sm:w-full items-center">
           <input
             type="number"
-            class="border-none outline-none text-lg text-gray-900 w-2/6"
+            class="border-none outline-none text-lg text-gray-900 w-3/4"
             v-bind:class="{
               'font-semibold': tokenValue != undefined,
               'text-xl': tokenValue != undefined,
@@ -143,8 +144,12 @@ watch(networkName, (): void => {
           <div
             class="flex flex-row p-2 px-3 bg-gray-300 rounded-3xl min-w-fit gap-1"
           >
-            <img alt="Token image" class="w-fit" src="@/assets/brz.svg" />
-            <span class="text-gray-900 text-lg w-fit" id="brz">BRZ</span>
+            <img
+              alt="Token image"
+              class="sm:w-fit w-4"
+              src="@/assets/brz.svg"
+            />
+            <span class="text-gray-900 sm:text-lg text-md w-fit" id="brz">BRZ</span>
           </div>
         </div>
 
@@ -221,7 +226,7 @@ watch(networkName, (): void => {
 }
 
 .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;
+  @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"] {
diff --git a/src/components/SellerSteps/WantSellComponent.vue b/src/components/SellerSteps/WantSellComponent.vue
index 92033d7..76ceba9 100644
--- a/src/components/SellerSteps/WantSellComponent.vue
+++ b/src/components/SellerSteps/WantSellComponent.vue
@@ -56,6 +56,7 @@ const handleButtonClick = async (
       >
     </div>
     <div class="blur-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"
       >
@@ -63,7 +64,7 @@ const handleButtonClick = async (
           <input
             type="number"
             v-model="offer"
-            class="border-none outline-none sm:text-lg text-sm text-gray-900 sm:w-fit w-1/2"
+            class="border-none outline-none sm:text-lg text-sm text-gray-900 sm:w-fit w-3/4"
             v-bind:class="{
               'font-semibold': offer != undefined,
               'text-xl': offer != undefined,
@@ -75,8 +76,14 @@ const handleButtonClick = async (
           <div
             class="flex flex-row p-2 px-3 bg-gray-300 rounded-3xl min-w-fit gap-1"
           >
-            <img alt="Token image" class="w-fit" src="@/assets/brz.svg" />
-            <span class="text-gray-900 text-lg w-fit" id="brz">BRZ</span>
+            <img
+              alt="Token image"
+              class="sm:w-fit w-4"
+              src="@/assets/brz.svg"
+            />
+            <span class="text-gray-900 sm:text-lg text-md w-fit" id="brz">
+              BRZ
+            </span>
           </div>
         </div>
 
@@ -135,7 +142,7 @@ const handleButtonClick = async (
 }
 
 .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 w-auto;
+  @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"] {