From 72edd763a5de57b6d72bfb30ddacb8ea70755c88 Mon Sep 17 00:00:00 2001
From: Emerson Fully <63175980+emersonfully@users.noreply.github.com>
Date: Fri, 24 Feb 2023 22:34:55 -0300
Subject: [PATCH] hotfix: Ajustes em elementos CSS que estavam com propriedades
 erradas

---
 src/components/footer/Footer.module.scss      | 28 +++++++++++++++++--
 src/components/footer/Footer.tsx              |  2 --
 src/components/footer/FooterBottom.tsx        | 12 ++++++--
 src/components/footer/FooterNewsletter.tsx    |  4 +--
 src/components/header/Header.module.scss      |  3 +-
 src/components/main/Form/CustomForm.scss      | 19 +++++++++++--
 src/components/main/Form/CustomForm.tsx       |  2 +-
 src/components/main/Main.module.scss          |  5 ++--
 src/components/main/Main.tsx                  |  6 ++--
 .../TitleAndBreadGrumb.module.scss            |  5 ++++
 10 files changed, 69 insertions(+), 17 deletions(-)

diff --git a/src/components/footer/Footer.module.scss b/src/components/footer/Footer.module.scss
index 956ff79..0ff46fc 100644
--- a/src/components/footer/Footer.module.scss
+++ b/src/components/footer/Footer.module.scss
@@ -9,6 +9,9 @@ footer {
   align-items: center;
   justify-content: center;
   padding: 16px;
+
+  border-top: 1px solid black;
+  border-bottom: 1px solid black;
   // height: 104px;
 
   .newsletter__container__span {
@@ -17,7 +20,7 @@ footer {
     font-size: 18px;
     line-height: 21px;
     letter-spacing: 0.05em;
-    font-variant: small-caps;
+    text-transform: uppercase;
 
     @media screen and (min-width: 2500px) {
       font-weight: 500;
@@ -282,16 +285,29 @@ ul {
   display: flex;
   list-style: none;
 
+  li {
+    margin: 0 6px;
+
+    @media screen and (max-width: 1024px) {
+      margin: 0 4px;
+    }
+  }
+
   & span {
     background-color: $color-white;
     display: inline-block;
     height: 24px;
-    margin: -5px 6px 0 0;
+    margin: -5px 6px 0;
     width: 1px;
   }
 
   & img {
     height: 30px;
+
+    @media screen and (max-width: 1024px) {
+      height: 17px;
+    }
+
     @media screen and (min-width: 2500px) {
       height: 40px;
     }
@@ -300,6 +316,10 @@ ul {
   .stamps__vtexPci {
     height: 46px;
 
+    @media screen and (max-width: 1024px) {
+      height: 28px;
+    }
+
     @media screen and (min-width: 2500px) {
       height: 66px;
     }
@@ -323,6 +343,10 @@ ul {
   list-style-type: none;
   margin: 0;
 
+  .developedBy__link {
+    display: flex;
+  }
+
   & span {
     font-weight: 400;
     font-size: 10px;
diff --git a/src/components/footer/Footer.tsx b/src/components/footer/Footer.tsx
index dcca1e9..598c5df 100644
--- a/src/components/footer/Footer.tsx
+++ b/src/components/footer/Footer.tsx
@@ -7,9 +7,7 @@ import { FooterBottom } from "./FooterBottom";
 const Footer = () => {
   return (
     <footer>
-      <hr />
       <FooterNewsletter />
-      <hr />
       <FooterTop />
       <FooterBottom />
     </footer>
diff --git a/src/components/footer/FooterBottom.tsx b/src/components/footer/FooterBottom.tsx
index 3a0592d..ad41e79 100644
--- a/src/components/footer/FooterBottom.tsx
+++ b/src/components/footer/FooterBottom.tsx
@@ -47,13 +47,21 @@ const FooterBottom = () => {
       </ul>
       <ul className={style.stamps__developedBy}>
         <li>
-          <a href="https://vtex.com/br-pt/">
+          <a
+            className={style.developedBy__link}
+            href="https://vtex.com/br-pt/"
+            target="_blank"
+          >
             <span>Powered By</span>
             <img src={logoVTEX} alt="" />
           </a>
         </li>
         <li>
-          <a href="https://m3ecommerce.com/">
+          <a
+            className={style.developedBy__link}
+            href="https://m3ecommerce.com/"
+            target="_blank"
+          >
             <span>Developed By</span>
             <img src={logoM3} alt="" />
           </a>
diff --git a/src/components/footer/FooterNewsletter.tsx b/src/components/footer/FooterNewsletter.tsx
index 06be0b6..1e59ede 100644
--- a/src/components/footer/FooterNewsletter.tsx
+++ b/src/components/footer/FooterNewsletter.tsx
@@ -11,10 +11,10 @@ const FooterNewsletter = () => {
         <input
           className={style.newsletter__input}
           type="text"
-          placeholder="Buscar..."
+          placeholder="E-mail"
         />
         <button className={style.newsletter__submitButton} type="submit">
-          Enviar
+          ENVIAR
         </button>
       </div>
     </div>
diff --git a/src/components/header/Header.module.scss b/src/components/header/Header.module.scss
index 3f4bef8..d0e57fd 100644
--- a/src/components/header/Header.module.scss
+++ b/src/components/header/Header.module.scss
@@ -78,6 +78,7 @@ header {
   @media screen and (max-width: 1024px) {
     width: 100%;
     margin-bottom: 25px;
+    height: 36px;
   }
 }
 
@@ -131,7 +132,7 @@ header {
 
   & a {
     color: $color-white;
-    margin-right: 50px;
+    margin-right: 55px;
     text-transform: uppercase;
 
     @media screen and (min-width: 2500px) {
diff --git a/src/components/main/Form/CustomForm.scss b/src/components/main/Form/CustomForm.scss
index 8ea7630..9412a1e 100644
--- a/src/components/main/Form/CustomForm.scss
+++ b/src/components/main/Form/CustomForm.scss
@@ -35,7 +35,6 @@
 .form-col {
   display: flex;
   flex-direction: column;
-  padding-bottom: 18px;
   margin-bottom: 12px;
   position: relative;
 }
@@ -48,18 +47,34 @@
 
   color: #100d0e;
   margin: 0 0 12px 12px;
+
+  @media screen and (min-width: 1920px) {
+    font-size: 28px;
+    line-height: 33px;
+  }
 }
 
 .form-col input {
   height: 36px;
   border-radius: 25px;
-  border: 1px solid #ccc;
+  border: 1px solid #100d0e;
   outline: 0;
 
   padding: 0 12px;
 
   font-size: 14px;
   color: $color-black;
+
+  @media screen and (min-width: 1920px) {
+    font-size: 24px;
+    height: 63px;
+    padding: 0 15px;
+    &::placeholder {
+      font-weight: 400;
+      font-size: 24px;
+      line-height: 33px;
+    }
+  }
 }
 
 .form-col input.invalid {
diff --git a/src/components/main/Form/CustomForm.tsx b/src/components/main/Form/CustomForm.tsx
index 1b42a1f..08a6033 100644
--- a/src/components/main/Form/CustomForm.tsx
+++ b/src/components/main/Form/CustomForm.tsx
@@ -172,7 +172,7 @@ const CustomForm = () => {
               id="instagram"
               name="instagram"
               className={errors.instagram && touched.instagram && "invalid"}
-              placeholder="@instagram"
+              placeholder="@seuuser"
             />
             <ErrorMessage
               component="span"
diff --git a/src/components/main/Main.module.scss b/src/components/main/Main.module.scss
index b758a55..047d1b5 100644
--- a/src/components/main/Main.module.scss
+++ b/src/components/main/Main.module.scss
@@ -26,7 +26,7 @@
 
   li {
     font-style: normal;
-    font-weight: 700;
+    font-weight: 400;
     font-size: 16px;
     line-height: 19px;
 
@@ -85,7 +85,6 @@
     font-style: normal;
     font-weight: 400;
     font-size: 13px;
-    line-height: 15px;
 
     color: #7d7d7d;
 
@@ -99,5 +98,7 @@
 
   @media screen and (max-width: 1024px) {
     width: 100%;
+    line-height: 18px;
+    text-align: justify;
   }
 }
diff --git a/src/components/main/Main.tsx b/src/components/main/Main.tsx
index e5ace18..1c8a69c 100644
--- a/src/components/main/Main.tsx
+++ b/src/components/main/Main.tsx
@@ -7,7 +7,7 @@ import { Title } from "./TitleAndBreadCrumb/Title";
 
 const GenericText = () => (
   <>
-    <p>
+    <p className={style.genericText}>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
       veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
@@ -17,7 +17,7 @@ const GenericText = () => (
       est laborum.
     </p>
     <br />
-    <p>
+    <p className={style.genericText}>
       Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
       doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
       inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
@@ -28,7 +28,7 @@ const GenericText = () => (
       incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
     </p>
     <br />
-    <p>
+    <p className={style.genericText}>
       Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
       suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem
       vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil
diff --git a/src/components/main/TitleAndBreadCrumb/TitleAndBreadGrumb.module.scss b/src/components/main/TitleAndBreadCrumb/TitleAndBreadGrumb.module.scss
index 40aa7cc..012a5f6 100644
--- a/src/components/main/TitleAndBreadCrumb/TitleAndBreadGrumb.module.scss
+++ b/src/components/main/TitleAndBreadCrumb/TitleAndBreadGrumb.module.scss
@@ -9,6 +9,7 @@
 .breadgrumb__ul {
   display: flex;
   flex-direction: row;
+  align-items: center;
 
   .homeButton {
     @media screen and (min-width: 2500px) {
@@ -51,6 +52,10 @@
 
   color: $color-gray;
 
+  @media screen and (max-width: 1024px) {
+    margin: 80px 0 40px;
+  }
+
   @media screen and (min-width: 2500px) {
     font-weight: 400;
     font-size: 48px;