diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index ddbfee7..203e20f 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -8,12 +8,16 @@ export default class Footer { async init() { await this.selectors(); // this.onUpdate(); + this.addIconsCardAndVtxpci(); + this.addIconVtexAndM3(); } async selectors() { //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.iconesCartoesAndVtexpci = await waitElement(".footerCheckout__stamps"); + this.iconsVtexAndM3 = await waitElement(".footerCheckout__developedBy"); } onUpdate() { @@ -37,4 +41,46 @@ export default class Footer { slidesToScroll: 1, }); } + addIconVtexAndM3() { + if (this.iconsVtexAndM3 && window.innerWidth > 1024) { + this.iconsVtexAndM3.innerHTML = ` +
  • + + Powered By + Img Icone Vtex + +
    • + +
  • + + Developed By + Img Icone M3 + +
    • + `; + } + } + + addIconsCardAndVtxpci() { + if (this.iconesCartoesAndVtexpci && window.innerWidth > 1024) { + this.iconesCartoesAndVtexpci.innerHTML = ` +
  • + Img bandeira Mastercard + Img bandeira Visa + adad + Img bandeira Elo + Img bandeira Hipercard + Img Paypal + Img Boleto + +
    • +
  • + +
    • +
  • + Img Vtxpci +
    • + `; + } + } } diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index 6744524..acf2789 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -17,5 +17,11 @@ export default class Header { timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise interval: 1000, // vai verificar a cada 1 segundo se o elemento existe }); + this.progressBar = await waitElement("#progressBar"); } + + progressBarCronstructor (){ + + } + } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss index 08f74e9..144d7df 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss @@ -9,16 +9,21 @@ } } + &-message{ + display: none; + } + &-title { - font-size: 20px; + margin: 170px 0 32px 0; + font-size: 24px; + line-height: 33px; } &-links { .link-choose-products { - background: $color-black; - border: none; - border-radius: 5px; - transition: ease-in 0.22s all; + border: 1px solid $color-black; + border-radius: 0; + // transition: ease-in 0.22s all; outline: none; font-family: $font-family; font-style: normal; @@ -27,11 +32,14 @@ line-height: 16px; text-align: center; letter-spacing: 0.05em; - color: $color-white; + color: $color-black; text-transform: uppercase; + margin: 0 0 0 0; + width: 31.74%; + padding: 15px 0; &:hover { - background: lighten($color-black, 5); + background: lighten($color-white, 5); } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 5fb011f..ee3cce5 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -9,14 +9,28 @@ html { } footer .footerCheckout__wrapper { - width: 94.9734%; + width: 100%; margin: auto auto 0 auto; + border-top: 1px solid black; + .container{ + display: flex; + align-items: center; + width: 94.9734%; + } } footer .footerCheckout__prateleira, header { - width: 79.53125%; + width: 100%; margin: 0 auto; } +header{ + border-bottom: 1px solid black; + padding: 29px 0; +} +.headerCheckout__safeBuy{ + display: flex; + gap: 8px; +} body { display: flex; @@ -52,13 +66,16 @@ body { width: 80%; } } +.row-fluid .full-cart.active{ + margin-bottom: 0; +} .btn-success { - background: $color-black; + background: $color-white; text-shadow: none; &:hover { - background: lighten($color-black, 15%); + background: lighten($color-white, 15%); } } @@ -81,6 +98,10 @@ body { margin-left: 30px; } } +#cart-title{ + display: none !important; +} + .dropdown { &__content { diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index c7c65c2..e765cfd 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -10,6 +10,7 @@ } &__address { + color: $color-gray2; font-family: $font-family; font-style: normal; @@ -17,7 +18,11 @@ font-size: 10px; line-height: 12px; text-transform: capitalize; - max-width: 40%; + width: 33%; + + &::after{ + content: "."; + } @include mq(md, max) { margin-bottom: 24px; @@ -30,12 +35,27 @@ display: flex; justify-self: center; list-style: none; + margin: 0; + width: 33%; + justify-content: center; @include mq(md, max) { align-self: center; margin-bottom: 12px; } + .footer-imgs-cards { + width: 10.01%; + margin-right: 12px; + &-final{ + width: 10.01%; + margin-right: 0px + } + } + .footer-imgs-vtexpci{ + width: 84.4%; + } + &__divider { background-color: $color-gray4; display: inline-block; @@ -50,6 +70,19 @@ display: flex; list-style-type: none; margin: 0; + width: 33%; + justify-content: flex-end; + + .Link1{ + justify-content: end; + + &__footer-imgs-logoVtex{ + width: 20%; + } + } + .footer-imgs-logoM3{ + width: 17%; + } li:last-child { margin-left: 16px; diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index 8b44777..17902c7 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -1,7 +1,8 @@ /* _header.scss */ .headerCheckout { .container { - width: auto !important; + width: 79.53125%; + margin: 0 auto; } &__wrapper { align-items: center;