Merge pull request 'hotfix: Ajustes em elementos CSS que estavam com propriedades erradas' (#2) from desenvolvimento into main

Reviewed-on: #2

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;

src/components/footer/Footer.tsx

@@ -7,9 +7,7 @@ import { FooterBottom } from "./FooterBottom";
 const Footer = () => {
   return (
     <footer>
-      <hr />
       <FooterNewsletter />
-      <hr />
       <FooterTop />
       <FooterBottom />
     </footer>

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>

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>

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) {

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 {

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"

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;
   }
 }

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

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;