diff --git a/react-project/src/components/Footer/Newsletter.tsx b/react-project/src/components/Footer/Newsletter.tsx index 54cfd4e..653136b 100644 --- a/react-project/src/components/Footer/Newsletter.tsx +++ b/react-project/src/components/Footer/Newsletter.tsx @@ -1,7 +1,7 @@ -import newsletter from "./assets/modules/Newsletter.module.scss"; - import { Formik, Form, Field, ErrorMessage } from "formik"; +import { useState } from "react"; +import newsletter from "./assets/modules/Newsletter.module.scss"; import NewsletterSchema from "./assets/schemas/NewsletterSchema"; interface IEmailType { @@ -9,30 +9,44 @@ interface IEmailType { } const Newsletter = () => { + const [feedback, setFeedback] = useState(false); + const Feedback = () => { + setFeedback(!feedback); + }; + return (

ASSINE NOSSA NEWSLETTER

{ + Feedback(); actions.resetForm(); - const sent = document.querySelector( - "#emailsent" - ) as HTMLSpanElement; - sent.innerHTML = "Email cadastrado com sucesso!"; }} initialValues={{ email: "" }} validationSchema={NewsletterSchema} >
- + { + setFeedback(false); + }} + /> - + + {feedback ? ( + + Email cadastrado com sucesso! + + ) : undefined}
diff --git a/react-project/src/components/Footer/SitemapAccordion.tsx b/react-project/src/components/Footer/SitemapAccordion.tsx index 3f0838b..a8bf342 100644 --- a/react-project/src/components/Footer/SitemapAccordion.tsx +++ b/react-project/src/components/Footer/SitemapAccordion.tsx @@ -4,6 +4,7 @@ import { AccordionHeader, AccordionItem, } from "react-headless-accordion"; +import { useState } from "react"; import { Link } from "./Link"; import links from "./assets/modules/SitemapAccordion.module.scss"; @@ -11,12 +12,26 @@ import links from "./assets/modules/SitemapAccordion.module.scss"; import more from "./assets/svgs/more.svg"; const SitemapAccordion = () => { + const [institucional, setInstitucional] = useState(false); + const [duvidas, setDuvidas] = useState(false); + const [faleConosco, setFaleConosco] = useState(false); + + const changeIcon1 = () => { + setInstitucional(!institucional); + }; + const changeIcon2 = () => { + setDuvidas(!duvidas); + }; + const changeIcon3 = () => { + setFaleConosco(!faleConosco); + }; + return ( - +

Institucional

- Icone de + + {institucional ? - : Icone de +}
@@ -30,9 +45,9 @@ const SitemapAccordion = () => {
- +

Dúvidas

- Icone de + + {duvidas ? - : Icone de +}
@@ -46,9 +61,9 @@ const SitemapAccordion = () => {
- +

Fale Conosco

- Icone de + + {faleConosco ? - : Icone de +}
diff --git a/react-project/src/components/Footer/assets/modules/SitemapAccordion.module.scss b/react-project/src/components/Footer/assets/modules/SitemapAccordion.module.scss index 012ad38..a15fcc8 100644 --- a/react-project/src/components/Footer/assets/modules/SitemapAccordion.module.scss +++ b/react-project/src/components/Footer/assets/modules/SitemapAccordion.module.scss @@ -20,6 +20,12 @@ line-height: 16px; color: var(--black-200); } + + span { + font-size: 21px; + font-weight: bold; + color: var(--black-200); + } } ul { diff --git a/react-project/src/components/Header/assets/modules/Hamburguer.module.scss b/react-project/src/components/Header/assets/modules/Hamburguer.module.scss index 587b105..c109225 100644 --- a/react-project/src/components/Header/assets/modules/Hamburguer.module.scss +++ b/react-project/src/components/Header/assets/modules/Hamburguer.module.scss @@ -11,7 +11,7 @@ .content { position: absolute; background-color: var(--white); - width: 97.4609%; + width: 96.4845%; height: 585px; @media screen and (max-width: 599px) { diff --git a/react-project/src/components/MainInstitucional/Contato.tsx b/react-project/src/components/MainInstitucional/Contato.tsx index 76f05ae..61d9be1 100644 --- a/react-project/src/components/MainInstitucional/Contato.tsx +++ b/react-project/src/components/MainInstitucional/Contato.tsx @@ -1,5 +1,6 @@ import { Formik, Form, Field, ErrorMessage } from "formik"; import MaskedInput from "react-text-mask"; +import { useState } from "react"; import FormSchema from "./assets/schemas/FormSchema"; @@ -23,10 +24,20 @@ const initialValues = { telefone: "", instagram: "", terms: false, - /*sent: false,*/ }; -const dateMask = [/\d/, /\d/, ".", /\d/, /\d/, ".", /\d/, /\d/, /\d/, /\d/]; +const dateMask = [ + /[0-3]/, + /\d/, + ".", + /[0-1]/, + /\d/, + ".", + /[1-2]/, + /\d/, + /\d/, + /\d/, +]; const cpfMask = [ /\d/, /\d/, @@ -62,16 +73,20 @@ const phoneNumberMask = [ ]; const Contato = () => { + const [feedback, setFeedback] = useState(false); + const Feedback = () => { + setFeedback(true); + }; + return (

Preencha o formulário

{ + Feedback(); console.log(values); actions.resetForm(); - const sent = document.querySelector("#sent") as HTMLSpanElement; - sent.innerHTML = "*Formulário enviado com sucesso!"; }} initialValues={initialValues} validationSchema={FormSchema} @@ -80,7 +95,14 @@ const Contato = () => {
- + { + setFeedback(false); + }} + placeholder="Seu nome completo" + id="name" + name="name" + /> {
- + + {feedback ? ( + + *Formulário enviado com sucesso! + + ) : undefined}
)}