From 0369e1dd25dd5d52ae1797f3403dd58a41842362 Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Mon, 13 Sep 2021 15:18:51 +0700
Subject: [PATCH] :art: styles: change shape component list product with info

:%s
---
 .../ListProductWithInfo.module.scss           | 19 ++++++-------------
 .../ListProductWithInfo.tsx                   | 12 +++++++++---
 .../ProductCarousel/ProductCarousel.tsx       |  9 ++++++---
 3 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss b/src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss
index ddd8ed901..6acb4aed0 100644
--- a/src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss
+++ b/src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss
@@ -17,8 +17,11 @@
         @apply spacing-horizontal-left;
         @screen lg {
             max-width: 75%;
-            @apply custom-border-radius-lg bg-white;
-            padding: 4rem .8rem;
+            padding: 0 .8rem;
+            > div > div {
+                @apply shape-common-lg bg-white;
+                padding: 4rem 0;
+            }
             :global(.customArrow) {
                 @screen lg {
                     &:global(.leftArrow) {
@@ -31,18 +34,8 @@
             }
         }
         @screen xl {
-            padding: 4rem 2.4rem;
+            padding: 0 2.4rem;
             max-width: 80%;
-            :global(.customArrow) {
-                @screen lg {
-                    &:global(.leftArrow) {
-                        left: calc(-6.4rem + 1rem);
-                    }
-                    &:global(.rightArrow) {
-                        right: calc(-6.4rem + 1rem);
-                    }
-                }
-            }
         }
     }
 }
diff --git a/src/components/common/ListProductWithInfo/ListProductWithInfo.tsx b/src/components/common/ListProductWithInfo/ListProductWithInfo.tsx
index 66b8253d1..2200fd71e 100644
--- a/src/components/common/ListProductWithInfo/ListProductWithInfo.tsx
+++ b/src/components/common/ListProductWithInfo/ListProductWithInfo.tsx
@@ -18,12 +18,18 @@ const OPTION_DEFAULT: TOptionsEvents = {
             slidesPerView: 3,
         },
         '(min-width: 768px)': {
-            slidesPerView: 4,
-        },
-        '(min-width: 1024px)': {
             slidesPerView: 3,
         },
+        '(min-width: 1008px)': {
+            slidesPerView: 3.5,
+        },
+        '(min-width: 1024px)': {
+            slidesPerView: 2.5,
+        },
         '(min-width: 1280px)': {
+            slidesPerView: 3.5,
+        },
+        '(min-width: 1440px)': {
             slidesPerView: 4.5,
         },
     },
diff --git a/src/components/common/ProductCarousel/ProductCarousel.tsx b/src/components/common/ProductCarousel/ProductCarousel.tsx
index 381fc2992..8252e08a6 100644
--- a/src/components/common/ProductCarousel/ProductCarousel.tsx
+++ b/src/components/common/ProductCarousel/ProductCarousel.tsx
@@ -7,9 +7,9 @@ import ProductCard, { ProductCardProps } from '../ProductCard/ProductCard'
 import s from "./ProductCarousel.module.scss"
 
 interface ProductCarouselProps
-  extends Omit<CarouselCommonProps<ProductCardProps>, 'Component'|"option"> {
-		option?:TOptionsEvents
-	}
+  extends Omit<CarouselCommonProps<ProductCardProps>, 'Component' | "option"> {
+  option?: TOptionsEvents
+}
 
 const OPTION_DEFAULT: TOptionsEvents = {
   slidesPerView: 2,
@@ -24,6 +24,9 @@ const OPTION_DEFAULT: TOptionsEvents = {
     '(min-width: 1008px)': {
       slidesPerView: 3.5,
     },
+    '(min-width: 1280px)': {
+      slidesPerView: 4.5,
+    },
     '(min-width: 1440px)': {
       slidesPerView: 5.5,
     },