Add responsive desing in buyer view

src/assets/logo2.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="16" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.32352 0C3.37332 0 4.26027 0.697928 4.54816 1.65467C5.65322 1.73319 6.71174 2.21301 7.494 3.00109L11.7165 7.22065C11.731 7.23519 11.7485 7.24973 11.763 7.26718L16.3926 11.8939C16.9567 12.4609 17.7361 12.7837 18.5329 12.7837C18.5358 12.7837 18.5387 12.7837 18.5416 12.7837H18.7975C19.1465 11.9433 19.9753 11.353 20.9437 11.353C22.2261 11.353 23.2672 12.394 23.2672 13.6765C23.2672 14.9589 22.2261 16 20.9437 16C19.9084 16 19.036 15.3253 18.7336 14.3889H18.5445C18.5416 14.3889 18.5358 14.3889 18.5329 14.3889C17.3144 14.3889 16.1221 13.8946 15.2643 13.0309L11.0244 8.79099C11.0069 8.77644 10.9866 8.7619 10.9691 8.74446L6.35405 4.12941C5.84806 3.6205 5.16467 3.30934 4.44929 3.25118C4.0916 4.07125 3.27445 4.64413 2.32061 4.64413C1.04108 4.64413 0 3.60596 0 2.32352C0 1.04108 1.04108 0 2.32352 0Z" fill="#F9FAFB"/>
+<path d="M2.32352 11.3531C3.29189 11.3531 4.11778 11.9434 4.46965 12.7838H4.72555C4.72846 12.7838 4.73137 12.7838 4.73428 12.7838C5.53399 12.7838 6.31334 12.461 6.87459 11.894L9.63722 9.13135L10.7684 10.2626L8.00291 13.0281C7.14213 13.8918 5.95274 14.3862 4.73428 14.3862C4.73137 14.3862 4.72555 14.3862 4.72265 14.3862H4.53362C4.2341 15.3196 3.35878 15.9972 2.32352 15.9972C1.04108 15.9972 0 14.9561 0 13.6737C0 12.3913 1.04108 11.3531 2.32352 11.3531Z" fill="#F9FAFB"/>
+<path d="M20.9405 4.64413C19.9722 4.64413 19.1463 4.0538 18.7944 3.21338H18.5385C18.5356 3.21338 18.5327 3.21338 18.5298 3.21338C17.7301 3.21338 16.9507 3.53617 16.3895 4.10324L13.6268 6.86587L12.4956 5.73464L15.2611 2.9691C16.1219 2.10542 17.3113 1.61105 18.5298 1.61105C18.5327 1.61105 18.5385 1.61105 18.5414 1.61105H18.7304C19.0329 0.674664 19.9082 0 20.9405 0C22.223 0 23.2641 1.04108 23.2641 2.32352C23.2641 3.60596 22.223 4.64413 20.9405 4.64413Z" fill="#F9FAFB"/>
+</svg>

src/components/AttentionModal.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+const props = defineProps({
+  showModal: Boolean,
+});
+</script>
+
+<template>
+  <div class="modal-overlay">
+    <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>
+</template>
+
+<style scoped>
+
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  backdrop-filter: blur(5px);
+}
+
+.modal {
+  background-color: white;
+  height: 250px;
+  width: 300px;
+  margin-top: 50%;
+  border-radius: 10px;
+}
+.close {
+  cursor: pointer;
+}
+
+.close-img {
+  width: 25px;
+}
+
+.check {
+  width: 150px;
+}
+
+h6 {
+  font-weight: 500;
+  font-size: 28px;
+  margin: 20px 0;
+}
+
+p {
+  font-size: 16px;
+}
+
+button {
+  width: 100px;
+  height: 40px;
+  color: black;
+  font-size: 14px;
+  border-radius: 10px;
+}
+
+</style>

src/components/LoadingComponent.vue

@@ -9,16 +9,18 @@ const props = defineProps({
 <template>
   <div class="page">
     <div class="text-container">
-      <span class="text font-bold text-3xl max-w-[29rem]">{{
+      <span
-        props.title ? props.title : "Confirme em sua carteira"
+        class="text font-bold sm:text-3xl text-2xl sm:max-w-[29rem] msx-w-[20rem]"
-      }}</span>
+      >
+        {{ props.title ? props.title : "Confirme em sua carteira" }}
+      </span>
     </div>
-    <div class="blur-container w-[26rem]">
+    <div class="blur-container sm:w-[26rem] w-[20rem]">
       <div
-        class="flex flex-col w-full bg-white px-10 py-5 rounded-lg border-y-10"
+        class="flex flex-col w-full bg-white sm:px-10 px-4 py-5 rounded-lg border-y-10"
       >
         <div
-          class="flex flex-col text-center justify-center w-full items-center p-2 px-3 rounded-3xl min-w-fit gap-1"
+          class="flex flex-col text-center justify-center w-full items-center p-2 px-3 rounded-3xl lg:min-w-fit gap-1"
         >
           <img
             alt="Polygon image"
@@ -26,7 +28,7 @@ const props = defineProps({
             width="96"
             height="48"
           />
-          <span class="text-black font-medium text-sm px-12 mt-4">
+          <span class="text-black font-medium text-sm lg:px-12 px-4 mt-4">
             {{ $props.message }}
           </span>
         </div>
@@ -59,7 +61,7 @@ const props = defineProps({
 }
 
 .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 sm:px-8 px-6 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-10;
 }
 
 input[type="number"] {

src/components/QrCodeComponent.vue

@@ -3,6 +3,7 @@ import { pix } from "../utils/QrCodePix";
 import { ref } from "vue";
 import { debounce } from "@/utils/debounce";
 import CustomButton from "./CustomButton.vue";
+import AttentionModal from "./AttentionModal.vue";
 import api from "../services/index";
 
 // props and store references
@@ -15,6 +16,7 @@ const qrCode = ref<string>("");
 const qrCodePayload = ref<string>("");
 const isPixValid = ref<boolean>(false);
 const isCodeInputEmpty = ref<boolean>(true);
+const showModal = ref<boolean>(true);
 const e2eId = ref<string>("");
 
 // Emits
@@ -71,19 +73,19 @@ const validatePix = async (): Promise<void> => {
 <template>
   <div class="page">
     <div class="text-container">
-      <span class="text font-extrabold text-2xl max-w-[30rem]">
+      <span class="text font-extrabold lg:text-2xl text-xl sm:max-w-[30rem] max-w-[24rem]">
         Utilize o QR Code ou copie o código para realizar o Pix
       </span>
-      <span class="text font-medium text-md max-w-[28rem]">
+      <span class="text font-medium lg:text-md text-sm max-w-[28rem]">
         Após realizar o Pix no banco de sua preferência, insira o código de
         autenticação para enviar a transação para a rede.
       </span>
     </div>
-    <div class="blur-container max-w-[28rem] text-black">
+    <div class="blur-container sm:max-w-[28rem] max-w-[20rem] text-black">
       <div
-        class="flex-col items-center justify-center flex w-full bg-white p-8 rounded-lg break-normal"
+        class="flex-col items-center justify-center flex w-full bg-white sm:p-8 p-4 rounded-lg break-normal"
       >
-        <img :src="qrCode" class="w-48 h-48" />
+        <img :src="qrCode" class="sm:w-48 sm:h-48 w-40 h-40" />
         <span class="text-center font-bold">Código pix</span>
         <div class="break-words w-4/5">
           <span class="text-center text-xs">
@@ -95,9 +97,9 @@ const validatePix = async (): Promise<void> => {
           src="@/assets/copyPix.svg"
           width="16"
           height="16"
-          class="pt-2 mb-5 cursor-pointer"
+          class="pt-2 lg:mb-5 cursor-pointer"
         />
-        <span class="text-xs text-start">
+        <span class="text-xs text-start lg-view">
           <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
@@ -111,7 +113,7 @@ const validatePix = async (): Promise<void> => {
           type="text"
           placeholder="Digite o código do comprovante PIX"
           @input="debounce(handleInputEvent, 500)($event)"
-          class="text-md w-full box-border p-2 h-6 mb-2 outline-none"
+          class="sm:text-md text-sm w-full box-border p-2 sm:h-6 h-2 mb-2 outline-none"
         />
         <div class="custom-divide" v-if="!isCodeInputEmpty"></div>
         <div
@@ -150,6 +152,7 @@ const validatePix = async (): Promise<void> => {
         @button-clicked="emit('pixValidated', e2eId)"
       />
     </div>
+    <AttentionModal v-show="showModal" @close-modal="showModal = false" />
   </div>
 </template>
 
@@ -214,4 +217,22 @@ input[type="number"]::-webkit-inner-spin-button,
 input[type="number"]::-webkit-outer-spin-button {
   -webkit-appearance: none;
 }
+
+.lg-view {
+  display: inline-block;
+}
+
+.sm-view {
+  display: none;
+}
+
+@media screen and (max-width: 500px) {
+  .lg-view {
+    display: none;
+  }
+
+  .sm-view {
+    display: inline-block;
+  }
+}
 </style>

src/components/SearchComponent.vue

@@ -114,22 +114,24 @@ watch(networkName, (): void => {
 <template>
   <div class="page">
     <div class="text-container">
-      <span class="text font-extrabold text-5xl max-w-[29rem]"
+      <span
-        >Adquira cripto com apenas um Pix</span
+        class="text font-extrabold sm:text-5xl text-3xl sm:max-w-[29rem] msx-w-[20rem]"
       >
-      <span class="text font-medium text-base max-w-[28rem]"
+        Adquira cripto com apenas um Pix</span
+      >
+      <span class="text font-medium sm:text-base text-sm max-w-[28rem]"
         >Digite um valor, confira a oferta, conecte sua carteira e receba os
         tokens após realizar o Pix</span
       >
     </div>
     <div class="blur-container">
       <div
-        class="flex flex-col w-full bg-white px-10 py-5 rounded-lg border-y-10"
+        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 w-full items-center">
+        <div class="flex justify-between sm:w-full items-center">
           <input
             type="number"
-            class="border-none outline-none text-lg text-gray-900 w-fit"
+            class="border-none outline-none text-lg text-gray-900 w-2/6"
             v-bind:class="{
               'font-semibold': tokenValue != undefined,
               'text-xl': tokenValue != undefined,

src/components/TopBar.vue

@@ -65,21 +65,45 @@ const getNetworkImage = (networkName: NetworkEnum): string => {
     <RouterLink :to="'/'" class="default-button">
       <img
         alt="P2Pix logo"
-        class="logo"
+        class="logo lg-view"
         src="@/assets/logo.svg"
         width="75"
         height="75"
       />
+      <img
+        alt="P2Pix logo"
+        class="logo sm-view w-10/12"
+        src="@/assets/logo2.svg"
+        width="40"
+        height="40"
+      />
     </RouterLink>
 
-    <div class="flex gap-4 items-center">
+    <div class="flex sm:gap-4 gap-2 items-center">
-      <RouterLink :to="'/faq'" class="default-button"> FAQ </RouterLink>
+      <RouterLink :to="'/faq'" class="default-button lg-view"> FAQ </RouterLink>
-      <RouterLink :to="sellerView ? '/' : '/seller'" class="default-button">
+      <RouterLink
+        :to="'/faq'"
+        v-if="!walletAddress"
+        class="default-button sm-view"
+      >
+        FAQ
+      </RouterLink>
+      <RouterLink
+        :to="sellerView ? '/' : '/seller'"
+        class="default-button sm:whitespace-normal whitespace-nowrap lg-view"
+      >
+        {{ sellerView ? "Quero comprar" : "Quero vender" }}
+      </RouterLink>
+      <RouterLink
+        :to="sellerView ? '/' : '/seller'"
+        v-if="!walletAddress"
+        class="default-button sm:whitespace-normal whitespace-nowrap sm-view"
+      >
         {{ sellerView ? "Quero comprar" : "Quero vender" }}
       </RouterLink>
       <div class="flex flex-col" v-if="walletAddress">
         <div
-          class="group top-bar-info cursor-pointer hover:bg-white"
+          class="group top-bar-info cursor-pointer hover:bg-white h-10"
           @click="
             [
               (currencyMenuOpenToggle = !currencyMenuOpenToggle),
@@ -101,7 +125,7 @@ const getNetworkImage = (networkName: NetworkEnum): string => {
             :src="getNetworkImage(etherStore.networkName)"
           />
           <span
-            class="default-text group-hover:text-gray-900"
+            class="default-text group-hover:text-gray-900 lg-view"
             :style="{
               color: currencyMenuOpenToggle
                 ? '#000000'
@@ -131,7 +155,7 @@ const getNetworkImage = (networkName: NetworkEnum): string => {
         </div>
         <div
           v-show="currencyMenuOpenToggle"
-          class="mt-10 pl-3 absolute w-full text-gray-900"
+          class="mt-10 pl-3 absolute w-full text-gray-900 lg-view"
         >
           <div class="mt-2">
             <div class="bg-white rounded-md z-10">
@@ -176,15 +200,23 @@ const getNetworkImage = (networkName: NetworkEnum): string => {
       <button
         type="button"
         v-if="!walletAddress"
-        class="border-amber-500 border-2 rounded default-button"
+        class="border-amber-500 border-2 rounded default-button lg-view"
         @click="connectMetaMask()"
       >
         Conectar carteira
       </button>
+      <button
+        type="button"
+        v-if="!walletAddress"
+        class="border-amber-500 border-2 rounded default-button sm-view"
+        @click="connectMetaMask()"
+      >
+        Conectar
+      </button>
       <div v-if="walletAddress" class="account-info">
         <div class="flex flex-col">
           <div
-            class="top-bar-info cursor-pointer"
+            class="top-bar-info cursor-pointer h-10"
             @click="
               [
                 (menuOpenToggle = !menuOpenToggle),
@@ -203,7 +235,7 @@ const getNetworkImage = (networkName: NetworkEnum): string => {
           >
             <img alt="Account image" src="@/assets/account.svg" />
             <span
-              class="default-text text-sm"
+              class="default-text"
               :style="{
                 color: menuOpenToggle
                   ? '#000000'
@@ -215,7 +247,7 @@ const getNetworkImage = (networkName: NetworkEnum): string => {
               {{ formatWalletAddress() }}
             </span>
             <img
-              class="text-gray-900"
+              class="text-gray-900 lg-view"
               v-if="!menuHoverToggle && !menuOpenToggle"
               alt="Chevron Down"
               src="@/assets/chevronDown.svg"
@@ -273,7 +305,7 @@ header {
 }
 
 .default-button {
-  @apply px-4 py-2 rounded text-gray-50 font-semibold text-base hover:bg-transparent;
+  @apply sm:px-4 px-3 py-2 rounded text-gray-50 font-semibold sm:text-base text-xs hover:bg-transparent;
 }
 
 .account-info {
@@ -285,7 +317,7 @@ header {
 }
 
 .top-bar-info {
-  @apply flex justify-between gap-2 px-4 py-2 border-amber-500 border-2 rounded;
+  @apply flex justify-between gap-2 px-4 py-2 border-amber-500 border-2 sm:rounded rounded-lg items-center;
 }
 
 .redirect_button {
@@ -299,4 +331,22 @@ header {
 a:hover {
   @apply bg-gray-200 rounded;
 }
+
+.lg-view {
+  display: inline-block;
+}
+
+.sm-view {
+  display: none;
+}
+
+@media screen and (max-width: 500px) {
+  .lg-view {
+    display: none;
+  }
+
+  .sm-view {
+    display: inline-block;
+  }
+}
 </style>