From d631739c782e2e86591a72910d55b821bfab576f Mon Sep 17 00:00:00 2001
From: Eleonora Otz <nora_otz@hotmail.com>
Date: Sun, 29 Jan 2023 18:48:16 -0300
Subject: [PATCH] feat: Estiliza bloco de Newsletter desktop

---
 store/blocks/pdp/product.jsonc                |  2 +-
 styles/css/vtex.shelf.css                     | 14 +++
 styles/css/vtex.store-components.css          | 75 +++++++++++----
 styles/css/vtex.tab-layout.css                |  2 +-
 styles/sass/pages/product/vtex.shelf.scss     |  5 +
 .../pages/product/vtex.store-components.scss  | 92 +++++++++++++------
 .../sass/pages/product/vtex.tab-layout.scss   |  3 +-
 7 files changed, 147 insertions(+), 46 deletions(-)
 create mode 100644 styles/css/vtex.shelf.css
 create mode 100644 styles/sass/pages/product/vtex.shelf.scss

diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index ebdf639..ed98ae1 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -336,7 +336,7 @@
 
   "newsletter": {
     "props": {
-      "label": "Assine nossa newsletter \n Receba ofertas e novidades por e-mail",
+      "label": "Assine nossa newsletter",
       "placeholder": "Digite seu e-mail",
       "submit": "ENVIAR"
     }
diff --git a/styles/css/vtex.shelf.css b/styles/css/vtex.shelf.css
new file mode 100644
index 0000000..cd805d2
--- /dev/null
+++ b/styles/css/vtex.shelf.css
@@ -0,0 +1,14 @@
+/*
+0 - 600PX: Phone
+600 - 900px: Table portrait
+900 - 1200px: Tablet landscape
+[1200 - 1800] is where our nortal styles apply
+1800px + : Big desktop
+*/
+/* Media Query M3 */
+/* Grid breakpoints */
+.title {
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 38px;
+}
\ No newline at end of file
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index 011065c..2e9c75b 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -8,23 +8,6 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
-.newsletter {
-  display: block;
-  background: #000000;
-}
-.newsletter :global(.vtex-input-prefix__group) {
-  border: none;
-}
-.newsletter .label {
-  color: #fff;
-  font-weight: 400;
-  font-size: 18px;
-  line-height: 25px;
-}
-.newsletter .button-container :global(.vtex-button__label) {
-  background-color: transparent;
-}
-
 .container {
   padding: 0 40px;
 }
@@ -341,4 +324,62 @@
   font-weight: 400;
   font-size: 12px;
   line-height: 16px;
+}
+
+.newsletter {
+  display: block;
+  background: #000000;
+}
+.newsletter :global(.vtex-store-components-3-x-form) {
+  padding: 32px 0 13px;
+  width: 774px;
+  max-width: 774px;
+  position: relative;
+}
+.newsletter :global(.vtex-store-components-3-x-form) .label {
+  color: #fff;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 38px;
+}
+.newsletter :global(.vtex-store-components-3-x-form) .label::after {
+  content: "Receba ofertas e novidades por e-mail";
+  font-size: 18px;
+  line-height: 25px;
+  color: #929292;
+  position: absolute;
+  top: 85px;
+  right: 225px;
+}
+.newsletter :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-inputGroup) {
+  padding-top: 52px;
+}
+.newsletter :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-inputGroup) :global(.vtex-input-prefix__group) {
+  border: none;
+  border-radius: 0;
+}
+.newsletter :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-inputGroup) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) {
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+  color: #929292;
+  border-radius: 0;
+  border-bottom: 1px solid #929292;
+  background: transparent;
+  padding: 0;
+}
+.newsletter :global(.vtex-store-components-3-x-form) .buttonContainer {
+  padding: 0;
+}
+.newsletter :global(.vtex-store-components-3-x-form) .buttonContainer :global(.vtex-button) {
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 19px;
+  color: #fff;
+  background-color: transparent;
+  border: none;
+}
+.newsletter :global(.vtex-store-components-3-x-form) .buttonContainer :global(.vtex-button__label) {
+  border-bottom: 3px solid #929292;
+  padding: 6px 17px 12px !important;
 }
\ No newline at end of file
diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css
index aaf9764..a777015 100644
--- a/styles/css/vtex.tab-layout.css
+++ b/styles/css/vtex.tab-layout.css
@@ -52,7 +52,7 @@
   flex-direction: row;
   gap: 32px;
   align-items: flex-start;
-  padding: 32px;
+  padding: 32px 32px 16px;
 }
 :global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-store-components-3-x-productImageTag) {
   width: inherit !important;
diff --git a/styles/sass/pages/product/vtex.shelf.scss b/styles/sass/pages/product/vtex.shelf.scss
new file mode 100644
index 0000000..1f4bf5d
--- /dev/null
+++ b/styles/sass/pages/product/vtex.shelf.scss
@@ -0,0 +1,5 @@
+.title {
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 38px;
+}
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index 90dff93..e1a6ecd 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -1,29 +1,3 @@
-.newsletter {
-  display: block;
-  background: $black;
-
-  :global(.vtex-input-prefix__group) {
-    border: none;
-
-    // background: $black;
-  }
-
-  .label {
-    color: $white;
-    font-weight: 400;
-    // font-size: 24px;
-    // line-height: 38px;
-    font-size: 18px;
-    line-height: 25px;
-  }
-
-  .button-container {
-    :global(.vtex-button__label) {
-      background-color: transparent;
-    }
-  }
-}
-
 .container {
   padding: 0 40px;
 
@@ -397,3 +371,69 @@
     }
   }
 }
+
+.newsletter {
+  display: block;
+  background: $black;
+  :global(.vtex-store-components-3-x-form) {
+    padding: 32px 0 13px;
+    width: 774px;
+    max-width: 774px;
+    position: relative;
+
+    .label {
+      color: $white;
+      font-weight: 400;
+      font-size: 24px;
+      line-height: 38px;
+
+      &::after {
+        content: "Receba ofertas e novidades por e-mail";
+        font-size: 18px;
+        line-height: 25px;
+        color: $gray-500;
+        position: absolute;
+        top: 85px;
+        right: 225px;
+      }
+    }
+
+    :global(.vtex-store-components-3-x-inputGroup) {
+      padding-top: 52px;
+
+      :global(.vtex-input-prefix__group) {
+        border: none;
+        border-radius: 0;
+
+        :global(.vtex-styleguide-9-x-input) {
+          font-weight: 400;
+          font-size: 18px;
+          line-height: 25px;
+          color: $gray-500;
+          border-radius: 0;
+          border-bottom: 1px solid $gray-500;
+          background: transparent;
+          padding: 0;
+        }
+      }
+    }
+
+    .buttonContainer {
+      padding: 0;
+
+      :global(.vtex-button) {
+        font-weight: 700;
+        font-size: 14px;
+        line-height: 19px;
+        color: $white;
+        background-color: transparent;
+        border: none;
+      }
+
+      :global(.vtex-button__label) {
+        border-bottom: 3px solid $gray-500;
+        padding: 6px 17px 12px !important;
+      }
+    }
+  }
+}
diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss
index 02ee78a..eb01625 100644
--- a/styles/sass/pages/product/vtex.tab-layout.scss
+++ b/styles/sass/pages/product/vtex.tab-layout.scss
@@ -35,6 +35,7 @@
     }
 
     .listItemActive {
+
       :global(.vtex-button) {
         background-color: white;
         border: none;
@@ -58,7 +59,7 @@
       flex-direction: row;
       gap: 32px;
       align-items: flex-start;
-      padding: 32px;
+      padding: 32px 32px 16px;
 
       // :global(.vtex-store-components-3-x-content) {
       //   max-width: 100%;