hueso/P2Pix-Front-End
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add responsive desing in buyer view

Browse Source
This commit is contained in:
enzoggqs
2023-01-27 17:26:16 -03:00
parent c643cab0e0
commit c626a650b8
6 changed files with 191 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
src/components/AttentionModal.vue Normal file
View File

@@ -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>

18
src/components/LoadingComponent.vue
View File

@@ -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]">{{
props.title ? props.title : "Confirme em sua carteira"
}}</span>
<span
class="text font-bold sm:text-3xl text-2xl sm:max-w-[29rem] msx-w-[20rem]"
>
{{ 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"] {

37
src/components/QrCodeComponent.vue
View File

@@ -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>

14
src/components/SearchComponent.vue
View File

@@ -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]"
>Adquira cripto com apenas um Pix</span
<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,

76
src/components/TopBar.vue
View File

@@ -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">
<RouterLink :to="'/faq'" class="default-button"> FAQ </RouterLink>
<RouterLink :to="sellerView ? '/' : '/seller'" class="default-button">
<div class="flex sm:gap-4 gap-2 items-center">
<RouterLink :to="'/faq'" class="default-button lg-view"> FAQ </RouterLink>
<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>