diff --git a/react-project/src/assets/styles/modules/Contato.module.scss b/react-project/src/assets/styles/modules/Contato.module.scss index 7b77631..395ab9e 100644 --- a/react-project/src/assets/styles/modules/Contato.module.scss +++ b/react-project/src/assets/styles/modules/Contato.module.scss @@ -1,5 +1,6 @@ .forms { width: 100%; + position: relative; h2 { font-weight: 700; @@ -46,6 +47,7 @@ &__terms { display: flex; justify-content: center; + align-items: end; margin-bottom: 12px; span { @@ -103,5 +105,17 @@ line-height: 19px; letter-spacing: 0.05em; color: var(--white); + cursor: pointer; + } + + &__success { + position: absolute; + transform: translateY(100%); + bottom: -12.56px; + left: 0; + font-weight: 400; + font-size: 12px; + line-height: 14px; + color: var(--green-100); } } diff --git a/react-project/src/assets/styles/modules/Main.module.scss b/react-project/src/assets/styles/modules/Main.module.scss index 10d1883..5b1f8e1 100644 --- a/react-project/src/assets/styles/modules/Main.module.scss +++ b/react-project/src/assets/styles/modules/Main.module.scss @@ -8,6 +8,10 @@ align-items: center; gap: 9.72px; + a { + display: contents; + } + figure { display: contents; } diff --git a/react-project/src/assets/styles/modules/Newsletter.module.scss b/react-project/src/assets/styles/modules/Newsletter.module.scss index 84ed949..3d2574f 100644 --- a/react-project/src/assets/styles/modules/Newsletter.module.scss +++ b/react-project/src/assets/styles/modules/Newsletter.module.scss @@ -51,17 +51,28 @@ font-weight: 700; font-size: 12px; line-height: 14px; + cursor: pointer; } + } - span { - position: absolute; - left: 0px; - top: 42px; - font-weight: 400; - font-size: 10px; - line-height: 12px; - color: var(--red-100); - } + .invalid { + position: absolute; + left: 0px; + top: 42px; + font-weight: 400; + font-size: 10px; + line-height: 12px; + color: var(--red-100); + } + + .success { + position: absolute; + left: 100px; + top: 42px; + font-weight: 400; + font-size: 10px; + line-height: 12px; + color: var(--green-100); } } } diff --git a/react-project/src/assets/styles/variables.scss b/react-project/src/assets/styles/variables.scss index b84e57e..b14bee3 100644 --- a/react-project/src/assets/styles/variables.scss +++ b/react-project/src/assets/styles/variables.scss @@ -14,4 +14,6 @@ --gray-400: #b9b7b7; --red-100: #ff0000; + + --green-100: #008000; } diff --git a/react-project/src/components/Contato.tsx b/react-project/src/components/Contato.tsx index 324b719..b9ded7c 100644 --- a/react-project/src/components/Contato.tsx +++ b/react-project/src/components/Contato.tsx @@ -1,7 +1,6 @@ -import React from "react"; import { Formik, Form, Field, ErrorMessage } from "formik"; import FormSchema from "../schema/FormSchema"; -import { render } from "react-dom"; + import MaskedInput from "react-text-mask"; import contato from "../assets/styles/modules/Contato.module.scss"; @@ -14,6 +13,7 @@ interface IFormikValues { telefone: string; instagram: string; terms: boolean; + /*sent: boolean;*/ } //setar valores iniciais @@ -25,6 +25,7 @@ const initialValues = { telefone: "", instagram: "", terms: false, + /*sent: false,*/ }; const dateMask = [/\d/, /\d/, ".", /\d/, /\d/, ".", /\d/, /\d/, /\d/, /\d/]; @@ -69,15 +70,26 @@ const insta = ["@"]; const Contato = () => { /*const handleFormikSubmit = (values: IFormikValues, actions) => {};*/ + /*const teste = (values: IFormikValues) => { + if (values.sent) { + const h2Tag = document.querySelector("#enviado") as HTMLSpanElement; + h2Tag.innerHTML = "TESTE"; + alert("TESTANDO TESTE"); + } + };*/ + return (