From f1bbe9a0ad7985ec4d718755b7483d1b1497ccd4 Mon Sep 17 00:00:00 2001
From: MateusLopes <mateus20.lopes02@gmail.com>
Date: Mon, 12 Dec 2022 20:54:13 -0300
Subject: [PATCH] feat(checkout): add estilizacao na tela email

---
 .../sass/checkout/_checkout-autenticacao.scss | 505 ++++++++++--------
 .../sass/checkout/_checkout-carrinho.scss     |  11 +-
 .../src/arquivos/sass/checkout/_checkout.scss |  16 +-
 3 files changed, 284 insertions(+), 248 deletions(-)

diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
index 498c0c5..daa2874 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
@@ -1,289 +1,320 @@
 .checkout-container {
-	.client-pre-email {
-		border-color: $color-gray4;
-		font-family: $font-family;
-		padding-top: 8px;
+    .client-pre-email-h label {
+        margin-top: 0px;
+    }
 
-		.link-cart {
-			a {
-				color: $color-black2;
-				font-size: 14px;
+    .client-pre-email {
+        border-top: 1px solid $color-black;
+        font-family: $font-family;
+        padding-top: 14px;
 
-				&:hover {
-					color: lighen($color-black2, 10);
-				}
-			}
-		}
+        .link-cart {
+            a {
+                color: $color-black;
+                font-family: $font-family-secondary;
+                font-weight: 400;
+                font-size: 14px;
 
-		.pre-email {
-			flex-direction: column;
-			display: flex;
-			align-items: center;
-			justify-content: center;
+                &:hover {
+                    color: lighen($color-black, 10);
+                }
+            }
+        }
 
-			h3 {
-				margin-bottom: 16px;
+        .pre-email {
+            flex-direction: column;
+            display: flex;
+            align-items: center;
+            justify-content: center;
 
-				span {
-					color: #303030;
-					font-size: 24px;
-				}
+            h3 {
+                margin: 65px 0 21px;
 
-				small {
-					color: $color-gray4;
-				}
-			}
-		}
+                span,
+                small {
+                    font-family: $font-family-secondary;
+                    font-size: 23px;
+                    font-weight: 400;
+                    color: $color-black;
+                    text-transform: uppercase;
+                }
+            }
+        }
 
-		.client-email {
-			margin: 0 0 16px;
+        .client-email {
+            margin-bottom: 24px;
+            margin-left: 0;
 
-			input {
-				box-shadow: none;
-				color: $color-black2;
-				font-family: $font-family;
-				padding: 0 16px;
-				border: 2px solid $color-gray3;
-				box-sizing: border-box;
-				border-radius: 5px;
+            input {
+                border: solid 1px $color-black;
+                border-radius: 5px 8px 8px 5px;
+                color: $color-black;
+                font-size: 12px;
+                padding: 0 14px;
+                height: 50px;
+                box-shadow: none;
+                font-family: $font-family;
+                box-sizing: border-box;
 
-				@media (max-width: 490px) {
-					width: auto;
-				}
-			}
+                @media (max-width: 490px) {
+                    width: auto;
+                }
+            }
 
-			button {
-				background-color: $color-black2;
-				border-radius: 5px;
-				border: none;
-				font-family: $font-family;
-				height: 54px;
-				right: 0;
-				top: 0;
+            button {
+                background: $color-blue2;
+                color: $color-black;
+                height: 52px;
+                width: 127px;
+                border-radius: 0 8px 8px 0;
+                font-size: 14px;
+                font-weight: 700;
+                font-family: $font-family;
+                text-transform: uppercase;
+                letter-spacing: 0.05em;
+                line-height: 19px;
+                border: none;
+                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 {
+                margin-top: 3px;
+                font-size: 12px;
+                color: $color-red;
+                font-weight: 700;
+                text-transform: capitalize;
+            }
+        }
 
-		.emailInfo {
-			padding: 16px;
-			background-color: $color-white;
-			border: 1px solid $color-gray4;
-			border-radius: 0;
+        .emailInfo {
+            border: solid 1px $color-black;
+            padding: 16px 16px 26px;
+            border-radius: 5px;
+            margin-bottom: 0px;
+            background-color: $color-white;
 
-			h3 {
-				color: #303030;
-				margin: 0 0 8px 0;
-			}
+            h3 {
+                color: $color-black !important;
+                font-size: 12px;
+                font-weight: 700;
+                margin-bottom: 9px;
+                margin-top: 0;
+            }
 
-			ul {
-				margin: 0;
+            ul {
+                margin: 0;
 
-				li {
-					span {
-						color: $color-black2;
-					}
+                li {
+                    span {
+                        color: $color-black;
+                        font-size: 12px;
+                        font-weight: 700;
+                    }
 
-					i::before {
-						color: $color-black2;
-						font-size: 1rem;
-						opacity: 1;
-					}
-				}
-			}
+                    .icon-lock:before {
+                        padding-bottom: 19px !important;
+                        padding-right: 4px !important;
+                    }
 
-			i::before {
-				color: $color-black2;
-				font-size: 6rem;
-				opacity: 0.5;
-			}
-		}
-	}
+                    i::before {
+                        color: $color-blue2;
+                        font-size: 1rem;
+                        opacity: 1;
+                    }
+                }
+            }
 
-	.shipping-data,
-	.payment-data,
-	.client-profile-data {
-		.accordion-group {
-			border-radius: 0;
-			border: 1px solid $color-gray4;
-			font-family: $font-family;
-			padding: 16px;
+            i::before {
+                color: $color-black2;
+                font-size: 6rem;
+                opacity: 0.5;
+            }
+        }
+    }
 
-			.accordion-heading {
-				span {
-					color: #303030;
-					margin-bottom: 8px;
-					padding: 0;
+    .shipping-data,
+    .payment-data,
+    .client-profile-data {
+        .accordion-group {
+            border-radius: 0;
+            border: 1px solid $color-gray4;
+            font-family: $font-family;
+            padding: 16px;
 
-					i::before {
-						fill: #303030;
-					}
-				}
+            .accordion-heading {
+                span {
+                    color: #303030;
+                    margin-bottom: 8px;
+                    padding: 0;
 
-				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;
-				}
-			}
+                    i::before {
+                        fill: #303030;
+                    }
+                }
 
-			.accordion-inner {
-				padding: 0;
+                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;
+                }
+            }
 
-				/* General configurations */
+            .accordion-inner {
+                padding: 0;
 
-				.client-notice {
-					color: $color-black2;
-				}
+                /* General configurations */
 
-				p {
-					label {
-						color: $color-black2;
-						font-weight: 500;
-					}
+                .client-notice {
+                    color: $color-black2;
+                }
 
-					select,
-					input {
-						border-radius: 0;
-						border: 1px solid $color-gray4;
-						box-shadow: none;
-					}
+                p {
+                    label {
+                        color: $color-black2;
+                        font-weight: 500;
+                    }
 
-					.help.error {
-						color: red;
-					}
-				}
+                    select,
+                    input {
+                        border-radius: 0;
+                        border: 1px solid $color-gray4;
+                        box-shadow: none;
+                    }
 
-				.box-client-info-pj {
-					.link a#is-corporate-client,
-					.link a#not-corporate-client {
-						color: $color-black2;
-						font-weight: 500;
-						text-decoration: underline;
-					}
-				}
+                    .help.error {
+                        color: red;
+                    }
+                }
 
-				.state-inscription-box span {
-					font-weight: 500;
-				}
+                .box-client-info-pj {
+                    .link a#is-corporate-client,
+                    .link a#not-corporate-client {
+                        color: $color-black2;
+                        font-weight: 500;
+                        text-decoration: underline;
+                    }
+                }
 
-				button.submit {
-					border: none;
-					border-radius: 5px;
-					background: $color-black2;
-					margin-top: 8px;
-					outline: none;
-					transition: all 0.2s linear;
+                .state-inscription-box span {
+                    font-weight: 500;
+                }
 
-					&:hover {
-						background: lighten($color-black2, 5);
-					}
+                button.submit {
+                    border: none;
+                    border-radius: 5px;
+                    background: $color-black2;
+                    margin-top: 8px;
+                    outline: none;
+                    transition: all 0.2s linear;
 
-					&:active {
-						background: darken($color-black2, 5);
-					}
-				}
+                    &:hover {
+                        background: lighten($color-black2, 5);
+                    }
 
-				/* Shipping configurations */
+                    &:active {
+                        background: darken($color-black2, 5);
+                    }
+                }
 
-				.ship-postalCode small a {
-					color: #303030;
-					font-weight: 500;
-					text-decoration: underline;
-				}
+                /* Shipping configurations */
 
-				.vtex-omnishipping-1-x-deliveryGroup {
-					p {
-						color: #303030;
-						font-size: 14px;
-						font-weight: 500;
-					}
+                .ship-postalCode small a {
+                    color: #303030;
+                    font-weight: 500;
+                    text-decoration: underline;
+                }
 
-					.shp-lean {
-						border: 1px solid $color-gray4;
-						border-radius: 0;
+                .vtex-omnishipping-1-x-deliveryGroup {
+                    p {
+                        color: #303030;
+                        font-size: 14px;
+                        font-weight: 500;
+                    }
 
-						label {
-							background-color: $color-white;
-							box-shadow: none;
-							color: #303030;
-							padding: 8px 12px;
+                    .shp-lean {
+                        border: 1px solid $color-gray4;
+                        border-radius: 0;
 
-							svg path {
-								fill: #d8c8ac;
-							}
-						}
-					}
-				}
+                        label {
+                            background-color: $color-white;
+                            box-shadow: none;
+                            color: #303030;
+                            padding: 8px 12px;
 
-				.delivery-address-title {
-					color: #303030;
-					font-size: 14px;
-					font-weight: 500;
-				}
+                            svg path {
+                                fill: #d8c8ac;
+                            }
+                        }
+                    }
+                }
 
-				.shp-summary-group-info {
-					border-color: $color-gray4;
-				}
+                .delivery-address-title {
+                    color: #303030;
+                    font-size: 14px;
+                    font-weight: 500;
+                }
 
-				.address-summary {
-					background: none;
-					border-color: $color-gray4;
-					border-radius: 0;
-					color: #303030;
-					padding: 12px;
+                .shp-summary-group-info {
+                    border-color: $color-gray4;
+                }
 
-					@include mq(md, max) {
-						background-position: 8px 9px;
-					}
+                .address-summary {
+                    background: none;
+                    border-color: $color-gray4;
+                    border-radius: 0;
+                    color: #303030;
+                    padding: 12px;
 
-					a {
-						color: #303030;
-						font-weight: 500;
-						text-decoration: underline;
-					}
-				}
+                    @include mq(md, max) {
+                        background-position: 8px 9px;
+                    }
 
-				.shp-summary-group-price,
-				.shp-summary-package {
-					color: $color-gray4;
-				}
+                    a {
+                        color: #303030;
+                        font-weight: 500;
+                        text-decoration: underline;
+                    }
+                }
 
-				.shp-summary-group-price {
-					padding-right: 16px;
-				}
+                .shp-summary-group-price,
+                .shp-summary-package {
+                    color: $color-gray4;
+                }
 
-				.shp-summary-package {
-					padding-left: 16px;
-				}
+                .shp-summary-group-price {
+                    padding-right: 16px;
+                }
 
-				.vtex-omnishipping-1-x-summaryChange {
-					border-color: #303030;
-					color: #303030;
-				}
+                .shp-summary-package {
+                    padding-left: 16px;
+                }
 
-				.vtex-omnishipping-1-x-deliveryChannelsToggle {
-					background-color: #d8c8ac;
-					border: 1px solid #d8c8ac;
-				}
+                .vtex-omnishipping-1-x-summaryChange {
+                    border-color: #303030;
+                    color: #303030;
+                }
 
-				.vtex-omnishipping-1-x-deliveryOptionActive {
-					text-shadow: 1.3px 1px lighten($color-black2, 50);
-				}
-			}
-		}
-	}
+                .vtex-omnishipping-1-x-deliveryChannelsToggle {
+                    background-color: #d8c8ac;
+                    border: 1px solid #d8c8ac;
+                }
+
+                .vtex-omnishipping-1-x-deliveryOptionActive {
+                    text-shadow: 1.3px 1px lighten($color-black2, 50);
+                }
+            }
+        }
+    }
 }
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
index b38d3a6..cff5d6d 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
@@ -254,7 +254,7 @@
                 margin: 0 !important;
                 padding: 8px 0;
                 width: 38px;
-                color: $color-gray2;
+                color: $color-black;
                 box-shadow: none;
 
                 @include mq(lg, max) {
@@ -293,6 +293,11 @@
             .icon-question-sign {
                 display: none;
             }
+
+            .total-selling-price {
+                font-weight: 700;
+            }
+
             span {
                 font-style: normal;
                 font-size: 14px;
@@ -302,7 +307,7 @@
         }
 
         .quantity-price {
-            font-weight: 700;
+            font-weight: 400;
             @include mq(md, max) {
                 display: none;
             }
@@ -313,7 +318,7 @@
                 top: 0;
             }
             .icon::before {
-                color: $color-gray4;
+                color: $color-gray6;
                 font-size: 15px;
 
                 @include mq(md, max) {
diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss
index 098a91e..484b2f5 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout.scss
@@ -64,13 +64,9 @@ body {
 
 #cart-title,
 #orderform-title {
-    color: $color-gray2;
     font-family: $font-family;
-    font-weight: 500;
-    font-size: 36px;
-    line-height: 42px;
-    margin: 40px 0 30px;
-    letter-spacing: 0.1em;
+    font-weight: 700;
+    font-size: 24px;
     text-transform: uppercase;
 
     @include mq(md, max) {
@@ -82,11 +78,15 @@ body {
     margin: 17px 0 16px 0;
     color: $color-black2;
     font-style: normal;
-    font-weight: 700;
-    font-size: 24px;
     line-height: 33px;
 }
 
+#orderform-title {
+    line-height: 32px;
+    color: $color-black;
+    margin: 17px 0 17px;
+}
+
 .dropdown {
     &__content {
         &--closed {