refactor: corrigindo css do product-name

react/components/Example/paymentWithPix.tsx

@@ -1,20 +1,21 @@
-
 import React from 'react';
 import {useProduct} from 'vtex.product-context';
+import styles from "./styles.css"
 
-const paymentWithPix= (props:any) => {
-console.log("props",props);
 
+const paymentWithPix =() => {
 
 const product = useProduct();
 let imagePix = "https://agenciamagma.vtexassets.com/arquivos/pix-image-victor_souza.svg"
 
 
   return (
-  <div>
+  <div className={styles.wrapperPix}>
-    <img src={imagePix} alt="Imagem do icone do pix" />
+    <img className={styles.wrapperPixImage}src={imagePix} alt="Imagem do icone do pix" />
-    <p>{(product?.product?.priceRange.sellingPrice.highPrice || 0) * 0.9}</p>
+    <div className={styles.wrapperPrices}>
-    <p>10 % de desconto</p>
+    <h3 className={styles.wrapperTitle}>{(product?.product?.priceRange.sellingPrice.highPrice || 0) * (0.9)}</h3>
+    <h3 className={styles.wrapperSubtitle}>R$ 10 % de desconto</h3>
+    </div>
   </div>
 
   )

react/components/Example/styles.css

@@ -0,0 +1,36 @@
+
+.wrapperPix {
+  display: flex;
+  gap: 26px;
+  align-items: center;
+  margin-top: 8px;
+}
+.wrapperPixImage {
+  width: 66px;
+  height: 24px;
+}
+.wrapperPrices {
+  display: flex;
+  flex-direction: column;
+}
+
+.wrapperTitle {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 700;
+  font-size: 18px;
+  line-height: 25px;
+  color: rgba(0, 0, 0, 0.58);
+  margin: 0;
+}
+
+
+.wrapperSubtitle {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 300;
+  font-size: 13px;
+  line-height: 18px;
+  color: #929292;
+  margin: 0;
+}

store/blocks/pdp/product.jsonc

@@ -78,7 +78,7 @@
   "flex-layout.col#stack": {
     "children": ["stack-layout"],
     "props": {
-      "width": "50%",
+      "width": "51%",
       "rowGap": 0,
       "blockClass":"stack"
     }
@@ -113,8 +113,8 @@
       "flex-layout.row#selling-price",
       "product-installments",
       "example-component",
-      "product-separator",
+      // "product-separator",
-      "product-identifier.product",
+      // "product-identifier.product",
       "sku-selector",
       "flex-layout.row#box-buy",
       "product-assembly-options",
@@ -209,12 +209,12 @@
 
 
 "tab-list#home": {
-"children": [
+  "children": [
-  "tab-list.item#home1",
+    "tab-list.item#home1",
-  "tab-list.item#home2",
+    "tab-list.item#home2",
-  "tab-list.item#home3",
+    "tab-list.item#home3",
-  "tab-list.item#home4",
+    "tab-list.item#home4",
-  "tab-list.item#home5"
+    "tab-list.item#home5"
 ]
 },
 
@@ -251,7 +251,6 @@
   "props": {
     "tabId": "description5",
     "label": "Descrição"
-  }
 },
 
 "tab-content#home": {

styles/css/product-separator.css

@@ -0,0 +1,12 @@
+/*
+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 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700&display=swap");
+/*font*/
+/*colors*/
+/* Grid breakpoints */

styles/css/vtex.product-price.css

@@ -1,79 +1,29 @@
-.listPrice {
+/*
-  color: #727273;
+0 - 600PX: Phone
-  margin-bottom: .25rem;
+600 - 900px: Table portrait
-  font-size: 1rem;
+900 - 1200px: Tablet landscape
-}
+[1200 - 1800] is where our nortal styles apply
-
+1800px + : Big desktop
-.sellingPrice {
+*/
-  color: #3f3f40;
+/* Media Query M3 */
-  font-size: 1.25rem;
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700&display=swap");
-}
+/*font*/
-
+/*colors*/
+/* Grid breakpoints */
 .sellingPriceValue {
-  font-size: 2.25rem;
+  font-family: "Open Sans";
+  font-style: normal;
   font-weight: 700;
+  font-size: 25px;
+  line-height: 38px;
+  color: #000000;
 }
 
 .installments {
-  color: #727273;
+  font-family: "Open Sans";
-  margin-bottom: 1rem;
+  font-style: normal;
-}
+  font-weight: 700;
-
+  font-size: 16px;
-.savings {
+  line-height: 22px;
-  font-weight: 500;
+  color: #929292;
-  color: #79B03A;
+}
-}
-
-.sellingPriceValue--summary {
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: #2E2E2E;
-}
-
-.savings--summary {
-  background: #8BC34A;
-  border-radius: 1000px;
-  align-items: center;
-  display: flex;
-
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-  font-size: 0.875rem;
-  font-weight: 600;
-  vertical-align: baseline;
-  color: #FFFFFF;
-}
-
-.savings-discount--summary {
-  font-size: 0.875rem;
-  font-weight: 600;
-  vertical-align: baseline;
-  color: #FFFFFF;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-}
-
-.listPrice--summary {
-  margin-bottom: 0.25rem;
-  font-size: .875rem;
-}
-
-.installments--summary {
-  margin-bottom: 2rem;
-  font-size: 0.875rem;
-}
-
-.savings--summaryPercentage {
-  background: #0f3e99;
-  border-radius: 1000px;
-  align-items: center;
-  display: flex;
-}
-
-.savingsPercentage--summaryPercentage {
-  font-size: 0.875rem;
-  font-weight: 600;
-  vertical-align: baseline;
-  color: #FFFFFF;
-  padding: 0.25rem 0.5rem 0.25rem 0.5rem;
-}

styles/css/vtex.product-quantity.css

@@ -12,4 +12,8 @@
 /* Grid breakpoints */
 .quantitySelectorTitle {
   display: none;
+}
+
+.quantitySelectorStepper {
+  background-color: white;
 }

styles/css/vtex.store-components.css

@@ -173,4 +173,9 @@
   line-height: 34px;
   text-align: right;
   color: #575757;
+}
+
+.skuSelectorContainer {
+  display: flex;
+  flex-direction: column-reverse;
 }

styles/css/vtex.tab-layout.css

@@ -15,4 +15,31 @@
   flex-direction: row;
   gap: 32px;
   padding: 32px 72px 16px 72px;
+}
+
+.listContainer {
+  display: flex;
+  justify-content: start;
+  padding-left: 104px;
+  border-bottom: 1px solid #B9B9B9;
+}
+
+.listItem {
+  margin: 0;
+  padding: 0;
+}
+.listItem :global(.vtex-button) {
+  border-top: none;
+  border-left: none;
+  border-right: none;
+}
+.listItem :global(.vtex-button) :global(.vtex-button__label) {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 38px;
+  color: #000000;
+  background-color: white;
+  padding: 0 16px;
 }

styles/sass/pages/product/vtex.product-price.scss

@@ -0,0 +1,19 @@
+.sellingPriceValue {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 700;
+  font-size: 25px;
+  line-height: 38px;
+  color: #000000;
+}
+
+.installments {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 22px;
+  color: #929292;
+}
+
+

styles/sass/pages/product/vtex.product-quantity.scss

@@ -1,3 +1,7 @@
 .quantitySelectorTitle {
   display: none;
 }
+
+.quantitySelectorStepper {
+ background-color: white;
+}

styles/sass/pages/product/vtex.store-components.scss

@@ -175,3 +175,12 @@
   text-align: right;
   color: #575757;
 }
+
+//estilização do container de skus ( tamanhos e cores )
+
+.skuSelectorContainer {
+  display: flex;
+  flex-direction: column-reverse;
+}
+
+

styles/sass/pages/product/vtex.tab-layout.scss

@@ -5,3 +5,34 @@
   padding: 32px 72px 16px 72px;
 }
 
+
+//estilização do menu "descrição"
+
+.listContainer {
+  display: flex;
+  justify-content: start;
+  padding-left: 104px;
+  border-bottom: 1px solid #B9B9B9;
+}
+
+.listItem {
+  margin: 0;
+  padding: 0;
+  :global(.vtex-button) {
+    border-top: none;
+    border-left: none;
+    border-right: none;
+    :global(.vtex-button__label ) {
+      font-family: 'Open Sans';
+        font-style: normal;
+        font-weight: 400;
+        font-size: 18px;
+        line-height: 38px;
+        color: #000000;
+        background-color: white;
+        padding: 0 16px;
+    }
+  }
+}
+
+