From 611aefe22765c256858aa360c9763ef79b390939 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Naian=20F=C3=A9lix?= <naianfelix123@gmail.com>
Date: Fri, 23 Dec 2022 23:12:08 -0300
Subject: [PATCH] feat: melhora footer

---
 checkout/src/arquivos/js/components/Footer.js | 51 ++++++++++---------
 .../sass/checkout/_checkout-autenticacao.scss |  1 +
 checkout/src/arquivos/sass/lib/_slick.scss    |  1 +
 .../src/arquivos/sass/partials/_footer.scss   | 36 +++++++++----
 4 files changed, 54 insertions(+), 35 deletions(-)

diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index f9fd29d..a06fcf9 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -63,6 +63,21 @@ export default class Footer {
         }
     }
 
+    onUpdate() {
+        //Função qeu fará a verificação se o carrinho está vazio para remover a prateleira de produtos:
+        // vocês devem olhar a doc fornecida no Desafio para aprender a usar a MutationObserver
+        // sempre que o carrinho estiver vazio o elemento chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver
+        let target = this.checkoutVazio;
+        let config = { childList: true, attributes: true };
+        let observer = new MutationObserver((mutations) => {
+            mutations.forEach(function (mutation) {
+                console.log(mutation.type);
+            });
+        });
+
+        observer.observe(target, config);
+    }
+
     createPrateleira() {
         if (this.itensShelf) {
             this.itensShelf.innerHTML = `
@@ -82,7 +97,7 @@ export default class Footer {
 
             structure += `
             <li class="slick">
-            <figure class="container-img"><img src ="${response.img}"/></figure>
+                <figure class="container-img"><img src ="${response.img}"/></figure>
                 <figcaption class="name-picture">${response.name}</figcaption>
                 <div><ul class= "number" >${sku.join("")}</ul></div>
                 <button type="button"><a href="${response.link}">Ver Produto</a></button>
@@ -140,9 +155,9 @@ export default class Footer {
 
     creditCardIconsHTML() {
         this.creditCardIcons.innerHTML = `
-        <li><img class="master" src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="Mastercard"></li>
-        <li><img class="visa" src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt=""></li>
-        <li><img class="amex" src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" alt="American Express"></li>
+      <li><img class="master" src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="Mastercard"></li>
+      <li><img class="visa" src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt=""></li>
+      <li><img class="amex" src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" alt="American Express"></li>
       <li><img class="elo" src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" alt="Elo"></li>
       <li><img class="hiper" src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" alt="Hipercard"></li>
       <li><img class="paypal" src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" alt="PayPal"></li>
@@ -154,37 +169,23 @@ export default class Footer {
 
     developedByIconsHTML() {
         this.developedByIcons.innerHTML = `
-        <li>
-        <div class="by-vtex">
+      <li>
+      <div class="by-vtex">
         <a href="https://vtex.com.br-pt/">
-        <span>Powered By</span>
+          <span>Powered By</span>
         </a>
         <img class="vtex-logo" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="VTEX" />
       </div>
     </li>
 
     <li>
-    <div class="by-m3">
+      <div class="by-m3">
         <a href="https://vtex.com.br-pt/">
-        <span>Developed By</span>
+          <span>Developed By</span>
         </a>
         <img class="m3-logo" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="M3" />
-        </div>
-        </li>
+      </div>
+    </li>
       `;
     }
-    onUpdate() {
-        //Função qeu fará a verificação se o carrinho está vazio para remover a prateleira de produtos:
-        // vocês devem olhar a doc fornecida no Desafio para aprender a usar a MutationObserver
-        // sempre que o carrinho estiver vazio o elemento chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver
-        let target = this.checkoutVazio;
-        let config = { childList: true, attributes: true };
-        let observer = new MutationObserver((mutations) => {
-            mutations.forEach(function (mutation) {
-                console.log(mutation.type);
-            });
-        });
-
-        observer.observe(target, config);
-    }
 }
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
index 942e981..67985c7 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
@@ -753,6 +753,7 @@
         max-width: 60px;
         width: 60px;
         height: 60px;
+        object-fit: cover;
     }
 
     span {
diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss
index fe8e911..22aeff1 100644
--- a/checkout/src/arquivos/sass/lib/_slick.scss
+++ b/checkout/src/arquivos/sass/lib/_slick.scss
@@ -12,6 +12,7 @@
         color: #000000;
         margin-bottom: 20px;
     }
+
     ul.footerCheckout__carrossel-itens {
         display: flex;
         list-style: none;
diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss
index fd8a4ce..21ce0c0 100644
--- a/checkout/src/arquivos/sass/partials/_footer.scss
+++ b/checkout/src/arquivos/sass/partials/_footer.scss
@@ -12,15 +12,12 @@
         display: flex;
         align-items: center;
         padding: 0 16px;
-        width: 100%;
+        width: 98%;
         justify-content: space-between;
+        position: fixed;
+        bottom: 0;
 
-        @media (min-width: 1200px) {
-            width: 100%;
-        }
-
-        @include mq(md, max) {
-            margin: 0 0 0 9px;
+        @include mq(xl, max) {
             display: grid;
         }
     }
@@ -69,13 +66,27 @@
         justify-self: center;
         list-style: none;
         width: 404px;
-        margin: 16px auto 16px auto;
+        margin: 0 auto;
 
         @include mq(md, max) {
             align-self: center;
             margin-bottom: 12px;
         }
 
+        .master,
+        .visa,
+        .amex,
+        .elo,
+        .hiper,
+        .paypal,
+        .boleto {
+            height: 20px;
+        }
+
+        .vtex {
+            height: 33px;
+        }
+
         &__divider {
             display: inline-block;
             background-color: $color-gray4;
@@ -98,7 +109,6 @@
         display: flex;
         align-items: center;
         margin: 0;
-        margin-bottom: 16px;
         list-style-type: none;
 
         .vtex-logo,
@@ -109,10 +119,16 @@
 
         .by-m3 {
             display: flex;
+            a {
+                color: $color-black-100;
+            }
         }
 
         .by-vtex {
             display: flex;
+            a {
+                color: $color-black-100;
+            }
         }
 
         .list {
@@ -140,7 +156,7 @@
             text-decoration: none;
 
             span {
-                margin-right: 8px;
+                margin-right: 10px;
             }
         }
     }