From c2574c70965f0894dc25c1555fb3fa4a245b0fa0 Mon Sep 17 00:00:00 2001 From: guiprj Date: Sat, 17 Dec 2022 18:23:22 -0300 Subject: [PATCH] =?UTF-8?q?feat:=20estilizacao=20da=20p=C3=A1gina=20de=20a?= =?UTF-8?q?utenticacao?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- checkout/src/arquivos/js/components/Footer.js | 47 ++++++++- .../sass/checkout/_checkout-autenticacao.scss | 32 +++++-- .../sass/checkout/_checkout-carrinho.scss | 95 ++++++++++++------- .../src/arquivos/sass/utils/_variaveis.scss | 1 + 4 files changed, 129 insertions(+), 46 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 7358f6c..28af84d 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -6,13 +6,14 @@ export default class Footer { } async init() { + await this.getProducts(this.createShelf) await this.selectors(); - this.getProducts(this.createShelf) this.hideElementscart() this.changeTextBtnChooseProducts() + this.addCarrossel() this.setImagesFooter() this.onUpdate(); - this.addCarrossel() + this.vericationStateToSetSlick() } async selectors() { @@ -22,6 +23,8 @@ export default class Footer { this.titleCart = await waitElement("#cart-title"); this.btnChooseProducts = await waitElement("#cart-choose-products"); this.footer = await waitElement(".footerCheckout"); + this.footerPrateleira = await waitElement(".footerCheckout__prateleira__container-Slick"); + this.textPraleteira = await waitElement(".footerCheckout__prateleira__textYouLike"); this.footerStamps = await waitElement(".footerCheckout__stamps"); this.footerDevelopment = await waitElement(".footerCheckout__developedBy"); } @@ -32,13 +35,31 @@ export default class Footer { // sempre que o carrinho estiver vazio o elemento chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver let target = this.checkoutVazio; let title = this.titleCart + let textPrateleira = this.textPraleteira + let prateleira = this.footerPrateleira let config = { childList: true, attributes: true }; + if(target.style.display == "block") { + prateleira.style.display = "none" + textPrateleira.style.display = "none" + } else { + textPrateleira.style.display = "flex" + prateleira.style.display = "block" + } let observer = new MutationObserver((mutations) => { mutations.forEach(function (mutation) { if(mutation.target.style.display == "block") { title.style.display = "none"; + prateleira.style.display = "none" + textPrateleira.style.display = "none" } else { title.style.display = "block"; + textPrateleira.style.display = "flex" + prateleira.style.display = "block" + $('.footerCheckout__prateleira__container-Slick').slick('unslick'); + $(".footerCheckout__prateleira__container-Slick").slick({ + slidesToShow: 4, + slidesToScroll: 1, + }); } //console.log(mutation.target.style.display); }); @@ -180,4 +201,26 @@ export default class Footer { containerSlick.append(cardProduct) }) } + + vericationStateToSetSlick() { + const prateleira = document.querySelector('.footerCheckout__prateleira__container-Slick') + const textPrateleira = document.querySelector('.footerCheckout__prateleira__textYouLike') + const urlCart = "https://m3academy.myvtex.com/checkout/#/cart" + console.log(prateleira) + + if (window.location.href != urlCart) { + textPrateleira.style.display = "none" + prateleira.style.display = "none" + } + + window.addEventListener("hashchange", () => { + if (window.location.hash != "#/cart") { + textPrateleira.style.display = "none" + prateleira.style.display = "none" + } else { + textPrateleira.style.display = "flex" + prateleira.style.display = "block" + } + }) + } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 92f0375..831c8ce 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -1,6 +1,6 @@ .checkout-container { .client-pre-email { - border-color: $color-gray4; + border-top: 1px solid $color-black; font-family: $font-family; padding-top: 8px; @@ -8,6 +8,8 @@ a { color: $color-black; font-size: 14px; + font-family: $font-family-secundary; + text-transform: uppercase; &:hover { color: lighen($color-black, 10); @@ -25,12 +27,19 @@ margin-bottom: 16px; span { - color: #303030; - font-size: 24px; + font-family: $font-family-secundary; + text-transform: uppercase; + color: $color-black; + font-weight: 400; + font-size: 1.25rem; } small { - color: $color-gray4; + font-family: $font-family-secundary; + text-transform: uppercase; + color: $color-black; + font-weight: 400; + font-size: 1.25rem; } } } @@ -43,7 +52,7 @@ color: $color-black; font-family: $font-family; padding: 0 16px; - border: 2px solid $color-gray3; + border: 1px solid $color-black; box-sizing: border-box; border-radius: 5px; @@ -53,13 +62,16 @@ } button { - background-color: $color-black; + background-color: $color-blue2; border-radius: 5px; border: none; font-family: $font-family; height: 54px; right: 0; top: 0; + color: $color-black; + text-transform: uppercase; + font-weight: 700; @media (max-width: 490px) { height: 48px; @@ -76,7 +88,7 @@ .emailInfo { padding: 16px; background-color: $color-white; - border: 1px solid $color-gray4; + border: 1px solid $color-black; border-radius: 0; h3 { @@ -113,7 +125,7 @@ .client-profile-data { .accordion-group { border-radius: 0; - border: 1px solid $color-gray4; + //border: 1px solid $color-gray4; font-family: $font-family; padding: 16px; @@ -213,7 +225,7 @@ } .shp-lean { - border: 1px solid $color-gray4; + //border: 1px solid $color-gray4; border-radius: 0; label { @@ -277,7 +289,7 @@ .vtex-omnishipping-1-x-deliveryChannelsToggle { background-color: #d8c8ac; - border: 1px solid #d8c8ac; + //border: 1px solid #d8c8ac; } .vtex-omnishipping-1-x-deliveryOptionActive { diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 4a467be..ec5be1b 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -375,11 +375,12 @@ .srp-main-title { margin: 32px 0 12px; + font-family: $font-family; font-style: normal; - font-weight: normal; + font-weight: 400; font-size: 24px; line-height: 28px; - color: $color-gray2; + color: $color-black; @include mq(md, max) { margin-top: 0; @@ -414,6 +415,10 @@ background-color: darken($color-gray5, 5); } } + + .input.ship-country.text { + display: none; + } } .srp-data { @@ -428,21 +433,23 @@ } .srp-pickup-my-location__button { - background-color: $color-black; + background-color: $color-blue2; border: none; - border-radius: 5px; + border-radius: 0.5rem; color: $color-white; outline: none; width: 100%; + font-family: $font-family-secundary; font-style: normal; - font-weight: 500; + font-weight: 700; font-size: 14px; line-height: 16px; letter-spacing: 0.05em; + padding: 0.75rem 0; &:hover { - background-color: lighten($color-black, 5); + opacity: 0.8; } &:active { @@ -452,7 +459,7 @@ } .srp-toggle { - margin: 0 0 34px; + margin: 0 0 1.25rem; &__wrapper { background-color: $color-white; @@ -467,12 +474,12 @@ } &__current { - border: 1px solid $color-blue; + border: 1px solid $color-black; border-radius: 100px; } .blue { - color: $color-blue; + color: $color-black; } label { @@ -497,7 +504,7 @@ } input { - border: 1px solid $color-gray3; + border: 1px solid $color-gray6; border-radius: 5px; box-shadow: none; color: $color-gray3; @@ -508,7 +515,7 @@ } & ~ button { - background-color: $color-black; + background-color: $color-blue2; border: none; border-radius: 5px; color: $color-white; @@ -524,7 +531,7 @@ text-transform: uppercase; &:hover { - background-color: lighten($color-black, 5); + opacity: 0.8; } &:active { @@ -533,12 +540,12 @@ } small a { - font-family: $font-family; + font-family: $font-family-secundary; font-style: normal; - font-weight: normal; + font-weight: 400; font-size: 10px; line-height: 12px; - color: $color-blue; + color: $color-black; margin-top: 7px; } @@ -655,21 +662,39 @@ text-decoration: underline; } - .coupon-label label { - margin-bottom: 12px; - font-family: $font-family; - font-style: normal; - font-weight: normal; - font-size: 12px; - line-height: 14px; - color: $color-gray2; - cursor: none; + .coupon-label { + display: flex; + + .coupon-label label { + margin-bottom: 12px; + font-family: $font-family; + font-style: normal; + font-weight: normal; + font-size: 12px; + line-height: 14px; + color: $color-gray2; + cursor: none; + } } + + .coupon-fields { margin-bottom: 32px; - @include mq(sm, max) { + span { + display: flex; + gap: 0.948rem; + + i { + position: absolute; + right: 91px; + opacity: 1; + } + } + + + /* @include mq(sm, max) { span { display: flex; flex-direction: row; @@ -680,7 +705,7 @@ opacity: 1; } } - } + } */ input { border: 2px solid $color-gray3; @@ -688,9 +713,10 @@ box-shadow: none; color: $color-gray4; font-size: 12px; - height: 34px; + height: 36px; padding: 0 12px; - max-width: 160px; + //max-width: 160px; + flex: 2; @include mq(sm, max) { max-width: 100%; @@ -699,22 +725,23 @@ } button { - background: $color-black; + background: $color-blue2; border: none; - border-radius: 5px; - color: $color-white; + border-radius: 0.5rem; + color: $color-black; font-size: 12px; height: 36px; letter-spacing: 1px; margin-left: 6px; outline: none; transition: all 0.2s linear; - width: 94px; + //width: 94px; + flex: 1; text-transform: uppercase; - @include mq(md, max) { + /* @include mq(md, max) { width: 138px; - } + } */ &:hover { background-color: lighten($color-black, 5); diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index daedc91..b24cef4 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -14,6 +14,7 @@ $color-gray2: #7d7d7d; $color-gray3: #f0f0f0; $color-gray4: #8d8d8d; $color-gray5: #e5e5e5; +$color-gray6: #c4c4c4; $color-blue: #4267b2; $color-blue2: #00C8FF;