feat:Cria área do pix

react/Pix.tsx

@@ -0,0 +1,3 @@
+import Pix from "./components/Pix/Pix";
+
+export default Pix;

react/components/Pix/Pix.tsx

@@ -0,0 +1,87 @@
+import React, { useEffect, useState } from "react";
+import { useProduct } from "vtex.product-context";
+import "./style.css";
+
+const Pix = () => {
+  const productContext = useProduct();
+
+  const [pixValue, setPixValue] = useState(0);
+  const [discountValue, setDiscountValue] = useState("");
+
+  const objectPass = [
+    {
+      id: productContext?.selectedItem?.itemId,
+      quantity: 1,
+      seller: productContext?.selectedItem?.sellers[0].sellerId,
+    },
+  ];
+
+  function getDiscount(discountValue: number, commonValue: number | undefined) {
+    let discount = 0;
+    if (commonValue) {
+      discount = Math.floor(discountValue / commonValue) - 100;
+
+      if (discount > 0) return `${discount} % de desconto`;
+      else return "sem desconto";
+    }
+
+    return null;
+  }
+
+  async function request() {
+    const response = await fetch("/api/checkout/pub/orderForms/simulation", {
+      method: "POST",
+      headers: {
+        "content-type": "application/json",
+      },
+      body: JSON.stringify({
+        items: objectPass,
+        country: "BRA",
+        postalCode: "",
+      }),
+    });
+
+    const data = await response.json();
+
+    const getPix = data.paymentData.installmentOptions.find(
+      (e: { paymentName: string }) => {
+        return e.paymentName === "Pix";
+      }
+    );
+
+    setPixValue(getPix.value);
+
+    const discountMessage = getDiscount(
+      getPix.value,
+      productContext?.product?.priceRange.sellingPrice.highPrice
+    );
+
+    if (discountMessage) setDiscountValue(discountMessage);
+  }
+
+  useEffect(() => {
+    request();
+  }, [productContext?.selectedItem]);
+
+  return (
+    <div className="pix-container">
+      <img
+        className="pix-image"
+        src="https://agenciamagma.vteximg.com.br/arquivos/pix-icon-sauloklein-m3academy.svg"
+        alt="Pix Icon"
+      />
+
+      <div className="price-wrapper">
+        <span className="price-value">
+          {(pixValue / 100).toLocaleString("pt-br", {
+            style: "currency",
+            currency: "BRL",
+          })}
+        </span>
+        <span className="price-discount">{discountValue}</span>
+      </div>
+    </div>
+  );
+};
+
+export default Pix;

react/components/Pix/style.css

@@ -0,0 +1,30 @@
+[class*="pix-container"] {
+  display: flex;
+  align-items: center;
+  margin: 8px 0 0;
+}
+
+[class*="price-wrapper"] {
+  display: flex;
+  flex-direction: column;
+  margin: 0 0 0 26px;
+}
+
+[class*="pix-image"] {
+  width: 66px;
+  height: 24px;
+}
+
+[class*="price-value"] {
+  font-weight: 700;
+  font-size: 18px;
+  line-height: 25px;
+  color: rgba(0, 0, 0, 0.58);
+}
+
+[class*="price-discount"] {
+  font-weight: 300;
+  font-size: 13px;
+  line-height: 18px;
+  color: #929292;
+}

store/blocks/pdp/product.jsonc

@@ -100,6 +100,20 @@
       "showPaginationDots": false
     }
   },
+
+  "product-installments": {
+    "props": {
+      "blockClass": "sellingInfo"
+    }
+  },
+
+  "flex-layout.row#selling-prices": {
+    "props": {
+      "blockClass": "sellingPrice"
+    },
+    "children": ["product-selling-price"]
+  },
+
   "flex-layout.col#right-col": {
     "props": {
       "preventVerticalStretch": true,
@@ -109,12 +123,13 @@
       "flex-layout.row#product-name",
       "product-rating-summary",
       //"flex-layout.row#list-price-savings",
-      "flex-layout.row#selling-price",
+      "flex-layout.row#selling-prices",
       "product-installments",
-      "product-separator",
+      "pix-component",
-      "product-identifier.product",
+      //"product-separator",
       "sku-selector",
-      "product-quantity",
+      "product-identifier.product",
+      //"product-quantity",
       "product-assembly-options",
       "product-gifts",
       "flex-layout.row#buy-button",
@@ -138,12 +153,27 @@
     }
   },
 
+  "product-quantity": {
+    "props": {
+      "size": "large",
+      "showLabel": false
+    }
+  },
+
+  "add-to-cart-button": {
+    "props": {
+      "blockClass": "addToCartButton",
+      "text": "ADICIONAR À SACOLA"
+    }
+  },
+
   "flex-layout.row#buy-button": {
     "props": {
       "marginTop": 4,
-      "marginBottom": 7
+      "marginBottom": 7,
+      "blockClass": "quantityAndBuy"
     },
-    "children": ["add-to-cart-button"]
+    "children": ["product-quantity", "add-to-cart-button"]
   },
 
   "flex-layout.row#product-availability": {

store/interfaces.json

@@ -2,6 +2,9 @@
   "example-component": {
     "component": "Example"
   },
+  "pix-component": {
+    "component": "Pix"
+  },
   "html": {
     "component": "html",
     "composition": "children"

styles/configs/style.json

@@ -59,7 +59,7 @@
     "background": {
       "base": "#ffffff",
       "base--inverted": "#03044e",
-      "action-primary": "#0F3E99",
+      "action-primary": "#000",
       "action-secondary": "#eef3f7",
       "emphasis": "#f71963",
       "disabled": "#f2f4f5",
@@ -76,7 +76,7 @@
       "muted-5": "#f2f4f5"
     },
     "hover-background": {
-      "action-primary": "#072c75",
+      "action-primary": "#292929",
       "action-secondary": "#dbe9fd",
       "emphasis": "#dd1659",
       "success": "#8bc34a",
@@ -92,7 +92,7 @@
       "muted-5": "#f2f4f5"
     },
     "active-background": {
-      "action-primary": "#0c389f",
+      "action-primary": "#000",
       "action-secondary": "#d2defc",
       "emphasis": "#dd1659",
       "success": "#8bc34a",
@@ -108,7 +108,7 @@
       "muted-5": "#f2f4f5"
     },
     "text": {
-      "action-primary": "#0F3E99",
+      "action-primary": "#000",
       "action-secondary": "#eef3f7",
       "link": "#0F3E99",
       "emphasis": "#f71963",
@@ -151,7 +151,7 @@
       "warning--faded": "#fff6e0"
     },
     "border": {
-      "action-primary": "#0F3E99",
+      "action-primary": "#000",
       "action-secondary": "#eef3f7",
       "emphasis": "#f71963",
       "disabled": "#e3e4e6",
@@ -242,7 +242,7 @@
     }
   },
   "borderWidths": [0, 0.125, 0.25, 0.5, 1, 2],
-  "borderRadius": [0, 0.125, 0.25, 0.5, 1],
+  "borderRadius": [0, 0, 0, 0.5, 1],
   "widths": [1, 2, 4, 8, 16],
   "maxWidths": [1, 2, 4, 8, 16, 32, 48, 64, 96],
   "heights": [1, 2, 4, 8, 16],
@@ -255,84 +255,84 @@
     "measure": [30, 34, 20],
     "styles": {
       "heading-1": {
-        "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "'Open Sans', sans-serif",
         "fontWeight": "700",
         "fontSize": "3rem",
         "textTransform": "initial",
         "letterSpacing": "0"
       },
       "heading-2": {
-        "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "'Open Sans', sans-serif",
         "fontWeight": "700",
         "fontSize": "2.25rem",
         "textTransform": "initial",
         "letterSpacing": "0"
       },
       "heading-3": {
-        "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "'Open Sans', sans-serif",
         "fontWeight": "700",
         "fontSize": "1.75rem",
         "textTransform": "initial",
         "letterSpacing": "0"
       },
       "heading-4": {
-        "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "'Open Sans', sans-serif",
         "fontWeight": "normal",
         "fontSize": "1.5rem",
         "textTransform": "initial",
         "letterSpacing": "0"
       },
       "heading-5": {
-        "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "'Open Sans', sans-serif",
         "fontWeight": "normal",
         "fontSize": "1.25rem",
         "textTransform": "initial",
         "letterSpacing": "0"
       },
       "heading-6": {
-        "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "'Open Sans', sans-serif",
         "fontWeight": "normal",
         "fontSize": "1.25rem",
         "textTransform": "initial",
         "letterSpacing": "0"
       },
       "body": {
-        "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "'Open Sans', sans-serif",
         "fontWeight": "normal",
         "fontSize": "1rem",
         "textTransform": "initial",
         "letterSpacing": "0"
       },
       "small": {
-        "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "'Open Sans', sans-serif",
         "fontWeight": "normal",
         "fontSize": "0.875rem",
         "textTransform": "initial",
         "letterSpacing": "0"
       },
       "mini": {
-        "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "'Open Sans', sans-serif",
         "fontWeight": "normal",
         "fontSize": "0.75rem",
         "textTransform": "initial",
         "letterSpacing": "0"
       },
       "action": {
-        "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "'Open Sans', sans-serif",
         "fontWeight": "500",
         "fontSize": "1rem",
         "textTransform": "uppercase",
         "letterSpacing": "0"
       },
       "action--small": {
-        "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "'Open Sans', sans-serif",
         "fontWeight": "500",
         "fontSize": "0.875rem",
         "textTransform": "uppercase",
         "letterSpacing": "0"
       },
       "action--large": {
-        "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "'Open Sans', sans-serif",
         "fontWeight": "500",
         "fontSize": "1.25rem",
         "textTransform": "uppercase",

styles/css/vtex.add-to-cart-button.css

@@ -0,0 +1,15 @@
+/*
+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@300;400;500;700&display=swap");
+/* Grid breakpoints */
+.buttonText--addToCartButton {
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+}

styles/css/vtex.breadcrumb.css

@@ -7,6 +7,7 @@
 1800px + : Big desktop
 */
 /* Media Query M3 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap");
 /* Grid breakpoints */
 .container {
   padding: 0 40px;

styles/css/vtex.flex-layout.css

@@ -6,6 +6,7 @@
 1800px + : Big desktop
 */
 /* Media Query M3 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap");
 /* Grid breakpoints */
 .flexRow .flexRowContent--productPanel {
   margin: 16px 0 0;
@@ -14,7 +15,17 @@
 }
 .flexRow .flexRowContent--productPanel .stretchChildrenWidth:first-child {
   padding: 0;
+  justify-content: normal;
 }
-.flexRow .flexRowContent--productPanel .stretchChildrenWidth:first-child .flexCol--productShowcase {
+.flexRow .flexRowContent--productPanel .flexCol--productShowcase {
-  margin: 0 32px 0 0;
+  padding: 0 32px 0 0;
+}
+.flexRow .flexRowContent--quantityAndBuy {
+  margin: 0 0 16px;
+}
+.flexRow .flexRowContent--quantityAndBuy .stretchChildrenWidth {
+  width: auto !important;
+}
+.flexRow .flexRowContent--quantityAndBuy .stretchChildrenWidth:last-child {
+  flex: 1;
 }

styles/css/vtex.product-identifier.css

@@ -6,10 +6,11 @@
 1800px + : Big desktop
 */
 /* Media Query M3 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap");
 /* Grid breakpoints */
 .product-identifier {
   position: absolute;
-  top: 65px;
+  top: 35px;
   right: 40px;
   font-weight: 400;
   font-size: 14px;

styles/css/vtex.product-price.css

@@ -6,4 +6,36 @@
 1800px + : Big desktop
 */
 /* Media Query M3 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap");
 /* Grid breakpoints */
+.sellingPrice--hasListPrice {
+  font-weight: 700;
+  font-size: 25px;
+  line-height: 38px;
+}
+
+.installments--sellingInfo {
+  font-size: 0;
+}
+.installments--sellingInfo .installmentsNumber,
+.installments--sellingInfo .installmentValue {
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 22px;
+  color: #929292;
+}
+.installments--sellingInfo .installmentsNumber::after {
+  content: " x ";
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 22px;
+}
+.installments--sellingInfo .installmentValue::before, .installments--sellingInfo .installmentValue::after {
+  content: "de ";
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+}
+.installments--sellingInfo .installmentValue::after {
+  content: " sem juros";
+}

styles/css/vtex.product-quantity.css

@@ -6,11 +6,8 @@
 1800px + : Big desktop
 */
 /* Media Query M3 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap");
 /* Grid breakpoints */
-.html {
+.quantitySelectorContainer {
-  background-color: red;
+  margin: 0 10px 0 0;
-}
-
-.html--pdp-breadcrumb {
-  background-color: blue;
 }

styles/css/vtex.rich-text.css

@@ -6,4 +6,5 @@
 1800px + : Big desktop
 */
 /* Media Query M3 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap");
 /* Grid breakpoints */

styles/css/vtex.shelf.css

@@ -6,6 +6,7 @@
 1800px + : Big desktop
 */
 /* Media Query M3 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap");
 /* Grid breakpoints */
 .relatedProducts {
   padding: 0 40px;

styles/css/vtex.store-components.css

@@ -6,6 +6,7 @@
 1800px + : Big desktop
 */
 /* Media Query M3 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap");
 /* Grid breakpoints */
 .container {
   padding: 0;
@@ -39,9 +40,69 @@
 }
 .container .productNameContainer {
   text-align: right;
+  margin: 0 0 51px;
+}
+.container .productNameContainer .productBrand--quickview {
   font-weight: 300;
   font-size: 20px;
   line-height: 34px;
   color: #575757;
-  margin: 0 0 51px;
+}
+.container .skuSelectorContainer {
+  display: flex;
+  flex-direction: column-reverse;
+}
+.container .skuSelectorContainer .skuSelectorSubcontainer {
+  margin: 0;
+  margin: 16px 0 10px;
+}
+.container .skuSelectorContainer .skuSelectorSubcontainer .skuSelectorTextContainer {
+  margin: 0 0 8px 0;
+}
+.container .skuSelectorContainer .skuSelectorSubcontainer .skuSelectorTextContainer .skuSelectorName {
+  font-size: 0;
+}
+.container .skuSelectorContainer .skuSelectorSubcontainer .skuSelectorTextContainer .skuSelectorName::before {
+  content: "OUTROS TAMANHOS:";
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+}
+.container .skuSelectorContainer .skuSelectorSubcontainer .skuSelectorOptionsList {
+  margin: 0;
+}
+.container .skuSelectorContainer .skuSelectorSubcontainer .skuSelectorOptionsList .skuSelectorItem {
+  margin: 0 16px 0 0;
+}
+.container .skuSelectorContainer .skuSelectorSubcontainer .skuSelectorOptionsList .skuSelectorItem .frameAround {
+  display: none;
+}
+.container .skuSelectorContainer .skuSelectorSubcontainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #989898;
+}
+.container .skuSelectorContainer .skuSelectorSubcontainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox {
+  border: 2px solid #000;
+}
+.container .skuSelectorContainer .skuSelectorSubcontainer .skuSelectorNameContainer {
+  margin: 0;
+}
+.container .skuSelectorContainer .skuSelectorSubcontainer:first-child {
+  margin: 0 0 16px;
+}
+.container .skuSelectorContainer .skuSelectorSubcontainer:first-child .skuSelectorTextContainer .skuSelectorName::before {
+  content: "OUTRAS CORES:";
+}
+.container .skuSelectorContainer .skuSelectorSubcontainer:first-child .skuSelectorTextContainer .skuSelectorSelectorImageValue,
+.container .skuSelectorContainer .skuSelectorSubcontainer:first-child .skuSelectorTextContainer .skuSelectorNameSeparator {
+  display: none;
+}
+.container .skuSelectorContainer .skuSelectorSubcontainer:first-child .skuSelectorOptionsList {
+  margin: 0;
 }

styles/css/vtex.styleguide.css

@@ -0,0 +1,15 @@
+/*
+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@300;400;500;700&display=swap");
+/* Grid breakpoints */
+.hideDecorators {
+  border-left: none;
+  border-right: none;
+  color: #929292;
+}

styles/sass/pages/product/vtex.add-to-cart-button.scss

@@ -0,0 +1,5 @@
+.buttonText--addToCartButton {
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+}

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

@@ -6,9 +6,22 @@
 
     .stretchChildrenWidth:first-child {
       padding: 0;
+      justify-content: normal;
+    }
 
     .flexCol--productShowcase {
-        margin: 0 32px 0 0;
+      padding: 0 32px 0 0;
+    }
+  }
+
+  .flexRowContent--quantityAndBuy {
+    margin: 0 0 16px;
+
+    .stretchChildrenWidth {
+      width: auto !important;
+
+      &:last-child {
+        flex: 1;
       }
     }
   }

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

@@ -1,6 +1,6 @@
 .product-identifier {
   position: absolute;
-  top: 65px;
+  top: calc(27px + 8px);
   right: 40px;
   font-weight: 400;
   font-size: 14px;

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

@@ -0,0 +1,38 @@
+.sellingPrice--hasListPrice {
+  font-weight: 700;
+  font-size: 25px;
+  line-height: 38px;
+}
+
+.installments--sellingInfo {
+  font-size: 0;
+
+  .installmentsNumber,
+  .installmentValue {
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 22px;
+    color: $color-gray6;
+  }
+
+  .installmentsNumber::after {
+    content: " x ";
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 22px;
+  }
+
+  .installmentValue {
+    &::before,
+    &::after {
+      content: "de ";
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 22px;
+    }
+
+    &::after {
+      content: " sem juros";
+    }
+  }
+}

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

@@ -0,0 +1,3 @@
+.quantitySelectorContainer {
+  margin: 0 10px 0 0;
+}

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

@@ -36,10 +36,86 @@
 
   .productNameContainer {
     text-align: right;
+    margin: 0 0 51px;
+
+    .productBrand--quickview {
       font-weight: 300;
       font-size: 20px;
       line-height: 34px;
       color: $color-gray7;
-    margin: 0 0 51px;
+    }
+  }
+
+  .skuSelectorContainer {
+    display: flex;
+    flex-direction: column-reverse;
+
+    .skuSelectorSubcontainer {
+      margin: 0;
+      margin: 16px 0 10px;
+      .skuSelectorTextContainer {
+        margin: 0 0 8px 0;
+
+        .skuSelectorName {
+          font-size: 0;
+
+          &::before {
+            content: "OUTROS TAMANHOS:";
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 19px;
+            color: $color-gray6;
+          }
+        }
+      }
+
+      .skuSelectorOptionsList {
+        margin: 0;
+
+        .skuSelectorItem {
+          margin: 0 16px 0 0;
+
+          .frameAround {
+            display: none;
+          }
+          .skuSelectorInternalBox {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border: 1px solid $color-gray9;
+          }
+
+          &--selected .skuSelectorInternalBox {
+            border: 2px solid $color-black2;
+          }
+        }
+      }
+
+      .skuSelectorNameContainer {
+        margin: 0;
+      }
+
+      &:first-child {
+        margin: 0 0 16px;
+
+        .skuSelectorTextContainer {
+          .skuSelectorName::before {
+            content: "OUTRAS CORES:";
+          }
+
+          .skuSelectorSelectorImageValue,
+          .skuSelectorNameSeparator {
+            display: none;
+          }
+        }
+
+        .skuSelectorOptionsList {
+          margin: 0;
+        }
+      }
+    }
   }
 }

styles/sass/pages/product/vtex.styleguide.scss

@@ -0,0 +1,5 @@
+.hideDecorators {
+  border-left: none;
+  border-right: none;
+  color: $color-gray6;
+}

styles/sass/utils/_vars.scss

@@ -1,4 +1,7 @@
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap");
+
 $color-black: #292929;
+$color-black2: #000;
 
 $color-white: #fff;
 
@@ -10,6 +13,7 @@ $color-gray5: #e5e5e5;
 $color-gray6: #929292;
 $color-gray7: #575757;
 $color-gray8: #9292927a;
+$color-gray9: #989898;
 
 $color-blue: #4267b2;