From d24a243cd0307719af5700e477c352bb2ffcff22 Mon Sep 17 00:00:00 2001 From: carloswinter Date: Fri, 20 Jan 2023 14:29:42 -0300 Subject: [PATCH] fix(header): corrige estilos em scss do header --- src/App.scss | 24 ++- src/components/ContactForm.tsx | 144 ++++++++++-------- .../Container-menu/TextContainer.tsx | 2 +- .../Container-menu/TopContainer.modules.scss | 2 +- src/components/Footer/ContactFooter.tsx | 80 +++++++--- src/components/Footer/FooterMain.modules.scss | 90 +++++++++-- src/components/Footer/MenuListFooter.tsx | 7 +- src/components/Footer/SocialMedia.tsx | 3 +- src/components/Footer/wpp.tsx | 19 ++- .../Header/HeaderDesktop.modules.scss | 2 +- .../Header/HeaderMobile.modules.scss | 13 +- .../schema/CustonValidationsRegex.ts | 7 +- src/pages/Contact.modules.scss | 68 +++++---- 13 files changed, 320 insertions(+), 141 deletions(-) diff --git a/src/App.scss b/src/App.scss index 994088f..02fa106 100644 --- a/src/App.scss +++ b/src/App.scss @@ -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; diff --git a/src/components/ContactForm.tsx b/src/components/ContactForm.tsx index 570c179..4378ee6 100644 --- a/src/components/ContactForm.tsx +++ b/src/components/ContactForm.tsx @@ -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 ( - {({ errors, touched }) => ( + {({ errors, touched, isValid, validateForm }) => (
- - - - - +
+ + + + + +
- - - - - +
+ + + + + +
- - - - - +
+ + + + + +
- - - - - +
+ + + + + +
- - - - - +
+ + + + + +
- - - - - +
+ + + + + +
@@ -110,8 +124,8 @@ export const ContactForm = () => { className={errors.checkbox && touched.checkbox && "invalid"} />
- - + + {isSubmited && *Formulário enviado com sucesso!} )}
diff --git a/src/components/Container-menu/TextContainer.tsx b/src/components/Container-menu/TextContainer.tsx index df27d91..7c428b9 100644 --- a/src/components/Container-menu/TextContainer.tsx +++ b/src/components/Container-menu/TextContainer.tsx @@ -22,7 +22,7 @@ export const MainText = () => { quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

-

+

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 diff --git a/src/components/Container-menu/TopContainer.modules.scss b/src/components/Container-menu/TopContainer.modules.scss index 6a8df8e..89214e8 100644 --- a/src/components/Container-menu/TopContainer.modules.scss +++ b/src/components/Container-menu/TopContainer.modules.scss @@ -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; diff --git a/src/components/Footer/ContactFooter.tsx b/src/components/Footer/ContactFooter.tsx index d16755b..5515f20 100644 --- a/src/components/Footer/ContactFooter.tsx +++ b/src/components/Footer/ContactFooter.tsx @@ -1,30 +1,62 @@ import { MenuList1, MenuList2, MenuList3 } from "./MenuListFooter"; +import { useState } from "react"; export const Contact = () => { - return ( - <> -

-
- {window.innerWidth > 1024 ? ( - <> -
INSTITUCIONAL
- - - ) : ( - "" - )} -
INSTITUCIONAL
- + const [isOpened, setIsOpened] = useState(false); + const [isOpened2, setIsOpened2] = useState(false); + const [isOpened3, setIsOpened3] = useState(false); + if (window.innerWidth > 1024) { + return ( + <> +
+
+
Institucional
+ +
+
+
Dúvidas
+ +
+
+
Fale Conosco
+ +
-
-
DÚVIDAS
- + + ); + } else { + return ( + <> +
+
{ + setIsOpened(!isOpened); + }} + > +
Institucional
+ {isOpened && } +
+
{ + setIsOpened2(!isOpened2); + }} + > +
Dúvidas
+ {isOpened2 && } +
+
{ + setIsOpened3(!isOpened3); + }} + > +
Fale Conosco
+ {isOpened3 && } +
-
-
FALE CONOSCO
- -
-
- - ); + + ); + } }; diff --git a/src/components/Footer/FooterMain.modules.scss b/src/components/Footer/FooterMain.modules.scss index 0ab9f15..126475c 100644 --- a/src/components/Footer/FooterMain.modules.scss +++ b/src/components/Footer/FooterMain.modules.scss @@ -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; } diff --git a/src/components/Footer/MenuListFooter.tsx b/src/components/Footer/MenuListFooter.tsx index 48e5a4a..d08a6c9 100644 --- a/src/components/Footer/MenuListFooter.tsx +++ b/src/components/Footer/MenuListFooter.tsx @@ -1,9 +1,14 @@ import { NavLink } from "react-router-dom"; +interface MenuFooterProps { + isOpened: boolean; + setIsOpened: React.Dispatch>; +} + export const MenuList1 = () => { return ( <> - + Quem Somos diff --git a/src/components/Footer/SocialMedia.tsx b/src/components/Footer/SocialMedia.tsx index 4b88291..db7b420 100644 --- a/src/components/Footer/SocialMedia.tsx +++ b/src/components/Footer/SocialMedia.tsx @@ -18,7 +18,8 @@ export const SocialMedia = () => { Linkedin-logo
www.loremipsum.com -
{window.innerWidth > 1024 ? : ""}
+ + {/*
{window.innerWidth > 1024 ? : ""}
*/}
); diff --git a/src/components/Footer/wpp.tsx b/src/components/Footer/wpp.tsx index 0a23738..2d9bb2f 100644 --- a/src/components/Footer/wpp.tsx +++ b/src/components/Footer/wpp.tsx @@ -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 ( <>
- Wpp-logo + + Wpp-logo +
- Ellipse-logo + Ellipse-logo { + window.scrollTo(0, 0); + }} + />
diff --git a/src/components/Header/HeaderDesktop.modules.scss b/src/components/Header/HeaderDesktop.modules.scss index f584e4f..05956ff 100644 --- a/src/components/Header/HeaderDesktop.modules.scss +++ b/src/components/Header/HeaderDesktop.modules.scss @@ -50,7 +50,7 @@ } @media (min-width: 2500px) { - height: 33px; + height: 29px; padding: 12px 16px; font-weight: 400; font-size: 28px; diff --git a/src/components/Header/HeaderMobile.modules.scss b/src/components/Header/HeaderMobile.modules.scss index a5111c1..84e7135 100644 --- a/src/components/Header/HeaderMobile.modules.scss +++ b/src/components/Header/HeaderMobile.modules.scss @@ -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; } -} +} \ No newline at end of file diff --git a/src/components/schema/CustonValidationsRegex.ts b/src/components/schema/CustonValidationsRegex.ts index 7f06086..e9f8791 100644 --- a/src/components/schema/CustonValidationsRegex.ts +++ b/src/components/schema/CustonValidationsRegex.ts @@ -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-]))?)/; diff --git a/src/pages/Contact.modules.scss b/src/pages/Contact.modules.scss index e0d1380..2090f6a 100644 --- a/src/pages/Contact.modules.scss +++ b/src/pages/Contact.modules.scss @@ -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 {