diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index ddbfee7..6a35681 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -7,6 +7,9 @@ export default class Footer { async init() { await this.selectors(); + this.pagamentos(); + this.certificado(); + this.desenvolvimento(); // this.onUpdate(); } @@ -14,6 +17,18 @@ 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__payments", { + timeout: 5000, + interval: 1000, + }); + this.vtexIcon = await waitElement(".footerCheckout__stamps", { + timeout: 5000, + interval: 1000, + }); + this.developed = await waitElement(".footerCheckout__developedBy", { + timeout: 5000, + interval: 1000, + }); } onUpdate() { @@ -37,4 +52,58 @@ export default class Footer { slidesToScroll: 1, }); } + + pagamentos() { + this.payments.innerHTML = ` + + `; + } + + certificado() { + this.vtexIcon.children[2].children[0].innerHTML = ` + + `; + } + + desenvolvimento() { + this.developed.children[0].children[0].innerHTML = ` + + Powered By + + + `; + + this.developed.children[1].children[0].innerHTML = ` + + Developed By + + + `; + } } diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index c7c65c2..55b03dd 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -1,21 +1,35 @@ /* _footer.scss */ .footerCheckout { - border-top: none; + border-top: 1px solid black; color: $color-gray2; &__wrapper { - align-items: center; - display: flex; - justify-content: space-between; + width: auto !important; + padding: 16px 22px 16px 32px; + margin: 0; + + @include mq(xl, min) { + padding: 14px 63px 16px 63px; + } + .container { + align-items: center; + display: flex; + justify-content: space-between; + width: auto; + } + .container::before, + ::after { + display: none !important; + } } &__address { - color: $color-gray2; + color: $color-black; font-family: $font-family; font-style: normal; font-weight: normal; font-size: 10px; - line-height: 12px; + line-height: 14px; text-transform: capitalize; max-width: 40%; @@ -23,6 +37,11 @@ margin-bottom: 24px; max-width: 100%; } + + @include mq(xl, min) { + font-size: 20px; + line-height: 27px; + } } &__stamps { @@ -30,6 +49,12 @@ display: flex; justify-self: center; list-style: none; + margin: 0; + width: 31.56%; + + @include mq(xl, min) { + width: 29.1%; + } @include mq(md, max) { align-self: center; @@ -40,9 +65,21 @@ background-color: $color-gray4; display: inline-block; height: 24px; - margin: 0 8px; + margin: 0 10px 0 13px; width: 1px; } + + .lista-pagamentos { + list-style: none; + margin: 0; + display: flex; + gap: 13px; + } + + .lista-certificados { + list-style: none; + margin: 0; + } } &__developedBy { @@ -57,17 +94,40 @@ a { align-items: center; - color: $color-gray2; + color: $color-black; display: flex; font-family: $font-family; font-style: normal; font-weight: normal; - font-size: 10px; + font-size: 9px; line-height: 12px; text-decoration: none; + @include mq(xl, min) { + font-size: 18px; + line-height: 25px; + } + span { - margin-right: 8px; + margin-right: 10px; + } + + .powered { + img { + width: 44px; + @include mq(xl, min) { + width: 87px; + } + } + } + + .developed { + img { + width: 28px; + @include mq(xl, min) { + width: 56px; + } + } } } }