From ad6dde538ad5f22bf51e0aa20dde7395e28a0ce0 Mon Sep 17 00:00:00 2001
From: ManuelaLuanaSchumackerTavares <manuelaluana.dev@gmail.com>
Date: Sun, 18 Dec 2022 15:43:04 -0300
Subject: [PATCH] feat(checkout): Adiciona responsividade as telas e ao slick

---
 checkout/src/arquivos/js/components/Footer.js |  2 +-
 .../sass/checkout/_checkout-carrinho.scss     | 76 ++++++++++++++++++-
 .../src/arquivos/sass/partials/_footer.scss   |  2 +
 3 files changed, 78 insertions(+), 2 deletions(-)

diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index 6efba39..d786546 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -78,7 +78,7 @@ export default class Footer {
         let structure = "";
 
         this.list.forEach((resp) => {
-            const sku = resp.skus.map((item) => `<li>${item}</li>`);
+            const sku = resp.skus.map((item) => `<li>${item}</li>`).join("");
 
             structure += `
                 <li class="footerCheckout__shelf-card">
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
index e95a08c..6f1bb40 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
@@ -105,12 +105,26 @@
         background-color: $color-white;
     }
 
+    .checkout-container {
+        overflow: 0 !important;
+
+        @media (max-width: 1024px) {
+            overflow: hidden !important;
+        }
+
+        @media (max-width: 767px) {
+            overflow-x: hidden !important;
+        }
+    }
+
     .cart-items {
+        width: 100% !important;
         .product-item {
             padding: 16px 0;
         }
 
         th {
+            font-family: $font-family-secundary;
             color: $color-black;
             padding: 0 0 16px;
             font-style: normal;
@@ -118,6 +132,11 @@
             font-size: 14px;
             line-height: 16px;
 
+            @include mq(xxl, min) {
+                font-size: 28px;
+                line-height: 33px;
+            }
+
             &.shipping-date {
                 font-size: 0;
 
@@ -127,6 +146,11 @@
                     font-family: $font-family-secundary;
                     font-size: 14px;
                     line-height: 16px;
+
+                    @include mq(xxl, min) {
+                        font-size: 28px;
+                        line-height: 33px;
+                    }
                 }
             }
 
@@ -137,6 +161,11 @@
                     font-family: $font-family-secundary;
                     font-size: 14px;
                     line-height: 16px;
+
+                    @include mq(xxl, min) {
+                        font-size: 28px;
+                        line-height: 33px;
+                    }
                 }
             }
 
@@ -177,6 +206,7 @@
             }
 
             a {
+                font-family: $font-family-secundary;
                 color: $color-black2;
                 font-style: normal;
                 font-weight: normal;
@@ -189,6 +219,11 @@
                     text-decoration: none;
                 }
 
+                @include mq(xxl, min) {
+                    font-size: 28px;
+                    line-height: 33px;
+                }
+
                 @media (max-width: 490px) {
                     margin-left: 23px;
                 }
@@ -205,6 +240,11 @@
             font-size: 12px;
             line-height: 14px;
 
+            @include mq(xxl, min) {
+                font-size: 28px;
+                line-height: 33px;
+            }
+
             @include mq(md, max) {
                 display: none;
             }
@@ -229,6 +269,11 @@
                 line-height: 14px;
                 text-decoration-line: line-through;
 
+                @include mq(xxl, min) {
+                    font-size: 24px;
+                    line-height: 28px;
+                }
+
                 @include mq(sm, max) {
                     font-size: 12px;
                     line-height: 14px;
@@ -290,6 +335,10 @@
                     display: block;
                     font-weight: 500;
                     padding: 1px 12px;
+
+                    @include mq(xxl, min) {
+                        width: 32px;
+                    }
                 }
             }
 
@@ -334,6 +383,11 @@
                 font-size: 14px;
                 line-height: 16px;
                 color: $color-black;
+
+                @include mq(xxl, min) {
+                    font-size: 28px;
+                    line-height: 33px;
+                }
             }
 
             .total-selling-price {
@@ -344,6 +398,10 @@
         }
 
         .quantity-price {
+            @include mq(xxl, min) {
+                font-size: 28px;
+                line-height: 38px;
+            }
             @include mq(md, max) {
                 display: none;
             }
@@ -398,6 +456,11 @@
                     font-family: $font-family;
                     color: $color-black2;
 
+                    @include mq(xxl, min) {
+                        font-size: 48px;
+                        line-height: 65px;
+                    }
+
                     @include mq(md, max) {
                         margin-top: 0;
                     }
@@ -408,7 +471,13 @@
                     font-size: 14px;
                     font-weight: 400;
                     line-height: 18px;
-                    margin: 0 0 12px;
+                    // margin: 0 0 12px;
+                    margin: 0;
+
+                    @include mq(xxl, min) {
+                        font-size: 28px;
+                        line-height: 36px;
+                    }
                 }
 
                 button.shp-open-options {
@@ -463,6 +532,11 @@
                     white-space: nowrap;
                     text-transform: uppercase;
 
+                    @include mq(xxl, min) {
+                        font-size: 28px !important;
+                        line-height: 36px !important;
+                    }
+
                     &:hover {
                         background-color: lighten($color-black, 5);
                     }
diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss
index c04edf1..6d9e8b5 100644
--- a/checkout/src/arquivos/sass/partials/_footer.scss
+++ b/checkout/src/arquivos/sass/partials/_footer.scss
@@ -252,6 +252,8 @@
             justify-content: center;
             margin: 0;
             margin: 0 0 20px;
+            gap: 5px;
+            flex-wrap: wrap;
             list-style-type: none;
             // font-size: 0;
             #text {