affonso_kopmann/desafio-react-e-typescript-affonso-kopmann
1
0
Fork 1
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix:Corrige Css do form.

Browse Source
This commit is contained in:
Affonso Kopmann 2023-01-20 09:19:37 -03:00
parent ce3a34c2de
commit 56b13d52af
6 changed files with 19 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
index.tsx
View File

@ -1,16 +0,0 @@
import React from "react";
import ReactDOM from "react-dom/client";
import "./styles/reset.css";
import { Home } from "./pages/Home";
import { PageProvider } from "./contexts/PageContext";
const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement
);
root.render(
<PageProvider>
<React.StrictMode>
<Home />
</React.StrictMode>
</PageProvider>
);

1
react-app-env.d.ts vendored
View File

@ -1 +0,0 @@
/// <reference types="react-scripts" />

23
src/components/Footer/Footer.tsx
View File

@ -23,20 +23,17 @@ const Footer = () => {
tempor
</p>
<div className={style["footer-home__payments"]}>
<div className={style["footer-home__payments--division"]}>
<ImagePayment urlImage={Master} textAlt="Bandeira Mastercard" />
<ImagePayment urlImage={Visa} textAlt="Bandeira Visa" />
<ImagePayment
urlImage={AmericanExpress}
textAlt="Bandeira AmericanExpress"
/>
<ImagePayment urlImage={Elo} textAlt="Bandeira Elo" />
<div className= {style["footer-home__payments--division"]}>
<ImagePayment urlImage= {Master} textAlt="Bandeira Mastercard" />
<ImagePayment urlImage= {Visa} textAlt="Bandeira Visa" />
<ImagePayment urlImage= {AmericanExpress} textAlt="Bandeira AmericanExpress" />
<ImagePayment urlImage= {Elo} textAlt="Bandeira Elo" />
</div>
<div className={style["footer-home__payments--division"]}>
<ImagePayment urlImage={Hiper} textAlt="Bandeira Hiper" />
<ImagePayment urlImage={Paypal} textAlt="Bandeira Paypal" />
<ImagePayment urlImage={Boleto} textAlt="Ícone Boleto" />
<ImagePayment urlImage={VtexPci} textAlt="Ícone VtexPci" vtexPci={true} />
<div className= {style["footer-home__payments--division"]}>
<ImagePayment urlImage= {Hiper} textAlt="Bandeira Hiper" />
<ImagePayment urlImage= {Paypal} textAlt="Bandeira Paypal" />
<ImagePayment urlImage= {Boleto} textAlt="Ícone Boleto" />
<ImagePayment urlImage= {VtexPci} textAlt="Ícone VtexPci" vtexPci={true} />
</div>
</div>
<div

2
src/schema/FormSchema.ts
View File

@ -6,7 +6,7 @@ import CPF from "cpf";
export default Yup.object().shape({
name: Yup.string().min(3, "Nome inválido").required("Campo obrigatório"),
email: Yup.string().email("Email inválido").required("Campo obrigatório"),
telefone: Yup.string()
telefone: Yup.string()
.required("Campo obrigatório")
.phone("BR", true, "Telefone Inválido"),
instagram: Yup.string().min(3, "Instagram inválido").required("Campo Obrigatório"),

11
src/styles/main/form/form.module.css
View File

@ -3,21 +3,22 @@
width: 100%;
}
.form{
max-width: 390px;
max-width: 720px;
width: 100%;
margin: 0 auto;
margin-left: 32px;
}
.form__title {
font-size: 24px;
line-height: 23px;
font-weight: 400;
font-weight: 700;
line-height: 56px;
color: var(--black-500);
margin-bottom: 22px;
}
.form-button {
width: 100%;
padding: 8px 0;
padding: 8px ;
background: var(--black-500);
border-radius: 25px;
@ -42,7 +43,7 @@
@media screen and (max-width: 768px) {
.form{
max-width: 100%;
margin-left: 32px;
margin-left: 16px;
}
.form__title {
font-size: 18px;

4
src/styles/main/form/termForm.module.css
View File

@ -22,7 +22,7 @@
cursor: pointer;
}
.form-term__span {
color: var(--blue-500);
color: var(--black-500);
cursor: help;
}
.form-term__input-group {
@ -57,7 +57,7 @@
width: 14px;
height: 14px;
border-radius: 3px;
background-color: var(--blue-500);
background-color: var(--black-500);
}
.form-term__input:checked ~ .form-term__input--custom::after {