From 7264458c4adf12d0b9fc85b208d847ce6beaed8c Mon Sep 17 00:00:00 2001
From: MateusLopes <mateus20.lopes02@gmail.com>
Date: Tue, 17 Jan 2023 21:42:44 -0300
Subject: [PATCH] feat: add modulo scss no componente formulario

---
 src/components/Large/Form/ContactForm.tsx     | 80 +++++++++----------
 ...ntactForm.scss => contactForm.module.scss} |  7 ++
 src/global.scss                               |  1 -
 3 files changed, 47 insertions(+), 41 deletions(-)
 rename src/components/Large/Form/{contactForm.scss => contactForm.module.scss} (97%)

diff --git a/src/components/Large/Form/ContactForm.tsx b/src/components/Large/Form/ContactForm.tsx
index d710f88..14c27eb 100644
--- a/src/components/Large/Form/ContactForm.tsx
+++ b/src/components/Large/Form/ContactForm.tsx
@@ -1,5 +1,6 @@
-import { Formik, Form, Field, ErrorMessage } from "formik"
+import { Formik, Form, Field, ErrorMessage } from 'formik'
 import FormSchema from '../../../schema/FormSchema';
+import styles from './contactForm.module.scss'
 
 interface IFormikValues{
     name: string;
@@ -12,12 +13,12 @@ interface IFormikValues{
 }
 
 const initialValues = {
-    name: "",
-    email: "",
-    cpf: "",
-    birthDate: "",
-    phone: "",
-    instagram: "",
+    name: '',
+    email: '',
+    cpf: '',
+    birthDate: '',
+    phone: '',
+    instagram: '',
     check: false
 }
 
@@ -26,15 +27,14 @@ const ContactForm = () => {
         let successMessage:any = document.querySelector('.success-message')
         
         let intervalo = window.setInterval(function () {
-            successMessage.innerText = "*Formulário enviado com sucesso!"
+            successMessage.innerText = '*Formulário enviado com sucesso!'
         }, 800)
 
         window.setTimeout(function () {
             clearInterval(intervalo)
-            successMessage.innerText = ""
+            successMessage.innerText = ''
         }, 30000)
 
-        console.log(values);
         resetForm({values: ''})
     }
 
@@ -43,46 +43,46 @@ const ContactForm = () => {
         initialValues={initialValues}
         validationSchema={FormSchema}
     >
-        <Form className='contact-form'>
-            <div className='form-input-box'>
-                <label htmlFor="name">Nome</label>
-                <ErrorMessage component='span' name="name" className='form-invalid-feedback'/>
-                <Field id="name" name="name" placeholder="Seu nome completo" className="form-input" />
+        <Form className={styles['contact-form']}>
+            <div className={styles['form-input-box']}>
+                <label htmlFor='name'>Nome</label>
+                <ErrorMessage component='span' name='name' className={styles['form-invalid-feedback']}/>
+                <Field id='name' name='name' placeholder='Seu nome completo' className={styles['form-input']} />
             </div>
-            <div className='form-input-box'>
-                <label htmlFor="email">E-mail</label>
-                <ErrorMessage component='span' name="email" className='form-invalid-feedback'/>
-                <Field id="email" name="email" placeholder="Seu e-mail" className="form-input"/>
+            <div className={styles['form-input-box']}>
+                <label htmlFor='email'>E-mail</label>
+                <ErrorMessage component='span' name='email' className={styles['form-invalid-feedback']}/>
+                <Field id='email' name='email' placeholder='Seu e-mail' className={styles['form-input']}/>
             </div>
-            <div className='form-input-box'>
-                <label htmlFor="cpf">CPF</label>
-                <ErrorMessage component='span' name="cpf" className='form-invalid-feedback'/>
-                <Field id="cpf" name="cpf" placeholder="000.000.000-00" className="form-input"/>
+            <div className={styles['form-input-box']}>
+                <label htmlFor='cpf'>CPF</label>
+                <ErrorMessage component='span' name='cpf' className={styles['form-invalid-feedback']}/>
+                <Field id='cpf' name='cpf' placeholder='000.000.000-00' className={styles['form-input']}/>
             </div>
-            <div className='form-input-box'>
-                <label htmlFor="birthDate">Data de Nascimento:</label>
-                <ErrorMessage component='span' name="birthDate" className='form-invalid-feedback'/>
-                <Field id="birthDate" name="birthDate" placeholder="00.00.0000" className="form-input"/>
+            <div className={styles['form-input-box']}>
+                <label htmlFor='birthDate'>Data de Nascimento:</label>
+                <ErrorMessage component='span' name='birthDate' className={styles['form-invalid-feedback']}/>
+                <Field id='birthDate' name='birthDate' placeholder='00.00.0000' className={styles['form-input']}/>
             </div>
-            <div className='form-input-box'>
-                <label htmlFor="phone">Telefone:</label>
-                <ErrorMessage component='span' name="phone" className='form-invalid-feedback'/>
-                <Field id="phone" name="phone" placeholder="(00) 00000-0000" className="form-input"/>
+            <div className={styles['form-input-box']}>
+                <label htmlFor='phone'>Telefone:</label>
+                <ErrorMessage component='span' name='phone' className={styles['form-invalid-feedback']}/>
+                <Field id='phone' name='phone' placeholder='(00) 00000-0000' className={styles['form-input']}/>
             </div>
-            <div className='form-input-box'>
-                <label htmlFor="instagram">Instagram</label>
-                <Field id="instagram" name="instagram" placeholder="@seuuser-" className="form-input"/>
+            <div className={styles['form-input-box']}>
+                <label htmlFor='instagram'>Instagram</label>
+                <Field id='instagram' name='instagram' placeholder='@seuuser-' className={styles['form-input']}/>
             </div>
 
-            <div className='check-input-box'>
-                <ErrorMessage component='span' name="check" className='form-invalid-feedback-check' />
+            <div className={styles['check-input-box']}>
+                <ErrorMessage component='span' name='check' className={styles['form-invalid-feedback-check' ]}/>
                 <span>*</span>
-                <label htmlFor="check">Declaro que li e aceito</label>
-                <Field type="checkbox" id="check" name="check" className="checkbox-custom"/>
+                <label htmlFor='check'>Declaro que li e aceito</label>
+                <Field type='checkbox' id='check' name='check' className={styles['checkbox-custom']}/>
             </div>
             
-            <button type="submit" className='form-submit-btn'>Cadastre-se</button>
-            <div className='success-message'></div>
+            <button type='submit' className={styles['form-submit-btn']}>Cadastre-se</button>
+            <div className={styles['success-message']}></div>
         </Form>
     </Formik>
 }
diff --git a/src/components/Large/Form/contactForm.scss b/src/components/Large/Form/contactForm.module.scss
similarity index 97%
rename from src/components/Large/Form/contactForm.scss
rename to src/components/Large/Form/contactForm.module.scss
index 434d917..2537c79 100644
--- a/src/components/Large/Form/contactForm.scss
+++ b/src/components/Large/Form/contactForm.module.scss
@@ -1,8 +1,15 @@
+@import "../../../global.scss";
+
 .contact-form {
     display: flex;
     flex-direction: column;
     gap: 12px;
 
+    a {
+        display: block;
+        width: 100%;
+    }
+
     .form-input-box {
         display: flex;
         flex-direction: column;
diff --git a/src/global.scss b/src/global.scss
index 96dbb3a..c48085b 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -52,4 +52,3 @@ button {
 
 // Pages
 @import "./pages/institucional.scss";
-@import "./components/Large/Form/contactForm.scss";