feat: Adiciona transitions e hover em links e button

react-project/src/components/MainInstitucional/Contato.tsx

@@ -1,8 +1,8 @@
 import { Formik, Form, Field, ErrorMessage } from "formik";
-import FormSchema from "./assets/schemas/FormSchema";
-
 import MaskedInput from "react-text-mask";
 
+import FormSchema from "./assets/schemas/FormSchema";
+
 import contato from "./assets/modules/Contato.module.scss";
 
 interface IFormikValues {
@@ -15,7 +15,6 @@ interface IFormikValues {
   terms: boolean;
 }
 
-//setar valores iniciais
 const initialValues = {
   name: "",
   email: "",
@@ -71,26 +70,19 @@ const Contato = () => {
 
       <Formik
         onSubmit={(values: IFormikValues, actions) => {
-          /*values.sent = true;*/
           console.log(values);
           actions.resetForm();
-          /*alert("formulario enviado");*/
           const sent = document.querySelector("#sent") as HTMLSpanElement;
           sent.innerHTML = "*Formulário enviado com sucesso!";
         }}
         initialValues={initialValues}
         validationSchema={FormSchema}
       >
-        {({ errors, touched, handleBlur }) => (
+        {({ handleBlur }) => (
           <Form>
             <div className={contato["forms__form-col"]}>
               <label htmlFor="name">Nome</label>
-              <Field
-                placeholder="Seu nome completo"
-                id="name"
-                name="name"
-                className={errors.name && touched.name && "invalid"}
-              />
+              <Field placeholder="Seu nome completo" id="name" name="name" />
               <ErrorMessage
                 component="span"
                 name="name"
@@ -99,12 +91,7 @@ const Contato = () => {
             </div>
             <div className={contato["forms__form-col"]}>
               <label htmlFor="email">E-mail</label>
-              <Field
-                placeholder="Seu e-mail"
-                id="email"
-                name="email"
-                className={errors.email && touched.email && "invalid"}
-              />
+              <Field placeholder="Seu e-mail" id="email" name="email" />
               <ErrorMessage
                 component="span"
                 name="email"
@@ -123,7 +110,6 @@ const Contato = () => {
                     type="text"
                     placeholder="000.000.000-00"
                     onBlur={handleBlur}
-                    className={errors.cpf && touched.cpf && "invalid"}
                   />
                 )}
               />
@@ -145,7 +131,6 @@ const Contato = () => {
                     type="text"
                     placeholder="00.00.0000"
                     onBlur={handleBlur}
-                    className={errors.date && touched.date && "invalid"}
                   />
                 )}
               />
@@ -167,7 +152,6 @@ const Contato = () => {
                     type="text"
                     placeholder="(00) 00000-0000"
                     onBlur={handleBlur}
-                    className={errors.telefone && touched.telefone && "invalid"}
                   />
                 )}
               />
@@ -184,22 +168,6 @@ const Contato = () => {
                 type="instagram"
                 id="instagram"
                 name="instagram"
-                className={errors.instagram && touched.instagram && "invalid"}
-                /*name="instagram"
-                render={({ field }: any) => (
-                  <MaskedInput
-                    {...field}
-                    guide={false}
-                    id="instagram"
-                    mask={insta}
-                    type="text"
-                    placeholder="@seuuser"
-                    onBlur={handleBlur}
-                    className={
-                      errors.instagram && touched.instagram && "invalid"
-                    }
-                  />
-                )}*/
               />
               <ErrorMessage
                 component="span"

react-project/src/components/MainInstitucional/assets/modules/Contato.module.scss

@@ -117,7 +117,7 @@
       opacity: 0;
       width: 14px;
       height: 14px;
-      margin-left: 1px;
+      margin-left: 1.3px;
       margin-top: 1.5px;
 
       @media screen and (min-width: 2500px) {
@@ -154,6 +154,7 @@
   button {
     width: 100%;
     height: 52.44px;
+    border: none;
     border-radius: 25px;
     background-color: var(--black);
     font-weight: 400;
@@ -162,6 +163,15 @@
     letter-spacing: 0.05em;
     color: var(--white);
     cursor: pointer;
+    transition: all 0.2s linear;
+
+    &:hover {
+      background-color: var(--black-100);
+    }
+
+    &:active {
+      background-color: var(--black);
+    }
 
     @media screen and (min-width: 2500px) {
       font-size: 32px;

react-project/src/components/MainInstitucional/assets/modules/Main.module.scss

@@ -1,5 +1,4 @@
 .main {
-  border: 1px solid var(--gray-100);
   margin-left: 100px;
   margin-right: 100px;
   margin-top: 29px;

react-project/src/components/MainInstitucional/assets/modules/Navigation.module.scss

@@ -29,6 +29,11 @@
       font-weight: 400;
       font-size: 16px;
       line-height: 19px;
+      transition: all 0.2s linear;
+
+      &:hover {
+        color: var(--black);
+      }
 
       @media screen and (min-width: 2500px) {
         font-size: 32px;