From 2a55b7732048c8d8eab4da9a4b163b266c524b3c Mon Sep 17 00:00:00 2001
From: Andrea Matsunaga <andreamizuno@gmail.com>
Date: Thu, 12 Jan 2023 13:24:39 -0300
Subject: [PATCH] =?UTF-8?q?fix(footer):=20ajusta=20tamanho=20dos=20=C3=ADc?=
 =?UTF-8?q?ones=20de=20pagamento?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../FloatingIcons/FloatingIcons.module.scss   |  9 +++-
 .../FooterBottom/FooterBottom.module.scss     | 32 ++++++++++---
 .../Footer/FooterBottom/FooterBottom.tsx      | 23 ++++------
 .../Footer/SiteMap/SiteMap.module.scss        |  6 +++
 src/components/Footer/SiteMap/SiteMap.tsx     | 45 ++-----------------
 5 files changed, 52 insertions(+), 63 deletions(-)

diff --git a/src/components/Footer/FloatingIcons/FloatingIcons.module.scss b/src/components/Footer/FloatingIcons/FloatingIcons.module.scss
index be42b5d..4141e55 100644
--- a/src/components/Footer/FloatingIcons/FloatingIcons.module.scss
+++ b/src/components/Footer/FloatingIcons/FloatingIcons.module.scss
@@ -1,5 +1,4 @@
 .floating-icons-wrapper {
-//   background-color: red;
   position: fixed;
   right: 16px;
   bottom: 190px;
@@ -9,6 +8,8 @@
   align-items: center;
   gap: 5px;
 
+  padding: 0;
+
   @media screen and (width >= 2500px) {
     bottom: 229.24px;
   }
@@ -17,8 +18,14 @@
     bottom: 51px;
   }
 
+  @media screen and (width <= 480px) {
+    bottom: 29px;
+    right: 16px;
+  }
+
   .whatsapp-button {
     border: 0;
+    padding: 0;
     background: transparent;
 
     img {
diff --git a/src/components/Footer/FooterBottom/FooterBottom.module.scss b/src/components/Footer/FooterBottom/FooterBottom.module.scss
index 9ade37e..afcb7f6 100644
--- a/src/components/Footer/FooterBottom/FooterBottom.module.scss
+++ b/src/components/Footer/FooterBottom/FooterBottom.module.scss
@@ -9,9 +9,9 @@
   @media screen and (width <= 1024px) {
     display: grid;
     grid-template-areas:
-    "paymentSolutions"
-    "address"
-    "authors";
+      "paymentSolutions"
+      "address"
+      "authors";
     gap: 15px;
     padding: 15px 16px;
   }
@@ -29,7 +29,7 @@
     p {
       margin: 0;
     }
-    
+
     @media screen and (width >= 2500px) {
       font-size: 20px;
       line-height: 23px;
@@ -52,9 +52,11 @@
       grid-area: paymentSolutions;
     }
 
-    .menu-list {
-      // background-color: blue;
+    @media screen and (width <= 480px) {
+      gap: 11px;
+    }
 
+    .menu-list {
       margin: 0;
       padding: 0;
       list-style: none;
@@ -62,6 +64,10 @@
       display: flex;
       gap: 12px;
 
+      @media screen and (width <= 480px) {
+        gap: 11px;
+      }
+
       li {
         //   transition: all 0.2s ease-in-out;
 
@@ -75,6 +81,11 @@
             height: 40px;
           }
 
+          @media screen and (width <= 480px) {
+            width: 100%; //30px;
+            height: 17px;
+          }
+
           // &:hover {
           //   border-radius: 50%;
           //   background: #292929;
@@ -92,6 +103,10 @@
       @media screen and (width >= 2500px) {
         height: 48px;
       }
+
+      @media screen and (width <= 480px) {
+        height: 20px;
+      }
     }
 
     img {
@@ -103,6 +118,11 @@
         width: 106px;
         height: 66px;
       }
+
+      @media screen and (width <= 480px) {
+        width: 100%; //45px;
+        height: 28px;
+      }
     }
   }
 
diff --git a/src/components/Footer/FooterBottom/FooterBottom.tsx b/src/components/Footer/FooterBottom/FooterBottom.tsx
index eabba5b..eade6fe 100644
--- a/src/components/Footer/FooterBottom/FooterBottom.tsx
+++ b/src/components/Footer/FooterBottom/FooterBottom.tsx
@@ -13,17 +13,6 @@ import PCI from "../assets/vtex-pci-200.svg";
 import VtexIcon from "../assets/vtex-icon.svg";
 import M3Icon from "../assets/m3-icon.svg";
 
-// import { ReactComponent as Master } from "../assets/Master.svg";
-// import { ReactComponent as Visa } from "../assets/Visa.svg";
-// import { ReactComponent as Amex } from "../assets/Diners.svg";
-// import { ReactComponent as Elo } from "../assets/Elo.svg";
-// import { ReactComponent as Hipercard } from "../assets/Hiper.svg";
-// import { ReactComponent as Paypal } from "../assets/Pagseguro.svg";
-// import { ReactComponent as Boleto } from "../assets/Boleto.svg";
-// import { ReactComponent as PCI } from "../assets/vtex-pci-200.svg";
-// import { ReactComponent as VtexIcon } from "../assets/vtex-icon.svg";
-// import { ReactComponent as M3Icon } from "../assets/m3-icon.svg";
-
 const PaymentSolutions = [
   {
     src: Master,
@@ -71,13 +60,19 @@ const FooterBottom = () => {
           ))}
         </ul>
         <span></span>
-        <img src={PCI} alt="Ícone de Certificado PCI 200" />
+        <div>
+          <img src={PCI} alt="Ícone de Certificado PCI 200" />
+        </div>
       </div>
       <div className={styles["authors"]}>
         <p>Powered by</p>
-        <img src={VtexIcon} alt="Logo da VTEX" className={styles["vtex-icon"]} />
+        <img
+          src={VtexIcon}
+          alt="Logo da VTEX"
+          className={styles["vtex-icon"]}
+        />
         <p>Developed by</p>
-        <img src={M3Icon} alt="Logo da M3" className={styles["m3-icon"]}/>
+        <img src={M3Icon} alt="Logo da M3" className={styles["m3-icon"]} />
       </div>
     </div>
   );
diff --git a/src/components/Footer/SiteMap/SiteMap.module.scss b/src/components/Footer/SiteMap/SiteMap.module.scss
index df84be4..10dce1f 100644
--- a/src/components/Footer/SiteMap/SiteMap.module.scss
+++ b/src/components/Footer/SiteMap/SiteMap.module.scss
@@ -52,6 +52,12 @@
           text-transform:none;
         }
       }
+
+      .open-icon {
+        @media screen and (width > 1024px) {
+          display: none;
+        }
+      }
     }
 
     .list-items {
diff --git a/src/components/Footer/SiteMap/SiteMap.tsx b/src/components/Footer/SiteMap/SiteMap.tsx
index 2832c90..30ef240 100644
--- a/src/components/Footer/SiteMap/SiteMap.tsx
+++ b/src/components/Footer/SiteMap/SiteMap.tsx
@@ -60,9 +60,7 @@ const SiteMap = () => {
       <ul className={styles["menu-list"]}>
         <div className={styles["subtitle"]}>
           <h4 className={styles["subtitle-text"]}>Institucional</h4>
-          {window.innerWidth <= 1024 && (
-            <span className={styles["open-icon"]}>+</span>
-          )}
+          <span className={styles["open-icon"]}>+</span>
         </div>
         <div className={styles["list-items"]}>
           {leftInstitucionalLinks.map((item, index) => (
@@ -76,9 +74,7 @@ const SiteMap = () => {
       <ul className={styles["menu-list"]}>
         <div className={styles["subtitle"]}>
           <h4 className={styles["subtitle-text"]}> Dúvidas</h4>
-          {window.innerWidth <= 1024 && (
-            <span className={styles["open-icon"]}>+</span>
-          )}
+          <span className={styles["open-icon"]}>+</span>
         </div>
         <div className={styles["list-items"]}>
           {duvidasLinks.map((item, index) => (
@@ -92,9 +88,7 @@ const SiteMap = () => {
       <ul className={styles["menu-list"]}>
         <div className={styles["subtitle"]}>
           <h4 className={styles["subtitle-text"]}>Fale Conosco</h4>
-          {window.innerWidth <= 1024 && (
-            <span className={styles["open-icon"]}>+</span>
-          )}
+          <span className={styles["open-icon"]}>+</span>
         </div>
         <div className={styles["list-items"]}>
           {rightInstitucionalLinks.map((item, index) => (
@@ -110,36 +104,3 @@ const SiteMap = () => {
 };
 
 export { SiteMap };
-
-// const AsideMenu = () => {
-
-//   return (
-//     <ul className={styles["menu-list"]}>
-//       {AsideMenuItems.map((item, index) => (
-//         <li key={index}>
-//           <Link to={item.value}>{item.name}</Link>
-//         </li>
-//       ))}
-//     </ul>
-//   );
-// };
-
-// export { AsideMenu };
-
-{
-  /* <div className={styles["subtitle"]}>
-<h4 className={styles["subtitle-text"]}>Institucional</h4>
-{window.innerWidth <= 1024 && (
-  <span className={styles["open-icon"]}>+</span>
-)}
-</div>
-<div className={styles["list-items"]}>
-<ul className={styles["menu-list"]}>
-  {leftInstitucionalLinks.map((item, index) => (
-    <li key={index}>
-      <Link to={item.value}>{item.name}</Link>
-    </li>
-  ))}
-</ul>
-</div> */
-}