feat(ProgressBar): Estiliza barra de progresso

checkout/src/arquivos/js/components/Header.js

@@ -8,14 +8,37 @@ export default class Header {
 
     async init() {
         await this.selectors();
-        console.log(this.item);
+        this.progressBarHTML();
     }
 
     async selectors() {
-        this.item = await waitElement("#my-element", {
+        this.header - await waitElement('.headerCheckout');
-            //#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar
+        this.progressBar = await waitElement('#progressBar');
-            timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise
-            interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
-        });
     }
-}
+
+    progressBarHTML () {
+        if(window.screen.width > 1024) {
+            this.progressBar.innerHTML = `
+            <ul class="container-ul">
+                    <li class="container-li">
+                        <p class="text">Meu carrinho</p>
+                        <p class="circle-1"></p>
+                        <p class="linha-1"></p>
+                    </li>
+                    <li class="container-li">
+                        <p class="text">Dados Pessoais</p>
+                        <p class="circle-2"></p>
+                        <p class="linha-2"></p>
+                    </li>
+                    <li class="container-li">
+                        <p class="text">Pagamento</p>
+                        <p class="circle-3"></p>
+                    </li>
+            </ul>`;
+            }
+            if (window.screen.width <= 1024) {
+                this.progressBar.innerHTML = ``;
+            }
+        };
+    };
+

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

@@ -13,10 +13,6 @@ footer .footerCheckout__wrapper {
     margin: auto auto 0 auto;
 }
 footer .footerCheckout__prateleira,
-header {
-    width: 79.53125%;
-    margin: 0 auto;
-}
 
 body {
     display: flex;

checkout/src/arquivos/sass/partials/_header.scss

@@ -1,5 +1,7 @@
 /* _header.scss */
 .headerCheckout {
+    padding: 29px 131px;
+    border-bottom: 1px solid $color-black-500;
     .container {
         width: auto !important;
     }
@@ -11,26 +13,80 @@
 
     &__logo {
         img {
-            height: 52px;
+            height: 37.14px;
             width: auto;
         }
     }
 
     &__safeBuy {
+        display: flex;
+        gap: 8px;
+        img {
+           height: 15px;
+        }
         span {
             align-items: center;
             display: flex;
             text-transform: uppercase;
             font-family: $font-family;
             font-style: normal;
-            font-weight: normal;
+            font-weight: 400;
             font-size: 12px;
-            line-height: 14px;
+            line-height: 16px;
-            color: $color-gray;
+            color: $color-black;
         }
 
         i {
             margin-right: 8px;
         }
     }
+
+    #progressBar {
+        width: 439px;
+        .container-ul {
+            list-style: none;
+            display: flex;
+            justify-content: space-between;
+            position: relative;
+            margin: 0;
+            .container-li {
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+                position: relative;
+                .circle-1, .circle-2, .circle-3{
+                    width: 12px;
+                    height: 12px;
+                    border: 1px solid $color-black-500;
+                    border-radius: 50%;
+                }
+                .linha-1 {
+                    top: 64%;
+                    left: 58%;
+                    width: 173px;
+                    border: 1px solid $color-black-500;
+                    position: absolute;
+                }
+                .linha-2 {
+                    top: 64%;
+                    left: 58%;
+                    width: 166px;
+                    border: 1px solid $color-black-500;
+                    position: absolute;
+                }
+                .active {
+                    background-color: $color-black-500;
+                }
+                .text {
+                   font-family: $font-family-secundary;
+                   font-style: normal;
+                   font-size: 12px;
+                   font-weight: 400;
+                   line-height: 14px;
+                   color: $color-black-500;
+                }
+            }
+        }
+    }
 }

checkout/src/arquivos/sass/utils/_variaveis.scss

@@ -6,6 +6,7 @@ $font-family-secundary:"Tenor Sans", sans-serif;
 
 /* Colors */
 $color-black: #292929;
+$color-black-500: #000000;
 
 $color-white: #fff;
 

checkout/src/template-checkout/checkout-footer.html

@@ -36,3 +36,4 @@
         </ul>
     </div>
 </footer>
+