From b2b7f25ae8602c09f36472ff587412dfa75800fc Mon Sep 17 00:00:00 2001
From: devartes <anacavalcante731@gmail.com>
Date: Thu, 12 Jan 2023 16:08:17 -0300
Subject: [PATCH] =?UTF-8?q?refactor(footer):=20substitui=C3=A7=C3=A3o=20do?=
 =?UTF-8?q?=20nome=20BackToTopButton=20por=20SubListContent?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Footer/FooterTop.tsx           | 104 +++++++++++++-----
 ...BackToTopButton.tsx => SubListContent.tsx} |   5 +-
 .../Footer/styles/Footer.module.scss          |   8 +-
 3 files changed, 81 insertions(+), 36 deletions(-)
 rename src/components/Footer/{BackToTopButton.tsx => SubListContent.tsx} (94%)

diff --git a/src/components/Footer/FooterTop.tsx b/src/components/Footer/FooterTop.tsx
index 34bd6f2..f5f3b9f 100644
--- a/src/components/Footer/FooterTop.tsx
+++ b/src/components/Footer/FooterTop.tsx
@@ -5,59 +5,105 @@ import TwitterIcon from "./assets/icons/TwitterIcon.svg";
 import YoutubeIcon from "./assets/icons/YoutubeIcon.svg";
 import LinkedInIcon from "./assets/icons/LinkedInIcon.svg";
 import PlusIcon from "./assets/icons/PlusIcon.svg";
-import { BackToTopButton } from "./BackToTopButton";
+import { SubListContent } from "./SubListContent";
 
 const FooterTop = () => {
   return (
     <div>
       <ul className={styles["Menu__List"]}>
         <ul className={styles["Menu__List__Group"]}>
-          <input type="checkbox" id="FirstOption"/>
+          <input type="checkbox" id="FirstOption" />
           <label htmlFor="FirstOption">
-            <img src={PlusIcon} alt="ícone de abrir menu"/>
+            <img src={PlusIcon} alt="ícone de abrir menu" />
           </label>
           <li className={styles["Menu__List__Group__Title"]}>Institucional</li>
-          <li className={styles["Menu__List__Group__SubTitle"]}><a href="/">Quem Somos</a></li>
-          <li className={styles["Menu__List__Group__SubTitle"]}><a href="/">Política de Privacidade</a></li>
-          <li className={styles["Menu__List__Group__SubTitle"]}><a href="/">Segurança</a></li>
-          <li className={styles["Menu__List__Group__SubTitle"]}><a href="/">Seja um Revendedor</a></li>
+          <li className={styles["Menu__List__Group__SubTitle"]}>
+            <a href="/">Quem Somos</a>
+          </li>
+          <li className={styles["Menu__List__Group__SubTitle"]}>
+            <a href="/">Política de Privacidade</a>
+          </li>
+          <li className={styles["Menu__List__Group__SubTitle"]}>
+            <a href="/">Segurança</a>
+          </li>
+          <li className={styles["Menu__List__Group__SubTitle"]}>
+            <a href="/">Seja um Revendedor</a>
+          </li>
         </ul>
         <ul className={styles["Menu__List__Group"]}>
-          <input type="checkbox" id="SecondOption"/>
+          <input type="checkbox" id="SecondOption" />
           <label htmlFor="SecondOption">
-            <img src={PlusIcon} alt="ícone de abrir menu"/>
+            <img src={PlusIcon} alt="ícone de abrir menu" />
           </label>
           <li className={styles["Menu__List__Group__Title"]}>Dúvidas</li>
-          <li className={styles["Menu__List__Group__SubTitle"]}><a href="/">Pagamento</a></li>
-          <li className={styles["Menu__List__Group__SubTitle"]}><a href="/">Trocas e Devoluções</a></li>
-          <li className={styles["Menu__List__Group__SubTitle"]}><a href="/">Segurança</a></li>
-          <li className={styles["Menu__List__Group__SubTitle"]}><a href="/">Dúvidas Frequentes</a></li>
+          <li className={styles["Menu__List__Group__SubTitle"]}>
+            <a href="/">Pagamento</a>
+          </li>
+          <li className={styles["Menu__List__Group__SubTitle"]}>
+            <a href="/">Trocas e Devoluções</a>
+          </li>
+          <li className={styles["Menu__List__Group__SubTitle"]}>
+            <a href="/">Segurança</a>
+          </li>
+          <li className={styles["Menu__List__Group__SubTitle"]}>
+            <a href="/">Dúvidas Frequentes</a>
+          </li>
         </ul>
         <ul className={styles["Menu__List__Group"]}>
-          <input type="checkbox" id="ThirdOption"/>
+          <input type="checkbox" id="ThirdOption" />
           <label htmlFor="ThirdOption">
-            <img src={PlusIcon} alt="ícone de abrir menu"/>
+            <img src={PlusIcon} alt="ícone de abrir menu" />
           </label>
           <li className={styles["Menu__List__Group__Title"]}>Fale Conosco</li>
-          <li className={styles["Menu__List__Group__SubTitle"]}><a href="/">Atendimento ao Consumidor</a></li>
-          <li className={styles["Menu__List__Group__SubTitle"]}><a href="/">(11) 4159 9504</a></li>
-          <li className={styles["Menu__List__Group__SubTitle"]}><a href="/">Atendimento Online</a></li>
-          <li className={styles["Menu__List__Group__SubTitle"]}><a href="/">(11) 99433-8825</a></li>
+          <li className={styles["Menu__List__Group__SubTitle"]}>
+            <a href="/">Atendimento ao Consumidor</a>
+          </li>
+          <li className={styles["Menu__List__Group__SubTitle"]}>
+            <a href="/">(11) 4159 9504</a>
+          </li>
+          <li className={styles["Menu__List__Group__SubTitle"]}>
+            <a href="/">Atendimento Online</a>
+          </li>
+          <li className={styles["Menu__List__Group__SubTitle"]}>
+            <a href="/">(11) 99433-8825</a>
+          </li>
         </ul>
       </ul>
       <ul className={styles["Redes__Sociais"]}>
-        <ul className={styles["Redes__Sociais__Lista"]}>
-          <ul className={styles["Redes__Sociais__Lista__SocialMedia"]}>
-            <li><a href="/"><img src={FacebookIcon} alt="ícone do Facebook"/></a></li>
-            <li><a href="/"><img src={InstagramIcon} alt="ícone do Instagram"/></a></li>
-            <li><a href="/"><img src={TwitterIcon} alt="ícone do Twitter"/></a></li>
-            <li><a href="/"><img src={YoutubeIcon} alt="ícone do Youtube"/></a></li>
-            <li><a href="/"><img src={LinkedInIcon} alt="ícone do LinkedIn"/></a></li>
+        <ul className={styles["Redes__Sociais__List"]}>
+          <ul className={styles["Redes__Sociais__List__SocialMedia"]}>
+            <li>
+              <a href="/">
+                <img src={FacebookIcon} alt="ícone do Facebook" />
+              </a>
+            </li>
+            <li>
+              <a href="/">
+                <img src={InstagramIcon} alt="ícone do Instagram" />
+              </a>
+            </li>
+            <li>
+              <a href="/">
+                <img src={TwitterIcon} alt="ícone do Twitter" />
+              </a>
+            </li>
+            <li>
+              <a href="/">
+                <img src={YoutubeIcon} alt="ícone do Youtube" />
+              </a>
+            </li>
+            <li>
+              <a href="/">
+                <img src={LinkedInIcon} alt="ícone do LinkedIn" />
+              </a>
+            </li>
           </ul>
-          <li className={styles["Redes__Sociais__Lista__Site"]}><a href="/">www.loremipsum.com</a></li>
+          <li className={styles["Redes__Sociais__List__Site"]}>
+            <a href="/">www.loremipsum.com</a>
+          </li>
         </ul>
-        <ul className={styles["Redes__Sociais__SubLista"]}>
-          <BackToTopButton/>
+        <ul className={styles["Redes__Sociais__SubList"]}>
+          <SubListContent />
         </ul>
       </ul>
     </div>
diff --git a/src/components/Footer/BackToTopButton.tsx b/src/components/Footer/SubListContent.tsx
similarity index 94%
rename from src/components/Footer/BackToTopButton.tsx
rename to src/components/Footer/SubListContent.tsx
index fd34a4f..7b1493d 100644
--- a/src/components/Footer/BackToTopButton.tsx
+++ b/src/components/Footer/SubListContent.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import ArrowIcon from "./assets/icons/ArrowIcon.svg";
 import WhatsAppIcon from "./assets/icons/WhatsAppIcon.svg";
 
-const BackToTopButton = () => {
+const SubListContent = () => {
   const [backToToButton, setBackToToButton] = useState(false);
   useEffect(() => {
     window.addEventListener("scroll", () => {
@@ -17,7 +17,6 @@ const BackToTopButton = () => {
     window.scrollTo({
       top: 0,
       behavior: "smooth",
-      
     });
   };
   return (
@@ -50,4 +49,4 @@ const BackToTopButton = () => {
   );
 };
 
-export { BackToTopButton };
+export { SubListContent };
diff --git a/src/components/Footer/styles/Footer.module.scss b/src/components/Footer/styles/Footer.module.scss
index a8794b2..9fb34b3 100644
--- a/src/components/Footer/styles/Footer.module.scss
+++ b/src/components/Footer/styles/Footer.module.scss
@@ -174,7 +174,7 @@ footer {
             }
             & img {
                 height: 20.14px;
-                @media (min-width: 2500px) {                
+                @media (min-width: 2500px) {
                     height: 40.25px;
                 }
                 @media (max-width: 376px) {
@@ -515,7 +515,7 @@ footer {
                 width: 100%;
                 column-gap: 0px;
             }
-            &__Lista {
+            &__List {
                 position: relative;
                 list-style: none;
                 padding-left: 0;
@@ -568,7 +568,7 @@ footer {
                     }
                 }
             }
-            &__SubLista {
+            &__SubList {
                 padding-left: 0;
                 position: fixed;
                 right: 16px;
@@ -633,7 +633,7 @@ footer {
     margin: 0;
     padding: 0;
     @media (min-width: 2500px) {
-    height: 139.49px;
+        height: 139.49px;
     }
     @media (max-width: 1025px) {
         height: 180.49px;