From 6e085780387d394e83237f0b971ec0049f4b1dcc Mon Sep 17 00:00:00 2001
From: enzoggqs <eggqsaraiva@gmail.com>
Date: Fri, 27 Jan 2023 18:33:00 -0300
Subject: [PATCH] Update BuyerFlow responsive screen

---
 src/components/BuyConfirmedComponent.vue      | 31 ++++++++++++++++---
 .../{AttentionModal.vue => CustomModal.vue}   |  3 --
 src/components/QrCodeComponent.vue            |  2 +-
 src/components/TopBar.vue                     |  2 +-
 4 files changed, 28 insertions(+), 10 deletions(-)
 rename src/components/{AttentionModal.vue => CustomModal.vue} (95%)

diff --git a/src/components/BuyConfirmedComponent.vue b/src/components/BuyConfirmedComponent.vue
index cfc67cd..e2ea805 100644
--- a/src/components/BuyConfirmedComponent.vue
+++ b/src/components/BuyConfirmedComponent.vue
@@ -16,7 +16,7 @@ const emit = defineEmits(["makeAnotherTransaction"]);
 <template>
   <div class="page">
     <div class="text-container">
-      <span class="text font-extrabold text-5xl max-w-[50rem]"
+      <span class="text font-extrabold sm:text-5xl text-xl max-w-[50rem]"
         >Os tokens já foram transferidos <br />
         para a sua carteira!
       </span>
@@ -30,8 +30,8 @@ const emit = defineEmits(["makeAnotherTransaction"]);
           <p class="text-2xl text-gray-900">{{ props.tokenAmount }} BRZ</p>
         </div>
         <div class="my-5">
-          <p>
-            <b>Não encontrou os tokens? </b>Clique no botão abaixo para <br />
+          <p class="text-sm">
+            <b>Não encontrou os tokens? </b><br/>Clique no botão abaixo para <br />
             cadastrar o BRZ em sua carteira.
           </p>
         </div>
@@ -48,18 +48,21 @@ const emit = defineEmits(["makeAnotherTransaction"]);
         Fazer nova transação
       </button>
     </div>
-    <div class="text-container mt-16">
+    <div class="text-container mt-16 lg-view">
       <span class="text font-extrabold text-3xl max-w-[50rem]"
         >Histórico de compras
       </span>
     </div>
-    <div class="w-full max-w-4xl">
+    <div class="w-full max-w-4xl lg-view">
       <ListingComponent
         :walletTransactions="lastWalletReleaseTransactions"
         :isManageMode="false"
       >
       </ListingComponent>
     </div>
+    <RouterLink to="/transaction_history" class="mt-8 text-white text-2xl font-bold">
+      Gerenciar Transações
+    </RouterLink>
   </div>
 </template>
 
@@ -99,4 +102,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>
diff --git a/src/components/AttentionModal.vue b/src/components/CustomModal.vue
similarity index 95%
rename from src/components/AttentionModal.vue
rename to src/components/CustomModal.vue
index 97d96e8..4a53ed9 100644
--- a/src/components/AttentionModal.vue
+++ b/src/components/CustomModal.vue
@@ -1,7 +1,4 @@
 <script setup lang="ts">
-const props = defineProps({
-  showModal: Boolean,
-});
 </script>
 
 <template>
diff --git a/src/components/QrCodeComponent.vue b/src/components/QrCodeComponent.vue
index ef2b059..d0a70a7 100644
--- a/src/components/QrCodeComponent.vue
+++ b/src/components/QrCodeComponent.vue
@@ -3,7 +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 AttentionModal from "./CustomModal.vue";
 import api from "../services/index";
 
 // props and store references
diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue
index 033c169..cb04cf2 100644
--- a/src/components/TopBar.vue
+++ b/src/components/TopBar.vue
@@ -155,7 +155,7 @@ const getNetworkImage = (networkName: NetworkEnum): string => {
         </div>
         <div
           v-show="currencyMenuOpenToggle"
-          class="mt-10 pl-3 absolute w-full text-gray-900 lg-view"
+          class="mt-10 pl-3 absolute w-full text-gray-900"
         >
           <div class="mt-2">
             <div class="bg-white rounded-md z-10">