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

@@ -7,6 +7,11 @@ export default class Footer {
 
     async init() {
         this.list = await this.fetchApiData();
+        this.cartTitle = await waitElement("#cart-title");
+        this.emptyTitle = await waitElement(".empty-cart-title");
+        this.emptyButton = await waitElement(".link-choose-products");
+        this.emptyCartTitle();
+        this.emptyCartButton();
         await this.selectors();
         this.events();
         this.cartUpdate();
@@ -20,7 +25,6 @@ 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.cartTitle = await waitElement("#cart-title");
         this.prateleira = await waitElement(".footerCheckout__prateleira");
     }
 
@@ -127,6 +131,14 @@ export default class Footer {
         }
     }
 
+    emptyCartTitle() {
+        this.emptyTitle.innerHTML = `Seu Carrinho está Vazio`;
+    }
+
+    emptyCartButton() {
+        this.emptyButton.innerHTML = `Continuar Comprando`;
+    }
+
     async addCarrossel() {
         const elemento = await waitElement(".footerCheckout__prateleira-container");
         $(elemento).slick({

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

@@ -3,6 +3,7 @@
     &-content {
         color: $color-black;
         text-align: center;
+        margin-top: 150px;
 
         @include mq(md, max) {
             padding: 0 16px;
@@ -10,28 +11,48 @@
     }
 
     &-title {
-        font-size: 20px;
+        font-family: "Open Sans";
+        font-style: normal;
+        font-weight: 700;
+        font-size: 24px;
+        line-height: 33px;
+        text-align: center;
+        text-transform: uppercase;
+    }
+
+    &-message {
+        p {
+            display: none;
+        }
     }
 
     &-links {
+        display: flex;
+        justify-content: center;
         .link-choose-products {
-            background: $color-black;
-            border: none;
-            border-radius: 5px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: $color-white;
+            border: 1px solid $color-black;
+            border-radius: 0;
             transition: ease-in 0.22s all;
             outline: none;
-            font-family: $font-family;
+            font-family: "Tenor Sans";
             font-style: normal;
-            font-weight: 500;
+            font-weight: 400;
             font-size: 14px;
             line-height: 16px;
             text-align: center;
-            letter-spacing: 0.05em;
-            color: $color-white;
             text-transform: uppercase;
+            letter-spacing: 0.05em;
+            color: $color-black;
+            width: 31.739%;
+            height: 46px;
+            padding: 0;
 
             &:hover {
-                background: lighten($color-black, 5);
+                background: $color-white !important;
             }
         }
     }

checkout/src/arquivos/sass/partials/_footer.scss

@@ -48,6 +48,10 @@
             border: none;
             background: transparent;
             padding: 0;
+
+            button {
+                cursor: pointer;
+            }
         }
     }