carloswinter/desafio-react-e-typescript-carlos-winter
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(header): corrige estilos em scss do header

Browse Source
This commit is contained in:
carloswinter 2023-01-20 14:29:42 -03:00
parent cbda59ba7a
commit d24a243cd0
13 changed files with 320 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/App.scss
View File

@ -20,8 +20,16 @@ body {
padding-bottom: 66px;
@media (min-width: 1025px) {
padding: 0 100px;
margin-bottom: 47px;
margin: 0 100px;
margin-bottom: 70px;
}
@media (max-width: 1024px) {
padding-bottom: 68px;
}
@media (min-width: 2500px) {
margin-bottom: 84px;
}
.Main_textArea {
@ -36,12 +44,13 @@ body {
h2 {
margin: 0;
margin-bottom: 12px;
font-family: $fontFamily;
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 28px;
color: $color-gray-800;
color: $color-black;
@media (max-width: 1024px) {
text-align: center;
@ -64,9 +73,16 @@ body {
font-size: 13px;
line-height: 15px;
color: $color-gray-500;
gap: 20px;
.Apagar-Texto {
@media (max-width: 1024px) {
display: none;
}
}
p {
margin: 12px 0;
margin: 0;
color: $color-gray-500;
font-weight: 400;
font-size: 13px;

144
src/components/ContactForm.tsx
View File

@ -1,5 +1,6 @@
import { Formik, Form, Field, ErrorMessage } from "formik";
import FormSchema from "./schema/FormSchema";
import { useState } from "react";
interface IFormikValues {
name: string;
@ -21,82 +22,95 @@ const initialValues = {
checkbox: false,
};
const formSubmit = (values: IFormikValues) => {
console.log(values);
};
export const ContactForm = () => {
const [isSubmited, setIsSubmited] = useState(false);
const formSubmit = (values: IFormikValues) => {
setIsSubmited(true);
};
return (
<Formik
onSubmit={formSubmit}
initialValues={initialValues}
validationSchema={FormSchema}
validateOnMount
>
{({ errors, touched }) => (
{({ errors, touched, isValid, validateForm }) => (
<Form>
<label htmlFor="name">Nome</label>
<span className="error">
<ErrorMessage name="name" className="form-ivalid-feedback" />
</span>
<Field
id="name"
name="name"
placeholder="Seu nome completo"
className={errors.name && touched.name && "invalid"}
/>
<div className="form-entryes">
<label htmlFor="name">Nome</label>
<span className="error">
<ErrorMessage name="name" className="form-ivalid-feedback" />
</span>
<Field
id="name"
name="name"
placeholder="Seu nome completo"
className={errors.name && touched.name && "invalid"}
/>
</div>
<label htmlFor="email">E-mail</label>
<span className="error">
<ErrorMessage name="email" className="form-ivalid-feedback" />
</span>
<Field
id="email"
name="email"
placeholder="Seu e-mail"
className={errors.email && touched.email && "invalid"}
/>
<div className="form-entryes">
<label htmlFor="email">E-mail</label>
<span className="error">
<ErrorMessage name="email" className="form-ivalid-feedback" />
</span>
<Field
id="email"
name="email"
placeholder="Seu e-mail"
className={errors.email && touched.email && "invalid"}
/>
</div>
<label htmlFor="cpf">CPF</label>
<span className="error">
<ErrorMessage name="cpf" className="form-ivalid-feedback" />
</span>
<Field
id="cpf"
name="cpf"
type="number"
placeholder="000.000.000-00"
className={errors.cpf && touched.cpf && "invalid"}
/>
<div className="form-entryes">
<label htmlFor="cpf">CPF</label>
<span className="error">
<ErrorMessage name="cpf" className="form-ivalid-feedback" />
</span>
<Field
id="cpf"
name="cpf"
type="number"
placeholder="000.000.000-00"
className={errors.cpf && touched.cpf && "invalid"}
/>
</div>
<label htmlFor="data">Data de Nascimento:</label>
<span className="error">
<ErrorMessage name="data" className="form-ivalid-feedback" />
</span>
<Field
id="data"
name="data"
type="number"
placeholder="00.00.0000"
className={errors.data && touched.data && "invalid"}
/>
<div className="form-entryes">
<label htmlFor="data">Data de Nascimento:</label>
<span className="error">
<ErrorMessage name="data" className="form-ivalid-feedback" />
</span>
<Field
id="data"
name="data"
type="number"
placeholder="00.00.0000"
className={errors.data && touched.data && "invalid"}
/>
</div>
<label htmlFor="telefone">Telefone:</label>
<span className="error">
<ErrorMessage name="telefone" className="form-ivalid-feedback" />
</span>
<Field
id="telefone"
name="telefone"
type="tel"
placeholder="(00) 00000-0000"
className={errors.telefone && touched.telefone && "invalid"}
/>
<div className="form-entryes">
<label htmlFor="telefone">Telefone:</label>
<span className="error">
<ErrorMessage name="telefone" className="form-ivalid-feedback" />
</span>
<Field
id="telefone"
name="telefone"
type="tel"
placeholder="(00) 00000-0000"
className={errors.telefone && touched.telefone && "invalid"}
/>
</div>
<label htmlFor="instagram">Instagram</label>
<span>
<ErrorMessage name="instagram" className="form-ivalid-feedback" />
</span>
<Field id="instagram" name="instagram" placeholder="@seuuser" />
<div className="form-entryes">
<label htmlFor="instagram">Instagram</label>
<span>
<ErrorMessage name="instagram" className="form-ivalid-feedback" />
</span>
<Field id="instagram" name="instagram" placeholder="@seuuser" />
</div>
<div className="checkbox_wrapper">
<label htmlFor="checkbox">Declaro que li e aceito</label>
@ -110,8 +124,8 @@ export const ContactForm = () => {
className={errors.checkbox && touched.checkbox && "invalid"}
/>
</div>
<button type="submit">CADASTRE-SE</button>
<button>CADASTRE-SE</button>
{isSubmited && <span>*Formulário enviado com sucesso!</span>}
</Form>
)}
</Formik>

2
src/components/Container-menu/TextContainer.tsx
View File

@ -22,7 +22,7 @@ export const MainText = () => {
quia non numquam eius modi tempora incidunt ut labore et dolore magnam
aliquam quaerat voluptatem.
</p>
<p>
<p className="Apagar-Texto">
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis
autem vel eum iure reprehenderit qui in ea voluptate velit esse quam

2
src/components/Container-menu/TopContainer.modules.scss
View File

@ -47,7 +47,7 @@
justify-content: center;
.Title {
margin: 0 0 82px 0;
margin: 0 0 80px 0;
font-family: $fontFamily;
font-style: normal;
font-weight: 400;

80
src/components/Footer/ContactFooter.tsx
View File

@ -1,30 +1,62 @@
import { MenuList1, MenuList2, MenuList3 } from "./MenuListFooter";
import { useState } from "react";
export const Contact = () => {
return (
<>
<div className="Contact_wrapper">
<div className="Menu_folder">
{window.innerWidth > 1024 ? (
<>
<h5>INSTITUCIONAL</h5>
<MenuList1 />
</>
) : (
""
)}
<h5> INSTITUCIONAL </h5>
<MenuList1 />
const [isOpened, setIsOpened] = useState(false);
const [isOpened2, setIsOpened2] = useState(false);
const [isOpened3, setIsOpened3] = useState(false);
if (window.innerWidth > 1024) {
return (
<>
<div className="Contact_wrapper">
<div className="Menu_folder">
<h5> Institucional </h5>
<MenuList1 />
</div>
<div className="Menu_folder">
<h5> Dúvidas </h5>
<MenuList2 />
</div>
<div className="Menu_folder">
<h5> Fale Conosco </h5>
<MenuList3 />
</div>
</div>
<div className="Menu_folder">
<h5> DÚVIDAS </h5>
<MenuList2 />
</>
);
} else {
return (
<>
<div className="Contact_wrapper">
<div
className="Menu_folder"
onClick={() => {
setIsOpened(!isOpened);
}}
>
<h5> Institucional </h5>
{isOpened && <MenuList1 />}
</div>
<div
className="Menu_folder"
onClick={() => {
setIsOpened2(!isOpened2);
}}
>
<h5> Dúvidas </h5>
{isOpened2 && <MenuList2 />}
</div>
<div
className="Menu_folder"
onClick={() => {
setIsOpened3(!isOpened3);
}}
>
<h5> Fale Conosco </h5>
{isOpened3 && <MenuList3 />}
</div>
</div>
<div className="Menu_folder">
<h5> FALE CONOSCO </h5>
<MenuList3 />
</div>
</div>
</>
);
</>
);
}
};

90
src/components/Footer/FooterMain.modules.scss
View File

@ -72,6 +72,10 @@
line-height: 16px;
color: $color-gray;
@media (max-width: 1024px) {
height: 14px;
}
@media (max-width: 375px) {
height: 14px;
}
@ -158,6 +162,12 @@
gap: 121px;
width: 55.235%;
margin: 0 12.11% 0 100px;
@media (max-width: 1024px) {
flex-direction: column;
gap: 0;
margin: 0;
width: 100%;
}
@media (min-width: 2500px) {
gap: 293px;
@ -182,7 +192,16 @@
font-size: 14px;
line-height: 16px;
color: $color-gray-700;
text-transform: uppercase;
@media (max-width: 1024px) {
margin-bottom: 12px;
text-transform: capitalize;
&::after {
content: "+";
float: right;
font-size: 14px;
}
}
@media (min-width: 2500px) {
font-weight: 500;
font-size: 28px;
@ -191,6 +210,8 @@
}
.links_footer {
transform: 0.4s;
transition: 0.4s;
text-decoration: none;
font-family: $fontFamily;
font-style: normal;
@ -201,8 +222,12 @@
color: $color-gray-700;
margin-bottom: 12px;
width: 155px;
@media (max-width: 1024px) {
color: $color-gray-500;
}
@media (min-width: 2500px) {
width: 100%;
font-weight: 400;
font-size: 24px;
line-height: 28px;
@ -247,19 +272,33 @@
.Wpp-Icon {
display: flex;
flex-direction: column;
gap: 5px;
gap: 1px;
position: fixed;
right: 16px;
bottom: 51px;
@media (max-width: 375px) {
bottom: 26px !important;
right: 14px;
}
@media (min-width: 1025px) {
position: absolute;
right: 16px;
top: 50px;
bottom: 210px;
}
@media (max-width: 1024px) {
bottom: 46px;
}
@media (min-width: 2500px) {
width: 66px;
height: 66px;
top: 542px;
position: fixed;
.Chat_button img,
.button_wrapper {
width: 66px;
height: 66px;
}
right: 16px;
bottom: 275px;
}
.button_wrapper {
@ -343,15 +382,27 @@
display: flex;
gap: 12px;
@media (max-width: 374px) {
gap: 7px !important;
}
@media (max-width: 1024px) {
order: -1;
}
@media (max-width: 570px) {
gap: 11px;
}
.carts_icons {
width: 36px;
height: 20px;
@media (max-width: 375px) {
@media (max-width: 374px) {
width: 22px !important;
}
@media (max-width: 570px) {
width: 30px;
}
@ -365,19 +416,36 @@
content: "";
border: 1px solid $color-gray;
transform: rotate(90deg);
width: 24px;
width: 22px;
height: 0px;
@media (max-width: 374px) {
width: 0 !important;
}
@media (max-width: 375px) {
transform: rotate(180deg);
height: 18px;
}
@media (max-width: 1024px) {
width: 22px;
}
@media (min-width: 2500px) {
width: 22px;
}
}
.vtex_icon {
width: 54.61px;
height: 34px;
@media (max-width: 375px) {
@media (max-width: 374px) {
width: 34px !important;
}
@media (max-width: 570px) {
width: 45px;
height: 28px;
}

7
src/components/Footer/MenuListFooter.tsx
View File

@ -1,9 +1,14 @@
import { NavLink } from "react-router-dom";
interface MenuFooterProps {
isOpened: boolean;
setIsOpened: React.Dispatch<React.SetStateAction<boolean>>;
}
export const MenuList1 = () => {
return (
<>
<NavLink className={"links_footer"} to={"/"}>
<NavLink className={`links_footer`} to={"/"}>
Quem Somos
</NavLink>
<NavLink className={"links_footer"} to={"/"}>

3
src/components/Footer/SocialMedia.tsx
View File

@ -18,7 +18,8 @@ export const SocialMedia = () => {
<img src={Linkedin} alt="Linkedin-logo" />
</div>
<span className="Site"> www.loremipsum.com </span>
<div>{window.innerWidth > 1024 ? <WppIcon /> : ""}</div>
<WppIcon />
{/* <div>{window.innerWidth > 1024 ? <WppIcon /> : ""}</div> */}
</div>
</>
);

19
src/components/Footer/wpp.tsx
View File

@ -1,13 +1,28 @@
import Wpp from "../assets/imgs/SVGs/whatsapp.svg";
import Ellipse from "../assets/imgs/SVGs/Ellipse.svg";
import { useEffect } from "react";
export const WppIcon = () => {
return (
<>
<div className="Wpp-Icon">
<img src={Wpp} alt="Wpp-logo" />
<a
className="Chat_button"
href="https://wa.me/0000000000"
target="_blank"
rel="noopener noreferrer"
>
<img src={Wpp} alt="Wpp-logo" />
</a>
<div className="button_wrapper">
<img className="Button_wpp" src={Ellipse} alt="Ellipse-logo" />
<img
className="Button_wpp"
src={Ellipse}
alt="Ellipse-logo"
onClick={(e) => {
window.scrollTo(0, 0);
}}
/>
</div>
</div>
</>

2
src/components/Header/HeaderDesktop.modules.scss
View File

@ -50,7 +50,7 @@
}
@media (min-width: 2500px) {
height: 33px;
height: 29px;
padding: 12px 16px;
font-weight: 400;
font-size: 28px;

13
src/components/Header/HeaderMobile.modules.scss
View File

@ -97,6 +97,11 @@
position: relative;
width: 100%;
@media (max-width: 374px) {
display: flex;
justify-content: center;
}
.Search_Header {
width: 96.372%;
border: 2px solid $color-white-100;
@ -104,6 +109,11 @@
padding: 10px 16px;
color: $color-black;
@media (max-width: 1024px) {
height: 12px;
width: calc(100% - 36px);
}
@media (max-width: 375px) {
width: 89.508%;
height: 12px;
@ -117,6 +127,7 @@
}
}
}
.Search_Header_wrapper::after {
position: absolute;
content: "";
@ -127,4 +138,4 @@
background-image: url("../assets/imgs/SVGs/search-icon-desktop.svg");
cursor: pointer;
}
}
}

7
src/components/schema/CustonValidationsRegex.ts
View File

@ -1,6 +1,9 @@
export const phoneNumber = /\([1-9]{2}\) [1-9]{2}\d{3}-\d{4}/;
export const phoneNumber =
/^\(?[1-9]{2}\)? ?(?:[2-8]|9[1-9])[0-9]{3}\-?[0-9]{4}$/;
export const cpfNumber = /\d{3}.\d{3}.\d{3}-\d{2}/;
// export const cpfNumber = /\d{3}.\d{3}.\d{3}-\d{2}/;
export const cpfNumber =
/^([0-9]{3}\.?[0-9]{3}\.?[0-9]{3}\-?[0-9]{2}|[0-9]{2}\.?[0-9]{3}\.?[0-9]{3}\/?[0-9]{4}\-?[0-9]{2})$/;
export const insta =
/(?:^|[^\w])(?:@)([\w-](?:(?:[\w-]|(?:\.(?!\.))){0,28}(?:[\w-]))?)/;

68
src/pages/Contact.modules.scss
View File

@ -20,37 +20,46 @@ form {
padding: 0px;
}
label {
margin: 12px 0 12px 15px;
.form-entryes {
flex-direction: column;
align-items: flex-start;
position: relative;
@media (min-width: 2500px) {
font-weight: 400;
font-size: 28px;
line-height: 33px;
}
}
label {
color: $color-black-800;
margin: 12px 0 12px 15px;
input {
height: 14px;
padding: 15px 20px;
border: 1px solid $color-black-800;
border-radius: 25px;
font-family: $fontFamily;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
color: $color-gray-300;
@media (min-width: 2500px) {
height: 31px;
font-weight: 400;
font-size: 28px;
line-height: 33px;
@media (min-width: 2500px) {
font-weight: 400;
font-size: 28px;
line-height: 33px;
}
}
&::placeholder {
input {
width: calc(100% - 42px);
height: 14px;
padding: 15px 20px;
border: 1px solid $color-black-800;
border-radius: 25px;
font-family: $fontFamily;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
color: $color-gray-300;
margin: 0;
@media (min-width: 2500px) {
height: 31px;
font-weight: 400;
font-size: 28px;
line-height: 33px;
}
&::placeholder {
color: $color-gray-300;
}
}
}
.error {
@ -62,6 +71,9 @@ form {
font-size: 12px;
line-height: 14px;
color: $color-red;
position: absolute;
align-self: flex-end;
top: 25px;
@media (min-width: 2500px) {
font-weight: 400;
@ -71,6 +83,7 @@ form {
}
.checkbox_wrapper {
margin: 12px 0;
span {
margin-left: 13px;
margin-right: 2px;
@ -80,6 +93,7 @@ form {
}
label {
margin-left: 0;
text-decoration: underline;
@media (min-width: 2500px) {
font-weight: 400;
font-size: 28px;
@ -89,6 +103,7 @@ form {
}
button {
height: 52.44px;
letter-spacing: 0.05em;
font-family: $fontFamily;
font-style: normal;
@ -117,7 +132,6 @@ form {
font-weight: 400;
font-size: 14px;
line-height: 16px;
text-decoration: underline;
}
input {