diff --git a/desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/FooterTop.module.scss b/desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/FooterTop.module.scss index 55edad0..caf0950 100644 --- a/desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/FooterTop.module.scss +++ b/desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/FooterTop.module.scss @@ -24,7 +24,6 @@ @include mq($lg, max) { flex-direction: column; width: 100%; - gap: 12px; } @include mq($xl, min) { @@ -33,7 +32,6 @@ } &__redes-sociais-wrapper { - width: 19.9075%; @include mq($xl, min) { width: 16.956521739%; diff --git a/desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/components/InfoLinks.module.scss b/desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/components/InfoLinks.module.scss index bd7f075..ea1d021 100644 --- a/desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/components/InfoLinks.module.scss +++ b/desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/components/InfoLinks.module.scss @@ -14,13 +14,16 @@ &__title-wrapper { @include display(flex, row, center, space-between); - img { - display: none; - - @include mq($lg, max) { + @include mq($lg, max) { + margin-bottom: 12px; + img { display: block; } } + + img { + display: none; + } } &__title { @@ -49,6 +52,11 @@ margin-bottom: 12px; &:last-child { margin-bottom: 0; + + @include mq($lg, max) { + margin-bottom: 12px; + } + a { text-decoration: underline; } diff --git a/desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/components/RedesSociais.module.scss b/desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/components/RedesSociais.module.scss index 3091880..2492a78 100644 --- a/desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/components/RedesSociais.module.scss +++ b/desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/components/RedesSociais.module.scss @@ -19,10 +19,6 @@ margin-top: 12px; @include fontStyle(400, 14px, 16px, $primary-200); - @include mq($lg, max) { - display: none; - } - @include mq($xl, min) { @include fontStyleResponsive(28px, 33px); } diff --git a/desafio-react-typescript/src/components/Footer/components/Newsletter/Newsletter.tsx b/desafio-react-typescript/src/components/Footer/components/Newsletter/Newsletter.tsx index bb4715c..9f5ee11 100644 --- a/desafio-react-typescript/src/components/Footer/components/Newsletter/Newsletter.tsx +++ b/desafio-react-typescript/src/components/Footer/components/Newsletter/Newsletter.tsx @@ -1,22 +1,40 @@ -import React, { useState } from "react"; - +import React from "react"; +import { Formik, Form, Field } from "formik"; +import FormikSchema from "../../../../schema/NewsletterSchema"; import styles from "./Newsletter.module.scss"; +interface INewsletterForm { + email: string; +} + +const initialValues = { + email: "", +}; + export const Newsletter = () => { - const [value, setValue] = useState(""); return (

Assine Nossa Newsletter

- setValue(e.target.value)} - /> - + { + actions.resetForm(); + }} + initialValues={initialValues} + validationSchema={FormikSchema} + > +
+ + + +
diff --git a/desafio-react-typescript/src/schema/NewsletterSchema.ts b/desafio-react-typescript/src/schema/NewsletterSchema.ts new file mode 100644 index 0000000..8c25194 --- /dev/null +++ b/desafio-react-typescript/src/schema/NewsletterSchema.ts @@ -0,0 +1,5 @@ +import * as yup from "yup"; + +export default yup.object().shape({ + email: yup.string().required("*Campo obrigatório").email("*E-mail Inválido") +}) \ No newline at end of file