From 3dd76ceaf06bb028c61fb5140b15355844b82e01 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cain=C3=A3=20Milech?= <cainamilech15@hotmail.com>
Date: Fri, 30 Dec 2022 18:16:07 -0300
Subject: [PATCH] feat: Adiciona span de erros

---
 react-project/src/assets/styles/main.scss     |  2 +-
 .../styles/modules/Navigation.module.scss     | 26 ++++++----
 .../styles/modules/Newsletter.module.scss     | 27 ++++++++++
 .../src/assets/styles/variables.scss          |  2 +
 react-project/src/components/Main.tsx         | 52 +++++++++++++++++++
 react-project/src/components/Newsletter.tsx   | 10 ++--
 react-project/src/pages/Institucional.tsx     | 44 +---------------
 7 files changed, 102 insertions(+), 61 deletions(-)
 create mode 100644 react-project/src/components/Main.tsx

diff --git a/react-project/src/assets/styles/main.scss b/react-project/src/assets/styles/main.scss
index 2db6ec1..9d0ea18 100644
--- a/react-project/src/assets/styles/main.scss
+++ b/react-project/src/assets/styles/main.scss
@@ -35,7 +35,7 @@
     display: flex;
 
     .content {
-      width: 69.2%;
+      /*width: 69.2%;*/
       align-self: center;
 
       h2 {
diff --git a/react-project/src/assets/styles/modules/Navigation.module.scss b/react-project/src/assets/styles/modules/Navigation.module.scss
index 793de3b..96a83bc 100644
--- a/react-project/src/assets/styles/modules/Navigation.module.scss
+++ b/react-project/src/assets/styles/modules/Navigation.module.scss
@@ -5,18 +5,22 @@
   height: 285px;
   margin-right: 30px;
 
-  a {
-    color: var(--gray-200);
-    padding: 10px 16px;
-    display: block;
-    text-decoration: none;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 19px;
+  li {
+    width: inherit;
 
-    &.ativo {
-      color: var(--white);
-      background-color: var(--black);
+    a {
+      color: var(--gray-200);
+      padding: 10px 16px;
+      display: block;
+      text-decoration: none;
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 19px;
+
+      &.ativo {
+        color: var(--white);
+        background-color: var(--black);
+      }
     }
   }
 }
diff --git a/react-project/src/assets/styles/modules/Newsletter.module.scss b/react-project/src/assets/styles/modules/Newsletter.module.scss
index f3cdc3d..84ed949 100644
--- a/react-project/src/assets/styles/modules/Newsletter.module.scss
+++ b/react-project/src/assets/styles/modules/Newsletter.module.scss
@@ -17,6 +17,8 @@
     }
 
     form {
+      position: relative;
+
       input {
         padding: 13px 16px;
         border: 1px solid var(--gray-300);
@@ -27,6 +29,7 @@
         color: var(--gray-100);
         width: 340px;
         height: 42px;
+        margin-right: 8px;
 
         &::placeholder {
           font-weight: 400;
@@ -35,6 +38,30 @@
           color: var(--gray-100);
         }
       }
+
+      button {
+        width: 126px;
+        height: 42px;
+        padding: 14px 20px;
+        background: var(--black);
+        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+        border-radius: 4px;
+        border: none;
+        color: var(--white);
+        font-weight: 700;
+        font-size: 12px;
+        line-height: 14px;
+      }
+
+      span {
+        position: absolute;
+        left: 0px;
+        top: 42px;
+        font-weight: 400;
+        font-size: 10px;
+        line-height: 12px;
+        color: var(--red-100);
+      }
     }
   }
 }
diff --git a/react-project/src/assets/styles/variables.scss b/react-project/src/assets/styles/variables.scss
index cda43ca..b397e80 100644
--- a/react-project/src/assets/styles/variables.scss
+++ b/react-project/src/assets/styles/variables.scss
@@ -10,4 +10,6 @@
   --gray-100: #c4c4c4;
   --gray-200: #7d7d7d;
   --gray-300: #e5e5e5;
+
+  --red-100: #ff0000;
 }
diff --git a/react-project/src/components/Main.tsx b/react-project/src/components/Main.tsx
new file mode 100644
index 0000000..516bfbc
--- /dev/null
+++ b/react-project/src/components/Main.tsx
@@ -0,0 +1,52 @@
+import React from "react";
+
+import { Routes, Route } from "react-router-dom";
+
+import { Navigation } from "./Navigation";
+import { Newsletter } from "./Newsletter";
+
+import { Sobre } from "./Sobre";
+import { Pagamento } from "./Pagamento";
+import { Entrega } from "./Entrega";
+import { Troca } from "./Troca";
+import { Seguranca } from "./Seguranca";
+import { Contato } from "./Contato";
+
+//IMAGES
+import iconHome from "../assets/images/svgs/home.svg";
+import iconArrow from "../assets/images/svgs/arrow-right.svg";
+
+const Main = () => {
+  return (
+    <div className="main">
+      <div className="main__breadcrumb">
+        <figure>
+          <img src={iconHome} />
+        </figure>
+        <figure>
+          <img src={iconArrow} />
+        </figure>
+        <span>INSTITUCIONAL</span>
+      </div>
+
+      <h1 className="main__title">INSTITUCIONAL</h1>
+
+      <div className="main__wrapperNav">
+        <Navigation />
+
+        <Routes>
+          <Route path="/" element={<Sobre />} />
+          <Route path="/pagamento" element={<Pagamento />} />
+          <Route path="/entrega" element={<Entrega />} />
+          <Route path="/troca" element={<Troca />} />
+          <Route path="/seguranca" element={<Seguranca />} />
+          <Route path="/contato" element={<Contato />} />
+        </Routes>
+      </div>
+
+      <Newsletter />
+    </div>
+  );
+};
+
+export { Main };
diff --git a/react-project/src/components/Newsletter.tsx b/react-project/src/components/Newsletter.tsx
index b1dec97..24a028a 100644
--- a/react-project/src/components/Newsletter.tsx
+++ b/react-project/src/components/Newsletter.tsx
@@ -6,7 +6,7 @@ import { Formik, Form, Field, ErrorMessage } from "formik";
 import * as Yup from "yup";
 
 const FormSchema = Yup.object().shape({
-  email: Yup.string().required("Campo obrigatorio").email("email invalido"),
+  email: Yup.string().required("*Campo obrigatório").email("Email inválido"),
 });
 
 interface IEmailType {
@@ -37,12 +37,8 @@ const Newsletter = () => {
                 name="email"
                 className={errors.email && touched.email && "invalid"}
               />
-              <ErrorMessage
-                component="span"
-                name="email"
-                className="invalid-feedback"
-              />
-              <button type="submit">Enviar</button>
+              <ErrorMessage component="span" name="email" />
+              <button type="submit">ENVIAR</button>
             </Form>
           )}
         </Formik>
diff --git a/react-project/src/pages/Institucional.tsx b/react-project/src/pages/Institucional.tsx
index e3a8aa3..f583a87 100644
--- a/react-project/src/pages/Institucional.tsx
+++ b/react-project/src/pages/Institucional.tsx
@@ -5,54 +5,14 @@ import "../assets/styles/variables.scss";
 import "../assets/styles/main.scss";
 
 import { Header } from "../components/Header";
-import { Navigation } from "../components/Navigation";
-import { Newsletter } from "../components/Newsletter";
+import { Main } from "../components/Main";
 import { Footer } from "../components/Footer";
 
-import { Routes, Route } from "react-router-dom";
-
-import { Sobre } from "../components/Sobre";
-import { Pagamento } from "../components/Pagamento";
-import { Entrega } from "../components/Entrega";
-import { Troca } from "../components/Troca";
-import { Seguranca } from "../components/Seguranca";
-import { Contato } from "../components/Contato";
-//IMAGES
-import iconHome from "../assets/images/svgs/home.svg";
-import iconArrow from "../assets/images/svgs/arrow-right.svg";
-
 const Institucional = () => {
   return (
     <div>
       <Header />
-      <div className="main">
-        <div className="main__breadcrumb">
-          <figure>
-            <img src={iconHome} />
-          </figure>
-          <figure>
-            <img src={iconArrow} />
-          </figure>
-          <span>INSTITUCIONAL</span>
-        </div>
-
-        <h1 className="main__title">INSTITUCIONAL</h1>
-
-        <div className="main__wrapperNav">
-          <Navigation />
-          <Routes>
-            <Route path="/" element={<Sobre />} />
-            <Route path="/pagamento" element={<Pagamento />} />
-            <Route path="/entrega" element={<Entrega />} />
-            <Route path="/troca" element={<Troca />} />
-            <Route path="/seguranca" element={<Seguranca />} />
-            <Route path="/contato" element={<Contato />} />
-          </Routes>
-        </div>
-
-        <Newsletter />
-      </div>
-
+      <Main />
       <Footer />
     </div>
   );