anacarolinaduartecavalcante/desafio-react-e-typescript-ana-carolina-duarte-cavalcante
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(main): tornando formulário responsivo e adicionando área do termo de compromisso

Browse Source
This commit is contained in:
Ana Carolina Duarte Cavalcante 2023-01-08 10:22:59 -03:00
parent 778ad9558f
commit 8f5e3c6d1c
2 changed files with 96 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/Main/Contato/Contato.jsx
View File

@ -29,55 +29,56 @@ const Contato = () => {
<div className={styles["FormContent"]}>
<div className={styles["FormContent__Field"]}>
<label>Nome</label>
<span className={styles["FormContent__Field__Error"]}>
<ErrorMessage name="name" />
</span>
<Field
name="name"
type="text"
placeholder="Seu nome completo"
/>
<span className={styles["FormContent__Field__Error"]}>
<ErrorMessage name="name" />
</span>
</div>
<div className={styles["FormContent__Field"]}>
<label>E-mail</label>
<Field name="email" type="email" placeholder="Seu e-mail" />
<span className={styles["FormContent__Field__Error"]}>
<ErrorMessage name="email" />
</span>
<Field name="email" type="email" placeholder="Seu e-mail" />
</div>
<div className={styles["FormContent__Field"]}>
<label>CPF</label>
<Field name="cpf" type="cpf" placeholder="000.000.000-00" />
<span className={styles["FormContent__Field__Error"]}>
<ErrorMessage name="cpf" />
</span>
<Field name="cpf" type="cpf" placeholder="000.000.000-00" />
</div>
<div className={styles["FormContent__Field"]}>
<label>Data de Nascimento:</label>
<span className={styles["FormContent__Field__Error"]}>
<ErrorMessage name="birthDate" />
</span>
<Field
name="birthDate"
type="birthDate"
placeholder="00.00.0000"
/>
<span className={styles["FormContent__Field__Error"]}>
<ErrorMessage name="birthDate" />
</span>
</div>
<div className={styles["FormContent__Field"]}>
<label>Telefone:</label>
<Field name="phone" type="tel" placeholder="(00) 00000-0000" />
<span className={styles["FormContent__Field__Error"]}>
<ErrorMessage name="phone" />
</span>
<Field name="phone" type="tel" placeholder="(00) 00000-0000" />
</div>
<div className={styles["FormContent__Field"]}>
<label>Instagram</label>
<Field name="instagram" type="text" placeholder="@seuuser" />
<span className={styles["FormContent__Field__Error"]}>
<ErrorMessage name="instagram" />
</span>
<Field name="instagram" type="text" placeholder="@seuuser" />
</div>
<button type="submit">Enviar</button>
<div className={styles["Confirm__Camp"]}><span className={styles["Confirm__Camp__Asterisk"]}>*</span><span className={styles["Confirm__Camp__Text"]}>Declaro que li e aceito<input type="checkbox"/></span></div>
<button type="submit">CADASTRE-SE</button>
</div>
</Form>
)}

87
src/components/Main/Main.module.scss
View File

@ -11,6 +11,7 @@ main {
margin-bottom: 66.56px;
@media (min-width: 2500px) {
min-height: calc(100vh - 765px);
margin-bottom: 66.56px;
}
@media (max-width: 1025px) {
margin-bottom: 80px;
@ -108,10 +109,12 @@ main {
border-right: 1px solid $black;
@media (min-width: 2500px) {
width: 25.601%;
height: 465px;
}
@media (max-width: 1025px) {
border: none;
width: 100%;
height: 234px;
}
& ul {
@ -205,6 +208,8 @@ main {
font-size: 14px;
line-height: 16px;
color: $secundary-100;
display: flex;
flex-direction: column;
& label {
font-family: "Roboto";
font-style: normal;
@ -213,9 +218,14 @@ main {
line-height: 16px;
color: $secundary-200;
margin-left: 15px;
display: block;
@media (min-width: 2500px) {
font-size: 28px;
line-height: 33px;
}
}
& input {
width: 94.39%;
flex: 1;
height: 14.02px;
background: $white;
border: 1px solid $secundary-200;
@ -228,6 +238,23 @@ main {
line-height: 16px;
color: $secundary-100;
margin-top: 12px;
@media (min-width: 2500px) {
height: 31.02px;
font-size: 28px;
line-height: 33px;
}
&::placeholder {
font-family: "Roboto";
font-style: normal;
font-weight: 400;
color: $secundary-100;
font-size: 14px;
line-height: 16px;
@media (min-width: 2500px) {
font-size: 28px;
line-height: 33px;
}
}
}
&__Error {
font-family: "Roboto";
@ -239,20 +266,74 @@ main {
color: $primary-900;
position: absolute;
right: 120px;
transform: translateY(-2px);
transform: translateY(15px);
@media (min-width: 2500px) {
font-size: 24px;
line-height: 28px;
transform: translateY(18px);
}
@media (max-width: 2500px) and (min-width: 1281px){
right: calc(100% - 91%);
}
@media (max-width: 1025px) {
right: 30px;
}
}
}
& .Confirm__Camp {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
font-family: "Roboto";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
text-decoration: underline;
@media (min-width: 2500px) {
font-size: 28px;
line-height: 33px;
}
&__Asterisk {
color: $primary-900;
}
&__Text {
display: flex;
align-items: center;
color: $secundary-200;
& input {
margin: 0 0 0 4.28px;
width: 18.64px;
height: 18px;
border: 1px solid $black;
border-radius: 3px;
@media (min-width: 2500px) {
width: 36.4px;
height: 35.15px;
}
}
}
}
& button {
background: $black;
border-radius: 25px;
color: $white;
font-family: 'Roboto';
font-family: "Roboto";
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
text-transform: uppercase;
padding: 17px 0 16.44px;
border: none;
@media (min-width: 2500px) {
padding: 16px 0 17px;
font-size: 32px;
line-height: 38px;
margin-top: 0.85px;
}
}
}
}