From e64b8a39f829eb7ec877726253cb8a8d81d0d94f Mon Sep 17 00:00:00 2001
From: Leonardo <rochaleo879@gmail.com>
Date: Tue, 31 Jan 2023 22:27:22 -0300
Subject: [PATCH] fix: ajusta o width do container da imagem

---
 react/components/Html/readme.md        |  2 +-
 react/components/Html/styles.css       |  9 +++--
 store/blocks/pdp/product.jsonc         |  4 +--
 styles/css/vtex.add-to-cart-button.css | 48 +++++---------------------
 styles/css/vtex.condition-layout.css   |  5 ---
 styles/css/vtex.flex-layout.css        |  5 ++-
 styles/css/vtex.store-components.css   | 15 +-------
 7 files changed, 23 insertions(+), 65 deletions(-)

diff --git a/react/components/Html/readme.md b/react/components/Html/readme.md
index 3d97911..b97f76c 100644
--- a/react/components/Html/readme.md
+++ b/react/components/Html/readme.md
@@ -46,7 +46,7 @@ Basicamente esse componente
     <div class="vtex-flex-layout-0-x-flexRow">
         <section class="vtex-store-components ph3 ph5-m ph2-xl mw9 center">
             <div class="vtex-flex-layout-0-x-flexRowContent pr7">
-                <div class="stretchChildrenWidth flex pr7 items-stretch" style="width: 50%;">
+                <div class="stretchChildrenWidth flex pr7 items-stretch" style="width: 44%;">
                     {children}
                 </div>
             </div>
diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css
index 49de8ad..3167fc3 100644
--- a/react/components/Html/styles.css
+++ b/react/components/Html/styles.css
@@ -1,4 +1,9 @@
 [dataid*="product-images"] {
-  display: flex;
-  justify-content: left;
+  margin-left: 40px;
+  width: 80%;
+}
+
+[class*="productImageTag--main"] {
+  max-width: 80.25%;
+  object-fit: none;
 }
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index 4ff0161..7863f90 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -45,8 +45,6 @@
   },
   "flex-layout.row#product-main": {
     "props": {
-      "colGap": 7,
-      "rowGap": 7,
       "marginTop": 4,
       "marginBottom": 7,
       "paddingTop": 7,
@@ -78,7 +76,6 @@
   "flex-layout.col#stack": {
     "children": ["stack-layout"],
     "props": {
-      "width": "60%",
       "rowGap": 0
     }
   },
@@ -88,6 +85,7 @@
   },
   "product-images": {
     "props": {
+      "contentType": "images",
       "showNavigationArrows": false,
       "showPaginationDots": false,
       "thumbnailsOrientation": "horizontal",
diff --git a/styles/css/vtex.add-to-cart-button.css b/styles/css/vtex.add-to-cart-button.css
index 2480744..34c4328 100644
--- a/styles/css/vtex.add-to-cart-button.css
+++ b/styles/css/vtex.add-to-cart-button.css
@@ -1,39 +1,9 @@
-.add-to-cart-button {
-  background-color: black;
-  color: white;
-}
-
-.buttonText {
-  visibility: hidden;
-}
-
-.__label {
-  padding: 0;
-  padding-top: 0;
-  padding-bottom: 0;
-}
-
-.buttonText::after {
-  width: 398px;
-  height: 25px;
-  content: "Adicionar à sacola";
-  visibility: visible;
-  font-family: "Open Sans";
-  font-style: normal;
-  font-weight: 400;
-  font-size: 18px;
-  line-height: 25px;
-  color: #ffffff;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-.buttonDataContainer {
-  position: relative;
-}
-
-.button-add {
-  background-color: black;
-}
-
+/*
+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 */
\ No newline at end of file
diff --git a/styles/css/vtex.condition-layout.css b/styles/css/vtex.condition-layout.css
index d84e0c0..e69de29 100644
--- a/styles/css/vtex.condition-layout.css
+++ b/styles/css/vtex.condition-layout.css
@@ -1,5 +0,0 @@
-.stretchChildrenWidth {
-  display: flex;
-  flex-direction: column;
-  border: 1px solid red;
-}
diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css
index 35cef48..d409ed4 100644
--- a/styles/css/vtex.flex-layout.css
+++ b/styles/css/vtex.flex-layout.css
@@ -70,6 +70,10 @@
   align-items: flex-end;
 }
 
+.pr7.items-stretch.vtex-flex-layout-0-x-stretchChildrenWidth.flex {
+  width: 40%;
+}
+
 .flexCol--orderByMobileCol {
   width: 42%;
 }
@@ -83,7 +87,6 @@
   max-height: 100%;
 }
 
-
 .flexColChild--quickviewDetails:first-child {
   overflow-y: auto;
   height: 66% !important;
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index 1162e3a..f8fa6cb 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -9,17 +9,4 @@
 /* Grid breakpoints */
 .newsletter {
   background: red;
-}
-
-.productNameContainer {
-  width: 664px;
-  height: 34px;
-  font-family: "Open Sans";
-  font-style: normal;
-  font-weight: 300;
-  font-size: 20px;
-  line-height: 34px;
-  text-align: right;
-  color: #575757;
-  margin-right: 40px;
-}
+}
\ No newline at end of file