From 71f6c45b7dc90fbeb4dd19ec7e03b212676d142c Mon Sep 17 00:00:00 2001
From: devartes <anacavalcante731@gmail.com>
Date: Mon, 12 Dec 2022 12:35:08 -0300
Subject: [PATCH] style(Footer): modificando estrutura do footer

---
 checkout/src/arquivos/js/components/Footer.js | 73 ++++++++-----------
 .../src/arquivos/sass/checkout/_checkout.scss |  2 +-
 .../src/arquivos/sass/partials/_footer.scss   | 53 +++++++++-----
 3 files changed, 67 insertions(+), 61 deletions(-)

diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index 8dc871f..350a979 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -16,6 +16,7 @@ export default class Footer {
         // vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement
         this.checkoutVazio = await waitElement(".empty-cart-content");
         this.footerCheckoutstamps = await waitElement(".footerCheckout__wrapper");
+        this.sliderProducts = await waitElement(".footerCheckout__prateleira");
     }
 
     onUpdate() {
@@ -43,58 +44,46 @@ export default class Footer {
     footerCheckout() {
         this.footerCheckoutstamps.innerHTML = `
         <div class="container">
-        <div class="footerCheckout__address">
-            <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
-        </div>
-        <div>
-            <ul class="footerCheckout__payments">
+            <div class="footerCheckout__address">
+                <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
+            </div>
+            <ul class="footerCheckout__stamps">
                 <li>
-                    <img src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="ícone do cartão master card"/>
+                    <span class="footerCheckout__payments">
+                        <img src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="ícone do cartão master card"/>
+                        <img src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt="ícone do cartão visa"/>
+                        <img src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" alt="ícone do cartão american express"/>
+                        <img src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" alt="ícone do cartão elo"/>
+                        <img src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" alt="ícone do cartão hipercard"/>
+                        <img src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" alt="ícone do paypal"/>
+                        <img src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="ícone de boleto"/>
+                    </span>
                 </li>
                 <li>
-                    <img src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt="ícone do cartão visa"/>
+                     <span class="footerCheckout__stamps__divider"></span>
                 </li>
                 <li>
-                    <img src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" alt="ícone do cartão american express"/>
-                </li>
-                <li>
-                    <img src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" alt="ícone do cartão elo"/>
-                </li>
-                <li>
-                    <img src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" alt="ícone do cartão hipercard"/>
-                </li>
-                <li>
-                    <img src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" alt="ícone do paypal"/>
-                </li>
-                <li>
-                    <img src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="ícone de boleto"/>
+                    <span class="footerCheckout__payments">
+                        <img src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="ícone de boleto"/>
+                    </span>
                 </li>
             </ul>
-            <span class="footerCheckout__stamps__divider"></span>
-            <ul class="footerCheckout__payments">
-                <li class="vtexPCIM">
-                    <img src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="ícone de boleto"/>
+            <ul class="footerCheckout__developedBy">
+                <li>
+                    <a href="https://vtex.com/br-pt/">
+                        <span>Powered By</span>
+                        <img src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="ícone de boleto"/>
+                    </a>
+                </li>
+
+                <li>
+                    <a href="https://agenciam3.com/">
+                        <span>Developed By</span>
+                        <img src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="ícone de boleto"/>
+                    </a>
                 </li>
             </ul>
         </div>
-        <ul class="footerCheckout__developedBy">
-            <li>
-                <a href="https://vtex.com/br-pt/">
-                    <span>Powered By</span>
-                    <img src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="ícone de boleto"/>
-                </a>
-            </li>
-
-            <li>
-                <a href="https://agenciam3.com/">
-                    <span>Developed By</span>
-                    <img src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="ícone de boleto"/>
-                </a>
-            </li>
-        </ul>
-    </div>
-
         `;
     }
-
 }
diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss
index 5fb011f..632d8dd 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout.scss
@@ -9,7 +9,7 @@ html {
 }
 
 footer .footerCheckout__wrapper {
-    width: 94.9734%;
+    width: 100%;
     margin: auto auto 0 auto;
 }
 footer .footerCheckout__prateleira,
diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss
index 5728c89..84999a6 100644
--- a/checkout/src/arquivos/sass/partials/_footer.scss
+++ b/checkout/src/arquivos/sass/partials/_footer.scss
@@ -4,22 +4,26 @@ footer {
 }
 
 .footerCheckout {
-    border-top: 1px solid #000000;
+    // border-top: 1px solid #000000;
     color: $color-gray2;
     bottom: 0;
     width: 100%;
     &__wrapper {
+        border-top: 1px solid #000;
         padding: 16px 0;
-        margin-left: 16px;
-        margin-right: 16px;
+        width: 100%;
+        // width: 94.9734%;
+        // margin-left: 16px;
+        // margin-right: 16px;
         & .container {
             display: flex;
             justify-content: space-between;
             align-items: center;
-            width: 100%;
+            // width: 100%;
+            width: 94.9734%;
             @media (max-width: $checkout375px) {
                 flex-direction: column;
-                align-items:flex-start
+                align-items: flex-start;
             }
 
             &::before,
@@ -46,40 +50,37 @@ footer {
                     @media (max-width: $checkout375px) {
                         margin-bottom: 0;
                     }
-
                 }
             }
 
-            & div {
+            & .footerCheckout__stamps {
                 align-items: center;
                 display: flex;
                 justify-self: center;
+                margin: 0;
                 @media (max-width: $checkout375px) {
                     order: 1;
                 }
-                & ul {
-                    align-items: center;
-                    display: flex;
-                    justify-self: center;
+                & li {
                     list-style: none;
-                    margin: 0;
                     @include mq(md, max) {
                         align-self: center;
                     }
-
-                    & li {
+                    span {
                         display: flex;
                         align-items: center;
                         justify-content: space-between;
                         margin-left: 0;
-                        & img {
+                        img {
                             height: 20px;
                             margin: 0 6.675px;
                         }
                     }
-                    & .vtexPCIM {
-                        & img {
-                            height: 33px;
+                    &:nth-last-child(1) {
+                        & span {
+                            & img {
+                                height: 33px;
+                            }
                         }
                     }
                 }
@@ -126,3 +127,19 @@ footer {
         }
     }
 }
+
+.footerCheckout__prateleira {
+    .sliderCards {
+        background-color: blue;
+        width: auto;
+        height: 390px;
+        margin: 0;
+        display: flex;
+        & .slick-slide {
+            list-style: none;
+            width: 242px;
+            height: 390px;
+            background: #00c8ff;
+        }
+    }
+}