Merge pull request 'feat: corrige estilos da pagina de autentificacao, carrinho e pagamento' (#6) from feature/correcoes into development

Reviewed-on: #6

checkout/src/arquivos/js/components/Footer.js

@@ -46,7 +46,6 @@ export default class Footer {
                     tituloCheckoutVazio.style.display = "none";
                 } else if (changeAttrName.display == "none") {
                     tituloCheckoutVazio.style.display = "block";
-
                     this.criaPrateleira();
 
                 }
@@ -56,8 +55,11 @@ export default class Footer {
         window.addEventListener("hashchange", () => {
             if (window.location.hash == "#/cart") {
                 this.prateleira.style.display = "block";
+                tituloCheckoutVazio.style.display = "block";
+
             } else {
                 this.prateleira.style.display = "none";
+                tituloCheckoutVazio.style.display = "none";
             }
         });
 
@@ -126,6 +128,9 @@ export default class Footer {
             this.prateleira.innerHTML = "";
             tituloCheckoutVazio.style.display = "none";
         }
+        if(window.location.href !== "https://m3academy.myvtex.com/checkout/#/cart") {
+            tituloCheckoutVazio.style.display = "none";
+        }
 
     }
 

checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss

@@ -848,7 +848,7 @@
                                 width: 20px;
                                 height: 20px;
                                 float: left;
-                                margin: auto 8px auto 0;
+                                margin: 8px 8px 0 0;
 
                                 @include mq(desktop4K, min) {
                                     width: 40px;
@@ -865,6 +865,8 @@
                                     font-size: 24px;
                                     line-height: 33px;
                                 }
+
+
                             }
                             a {
                                 font-family: "Open Sans";
@@ -978,18 +980,23 @@
             }
 
             .form-step {
+                display: flex;
                 .steps-view {
-                    width: 55%;
+                    flex: 1;
-                    float: left;
+                    position: inherit;
-                    left: 12px;
+                    height: fit-content;
+                    margin-left: 40px;
+
 
                     @include mq(tablet, max) {
                         width: auto;
                         position: inherit;
+                        margin-left: 0;
                     }
 
                     @include mq(desktop4K, min) {
-                        left: 40.52px;
+                        // left: 40.52px;
+                        margin-left: 40.52px;
 
                         li,
                         label,

checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss

@@ -1,10 +1,7 @@
 .row-fluid .full-cart.active {
     margin: 0 0 43.42px;
-
 }
 
-
-
 .cart-template {
     .cart {
         border: 1px solid $gray-100;
@@ -55,6 +52,7 @@
                         display: flex;
                         grid-area: quantity;
                         margin: 11px 0 0 16px;
+
                         input {
                             margin: 0;
                         }
@@ -89,6 +87,13 @@
                     }
                     .quantity {
                         width: auto;
+                        margin: 0 0 0 16px !important;
+
+                    }
+                }
+
+                @include mq(cstm, max) {
+                    .quantity {
                         margin: 0 0 0 76px !important;
                     }
                 }
@@ -114,6 +119,23 @@
                 padding: 0;
                 text-align: start;
 
+                &.quantity {
+                    text-align: start;
+                    border: 1px solid #f0f0f0;
+                    border-radius: 8px;
+                    box-sizing: border-box;
+                    display: flex;
+                    align-items: center;
+                    max-width: 99px;
+                    padding: 9px 11px;
+                    height: 34px;
+                    margin-top: 13px;
+
+                    input {
+                        flex: 1;
+                    }
+                }
+
                 &.product-image {
                     height: auto;
                     padding: 0;
@@ -548,6 +570,14 @@
 
             a {
                 padding: 12.09px 0 12.72px;
+                width: 100%;
+                background-color: $blue-500;
+                border-radius: 8px;
+                border: none;
+                font-size: 0;
+
+                &::before {
+                    content: "Finalizar compra";
                     font-family: "Open Sans";
                     font-weight: 700;
                     font-size: 14px;
@@ -556,10 +586,7 @@
                     text-transform: uppercase;
 
                     color: $black-500;
-                width: 100%;
+                }
-                background-color: $blue-500;
-                border-radius: 8px;
-                border: none;
 
                 @include mq(desktop4K, min) {
                     font-size: 24px;
@@ -598,9 +625,6 @@
         }
 
         tr {
-
-
-
             td {
                 font-family: "Tenor Sans";
                 font-weight: 400;

checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss

@@ -4,9 +4,6 @@ body .container-main.container-order-form .orderform-template.active {
         margin-left: unset;
         margin-right: 0;
         float: right;
-        border: 1px solid #e5e5e5;
-        padding: 24px 17px 0;
-        border-radius: 8px;
 
         @include mq(tablet, max) {
             margin: 17px 16px 0 16px;
@@ -15,10 +12,11 @@ body .container-main.container-order-form .orderform-template.active {
 
         .cart-fixed {
             box-sizing: border-box;
-            max-width: 331px;
+            border: 1px solid #e5e5e5;
+            border-radius: 8px;
             width: auto;
             position: inherit;
-            height: auto !important;
+            max-height: 407px !important;
 
             @include mq(tablet, max) {
                 max-width: none;
@@ -39,14 +37,9 @@ body .container-main.container-order-form .orderform-template.active {
                 line-height: 19px;
                 color: $black-300;
 
-                margin-bottom: 34px;
+                margin: 24px 17px 34px 17px;
                 border: none;
 
-                h2 {
-                    font-size: 32px;
-                    line-height: 37px;
-                }
-
                 @include mq(desktop4K, min) {
                     font-size: 32px;
                     line-height: 37px;
@@ -59,7 +52,8 @@ body .container-main.container-order-form .orderform-template.active {
                 margin: 0;
 
                 li {
-                    padding: 0;
+                    box-sizing: border-box;
+                    padding: 0 17px;
                     margin: 0;
                     border: none;
                     display: flex;
@@ -128,6 +122,7 @@ body .container-main.container-order-form .orderform-template.active {
                     line-height: 16px;
                     text-align: right;
                     text-decoration-line: underline;
+                    padding-right: 17px;
 
                     color: $black-500;
 
@@ -141,7 +136,8 @@ body .container-main.container-order-form .orderform-template.active {
             .summary-template-holder {
                 border: none;
                 background-color: transparent;
-                padding: 0;
+                padding: 0 17px;
+                box-sizing: border-box;
 
                 .summary-totalizers {
                     margin: 0;
@@ -212,6 +208,7 @@ body .container-main.container-order-form .orderform-template.active {
                     text-transform: uppercase;
                     color: $white-500;
                     border: none;
+                    margin-top: 20px;
 
                     @include mq(desktop4K, min) {
                         font-size: 28px;

checkout/src/arquivos/sass/utils/_variaveis.scss

@@ -47,7 +47,7 @@ $gray-1000: #7d7d7d;
 /* Grid breakpoints */
 $grid-breakpoints: (
     xs: 0,
-    cstm: 400,
+    cstm: 491px,
     sm: 576px,
     md: 768px,
     lg: 992px,