Merge pull request 'feat: melhora footer' (#2) from develop into main

Reviewed-on: #2

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 = `
@@ -173,18 +188,4 @@ export default class Footer {
     </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);
-    }
 }

checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss

@@ -753,6 +753,7 @@
         max-width: 60px;
         width: 60px;
         height: 60px;
+        object-fit: cover;
     }
 
     span {

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;

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) {
+        @include mq(xl, max) {
-            width: 100%;
-        }
-
-        @include mq(md, max) {
-            margin: 0 0 0 9px;
             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;
             }
         }
     }