From bcdb3f724cd3b4994e48ec36f12af723cf551f81 Mon Sep 17 00:00:00 2001 From: Gabriel Ferraz Date: Mon, 12 Dec 2022 18:06:01 -0300 Subject: [PATCH] =?UTF-8?q?feat(footer):=20adi=C3=A7=C3=A3o=20do=20footer?= =?UTF-8?q?=20em=20telas=20desktop?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- checkout/src/arquivos/js/components/Footer.js | 79 +++ .../sass/checkout/_checkout-autenticacao.scss | 474 +++++++++--------- .../sass/checkout/_checkout-carrinho.scss | 72 +-- .../sass/checkout/_checkout-vazio.scss | 64 +-- .../src/arquivos/sass/checkout/_checkout.scss | 6 +- .../src/arquivos/sass/partials/_footer.scss | 59 ++- .../src/arquivos/sass/utils/_variaveis.scss | 11 +- .../template-checkout/checkout-footer.html | 2 +- 8 files changed, 448 insertions(+), 319 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index ddbfee7..4d6f650 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -7,6 +7,8 @@ export default class Footer { async init() { await this.selectors(); + this.createPaymentsIcons(); + this.createDevIcons(); // this.onUpdate(); } @@ -14,6 +16,83 @@ 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__stamps"); + this.devIncons = await waitElement(".footerCheckout__developedBy"); + } + + createPaymentsIcons() { + this.payments.innerHTML = ` +
+ +
+ `; + } + + createDevIcons() { + this.devIncons.innerHTML = ` +
  • + + Powered By + + +
    • + +
  • + + Developed By + + +
    • + `; } onUpdate() { diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 92f0375..cf68be3 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -1,289 +1,289 @@ .checkout-container { - .client-pre-email { - border-color: $color-gray4; - font-family: $font-family; - padding-top: 8px; + .client-pre-email { + border-color: $gray-200; + font-family: $font-family; + padding-top: 8px; - .link-cart { - a { - color: $color-black; - font-size: 14px; + .link-cart { + a { + color: $black; + font-size: 14px; - &:hover { - color: lighen($color-black, 10); - } - } - } + &:hover { + color: lighen($black, 10); + } + } + } - .pre-email { - flex-direction: column; - display: flex; - align-items: center; - justify-content: center; + .pre-email { + flex-direction: column; + display: flex; + align-items: center; + justify-content: center; - h3 { - margin-bottom: 16px; + h3 { + margin-bottom: 16px; - span { - color: #303030; - font-size: 24px; - } + span { + color: #303030; + font-size: 24px; + } - small { - color: $color-gray4; - } - } - } + small { + color: $gray-200; + } + } + } - .client-email { - margin: 0 0 16px; + .client-email { + margin: 0 0 16px; - input { - box-shadow: none; - color: $color-black; - font-family: $font-family; - padding: 0 16px; - border: 2px solid $color-gray3; - box-sizing: border-box; - border-radius: 5px; + input { + box-shadow: none; + color: $black; + font-family: $font-family; + padding: 0 16px; + border: 2px solid $color-gray3; + box-sizing: border-box; + border-radius: 5px; - @media (max-width: 490px) { - width: auto; - } - } + @media (max-width: 490px) { + width: auto; + } + } - button { - background-color: $color-black; - border-radius: 5px; - border: none; - font-family: $font-family; - height: 54px; - right: 0; - top: 0; + button { + background-color: $black; + border-radius: 5px; + border: none; + font-family: $font-family; + height: 54px; + right: 0; + top: 0; - @media (max-width: 490px) { - height: 48px; - margin: 0; - position: absolute; - } - } + @media (max-width: 490px) { + height: 48px; + margin: 0; + position: absolute; + } + } - span.help.error { - color: red; - } - } + span.help.error { + color: red; + } + } - .emailInfo { - padding: 16px; - background-color: $color-white; - border: 1px solid $color-gray4; - border-radius: 0; + .emailInfo { + padding: 16px; + background-color: $white; + border: 1px solid $gray-200; + border-radius: 0; - h3 { - color: #303030; - margin: 0 0 8px 0; - } + h3 { + color: #303030; + margin: 0 0 8px 0; + } - ul { - margin: 0; + ul { + margin: 0; - li { - span { - color: $color-black; - } + li { + span { + color: $black; + } - i::before { - color: $color-black; - font-size: 1rem; - opacity: 1; - } - } - } + i::before { + color: $black; + font-size: 1rem; + opacity: 1; + } + } + } - i::before { - color: $color-black; - font-size: 6rem; - opacity: 0.5; - } - } - } + i::before { + color: $black; + font-size: 6rem; + opacity: 0.5; + } + } + } - .shipping-data, - .payment-data, - .client-profile-data { - .accordion-group { - border-radius: 0; - border: 1px solid $color-gray4; - font-family: $font-family; - padding: 16px; + .shipping-data, + .payment-data, + .client-profile-data { + .accordion-group { + border-radius: 0; + border: 1px solid $gray-200; + 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: $white; + display: flex; + justify-content: center; + padding: 6px 5px 6px 8px; + } + } - .accordion-inner { - padding: 0; + .accordion-inner { + padding: 0; - /* General configurations */ + /* General configurations */ - .client-notice { - color: $color-black; - } + .client-notice { + color: $black; + } - p { - label { - color: $color-black; - font-weight: 500; - } + p { + label { + color: $black; + font-weight: 500; + } - select, - input { - border-radius: 0; - border: 1px solid $color-gray4; - box-shadow: none; - } + select, + input { + border-radius: 0; + border: 1px solid $gray-200; + box-shadow: none; + } - .help.error { - color: red; - } - } + .help.error { + color: red; + } + } - .box-client-info-pj { - .link a#is-corporate-client, - .link a#not-corporate-client { - color: $color-black; - font-weight: 500; - text-decoration: underline; - } - } + .box-client-info-pj { + .link a#is-corporate-client, + .link a#not-corporate-client { + color: $black; + font-weight: 500; + text-decoration: underline; + } + } - .state-inscription-box span { - font-weight: 500; - } + .state-inscription-box span { + font-weight: 500; + } - button.submit { - border: none; - border-radius: 5px; - background: $color-black; - margin-top: 8px; - outline: none; - transition: all 0.2s linear; + button.submit { + border: none; + border-radius: 5px; + background: $black; + margin-top: 8px; + outline: none; + transition: all 0.2s linear; - &:hover { - background: lighten($color-black, 5); - } + &:hover { + background: lighten($black, 5); + } - &:active { - background: darken($color-black, 5); - } - } + &:active { + background: darken($black, 5); + } + } - /* Shipping configurations */ + /* Shipping configurations */ - .ship-postalCode small a { - color: #303030; - font-weight: 500; - text-decoration: underline; - } + .ship-postalCode small a { + color: #303030; + font-weight: 500; + text-decoration: underline; + } - .vtex-omnishipping-1-x-deliveryGroup { - p { - color: #303030; - font-size: 14px; - font-weight: 500; - } + .vtex-omnishipping-1-x-deliveryGroup { + p { + color: #303030; + font-size: 14px; + font-weight: 500; + } - .shp-lean { - border: 1px solid $color-gray4; - border-radius: 0; + .shp-lean { + border: 1px solid $gray-200; + border-radius: 0; - label { - background-color: $color-white; - box-shadow: none; - color: #303030; - padding: 8px 12px; + label { + background-color: $white; + box-shadow: none; + color: #303030; + padding: 8px 12px; - svg path { - fill: #d8c8ac; - } - } - } - } + svg path { + fill: #d8c8ac; + } + } + } + } - .delivery-address-title { - color: #303030; - font-size: 14px; - font-weight: 500; - } + .delivery-address-title { + color: #303030; + font-size: 14px; + font-weight: 500; + } - .shp-summary-group-info { - border-color: $color-gray4; - } + .shp-summary-group-info { + border-color: $gray-200; + } - .address-summary { - background: none; - border-color: $color-gray4; - border-radius: 0; - color: #303030; - padding: 12px; + .address-summary { + background: none; + border-color: $gray-200; + border-radius: 0; + color: #303030; + padding: 12px; - @include mq(md, max) { - background-position: 8px 9px; - } + @include mq(md, max) { + background-position: 8px 9px; + } - a { - color: #303030; - font-weight: 500; - text-decoration: underline; - } - } + a { + color: #303030; + font-weight: 500; + text-decoration: underline; + } + } - .shp-summary-group-price, - .shp-summary-package { - color: $color-gray4; - } + .shp-summary-group-price, + .shp-summary-package { + color: $gray-200; + } - .shp-summary-group-price { - padding-right: 16px; - } + .shp-summary-group-price { + padding-right: 16px; + } - .shp-summary-package { - padding-left: 16px; - } + .shp-summary-package { + padding-left: 16px; + } - .vtex-omnishipping-1-x-summaryChange { - border-color: #303030; - color: #303030; - } + .vtex-omnishipping-1-x-summaryChange { + border-color: #303030; + color: #303030; + } - .vtex-omnishipping-1-x-deliveryChannelsToggle { - background-color: #d8c8ac; - border: 1px solid #d8c8ac; - } + .vtex-omnishipping-1-x-deliveryChannelsToggle { + background-color: #d8c8ac; + border: 1px solid #d8c8ac; + } - .vtex-omnishipping-1-x-deliveryOptionActive { - text-shadow: 1.3px 1px lighten($color-black, 50); - } - } - } - } + .vtex-omnishipping-1-x-deliveryOptionActive { + text-shadow: 1.3px 1px lighten($black, 50); + } + } + } + } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 195f487..e0d97cc 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -32,7 +32,7 @@ font-family: $font-family; width: 100%; h2 { - background: $color-white; + background: $white; border: none; color: #303030; font-size: 14px; @@ -48,7 +48,7 @@ } .cart { - border: 1px solid $color-gray4; + border: 1px solid $gray-200; ul li { border-top: none; @@ -70,7 +70,7 @@ .summary-template-holder { border-top: none; - background: $color-white; + background: $white; } #go-to-cart-button a { @@ -85,24 +85,24 @@ } #payment-data-submit { - background: $color-black; + background: $black; border: none; border-radius: 0; - color: $color-white; + color: $white; outline: none; transition: all 0.2s linear; &:hover { - background: lighten($color-black, 5); + background: lighten($black, 5); } &:active { - background: darken($color-black, 5); + background: darken($black, 5); } } } .lookatme { - background-color: $color-white; + background-color: $white; } .cart-items { @@ -111,7 +111,7 @@ } th { - color: $color-black; + color: $black; padding: 0 0 16px; font-style: normal; font-weight: bold; @@ -233,7 +233,7 @@ } input { - background-color: $color-white; + background-color: $white; border: 1px solid $color-gray3; border-radius: 0; border-width: 0 1px; @@ -253,7 +253,7 @@ .icon-plus-sign, .icon-minus-sign { &::before { - color: $color-black; + color: $black; display: block; font-weight: 500; padding: 1px 12px; @@ -300,7 +300,7 @@ font-weight: normal; font-size: 14px; line-height: 16px; - color: $color-black; + color: $black; } } @@ -315,7 +315,7 @@ top: 0; } .icon::before { - color: $color-gray4; + color: $gray-200; font-size: 15px; @include mq(md, max) { @@ -326,7 +326,7 @@ .item-unavailable-message { background-color: #d8c8ac; - color: $color-white; + color: $white; .icon-warning-sign { color: #bb4f4f; @@ -405,10 +405,10 @@ } .srp-pickup-my-location__button { - background-color: $color-black; + background-color: $black; border: none; border-radius: 5px; - color: $color-white; + color: $white; outline: none; width: 100%; @@ -419,11 +419,11 @@ letter-spacing: 0.05em; &:hover { - background-color: lighten($color-black, 5); + background-color: lighten($black, 5); } &:active { - background-color: darken($color-black, 5); + background-color: darken($black, 5); } } } @@ -432,7 +432,7 @@ margin: 0 0 34px; &__wrapper { - background-color: $color-white; + background-color: $white; border-radius: 100px; width: 100%; font-family: $font-family; @@ -469,7 +469,7 @@ font-weight: normal; font-size: 12px; line-height: 14px; - color: $color-black; + color: $black; margin-bottom: 12px; } @@ -485,10 +485,10 @@ } & ~ button { - background-color: $color-black; + background-color: $black; border: none; border-radius: 5px; - color: $color-white; + color: $white; font-size: 12px; height: 36px; letter-spacing: 1px; @@ -501,11 +501,11 @@ text-transform: uppercase; &:hover { - background-color: lighten($color-black, 5); + background-color: lighten($black, 5); } &:active { - background-color: darken($color-black, 5); + background-color: darken($black, 5); } } @@ -549,7 +549,7 @@ } .srp-shipping-current-single { - border: 1px solid $color-gray4; + border: 1px solid $gray-200; border-radius: 0; color: #303030; margin: 16px 0 0; @@ -561,11 +561,11 @@ } .srp-delivery-select { - border: 1px solid $color-gray4; + border: 1px solid $gray-200; } .srp-delivery-select-container { - border: 1px solid $color-gray4; + border: 1px solid $gray-200; border-radius: 0; .srp-shipping-current-many { @@ -583,7 +583,7 @@ } &__arrow svg { - fill: $color-gray4; + fill: $gray-200; } } } @@ -660,7 +660,7 @@ border: 2px solid $color-gray3; border-radius: 5px; box-shadow: none; - color: $color-gray4; + color: $gray-200; font-size: 12px; height: 34px; padding: 0 12px; @@ -673,10 +673,10 @@ } button { - background: $color-black; + background: $black; border: none; border-radius: 5px; - color: $color-white; + color: $white; font-size: 12px; height: 36px; letter-spacing: 1px; @@ -691,11 +691,11 @@ } &:hover { - background-color: lighten($color-black, 5); + background-color: lighten($black, 5); } &:active { - background-color: darken($color-black, 5); + background-color: darken($black, 5); } } } @@ -716,7 +716,7 @@ font-weight: normal; font-size: 14px; line-height: 16px; - color: $color-black; + color: $black; padding: 12px 0; } @@ -737,7 +737,7 @@ font-weight: normal; font-size: 18px; line-height: 21px; - color: $color-black; + color: $black; } } } @@ -800,7 +800,7 @@ font-weight: 500; font-size: 13px; letter-spacing: 0.05em; - color: $color-white; + color: $white; text-transform: uppercase; vertical-align: middle; line-height: 19px; diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss index 08f74e9..8f42ea5 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss @@ -1,38 +1,38 @@ .empty-cart { - font-family: $font-family; - &-content { - color: $color-black; - text-align: center; + font-family: $font-family; + &-content { + color: $black; + text-align: center; - @include mq(md, max) { - padding: 0 16px; - } - } + @include mq(md, max) { + padding: 0 16px; + } + } - &-title { - font-size: 20px; - } + &-title { + font-size: 20px; + } - &-links { - .link-choose-products { - background: $color-black; - border: none; - border-radius: 5px; - transition: ease-in 0.22s all; - outline: none; - font-family: $font-family; - font-style: normal; - font-weight: 500; - font-size: 14px; - line-height: 16px; - text-align: center; - letter-spacing: 0.05em; - color: $color-white; - text-transform: uppercase; + &-links { + .link-choose-products { + background: $black; + border: none; + border-radius: 5px; + transition: ease-in 0.22s all; + outline: none; + font-family: $font-family; + font-style: normal; + font-weight: 500; + font-size: 14px; + line-height: 16px; + text-align: center; + letter-spacing: 0.05em; + color: $white; + text-transform: uppercase; - &:hover { - background: lighten($color-black, 5); - } - } - } + &:hover { + background: lighten($black, 5); + } + } + } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 877e965..bfd4034 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -54,16 +54,16 @@ body { } .btn-success { - background: $color-black; + background: $black; text-shadow: none; &:hover { - background: lighten($color-black, 15%); + background: lighten($black, 15%); } } .emailInfo h3 { - color: $color-black !important; + color: $black !important; } #cart-title, diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index 58267ca..077b7b5 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -1,21 +1,24 @@ -/* _footer.scss */ .footerCheckout { - &__wrapper { + .container { display: flex; align-items: center; justify-content: space-between; padding: 15px 32px; - border-top: 1px solid $color-black; + } + + &__wrapper { + border-top: 1px solid $black; } &__address { - color: $color-black; + width: 48.7%; + color: $gray-500; font-family: $font-family; font-weight: 400; line-height: 14px; font-size: 10px; text-transform: capitalize; - max-width: 40%; + // max-width: 40%; @include mq(md, max) { margin-bottom: 24px; @@ -24,6 +27,7 @@ } &__stamps { + margin: 0; align-items: center; display: flex; justify-self: center; @@ -34,8 +38,42 @@ margin-bottom: 12px; } + .payments-icons-wrapper { + img { + width: 100%; + } + + ul { + margin: 0; + display: flex; + align-items: center; + justify-content: center; + list-style: none; + } + li { + width: 5.22%; + margin-right: 13px; + } + + #vtexIcon { + width: 7.63%; + margin-left: 10px; + position: relative; + } + + #vtexIcon::before { + content: ""; + position: absolute; + display: inline-block; + height: 24px; + top: 5px; + left: -10px; + border-left: 1px solid $gray; + } + } + &__divider { - background-color: $color-gray4; + background-color: $gray-200; display: inline-block; height: 24px; margin: 0 8px; @@ -53,9 +91,16 @@ margin-left: 16px; } + .vtex-icon { + width: 36.69%; + } + .m3-icon { + width: 31.8%; + } + a { align-items: center; - color: $color-gray2; + color: $gray-500; display: flex; font-family: $font-family; font-style: normal; diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 7ca25ab..c9f93a4 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -1,22 +1,27 @@ /* fonts */ @import url("https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap"); + $font-family: "Open Sans", sans-serif; $font-family-secundary: "Tenor Sans", sans-serif; /* Colors */ -$color-black: #000; +$black: #000; +$white: #fff; -$color-white: #fff; +$gray: #c4c4c4; +$gray-200: #8d8d8d; +$gray-500: #292929; $color-gray: #6c6c6c; $color-gray2: #7d7d7d; $color-gray3: #f0f0f0; -$color-gray4: #8d8d8d; $color-gray5: #e5e5e5; $color-blue: #4267b2; +$color-green: #4caf50; + /* Grid breakpoints */ $grid-breakpoints: ( xs: 0, diff --git a/checkout/src/template-checkout/checkout-footer.html b/checkout/src/template-checkout/checkout-footer.html index 6246210..9bc7a5b 100644 --- a/checkout/src/template-checkout/checkout-footer.html +++ b/checkout/src/template-checkout/checkout-footer.html @@ -30,7 +30,7 @@
  • Developed By - @TODO: m3 icon +