From 3b3783d9b4bc8a13928288640b8654ada91217dc Mon Sep 17 00:00:00 2001
From: Gabriel Lehmann <gabriel.lehmann@hotmail.com>
Date: Thu, 2 Feb 2023 19:28:48 -0300
Subject: [PATCH] fix: changed producImages css

---
 manifest.json                                 |  1 -
 react/components/Html/styles.css              |  3 ++
 store/blocks/pdp/product.jsonc                | 22 ++++++++++---
 styles/css/vtex.store-components.css          | 27 ++++++++++++++--
 styles/css/vtex.styleguide.css                |  9 ++++++
 .../pages/product/vtex.store-components.scss  | 32 +++++++++++++++++--
 .../sass/pages/product/vtex.styleguide.scss   |  3 ++
 7 files changed, 86 insertions(+), 11 deletions(-)
 create mode 100644 react/components/Html/styles.css
 create mode 100644 styles/css/vtex.styleguide.css
 create mode 100644 styles/sass/pages/product/vtex.styleguide.scss

diff --git a/manifest.json b/manifest.json
index 9ee3cc5..a2cde0d 100644
--- a/manifest.json
+++ b/manifest.json
@@ -15,7 +15,6 @@
     "postreleasy": "vtex publish --verbose"
   },
   "dependencies": {
-    "agenciamagma.store-theme": "5.x",
     "vtex.store": "2.x",
     "vtex.store-header": "2.x",
     "vtex.product-summary": "2.x",
diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css
new file mode 100644
index 0000000..8614686
--- /dev/null
+++ b/react/components/Html/styles.css
@@ -0,0 +1,3 @@
+[class*="html--pdp-breadcrumb"] {
+  background-color: white;
+}
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index 6a916dc..ba31acb 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -91,7 +91,12 @@
         "desktop": "auto",
         "phone": "16:9"
       },
-      "displayThumbnailsArrows": true
+      "thumbnailsOrientation": "horizontal",
+      "thumbnailMaxHeight": 90,
+      "maxHeight": 664,
+      "showPaginationDots": false,
+      "showNavigationArrows": false,
+      "displayThumbnailsArrows": false
     }
   },
   "flex-layout.col#right-col": {
@@ -102,7 +107,7 @@
     "children": [
       "flex-layout.row#product-name",
       "product-rating-summary",
-      "flex-layout.row#list-price-savings",
+      // "flex-layout.row#list-price-savings",
       "flex-layout.row#selling-price",
       "product-installments",
       "product-separator",
@@ -113,8 +118,8 @@
       "product-gifts",
       "flex-layout.row#buy-button",
       "availability-subscriber",
-      "shipping-simulator",
-      "share#default"
+      "shipping-simulator"
+      // "share#default"
     ]
   },
 
@@ -135,11 +140,18 @@
   "flex-layout.row#buy-button": {
     "props": {
       "marginTop": 4,
-      "marginBottom": 7
+      "marginBottom": 7,
+      "blockClass": "add-to-cart-button-background"
     },
     "children": ["add-to-cart-button"]
   },
 
+  "add-to-cart-button": {
+    "props": {
+      "blockClass": "add-to-cart-button"
+    }
+  },
+
   "flex-layout.row#product-availability": {
     "props": {
       "colGap": 7,
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index f8fa6cb..8a0b629 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -7,6 +7,29 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
-.newsletter {
-  background: red;
+.carouselContainer {
+  margin-left: 40px;
+}
+.carouselContainer:global(.vtex-store-components-3-x-productImagesGallerySlide) {
+  margin: unset;
+}
+
+.productImageTag--main {
+  width: unset !important;
+  height: 664px !important;
+}
+
+.thumbImg {
+  border-radius: 8px;
+  max-width: 90px;
+  max-height: 90px;
+}
+.thumbImg--video {
+  width: 90px;
+  height: 90px;
+}
+
+.productImagesThumb {
+  width: fit-content !important;
+  margin-right: 16px;
 }
\ No newline at end of file
diff --git a/styles/css/vtex.styleguide.css b/styles/css/vtex.styleguide.css
new file mode 100644
index 0000000..34c4328
--- /dev/null
+++ b/styles/css/vtex.styleguide.css
@@ -0,0 +1,9 @@
+/*
+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/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index 36d0f22..95b9066 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -1,3 +1,29 @@
-.newsletter{
-    background: red;
-}
\ No newline at end of file
+// left side
+
+.carouselContainer {
+  margin-left: 40px;
+  &:global(.vtex-store-components-3-x-productImagesGallerySlide) {
+    margin: unset;
+  }
+}
+
+.productImageTag--main {
+  width: unset !important;
+  height: 664px !important;
+}
+
+.thumbImg {
+  border-radius: 8px;
+  max-width: 90px;
+  max-height: 90px;
+
+  &--video {
+    width: 90px;
+    height: 90px;
+  }
+}
+
+.productImagesThumb {
+  width: fit-content !important;
+  margin-right: 16px;
+}
diff --git a/styles/sass/pages/product/vtex.styleguide.scss b/styles/sass/pages/product/vtex.styleguide.scss
new file mode 100644
index 0000000..4d83b7d
--- /dev/null
+++ b/styles/sass/pages/product/vtex.styleguide.scss
@@ -0,0 +1,3 @@
+.hideDecorators {
+  // background-color: red;
+}