From 79116036b78749e0287071491117fdf2452c029a Mon Sep 17 00:00:00 2001
From: Sabrina Miranda <sabrina.miranda1@bol.com.br>
Date: Wed, 11 Jan 2023 14:46:05 -0300
Subject: [PATCH] =?UTF-8?q?refactor:=20Aplica=20mudan=C3=A7as=20no=20c?=
 =?UTF-8?q?=C3=B3digo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../FooterBottom/FooterBottom.module.scss     |  84 +++++------
 src/components/FooterBottom/FooterBottom.tsx  | 132 +++++++++++++-----
 src/components/IconList/IconList.tsx          |  11 +-
 src/components/ItemList/ItemList.tsx          |  14 ++
 .../ItemNavBar/ItemNavBar.module.scss         |  29 ----
 src/components/ItemNavBar/ItemNavBar.tsx      |  10 --
 .../Newsletter/Newsletter.module.scss         |   2 +-
 7 files changed, 152 insertions(+), 130 deletions(-)
 create mode 100644 src/components/ItemList/ItemList.tsx
 delete mode 100644 src/components/ItemNavBar/ItemNavBar.module.scss
 delete mode 100644 src/components/ItemNavBar/ItemNavBar.tsx

diff --git a/src/components/FooterBottom/FooterBottom.module.scss b/src/components/FooterBottom/FooterBottom.module.scss
index 2391691..b448d1b 100644
--- a/src/components/FooterBottom/FooterBottom.module.scss
+++ b/src/components/FooterBottom/FooterBottom.module.scss
@@ -51,11 +51,11 @@
             flex-wrap: wrap;
         }
 
-        li {
+        .li-card {
             display: flex;
         }
 
-        .li-card {
+        .card {
             width: auto;
             height: 20px;
 
@@ -92,59 +92,49 @@
     }
 
     &__developedby {
-        ul {
+        display: flex;
+        align-items: center;
+        gap: 13px;
+            
+        @media (min-width: 2500px) {
+            gap: 12px;
+        }
+
+        @media ((min-width: 1025px) and (max-width: 1150px)) {
+            gap: 7px;
+        }
+ 
+        &__li,
+        &__text {
             display: flex;
             align-items: center;
-            gap: 13px;
-            
+        }
+
+        &__text {
+            font-size: 10px;
+            line-height: 12px;
+            text-transform: capitalize;
+            color: variables.$white;
+
             @media (min-width: 2500px) {
-                gap: 12px;
+                font-size: 20px;
+                line-height: 23px;
             }
+        }
 
-            @media ((min-width: 1025px) and (max-width: 1150px)) {
-                gap: 7px;
+        &__logo-vtex {
+            width: 44px;
+
+            @media (min-width: 2500px) {
+                width: 84px;
             }
- 
-            li {
-                display: flex;
-                align-items: center;
-                gap: 13px;
+        }
 
-                @media (min-width: 2500px) {
-                    gap: 12px;
-                }
+        &__logo-m3 {
+            width: 28px;
 
-                @media ((min-width: 1025px) and (max-width: 1150px)) {
-                    gap: 7px;
-                }
-
-                p {
-                    font-size: 10px;
-                    line-height: 12px;
-                    text-transform: capitalize;
-                    color: variables.$white;
-    
-                    @media (min-width: 2500px) {
-                        font-size: 20px;
-                        line-height: 23px;
-                    }
-                }
-
-                .logo-vtex {
-                    width: 44px;
-
-                    @media (min-width: 2500px) {
-                        width: 84px;
-                    }
-                }
-
-                .logo-m3 {
-                    width: 28px;
-
-                    @media (min-width: 2500px) {
-                        width: 54px;
-                    }
-                }
+            @media (min-width: 2500px) {
+                width: 54px;
             }
         }
     }
diff --git a/src/components/FooterBottom/FooterBottom.tsx b/src/components/FooterBottom/FooterBottom.tsx
index 8d9e862..a17402b 100644
--- a/src/components/FooterBottom/FooterBottom.tsx
+++ b/src/components/FooterBottom/FooterBottom.tsx
@@ -14,45 +14,103 @@ import imgLogoBoleto from "./assets/Boleto.png";
 import imgLogoVtexPCI from "./assets/vtex-pci-200.png";
 
 import { IconList } from "../IconList/IconList";
+import { ItemList } from "../ItemList/ItemList";
 
 const FooterBottom = () => {
+  return (
+    <div className={styles["footer-bottom"]}>
+      <div className={styles["footer-bottom__wrapper"]}>
 
-    return (
-        <div className={styles["footer-bottom"]}>
-            <div className={styles["footer-bottom__wrapper"]}>
-                <div className={styles["footer-bottom__address"]}>
-                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing</p>
-                    <p>Elit, sed do eiusmod tempor</p>
-                </div>
-
-                <ul className={styles["footer-bottom__payments-icons"]}>
-                    <IconList src={imgLogoMaster} alt="Logo Master Card" className={styles["li-card"]}/>
-                    <IconList src={imgLogoVisa} alt="Logo Visa" className={styles["li-card"]}/>
-                    <IconList src={imgLogoAmericanExpress} alt="Logo American Express" className={styles["li-card"]}/>
-                    <IconList src={imgLogoElo} alt="Logo Elo" className={styles["li-card"]}/>
-                    <IconList src={imgLogoHipercard} alt="Logo Hipercard" className={styles["li-card"]}/>
-                    <IconList src={imgLogoPayPal} alt="Logo PayPal" className={styles["li-card"]}/>
-                    <IconList src={imgLogoBoleto} alt="Logo Boleto" className={styles["li-card"]}/>
-
-                    <li className={styles["li-divider"]}></li>
-
-                    <IconList src={imgLogoVtexPCI} alt="Logo Vtex PCI" className={styles["li-vtexpci"]}/>
-                </ul>
-
-                <div className={styles["footer-bottom__developedby"]}>
-                    <ul>
-                        <a href="/">
-                            <IconList text="Powered by" src={imgLogoVtex} alt="Logo Vtex" className={styles["logo-vtex"]}/>
-                        </a>
-
-                        <a href="/">
-                            <IconList text="Developed by" src={imgLogoM3} alt="Logo M3" className={styles["logo-m3"]}/>
-                        </a>
-                    </ul>
-                </div>
-            </div>
+        <div className={styles["footer-bottom__address"]}>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing</p>
+          <p>Elit, sed do eiusmod tempor</p>
         </div>
-    );
-}
 
-export {FooterBottom};
+        <ul className={styles["footer-bottom__payments-icons"]}>
+          <IconList
+            src={imgLogoMaster}
+            alt="Logo Master Card"
+            imgClassName={styles["card"]}
+            liClassName={styles["li-card"]}
+          />
+          <IconList
+            src={imgLogoVisa}
+            alt="Logo Visa"
+            imgClassName={styles["card"]}
+            liClassName={styles["li-card"]}
+          />
+          <IconList
+            src={imgLogoAmericanExpress}
+            alt="Logo American Express"
+            imgClassName={styles["card"]}
+            liClassName={styles["li-card"]}
+          />
+          <IconList
+            src={imgLogoElo}
+            alt="Logo Elo"
+            imgClassName={styles["card"]}
+            liClassName={styles["li-card"]}
+          />
+          <IconList
+            src={imgLogoHipercard}
+            alt="Logo Hipercard"
+            imgClassName={styles["card"]}
+            liClassName={styles["li-card"]}
+          />
+          <IconList
+            src={imgLogoPayPal}
+            alt="Logo PayPal"
+            imgClassName={styles["card"]}
+            liClassName={styles["li-card"]}
+          />
+          <IconList
+            src={imgLogoBoleto}
+            alt="Logo Boleto"
+            imgClassName={styles["card"]}
+            liClassName={styles["li-card"]}
+          />
+
+          <li className={styles["li-divider"]}></li>
+
+          <IconList
+            src={imgLogoVtexPCI}
+            alt="Logo Vtex PCI"
+            imgClassName={styles["li-vtexpci"]}
+            liClassName={styles["li-card"]}
+          />
+        </ul>
+
+        <ul className={styles["footer-bottom__developedby"]}>
+          <ItemList
+            text="Powered by"
+            textClassName={styles["footer-bottom__developedby__text"]}
+          />
+          <a href="/">
+            <IconList
+              src={imgLogoVtex}
+              alt="Logo Vtex"
+              imgClassName={styles["footer-bottom__developedby__logo-vtex"]}
+              liClassName={styles["footer-bottom__developedby__li"]}
+            />
+          </a>
+
+          <ItemList
+            text="Developed by"
+            textClassName={styles["footer-bottom__developedby__text"]}
+          />
+          <a href="/">
+            <IconList
+              src={imgLogoM3}
+              alt="Logo M3"
+              imgClassName={styles["footer-bottom__developedby__logo-m3"]}
+              liClassName={styles["footer-bottom__developedby__li"]}
+            />
+          </a>
+        </ul>
+
+      </div>
+    </div>
+  );
+};
+
+export { FooterBottom };
diff --git a/src/components/IconList/IconList.tsx b/src/components/IconList/IconList.tsx
index 9cbfb3f..db73f22 100644
--- a/src/components/IconList/IconList.tsx
+++ b/src/components/IconList/IconList.tsx
@@ -3,17 +3,16 @@ import React from "react";
 interface Icon {
     src: string;
     alt: string;
-    className: string;
-    text?: string;
+    imgClassName?: string;
+    liClassName?: string;
 }
 
 const IconList = ( props: Icon ) => {
-    const { src, alt, className, text } = props;
+    const { src, alt, imgClassName, liClassName } = props;
 
     return (
-        <li>
-            <p>{text}</p>
-            <img src={src} alt={alt} className={className}/>
+        <li className={liClassName}>
+            <img src={src} alt={alt} className={imgClassName}/>
         </li>
     );
 };
diff --git a/src/components/ItemList/ItemList.tsx b/src/components/ItemList/ItemList.tsx
new file mode 100644
index 0000000..0ec46da
--- /dev/null
+++ b/src/components/ItemList/ItemList.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+
+interface Icon {
+    text: string;
+    textClassName?: string;
+}
+
+const ItemList = ( props: Icon) => {
+    const { text,  textClassName } = props;
+    
+    return <li className={textClassName}> { text } </li>;
+};
+
+export { ItemList };
diff --git a/src/components/ItemNavBar/ItemNavBar.module.scss b/src/components/ItemNavBar/ItemNavBar.module.scss
deleted file mode 100644
index 1f5b977..0000000
--- a/src/components/ItemNavBar/ItemNavBar.module.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-@use '../../variables';
-
-.nav-bar__item {
-    font-weight: 500;
-    font-size: 14px;
-    line-height: 16px;
-    text-transform: uppercase;
-    color: variables.$white;
-    cursor: pointer;
-
-    @media (min-width: 3600px) {
-        font-size: 32px;
-        line-height: 38px;
-    }
-
-    @media ((min-width: 2500px) and (max-width: 3599px)) {
-        font-size: 28px;
-        line-height: 33px;
-    }
-
-    @media (max-width: 1024px) {
-        color: variables.$gray-400;
-        margin-bottom: 12px;
-    }
-
-    &:hover {
-        filter: brightness(80%);
-    }
-}
diff --git a/src/components/ItemNavBar/ItemNavBar.tsx b/src/components/ItemNavBar/ItemNavBar.tsx
deleted file mode 100644
index 7d37cf7..0000000
--- a/src/components/ItemNavBar/ItemNavBar.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react';
-
-import styles from "./ItemNavBar.module.scss";
-
-const ItemNavBar = ( props:any) => {
-    const { text } = props;
-    return <li className={styles["nav-bar__item"]}> { text } </li>;
-};
-
-export { ItemNavBar };
diff --git a/src/components/Newsletter/Newsletter.module.scss b/src/components/Newsletter/Newsletter.module.scss
index 86b8e4b..c436dd7 100644
--- a/src/components/Newsletter/Newsletter.module.scss
+++ b/src/components/Newsletter/Newsletter.module.scss
@@ -168,7 +168,7 @@
     }
 }
 
-span{
+span {
     font-size: 12px;
     line-height: 14px;
     color: variables.$red;