From 16c9e1e77960bbcd2b66e06aeac84908a3d7d744 Mon Sep 17 00:00:00 2001
From: Eleonora Otz <nora_otz@hotmail.com>
Date: Fri, 9 Dec 2022 00:01:38 -0300
Subject: [PATCH] feat: Adiciona as cores corretas dos elementos

---
 .../sass/checkout/_checkout-carrinho.scss     | 73 +++++++++++--------
 .../src/arquivos/sass/checkout/_checkout.scss | 12 +--
 .../src/arquivos/sass/utils/_variaveis.scss   |  1 +
 3 files changed, 50 insertions(+), 36 deletions(-)

diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
index a38c32d..4437e76 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
@@ -5,7 +5,11 @@
 }
 
 .cart-template {
-    font-family: $font-family;
+    font-family: $font-family-secundary;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 16px;
+
     @include mq(md, max) {
         padding: 0 0;
     }
@@ -13,7 +17,7 @@
         display: none;
     }
     .cart {
-        border: 3px solid f0f0f0;
+        border: 1px solid #f0f0f0;
         box-sizing: border-box;
         border-radius: 5px;
         padding: 16px;
@@ -155,9 +159,9 @@
             }
 
             a {
-                color: #00c8ff;
+                color: $black-500;
                 font-style: normal;
-                font-weight: normal;
+                font-weight: 400;
                 font-size: 12px;
                 line-height: 14px;
                 transition: ease-in 0.22s all;
@@ -179,7 +183,7 @@
         }
 
         td.shipping-date {
-            color: #7d7d7d;
+            color: $gray-500;
             font-size: 12px;
             line-height: 14px;
 
@@ -200,7 +204,7 @@
             }
 
             span.list-price {
-                color: #7d7d7d;
+                color: $gray-500;
                 font-size: 12px;
                 line-height: 14px;
                 text-decoration-line: line-through;
@@ -216,17 +220,17 @@
         }
 
         td.quantity {
-            align-items: center;
-            border: 1px solid f0f0f0;
-            border-radius: 0;
-            box-sizing: border-box;
             display: flex;
+            align-items: center;
             justify-content: center;
             margin: 6px auto 0;
+            padding: 0;
             max-height: 38px;
             max-width: 118px;
-            padding: 0;
             width: max-content !important;
+            box-sizing: border-box;
+            border: 1px solid #f0f0f0;
+            border-radius: 8px;
 
             @media (max-width: 490px) {
                 margin-left: 84px !important;
@@ -242,8 +246,11 @@
                 margin: 0 !important;
                 padding: 8px 0;
                 width: 38px;
-                color: #7d7d7d;
+                color: $black-500;
                 box-shadow: none;
+                font-family: $font-family-secundary;
+                font-size: 14px;
+                line-height: 16px;
 
                 @include mq(lg, max) {
                     width: 24px !important;
@@ -253,9 +260,11 @@
             .icon-plus-sign,
             .icon-minus-sign {
                 &::before {
-                    color: #292929;
+                    color: $white;
+                    background: $vivid-blue;
                     display: block;
-                    font-weight: 500;
+                    font-family: $font-family;
+                    font-weight: 700;
                     padding: 1px 12px;
                 }
             }
@@ -352,11 +361,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: #7d7d7d;
+                    line-height: 33px;
+                    color: $black-500;
 
                     @include mq(md, max) {
                         margin-top: 0;
@@ -364,18 +374,20 @@
                 }
 
                 .srp-description {
-                    color: #7d7d7d;
+                    color: $gray-700;
+                    font-family: $font-family;
                     font-size: 12px;
                     line-height: 18px;
                     margin: 0 0 12px;
                 }
 
                 button.shp-open-options {
-                    background-color: #e5e5e5;
+                    background-color: $gray-100;
                     border: none;
                     border-radius: 5px;
-                    color: #7d7d7d;
-                    font-size: 16px;
+                    color: $black-500;
+                    font-family: $font-family;
+                    font-size: 14px;
                     letter-spacing: 0.05em;
                     line-height: 19px;
                     font-weight: 500;
@@ -599,7 +611,6 @@
                     text-decoration: none;
                     &:hover {
                         text-decoration: underline;
-                        cursor: pointer;
                     }
                 }
                 span {
@@ -608,8 +619,9 @@
                     font-weight: normal;
                     font-size: 12px;
                     line-height: 14px;
-                    color: #00c8ff;
+                    color: $black-500;
                     text-decoration: none;
+                    cursor: pointer;
                 }
             }
 
@@ -733,10 +745,11 @@
                 tfoot {
                     td.info,
                     td.monetary {
+                        font-family: $font-family;
                         font-style: normal;
-                        font-weight: normal;
+                        font-weight: 700;
                         font-size: 18px;
-                        line-height: 21px;
+                        line-height: 25px;
                         color: #292929;
                     }
                 }
@@ -776,13 +789,13 @@
                 font-weight: normal;
                 font-size: 12px;
                 line-height: 14px;
-                color: #00c8ff;
+                color: $black-500;
             }
         }
 
         .btn-place-order-wrapper {
             a {
-                background: #4caf50;
+                background: $vivid-blue;
                 border: none;
                 border-radius: 5px;
                 display: block;
@@ -797,10 +810,10 @@
                 &:after {
                     content: "finalizar compra";
                     font-family: $font-family;
-                    font-weight: 500;
-                    font-size: 13px;
+                    font-weight: 700;
+                    font-size: 14px;
                     letter-spacing: 0.05em;
-                    color: #fff;
+                    color: $black-500;
                     text-transform: uppercase;
                     vertical-align: middle;
                     line-height: 19px;
diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss
index f1eea2d..2150709 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout.scss
@@ -68,13 +68,13 @@ body {
 
 #cart-title,
 #orderform-title {
-    color: #7d7d7d;
+    color: $black-400;
     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;
+    line-height: 33px;
+    margin: 17px 0 16px;
+    letter-spacing: 0.05em;
     text-transform: uppercase;
 
     @include mq(md, max) {
diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss
index c5ad70e..2c0fac0 100644
--- a/checkout/src/arquivos/sass/utils/_variaveis.scss
+++ b/checkout/src/arquivos/sass/utils/_variaveis.scss
@@ -14,6 +14,7 @@ $gray-300: #f0f0f0;
 $gray-400: #c4c4c4;
 $gray-500: #989898;
 $gray-600: #858585;
+$gray-700: #7d7d7d;
 
 $black-400: #292929;
 $black-500: #000000;