From 23cb7fedc133c1e40b830faa6df9d51e1047cb41 Mon Sep 17 00:00:00 2001 From: Rafael Sampaio Date: Fri, 16 Dec 2022 08:08:04 -0300 Subject: [PATCH] feat: adiciona css checkout dados pessoais 1290px --- checkout/src/arquivos/js/components/Footer.js | 11 +- .../sass/checkout/_checkout-autenticacao.scss | 109 ++++++++++----- .../sass/checkout/_checkout-carrinho.scss | 36 ++++- .../sass/checkout/_checkout-pagamento.scss | 129 ++++++++++++++++++ .../src/arquivos/sass/utils/_variaveis.scss | 1 + 5 files changed, 238 insertions(+), 48 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 1955699..fb564db 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -9,8 +9,7 @@ export default class Footer { this.list = await this.fetchApiData(); await this.selectors(); this.cartTitle = await waitElement("#cart-title"); - console.log(this.cartTitle); - if (window.location.hash == "#/cart") { + if (window.location.hash === "#/cart") { await this.cartUpdate(); } this.emptyTitle = await waitElement(".empty-cart-title"); @@ -23,7 +22,6 @@ export default class Footer { this.addCertificationIcon(); this.events(); this.items = await waitElement(".footerCheckout__prateleira-container"); - console.log(this.items, "console de items"); await this.renderItems(); await this.addCarrossel(); } @@ -46,14 +44,11 @@ export default class Footer { } async cartUpdate() { - console.log("cartUpdate"); //Função que fará a verificação se o carrinho está vazio para remover a prateleira de produtos: // vocês devem olhar a doc fornecida no Desafio para aprender a usar a MutationObserver // 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; - console.log("target"); let config = { childList: true, attributes: true }; - console.log("config"); let observer = new MutationObserver((mutations) => { console.log("observer"); mutations.map((mutation) => { @@ -63,14 +58,10 @@ export default class Footer { if (cartStatus === "display: none;") { this.renderPrateleira(); - console.log("Adiciona Prateleira"); this.cartTitle.classList.remove("inactive"); - console.log("Adiciona Título"); } else if (cartStatus === "display: block;") { this.removePrateleira(); - console.log("Remove Prateleira"); this.cartTitle.classList.add("inactive"); - console.log("Remove Título"); } }); }); diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 2996460..de7ef30 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -5,6 +5,12 @@ padding-top: 8px; border-top: 1px solid $color-black; + &-h { + label { + margin-top: 6% !important; + } + } + .link-cart { a { color: $color-black; @@ -157,54 +163,78 @@ .payment-data, .client-profile-data { .accordion-group { - border-radius: 0; - border: 1px solid $color-gray4; + border-radius: 8px; + border: 1px solid $color-gray3; font-family: $font-family; padding: 16px; - .accordion-heading { - span { - color: #303030; - margin-bottom: 8px; - padding: 0; + // .accordion-heading { + // span { + // color: #303030; + // margin-bottom: 8px; + // padding: 0; - i::before { - fill: #303030; - } - } + // i::before { + // fill: #303030; + // } + // } - a { - align-items: center; - background-color: #303030; - border-radius: 8px; - border: none; - color: $color-white; - display: flex; - justify-content: center; - padding: 6px 5px 6px 8px; - } - } + // a { + // align-items: center; + // background-color: #303030; + // border-radius: 8px; + // border: none; + // color: $color-white; + // display: flex; + // justify-content: center; + // padding: 6px 5px 6px 8px; + // } + // } .accordion-inner { padding: 0; /* General configurations */ + .box-info, + .notification { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-gray9; + } + .client-notice { color: $color-black; + display: none; } p { label { - color: $color-black; + color: $color-gray9; font-weight: 500; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + + #opt-in-newsletter { + width: 18px; + height: 18px; + } } select, input { - border-radius: 0; - border: 1px solid $color-gray4; + border: 1px solid $color-gray11; + border-radius: 5px; box-shadow: none; + height: 32px; + margin-bottom: 10px; + float: none; } .help.error { @@ -212,7 +242,12 @@ } } + .newsletter { + margin-bottom: 45px !important; + } + .box-client-info-pj { + display: none; .link a#is-corporate-client, .link a#not-corporate-client { color: $color-black; @@ -228,18 +263,28 @@ button.submit { border: none; border-radius: 5px; - background: $color-black; + background: $color-blue; margin-top: 8px; outline: none; transition: all 0.2s linear; + width: 100%; + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + text-align: center; + letter-spacing: 0.05em; + text-transform: uppercase; + color: $color-white; - &:hover { - background: lighten($color-black, 5); - } + // &:hover { + // background: lighten($color-black, 5); + // } - &:active { - background: darken($color-black, 5); - } + // &:active { + // background: darken($color-black, 5); + // } } /* Shipping configurations */ diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 53b4d39..27ccc48 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -17,7 +17,7 @@ display: none; } .cart { - border: 1px solid $color-gray3; + // border: 1px solid $color-gray3; box-sizing: border-box; border-radius: 5px; padding: 16px 16px; @@ -41,6 +41,7 @@ font-family: $font-family; width: 100%; h2 { + display: none; background: $color-white; border: none; color: #303030; @@ -57,12 +58,18 @@ } .cart { - border: 1px solid $color-gray4; + // border: 1px solid $color-gray4; ul li { border-top: none; margin-top: 0; padding-top: 0; + font-weight: 400; + font-size: 12px; + line-height: 14px; + display: flex; + align-items: center; + color: $color-black; &:not(:first-child) { margin-top: 8px; @@ -70,10 +77,20 @@ border-top: 1px solid #e5e5e5; } - .shipping-date, - .price { + .shipping-date { color: #7d7d7d; } + + .price { + color: $color-gray2; + margin: 0; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + text-align: right; + } } } @@ -83,8 +100,14 @@ } #go-to-cart-button a { - color: #303030; - text-decoration: underline; + color: $color-black; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + text-align: right; + text-decoration-line: underline; } .summary-totalizers { @@ -185,6 +208,7 @@ .product-name { padding-right: 0; + white-space: normal; @include mq(lg, max) { width: 250px; diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss index 9a52731..87e74b5 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss @@ -4,8 +4,137 @@ body .container-main.container-order-form .orderform-template.active { margin-left: unset; margin-right: 0; float: right; + border: 1px solid $color-gray5; + border-radius: 8px; + + .description { + margin: 0 !important; + width: 90px; + display: flex; + justify-content: center; + align-items: center; + } + + .quantity { + display: none !important; + } + + .url { + height: 60px; + width: 78.93px; + margin-right: 7px; + + img { + height: 100%; + width: 100%; + } + } } .orderform-template-holder { width: 66.1132%; + + .client-profile-data { + .accordion-group { + .accordion-heading { + .accordion-toggle { + &::after { + content: "Identificação"; + font-size: 16px; + } + } + span { + color: #303030; + margin-bottom: 25px; + padding: 0; + font-size: 0; + + i::before { + display: none; + fill: #303030; + } + } + + a { + align-items: center; + background-color: #303030; + border-radius: 8px; + border: none; + color: $color-white; + display: flex; + justify-content: center; + padding: 6px 5px 6px 8px; + } + } + } + } + + .shipping-data { + .accordion-group { + .accordion-heading { + span { + color: #303030; + margin-bottom: 8px; + padding: 0; + + i::before { + display: none; + fill: #303030; + } + } + + a { + align-items: center; + background-color: #303030; + border-radius: 8px; + border: none; + color: $color-white; + display: flex; + justify-content: center; + padding: 6px 5px 6px 8px; + } + } + } + } + + .payment-data { + .accordion-group { + .accordion-heading { + span { + color: #303030; + margin-bottom: 8px; + padding: 0; + + i::before { + display: none; + fill: #303030; + } + } + + a { + align-items: center; + background-color: #303030; + border-radius: 8px; + border: none; + color: $color-white; + display: flex; + justify-content: center; + padding: 6px 5px 6px 8px; + } + } + } + } + } + + .cart-items { + margin-top: 34px !important; + } + + .summary-cart-template-holder { + .cart::before { + content: "Resumo do Pedido"; + font-size: 16px; + line-height: 19px; + color: $color-gray2; + } } } diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 4f1141f..ea18390 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -19,6 +19,7 @@ $color-gray7: #989898; $color-gray8: #c4c4c4; $color-gray9: #7d7d7d; $color-gray10: #ededed; +$color-gray11: #e0e0e0; $color-blue: #00c8ff;