Fix alerts and modals

src/components/BuyConfirmedComponent/BuyConfirmedComponent.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
 import CustomButton from "@/components/CustomButton/CustomButton.vue";
-import CustomAlert from "../CustomAlert/CustomAlert.vue";
-import { ref } from "vue";
 
 // props
 const props = defineProps<{
@@ -10,8 +8,6 @@ const props = defineProps<{
 
 // Emits
 const emit = defineEmits(["makeAnotherTransaction"]);
-
-const showAlert = ref<boolean>(true);
 </script>
 
 <template>
@@ -50,11 +46,6 @@ const showAlert = ref<boolean>(true);
         Fazer nova transação
       </button>
     </div>
-    <CustomAlert
-      v-if="showAlert"
-      :type="'buy'"
-      @close-alert="showAlert = false"
-    />
   </div>
 </template>
 

src/components/CustomAlert/CustomAlert.vue

@@ -6,11 +6,15 @@ const props = defineProps<{
 
 const alertText = ref<string>("");
 const alertPaddingLeft = ref<string>("18rem");
+const alertPaddingTop = ref<string>("0rem");
 
 if (props.type === "sell") {
-  alertPaddingLeft.value = "20rem";
-} else {
-  alertPaddingLeft.value = "18rem";
+  alertPaddingLeft.value = "30%";
+} else if (props.type === "buy") {
+  alertPaddingLeft.value = "30%";
+} else if (props.type === "redirect") {
+  alertPaddingLeft.value = "35%";
+  alertPaddingTop.value = "8rem";
 }
 
 switch (props.type) {
@@ -22,6 +26,9 @@ switch (props.type) {
     alertText.value =
       "Tudo certo! Os tokens já foram reservados e sua oferta está disponível.";
     break;
+  case "redirect":
+    alertText.value = "Existe uma compra em aberto. Continuar?";
+    break;
 }
 </script>
 <template>
@@ -29,9 +36,14 @@ switch (props.type) {
     class="modal-overlay inset-0 absolute backdrop-blur-sm sm:backdrop-blur-none"
   >
     <div class="modal px-12 pl-72 text-center flex justify-between">
-      <p class="text-black tracking-tighter leading-tight my-2">
-        {{ alertText }}
-      </p>
+      <div class="flex items-center">
+        <p class="text-black tracking-tighter leading-tight my-2">
+          {{ alertText }}
+        </p>
+        <button v-if="props.type === 'redirect'" @click="$emit('go-to-lock')">
+          Sim
+        </button>
+      </div>
       <img
         src="../../assets/closeAlertIcon.svg"
         alt="close alert"
@@ -44,14 +56,17 @@ switch (props.type) {
 <style scoped>
 .modal-overlay {
   display: flex !important;
-  height: 100%;
+  justify-content: center;
   width: 100%;
+  padding-top: 7rem;
+  height: 3rem;
+  z-index: 10;
 }
 
 .modal {
   background-color: rgba(251, 191, 36, 1);
-  height: 6%;
-  width: 100%;
+  height: 3rem;
+  width: 96%;
   border-radius: 10px;
   align-items: center;
   white-space: nowrap;
@@ -77,13 +92,16 @@ h6 {
 
 p {
   font-size: 20px;
+  font-weight: 600;
 }
 
 button {
-  width: 100px;
-  height: 40px;
+  width: 50px;
+  height: 30px;
   color: black;
-  font-size: 14px;
+  font-size: 16px;
   border-radius: 10px;
+  border: 2px solid white;
+  margin-left: 1rem;
 }
 </style>

src/components/SellerSteps/WantSellComponent.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import CustomButton from "../CustomButton/CustomButton.vue";
-import CustomAlert from "../CustomAlert/CustomAlert.vue";
 import { debounce } from "@/utils/debounce";
 import { decimalCount } from "@/utils/decimalCount";
 import { pixFormatValidation, postProcessKey } from "@/utils/pixKeyFormat";
@@ -9,10 +8,6 @@ import { useEtherStore } from "@/store/ether";
 import { storeToRefs } from "pinia";
 import { connectProvider } from "@/blockchain/provider";
 
-const props = defineProps<{
-  showAlert: boolean;
-}>();
-
 // Reactive state
 const etherStore = useEtherStore();
 const { walletAddress } = storeToRefs(etherStore);
@@ -24,7 +19,6 @@ const enableSelectButton = ref<boolean>(false);
 const hasLiquidity = ref<boolean>(true);
 const validDecimals = ref<boolean>(true);
 const validPixFormat = ref<boolean>(true);
-const showAlert = ref<boolean>(true);
 
 // Emits
 const emit = defineEmits(["approveTokens"]);
@@ -147,11 +141,6 @@ const handleButtonClick = async (
         @buttonClicked="handleButtonClick(offer, pixKey)"
       />
     </div>
-    <CustomAlert
-      v-if="props.showAlert"
-      :type="'sell'"
-      @close-alert="showAlert = false"
-    />
   </div>
 </template>