From 99334707d384a2269a012f211fca4f2da2af5d6b Mon Sep 17 00:00:00 2001
From: MarcelloMartins <marcello08martins@outlook.com>
Date: Sat, 17 Dec 2022 11:46:36 -0300
Subject: [PATCH] =?UTF-8?q?feat(scss=20header):=20organzi=C3=A7=C3=A3o=20d?=
 =?UTF-8?q?o=20header?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 checkout/src/arquivos/js/components/Footer.js | 22 ++++++++++
 .../src/arquivos/sass/partials/_header.scss   | 17 +++++---
 .../src/arquivos/sass/utils/_variaveis.scss   | 40 +++++++++++++------
 .../template-checkout/checkout-header.html    |  2 +-
 4 files changed, 63 insertions(+), 18 deletions(-)

diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index ddbfee7..70c0373 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -5,12 +5,34 @@ export default class Footer {
         this.init();
     }
 
+    payments() {
+        this.paymentTypesIconsContainer.innerHTML = "";
+        const paymentTypes = [
+            "masterCardM3Academy",
+            "visaM3Academy",
+            "amexM3Academy",
+            "eloM3Academy",
+            "hiperCardM3Academy",
+            "paypalM3Academy",
+            "boletoM3Academy",
+        ];
+        paymentTypes.forEach((paymentType) => {
+            const image = document.createElement("img");
+            image.src = `https://agenciamagma.vteximg.com.br/arquivos/${paymentType}.png`;
+            this.paymentTypesIconsContainer.appendChild(image);
+        });
+    }
+
     async init() {
         await this.selectors();
+        this.payments();
         // this.onUpdate();
     }
 
     async selectors() {
+        this.paymentTypesIconsContainer = await waitElement(
+            ".footerCheckout__stamps li:first-of-type"
+        );
         //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");
diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss
index 8b44777..730989c 100644
--- a/checkout/src/arquivos/sass/partials/_header.scss
+++ b/checkout/src/arquivos/sass/partials/_header.scss
@@ -1,10 +1,14 @@
-/* _header.scss */
 .headerCheckout {
+    width: 100%;
+    border-bottom: 1px solid $color-black;
+
     .container {
         width: auto !important;
     }
     &__wrapper {
+        padding: 0 130px;
         align-items: center;
+        margin: 30px 0;
         display: flex;
         justify-content: space-between;
     }
@@ -18,19 +22,22 @@
 
     &__safeBuy {
         span {
+            // display: flex;
             align-items: center;
-            display: flex;
+            justify-content: center;
             text-transform: uppercase;
             font-family: $font-family;
             font-style: normal;
             font-weight: normal;
             font-size: 12px;
-            line-height: 14px;
-            color: $color-gray;
+            height: 17px;
+            line-height: 16px;
+            color: $color-black;
         }
 
-        i {
+        img {
             margin-right: 8px;
+            height: 15px;
         }
     }
 }
diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss
index f000abe..e3d5082 100644
--- a/checkout/src/arquivos/sass/utils/_variaveis.scss
+++ b/checkout/src/arquivos/sass/utils/_variaveis.scss
@@ -2,7 +2,7 @@
 @import url("https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap");
 $font-family: "Open Sans", sans-serif;
-$font-family-secundary:"Tenor Sans", sans-serif;
+$font-family-secundary: "Tenor Sans", sans-serif;
 
 /* Colors */
 $color-black: #292929;
@@ -19,20 +19,36 @@ $color-blue: #4267b2;
 
 $color-green: #4caf50;
 
+/* Colors */
+$black: #000;
+$white: #fff;
+
+$gray-50: #e5e5e5;
+$gray-100: #f0f0f0;
+$gray-125: #c4c4c4;
+$gray-150: #989898;
+$gray-200: #8d8d8d;
+$gray-500: #292929;
+
+$blue: #00c8ff;
+
 /* Grid breakpoints */
 $grid-breakpoints: (
-	xs: 0,
-	cstm: 400,
-	sm: 576px,
-	md: 768px,
-	lg: 992px,
-	xl: 1200px
+    xs: 0,
+    Gf: 328px,
+    cstm: 400,
+    sm: 576px,
+    md: 768px,
+    lg: 992px,
+    dt: 1025px,
+    xl: 1200px,
+    tv: 2500px,
 ) !default;
 
 $z-index: (
-	level1: 5,
-	level2: 10,
-	level3: 15,
-	level4: 20,
-	level5: 25
+    level1: 5,
+    level2: 10,
+    level3: 15,
+    level4: 20,
+    level5: 25,
 ) !default;
diff --git a/checkout/src/template-checkout/checkout-header.html b/checkout/src/template-checkout/checkout-header.html
index 258a0d6..19a53d9 100644
--- a/checkout/src/template-checkout/checkout-header.html
+++ b/checkout/src/template-checkout/checkout-header.html
@@ -12,7 +12,7 @@
                 <div id="progressBar" class="progress-bar">	Aqui entra a barra de progresso
                 </div>
                 <div class="headerCheckout__safeBuy">
-                      <img src="https://agenciamagma.vteximg.com.br/arquivos/cadeadoCompraSegM3Academy.png" alt="Cadeado"/>
+                        <img src="https://agenciamagma.vteximg.com.br/arquivos/cadeadoCompraSegM3Academy.png" alt="Cadeado"/>
                     <span>Compra segura</span>
                 </div>
             </div>