From 596858810edac1f8b998c7a01e3becb861a697b2 Mon Sep 17 00:00:00 2001
From: Bernardo Waldhelm <ernaniwaldhelm@gmail.com>
Date: Fri, 13 Jan 2023 12:43:34 -0300
Subject: [PATCH] feat(home): criando Icone como component, atribuindo-o ao
 footerbottom

---
 .../ButtonsFixed/ButtonsFixed.module.scss     |  4 +-
 .../FooterBottom/FooterBottom.module.scss     | 11 +++++-
 .../Footer/FooterBottom/FooterBottom.tsx      | 39 +++++++------------
 .../organisms/Footer/FooterTop/FooterTop.scss |  6 +--
 4 files changed, 28 insertions(+), 32 deletions(-)

diff --git a/src/components/Atoms/ButtonsFixed/ButtonsFixed.module.scss b/src/components/Atoms/ButtonsFixed/ButtonsFixed.module.scss
index e77000a..ee45296 100644
--- a/src/components/Atoms/ButtonsFixed/ButtonsFixed.module.scss
+++ b/src/components/Atoms/ButtonsFixed/ButtonsFixed.module.scss
@@ -11,11 +11,11 @@
     padding-right: 16px;
 
     @media #{$mq-tablet} {
-        bottom: 22px;
+        bottom: 51px;
     }
 
     @media #{$mq-mobile} {
-        bottom: 16px;
+        bottom: 29px;
     }
 
     &__list {
diff --git a/src/components/organisms/Footer/FooterBottom/FooterBottom.module.scss b/src/components/organisms/Footer/FooterBottom/FooterBottom.module.scss
index 61a2390..8fd08ca 100644
--- a/src/components/organisms/Footer/FooterBottom/FooterBottom.module.scss
+++ b/src/components/organisms/Footer/FooterBottom/FooterBottom.module.scss
@@ -57,7 +57,7 @@
             align-items: center;
             justify-content: center;
 
-            &__card {
+            li{
                 margin-right: 12px;
 
                 width: 70px;
@@ -87,11 +87,20 @@
 
                     @media #{$mq-mobile} {
                         width: 30px;
+                        height: 17px;
                     }
 
                     @media (max-width: 310px) {
                         width: 25px;
                     }
+
+                    &.vtex-security {
+                        width: 45px;
+
+                        @media (max-width: 310px) {
+                            width: 35px;
+                        }
+                    }
                 }
             }
         }
diff --git a/src/components/organisms/Footer/FooterBottom/FooterBottom.tsx b/src/components/organisms/Footer/FooterBottom/FooterBottom.tsx
index 58f2257..bf3e7e8 100644
--- a/src/components/organisms/Footer/FooterBottom/FooterBottom.tsx
+++ b/src/components/organisms/Footer/FooterBottom/FooterBottom.tsx
@@ -10,6 +10,7 @@ import visa from "../../../../assets/imgs/visa.png";
 import vtex from "../../../../assets/imgs/vtex-pci-200.png";
 import vtexLogo from "../../../../assets/imgs/vtex-logo.png";
 import m3Logo from "../../../../assets/imgs/m3-logo-footer.png";
+import { Icone } from "../../../Atoms/Icones/Icone";
 
 const FooterBottom = () => {
     return (
@@ -20,33 +21,23 @@ const FooterBottom = () => {
             </p>
             <div className={styles["footer__bottom__payments"]}>
                 <ul className={styles["footer__bottom__payments__cards"]}>
-                    <li className={styles["footer__bottom__payments__cards__card"]}>
-                        <img src={master} alt="Cartão Mastercard" />
-                    </li>
-                    <li className={styles["footer__bottom__payments__cards__card"]}>
-                        <img src={visa} alt="Cartão Visa" />
-                    </li>
-                    <li className={styles["footer__bottom__payments__cards__card"]}>
-                        <img src={diners} alt="Cartão American Express" />
-                    </li>
-                    <li className={styles["footer__bottom__payments__cards__card"]}>
-                        <img src={elo} alt="Cartão Elo" />
-                    </li>
-                    <li className={styles["footer__bottom__payments__cards__card"]}>
-                        <img src={hiper} alt="Cartão Hipercard" />
-                    </li>
-                    <li className={styles["footer__bottom__payments__cards__card"]}>
-                        <img src={pagseguro} alt="PagSeguro" />
-                    </li>
-                    <li className={styles["footer__bottom__payments__cards__card"]}>
-                        <img src={boleto} alt="Boleto" />
-                    </li>
+                    <Icone src={master} alt="Cartão Mastercard" />
+
+                    <Icone src={visa} alt="Cartão Visa" />
+
+                    <Icone src={diners} alt="Cartão American Express" />
+
+                    <Icone src={elo} alt="Cartão Elo" />
+
+                    <Icone src={hiper} alt="Cartão Hipercard" />
+
+                    <Icone src={pagseguro} alt="PagSeguro" />
+
+                    <Icone src={boleto} alt="Boleto" />
                 </ul>
                 <div className={styles["footer__bottom__payments__divider"]}></div>
                 <ul className={styles["footer__bottom__payments__security"]}>
-                    <li className={styles["footer__bottom__payments-cards__card"]}>
-                        <img src={vtex} alt="Vtex PCI - SECURITY" />
-                    </li>
+                    <Icone src={vtex} alt="Vtex PCI - SECURITY" />
                 </ul>
             </div>
             <div className={styles["footer__bottom__development"]}>
diff --git a/src/components/organisms/Footer/FooterTop/FooterTop.scss b/src/components/organisms/Footer/FooterTop/FooterTop.scss
index 8a0eb70..ad68c80 100644
--- a/src/components/organisms/Footer/FooterTop/FooterTop.scss
+++ b/src/components/organisms/Footer/FooterTop/FooterTop.scss
@@ -143,14 +143,10 @@
                 line-height: 33px;
                 color: $color-black-500;
 
-                @media #{$mq-desktop} {
+                @media #{$mq-desktop},  #{$mq-tablet}, #{$mq-mobile}{
                     font-size: 14px;
                     line-height: 16px;
                 }
-
-                @media #{$mq-tablet}, #{$mq-mobile} {
-                    display: none;
-                }
             }
         }
     }