From 022c905d82fd7c5be5244c9ec85947894f066f9f Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Mon, 13 Sep 2021 15:27:19 +0700
Subject: [PATCH] :art: styles: border viewed product in product detail

:%s
---
 pages/product/[slug].tsx                                 | 2 +-
 .../ListProductWithInfo/ListProductWithInfo.module.scss  | 6 ++++--
 .../common/ListProductWithInfo/ListProductWithInfo.tsx   | 9 +++++++--
 .../product-detail/ViewedProducts/ViewedProducts.tsx     | 1 +
 4 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/pages/product/[slug].tsx b/pages/product/[slug].tsx
index d48c4b604..dd06bb337 100644
--- a/pages/product/[slug].tsx
+++ b/pages/product/[slug].tsx
@@ -10,7 +10,7 @@ export default function Slug() {
     <RecommendedRecipes data={RECIPE_DATA_TEST} />
     <ReleventProducts />
     <ViewedProducts />
-    <RelevantBlogPosts data={BLOGS_DATA_TEST} title="You will like also" bgcolor="cream"/>
+    <RelevantBlogPosts data={BLOGS_DATA_TEST} title="You will like also"/>
   </>
 }
 
diff --git a/src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss b/src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss
index 6acb4aed0..9697a8ead 100644
--- a/src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss
+++ b/src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss
@@ -3,9 +3,11 @@
 .listProductWithInfo {
     background-color: var(--background);
     border-top: 1rem solid var(--gray);
-    border-bottom: 1rem solid var(--gray);
     padding-top: 6rem;
     padding-bottom: 6rem;
+    &.borderBottom {
+        border-bottom: 1rem solid var(--gray);
+    }
     @screen lg {
         @apply flex spacing-horizontal-left;
         padding-top: 5.6rem;
@@ -17,7 +19,7 @@
         @apply spacing-horizontal-left;
         @screen lg {
             max-width: 75%;
-            padding: 0 .8rem;
+            padding: 0 0.8rem;
             > div > div {
                 @apply shape-common-lg bg-white;
                 padding: 4rem 0;
diff --git a/src/components/common/ListProductWithInfo/ListProductWithInfo.tsx b/src/components/common/ListProductWithInfo/ListProductWithInfo.tsx
index 2200fd71e..0bbd1df65 100644
--- a/src/components/common/ListProductWithInfo/ListProductWithInfo.tsx
+++ b/src/components/common/ListProductWithInfo/ListProductWithInfo.tsx
@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import { TOptionsEvents } from 'keen-slider';
 import React from 'react';
 import CarouselCommon from '../CarouselCommon/CarouselCommon';
@@ -9,6 +10,7 @@ interface Props {
     data: ProductCardProps[],
     title: string,
     subtitle?: string,
+    hasBorderBottomMobile?: boolean,
 }
 const OPTION_DEFAULT: TOptionsEvents = {
     slidesPerView: 2,
@@ -35,9 +37,12 @@ const OPTION_DEFAULT: TOptionsEvents = {
     },
 }
 
-const ListProductWithInfo = ({ data, title, subtitle }: Props) => {
+const ListProductWithInfo = ({ data, title, subtitle, hasBorderBottomMobile }: Props) => {
     return (
-        <div className={s.listProductWithInfo}>
+        <div className={classNames({
+            [s.listProductWithInfo]: true,
+            [s.borderBottom]: hasBorderBottomMobile,
+        })}>
             <InfoProducts
                 title={title}
                 subtitle={subtitle}
diff --git a/src/components/modules/product-detail/ViewedProducts/ViewedProducts.tsx b/src/components/modules/product-detail/ViewedProducts/ViewedProducts.tsx
index 820af402f..87e600416 100644
--- a/src/components/modules/product-detail/ViewedProducts/ViewedProducts.tsx
+++ b/src/components/modules/product-detail/ViewedProducts/ViewedProducts.tsx
@@ -8,6 +8,7 @@ const ViewedProducts = () => {
             title="viewed Products"
             subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
             data={PRODUCT_DATA_TEST}
+            hasBorderBottomMobile={true}
         />
     );
 };