From 35ae50f710363c0a238f002c045abe1eeb0e9f09 Mon Sep 17 00:00:00 2001
From: Gabriel Ferraz <gabrielferraznog@gmail.com>
Date: Tue, 13 Dec 2022 19:44:29 -0300
Subject: [PATCH] feat(footer): scss do footer mobile e telas acima de 2500px

---
 checkout/src/arquivos/js/components/Footer.js |  22 ++--
 .../src/arquivos/sass/partials/_footer.scss   | 123 ++++++++++--------
 2 files changed, 80 insertions(+), 65 deletions(-)

diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index 4d6f650..fb12389 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -8,6 +8,7 @@ export default class Footer {
     async init() {
         await this.selectors();
         this.createPaymentsIcons();
+        this.createVtexpciIcon();
         this.createDevIcons();
         // this.onUpdate();
     }
@@ -16,14 +17,14 @@ export default class Footer {
         //Para verificar se o carrinho está vazio e remover a prateleira de produtos:
         // vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement
         this.checkoutVazio = await waitElement(".empty-cart-content");
-        this.payments = await waitElement(".footerCheckout__stamps");
+        this.payments = await waitElement(".footerCheckout__payments");
+        this.vtexpci = await waitElement(".footerCheckout__vtexpci");
         this.devIncons = await waitElement(".footerCheckout__developedBy");
     }
 
     createPaymentsIcons() {
         this.payments.innerHTML = `
-        <div class="payments-icons-wrapper">
-            <ul>
+            <ul class="payments-icons-wrapper">
                 <li>
                     <img
                         src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png"
@@ -66,17 +67,20 @@ export default class Footer {
                         alt=""
                     />
                 </li>
-                <li id="vtexIcon">
-                    <img
-                        src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png"
-                        alt=""
-                    />
-                </li>
             </ul>
         </div>
         `;
     }
 
+    createVtexpciIcon() {
+        this.vtexpci.innerHTML = `
+            <img class="vtex-icon"
+                src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png"
+                alt=""
+            />
+        `;
+    }
+
     createDevIcons() {
         this.devIncons.innerHTML = `
         <li>
diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss
index c2340f8..9747886 100644
--- a/checkout/src/arquivos/sass/partials/_footer.scss
+++ b/checkout/src/arquivos/sass/partials/_footer.scss
@@ -2,16 +2,15 @@
     .container {
         display: flex;
         flex-direction: column;
-        padding: 7px 0;
-        align-items: center;
-        margin: 0;
         width: 100%;
+        padding: 7px 0;
+        margin: 0;
 
         @include mq(dt, min) {
             flex-direction: row;
+            align-items: center;
             justify-content: space-between;
             padding: 15px 0 15px 0;
-            gap: 0;
         }
 
         @include mq(tv, min) {
@@ -38,7 +37,7 @@
             margin-top: 17px;
 
             span {
-                margin-left: 8px;
+                margin-left: 16px;
             }
         }
 
@@ -58,68 +57,67 @@
     &__stamps {
         display: flex;
         align-items: center;
-        justify-self: center;
-        margin: 0;
         list-style: none;
+        margin: 0 0 0 5px;
 
-        @include mq(dt, max) {
-            display: flex;
-            order: 1;
-            align-self: center;
+        @include mq(dt, min) {
+            justify-content: center;
+            min-width: 404px;
+            margin: 0;
+        }
+
+        @include mq(tv, min) {
+            min-width: 690.52px;
         }
 
         .payments-icons-wrapper {
-            img {
-                width: 100%;
-            }
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            list-style: none;
+            margin: 0;
 
-            ul {
-                margin: 0;
-                display: flex;
-                align-items: center;
-                list-style: none;
-
-                @include mq(dt, min) {
-                    justify-content: center;
-                }
-            }
             li {
-                width: 3.77%;
-                min-width: 35.65px;
-                margin-right: 4px;
-
-                @include mq(dt, min) {
-                    width: 5.22%;
-                    margin-right: 13px;
-                }
-                @include mq(tv, min) {
-                    width: 6.12%;
-                }
+                width: 35.65px;
             }
 
-            #vtexIcon {
-                width: 53px;
-                margin-left: 10px;
-                position: relative;
-            }
-
-            #vtexIcon::before {
-                content: "";
-                position: absolute;
-                display: inline-block;
-                height: 24px;
-                top: 5px;
-                left: -10px;
-                border-left: 1px solid $gray;
+            @include mq(tv, min) {
+                li {
+                    width: 69.63px;
+                }
             }
         }
 
-        &__divider {
-            background-color: $gray-200;
-            display: inline-block;
-            height: 24px;
-            margin: 0 8px;
-            width: 1px;
+        .footerCheckout__stamps__divider {
+            position: relative;
+            border-left: 1px solid $gray;
+            margin-left: 4px;
+
+            // &::before {
+            //     content: "";
+            //     color: $gray;
+            //     position: absolute;
+            // }
+
+            @include mq(dt, min) {
+                margin-left: 11.35px;
+            }
+        }
+
+        .footerCheckout__vtexpci {
+            margin-left: 10px;
+
+            .vtex-icon {
+                width: 53px;
+                height: 33px;
+            }
+
+            @include mq(tv, min) {
+                .vtex-icon {
+                    width: 103.52px;
+                    height: 64.46px;
+                }
+            }
         }
     }
 
@@ -128,7 +126,7 @@
         display: flex;
         list-style-type: none;
         margin: 0;
-        margin-right: 16.5px;
+        // margin-right: 16.5px;
 
         @include mq(dt, max) {
             display: flex;
@@ -139,6 +137,7 @@
 
         @include mq(dt, min) {
             min-width: 217px;
+            margin-right: 22.5px;
         }
 
         li {
@@ -189,4 +188,16 @@
             }
         }
     }
+
+    .footerCheckout::after,
+    ::before {
+        display: none;
+        content: none;
+    }
+
+    .footerCheckout::before,
+    ::after {
+        display: none;
+        content: none;
+    }
 }