From 9a2fc54b65ee4bbc249dd2ba51bb5b8173b70cb7 Mon Sep 17 00:00:00 2001
From: Rafael Sampaio <rafael.sampa1989@gmail.com>
Date: Wed, 14 Dec 2022 13:43:21 -0300
Subject: [PATCH] =?UTF-8?q?refactor:=20altera=20c=C3=B3digo=20para=20adici?=
 =?UTF-8?q?onar=20logos=20no=20footer?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index 4601f8a..08d8163 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -15,12 +15,10 @@ export default class Footer {
         this.emptyButton = await waitElement(".link-choose-products");
         this.paymentsMethods = await waitElement(".footerCheckout__payments");
         this.certification = await waitElement(".footerCheckout__vtexpci");
-        this.developedBy = await waitElement(".footerCheckout__developedBy");
         this.emptyCartTitle();
         this.emptyCartButton();
         this.addPaymentsMethodsIcons();
         this.addCertificationIcon();
-        this.addDevelopedByIcons();
         this.events();
         this.items = await waitElement(".footerCheckout__prateleira-container");
         console.log(this.items, "console de items");
@@ -193,27 +191,6 @@ export default class Footer {
       `;
     }
 
-    addDevelopedByIcons() {
-        this.developedBy.innerHTML = `
-        <li>
-          <a href="https://vtex.com/br-pt/">
-            <span>Powered By</span>
-            <span class="vetexIcon">
-              <img src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="Logo da Vtex" />
-            </span>
-          </a>
-        </li>
-        <li>
-          <a href="https://agenciam3.com/">
-            <span>Developed By</span>
-            <span class="m3Icon">
-              <img src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="Logo da M3"/>
-            </span>
-          </a>
-        </li>
-      `;
-    }
-
     async addCarrossel() {
         const elemento = await waitElement(".footerCheckout__prateleira-container");
         $(elemento).slick({
diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss
index e3ecb5f..ac1fac1 100644
--- a/checkout/src/arquivos/sass/partials/_footer.scss
+++ b/checkout/src/arquivos/sass/partials/_footer.scss
@@ -210,32 +210,63 @@
         display: flex;
         list-style-type: none;
         margin: 0;
+        gap: 16px;
+
+        li:first-child {
+            a {
+                align-items: center;
+                color: $color-gray2;
+                display: flex;
+                font-family: $font-family;
+                font-style: normal;
+                font-weight: normal;
+                font-size: 0;
+                line-height: 12px;
+                text-decoration: none;
+
+                &::after {
+                    background-image: url("https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png");
+                    background-repeat: no-repeat;
+                    background-size: 45px 16px;
+                    content: "";
+                    width: 45px;
+                    height: 16px;
+                    display: inline-block;
+                }
+            }
+        }
 
         li:last-child {
-            margin-left: 16px;
+            a {
+                align-items: center;
+                color: $color-gray2;
+                display: flex;
+                font-family: $font-family;
+                font-style: normal;
+                font-weight: normal;
+                font-size: 0;
+                line-height: 12px;
+                text-decoration: none;
+
+                &::after {
+                    background-image: url("https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png");
+                    background-repeat: no-repeat;
+                    background-size: 29px 16px;
+                    content: "";
+                    width: 29px;
+                    height: 16px;
+                    display: inline-block;
+                }
+            }
         }
 
         a {
-            align-items: center;
-            color: $color-gray2;
-            display: flex;
-            font-family: $font-family;
-            font-style: normal;
-            font-weight: normal;
-            font-size: 10px;
-            line-height: 12px;
-            text-decoration: none;
-
             span {
                 display: flex;
                 justify-content: center;
                 align-items: center;
-            }
-
-            img {
-                display: block;
-                height: 16px;
-                margin-left: 8px;
+                margin-right: 8px;
+                font-size: 10px;
             }
         }
     }