From 8ccd7cd95dc11065a061943650e4065644ebce16 Mon Sep 17 00:00:00 2001
From: Sabrina Miranda <sabrina.miranda1@bol.com.br>
Date: Fri, 3 Feb 2023 14:58:57 -0300
Subject: [PATCH] =?UTF-8?q?feat:=20estiliza=20o=20bloco=20shipping-simulat?=
 =?UTF-8?q?or=20nos=20elementos=20de=20entrega,=20frete=20e=20prazo=20e=20?=
 =?UTF-8?q?retira=20borda=20arredondada=20dos=20bot=C3=B5es=20e=20input?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 react/components/Html/styles.css              |  6 ++
 styles/css/vtex.store-components.css          | 71 ++++++++++++++++++
 .../pages/product/vtex.store-components.scss  | 72 +++++++++++++++++++
 3 files changed, 149 insertions(+)

diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css
index fbdc8cd..bdc6e00 100644
--- a/react/components/Html/styles.css
+++ b/react/components/Html/styles.css
@@ -24,6 +24,7 @@
 
 [class*="html--add-to-cart-button"] button {
   background-color: #000000 !important;
+  border-radius: 0;
   border: none;
   width: 100%;
   height: 49px;
@@ -59,13 +60,18 @@
   font-size: 16px;
   line-height: 22px;
   color: #000000;
+  border-radius: 0;
 }
 
 [class*="html--shipping-simulator"] button {
   background-color: #000000;
+  border-radius: 0;
   border: none;
   width: 49px;
   height: 49px;
+
+  position: absolute;
+  left: 228px;
 }
 
 [class*="html--shipping-simulator"] a {
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index 7578c0b..fc13735 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -191,8 +191,79 @@
 .shippingContainer :global(.vtex-input-prefix__group) {
   height: 49px;
   width: 231px;
+  border-radius: 0;
 }
 .shippingContainer :global(.vtex-input__error) {
   position: absolute;
   margin: 2px;
+}
+
+.shippingTable {
+  margin: 16px 0 0 0;
+  padding: 0;
+  border: none;
+}
+
+.shippingTableHead {
+  display: table-header-group;
+  text-align: left;
+}
+
+.shippingTableHeadDeliveryName,
+.shippingTableHeadDeliveryEstimate {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #202020;
+  text-transform: uppercase;
+  margin-bottom: 15px;
+}
+
+.shippingTableHeadDeliveryPrice {
+  font-size: 0;
+}
+.shippingTableHeadDeliveryPrice::after {
+  content: "Frete";
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #202020;
+  text-transform: uppercase;
+  margin-bottom: 15px;
+}
+
+.shippingTableRow {
+  display: grid;
+  grid-template-columns: 20% 15% 65%;
+}
+
+.shippingTableCellDeliveryName,
+.shippingTableCellDeliveryName {
+  grid-area: 1/1;
+}
+
+.shippingTableHeadDeliveryEstimate,
+.shippingTableCellDeliveryEstimate {
+  grid-area: 1/3;
+}
+
+.shippingTableHeadDeliveryPrice,
+.shippingTableCellDeliveryPrice {
+  grid-area: 1/2;
+}
+
+.shippingTableCellDeliveryName,
+.shippingTableCellDeliveryEstimate,
+.shippingTableCellDeliveryPrice {
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  display: flex;
+  align-items: center;
+  color: #AFAFAF;
+  padding: 0 0 15px 0;
+}
+
+.shippingTableRadioBtn {
+  display: none;
 }
\ No newline at end of file
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index 19abef6..9708c7f 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -195,6 +195,7 @@
   :global(.vtex-input-prefix__group ) {
     height: 49px;
     width: 231px;
+    border-radius: 0;
   }
 
   :global(.vtex-input__error) {
@@ -202,3 +203,74 @@
     margin: 2px;
   }
 }
+
+.shippingTable {
+  margin: 16px 0 0 0;
+  padding: 0;
+  border: none;
+}
+
+.shippingTableHead {
+  display: table-header-group;
+  text-align: left;
+}
+
+.shippingTableHeadDeliveryName,
+.shippingTableHeadDeliveryEstimate {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #202020;
+  text-transform: uppercase;
+  margin-bottom: 15px;
+}
+
+.shippingTableHeadDeliveryPrice {
+  font-size: 0;
+
+  &::after {
+    content: "Frete";
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 19px;
+    color: #202020;
+    text-transform: uppercase;
+    margin-bottom: 15px;
+  }
+}
+
+.shippingTableRow {
+  display: grid;
+  grid-template-columns: 20% 15% 65%;
+}
+
+.shippingTableCellDeliveryName,
+.shippingTableCellDeliveryName{
+  grid-area: 1/1;
+}
+
+.shippingTableHeadDeliveryEstimate,
+.shippingTableCellDeliveryEstimate {
+  grid-area: 1/3;
+}
+
+.shippingTableHeadDeliveryPrice,
+.shippingTableCellDeliveryPrice {
+  grid-area: 1/2;
+}
+
+.shippingTableCellDeliveryName,
+.shippingTableCellDeliveryEstimate,
+.shippingTableCellDeliveryPrice {
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  display: flex;
+  align-items: center;
+  color: #AFAFAF;
+  padding: 0 0 15px 0;
+}
+
+.shippingTableRadioBtn {
+  display: none;
+}