From 37347e18d4aa06b3d35c2ca78f1d0b4156b16fd0 Mon Sep 17 00:00:00 2001
From: enzoggqs <eggqsaraiva@gmail.com>
Date: Fri, 3 Feb 2023 01:31:55 -0300
Subject: [PATCH] Fix customModal style

---
 src/components/CustomModal.vue     | 10 ++--------
 src/components/QrCodeComponent.vue |  7 +++++--
 2 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/components/CustomModal.vue b/src/components/CustomModal.vue
index 7048620..8d0e70d 100644
--- a/src/components/CustomModal.vue
+++ b/src/components/CustomModal.vue
@@ -2,7 +2,7 @@
 </script>
 
 <template>
-  <div class="modal-overlay backdrop-blur-sm sm:backdrop-blur-none">
+  <div class="modal-overlay inset-0 fixed justify-center backdrop-blur-sm sm:backdrop-blur-none">
     <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>
@@ -23,13 +23,7 @@
 <style scoped>
 
 .modal-overlay {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  display: flex;
-  justify-content: center;
+  display: flex !important;
 }
 
 .modal {
diff --git a/src/components/QrCodeComponent.vue b/src/components/QrCodeComponent.vue
index d0a70a7..3294b4d 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 "./CustomModal.vue";
+import CustomModal from "./CustomModal.vue";
 import api from "../services/index";
 
 // props and store references
@@ -152,7 +152,10 @@ const validatePix = async (): Promise<void> => {
         @button-clicked="emit('pixValidated', e2eId)"
       />
     </div>
-    <AttentionModal v-show="showModal" @close-modal="showModal = false" />
+    <CustomModal
+      v-if="showModal"
+      @close-modal="showModal = false"
+    />
   </div>
 </template>