From 0e766244311ba2caf06985c646d2130ff9d13ed5 Mon Sep 17 00:00:00 2001
From: Carlos Lins <carloslinsdev@gmail.com>
Date: Fri, 6 Jan 2023 19:11:41 -0300
Subject: [PATCH] =?UTF-8?q?fix:=20Melhorando=20a=20sem=C3=A2ntica=20do=20c?=
 =?UTF-8?q?=C3=B3digo=20e=20organiza=C3=A7=C3=A3o?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Footer/FooterBottom/FooterBottom.tsx      | 24 +++++++-----
 .../FooterBottom/footerBottom.module.scss     | 37 +++++++++++--------
 src/components/Header/Header.tsx              | 10 +++--
 src/components/Header/header.module.scss      |  5 ++-
 src/index.tsx                                 |  2 +-
 src/pages/Home.tsx                            | 22 ++++++-----
 src/pages/home.module.scss                    | 23 +++---------
 src/{ => styles}/global.scss                  |  4 --
 8 files changed, 64 insertions(+), 63 deletions(-)
 rename src/{ => styles}/global.scss (93%)

diff --git a/src/components/Footer/FooterBottom/FooterBottom.tsx b/src/components/Footer/FooterBottom/FooterBottom.tsx
index db20885..8ed8d50 100644
--- a/src/components/Footer/FooterBottom/FooterBottom.tsx
+++ b/src/components/Footer/FooterBottom/FooterBottom.tsx
@@ -65,19 +65,23 @@ export default function FooterBottom() {
       <ul className={styles.containerDevelop}>
         <li>
           <span>Powered by</span>
-          <img
-            className={styles.logoVtexFooter}
-            src="/assets/icons/logoVTEXM3Academy.svg"
-            alt="Logo VTEX"
-          />
+          <a href="https://vtex.com/br-pt/">
+            <img
+              className={styles.logoVtexFooter}
+              src="/assets/icons/logoVTEXM3Academy.svg"
+              alt="Logo VTEX"
+            />
+          </a>
         </li>
         <li>
           <span>Developed by</span>
-          <img
-            className={styles.logoM3Footer}
-            src="/assets/icons/logoM3M3Academy.svg"
-            alt="Logo M3"
-          />
+          <a href="https://m3ecommerce.com/">
+            <img
+              className={styles.logoM3Footer}
+              src="/assets/icons/logoM3M3Academy.svg"
+              alt="Logo M3"
+            />
+          </a>
         </li>
       </ul>
     </div>
diff --git a/src/components/Footer/FooterBottom/footerBottom.module.scss b/src/components/Footer/FooterBottom/footerBottom.module.scss
index 69ce8b8..c3f0ffc 100644
--- a/src/components/Footer/FooterBottom/footerBottom.module.scss
+++ b/src/components/Footer/FooterBottom/footerBottom.module.scss
@@ -36,6 +36,7 @@
         width: 100%;
         img {
           width: 36px;
+          height: 20px;
         }
       }
     }
@@ -58,6 +59,7 @@
 
         .vtexIcon {
           width: 54.61px;
+          height: 34px;
         }
       }
     }
@@ -80,6 +82,12 @@
       line-height: 12px;
     }
 
+    li a {
+      height: 16px;
+      display: flex;
+      align-items: center;
+    }
+
     .logoVtexFooter {
       width: 44.92px;
       height: 16px;
@@ -163,34 +171,35 @@
       grid-area: address;
       width: 100%;
       max-width: 258px;
-      max-height: 12px;
-      line-height: 12px;
-
-      p {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
     }
 
     .footerPayments {
       grid-area: payments;
       max-width: 344px;
       width: auto;
+    }
 
+    .containerDevelop {
+      grid-area: develop;
+    }
+  }
+}
+
+@media screen and (max-width: 430px) {
+  .containerFooterBottom {
+    .footerPayments {
       .footerPaymentsWrapper {
         div {
           gap: 11px;
           img {
-            width: 30.27px;
-            height: 16.97px;
+            width: 30px;
+            height: 17px;
           }
         }
       }
 
       .divider {
-        height: 20.36px;
-        margin: 0 10px;
+        height: 20px;
       }
 
       .footerPaymentsWrapperVtex {
@@ -202,10 +211,6 @@
         }
       }
     }
-
-    .containerDevelop {
-      grid-area: develop;
-    }
   }
 }
 
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index e6b534b..87b360d 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -16,11 +16,15 @@ export default function Header() {
     <>
       <header>
         <div className={styles.containerHeader}>
-          <div onClick={openMenuToggle} className={styles.menuToggle}>
+          <button
+            onClick={openMenuToggle}
+            className={styles.menuToggle}
+            arial-label="Abrir menu de navegação"
+          >
             <div className={styles.toggleOne}></div>
             <div className={styles.toggleTwo}></div>
             <div className={styles.toggleThree}></div>
-          </div>
+          </button>
           <img
             className={styles.logo}
             src="/assets/images/Logo-M3Academy.png"
@@ -33,7 +37,7 @@ export default function Header() {
               name="search"
               placeholder="Buscar..."
             />
-            <button type="submit">
+            <button type="submit" arial-label="Pesquisar">
               <img src="/assets/icons/search-icon.svg" alt="Buscar" />
             </button>
           </form>
diff --git a/src/components/Header/header.module.scss b/src/components/Header/header.module.scss
index b47946b..3a671a7 100644
--- a/src/components/Header/header.module.scss
+++ b/src/components/Header/header.module.scss
@@ -8,6 +8,7 @@
 
   .menuToggle {
     display: none;
+    background: transparent;
   }
 
   .logo {
@@ -51,7 +52,7 @@
 
     button {
       background: transparent;
-      height: auto;
+      height: 18px;
       padding-right: 16px;
 
       img {
@@ -108,7 +109,7 @@
 
       button {
         background: transparent;
-        height: auto;
+        height: 35.5px;
         padding-right: 11px;
 
         img {
diff --git a/src/index.tsx b/src/index.tsx
index 9f87c9c..ce8d748 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import "./global.scss";
+import "./styles/global.scss";
 import Home from "./pages/Home";
 
 const root = ReactDOM.createRoot(
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 24da6f2..c485728 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -29,19 +29,21 @@ function Home() {
       <Footer />
       {pageYPosition > 140 && (
         <div className={styles.floatElementsFooter}>
-          <div className={styles.whatsappIcon}>
+          <button className={styles.whatsappIcon} arial-label="WhatsApp">
             <a href="http://api.whatsapp.com/send?1=pt_BR&phone=5582999976243">
               <img src="/assets/icons/whatsapp-icon.svg" alt="WhatsApp" />
             </a>
-          </div>
-          <div className={styles.topoSiteIcon}>
-            <button onClick={btnScrollTop}>
-              <img
-                src="/assets/icons/topo-site-icon.png"
-                alt="Voltar para o topo"
-              />
-            </button>
-          </div>
+          </button>
+          <button
+            className={styles.topoSiteIcon}
+            onClick={btnScrollTop}
+            arial-label="Voltar ao topo"
+          >
+            <img
+              src="/assets/icons/topo-site-icon.png"
+              alt="Voltar para o topo"
+            />
+          </button>
         </div>
       )}
     </div>
diff --git a/src/pages/home.module.scss b/src/pages/home.module.scss
index f5c2bd2..dfe941a 100644
--- a/src/pages/home.module.scss
+++ b/src/pages/home.module.scss
@@ -3,8 +3,8 @@
 
   .floatElementsFooter {
     position: fixed;
-    right: 20px;
-    bottom: 21px;
+    right: 16px;
+    bottom: 28px;
 
     width: 2.6562%;
 
@@ -14,15 +14,13 @@
     .whatsappIcon,
     .topoSiteIcon {
       width: 100%;
+      background: transparent;
+      cursor: pointer;
     }
 
     .topoSiteIcon {
-      button {
-        background: transparent;
-        cursor: pointer;
-        img {
-          width: 100%;
-        }
+      img {
+        width: 100%;
       }
     }
   }
@@ -35,12 +33,3 @@
     }
   }
 }
-
-@media screen and (max-width: 540px) {
-  .containerHome {
-    .floatElementsFooter {
-      right: 16px;
-      bottom: 16px;
-    }
-  }
-}
diff --git a/src/global.scss b/src/styles/global.scss
similarity index 93%
rename from src/global.scss
rename to src/styles/global.scss
index d6779d1..f677956 100644
--- a/src/global.scss
+++ b/src/styles/global.scss
@@ -30,7 +30,3 @@ code {
 a {
   color: inherit;
 }
-
-.active {
-  display: block;
-}