From 558a3de4a6eb5635b94bb2337b2f315b27b82c98 Mon Sep 17 00:00:00 2001
From: quocsonnguyen <quocsonnguyen2010@gmail.com>
Date: Fri, 27 Aug 2021 12:32:20 +0700
Subject: [PATCH] :sparkles: feat: Home Feature

---
 .../components/HomeFeature/HomeFeature.tsx        | 15 +++++++++------
 .../HomeFeatureItem/HomeFeatureItem.module.scss   | 10 ++++------
 .../HomeFeatureItem/HomeFeatureItem.tsx           |  6 ++++--
 3 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/components/modules/home/HomeFeature/components/HomeFeature/HomeFeature.tsx b/src/components/modules/home/HomeFeature/components/HomeFeature/HomeFeature.tsx
index 29cc86603..881c38aa6 100644
--- a/src/components/modules/home/HomeFeature/components/HomeFeature/HomeFeature.tsx
+++ b/src/components/modules/home/HomeFeature/components/HomeFeature/HomeFeature.tsx
@@ -6,14 +6,17 @@ import HomeFeatureItem from '../HomeFeatureItem/HomeFeatureItem'
 const HomeFeature = () => {
     return (
         <section className={s.homeFeature}>       
-            <HomeFeatureItem image="firstImg" 
-            children={<span> Webshop owner will <b>upload products at 10:30pm </b>shoppers can buy <b>fresh products at 11pm.</b></span>} />
+            <HomeFeatureItem image="firstImg">
+                <span> Webshop owner will <b>upload products at 10:30pm </b>shoppers can buy <b>fresh products at 11pm.</b></span>
+            </HomeFeatureItem>
 
-            <HomeFeatureItem image="secondImg"
-            children={<span>Most fresh fish and seafood <b>will be listed at 8am </b>from inventory.</span>} />
+            <HomeFeatureItem image="secondImg">
+                <span>Most fresh fish and seafood <b>will be listed at 8am </b>from inventory.</span>
+            </HomeFeatureItem>
 
-            <HomeFeatureItem image="thirdImg"
-            children={<span>Show that food will be shipped in <b>a greengrocery plastic bag</b>.</span>} />
+            <HomeFeatureItem image="thirdImg">
+                <span>Show that food will be shipped in <b>a greengrocery plastic bag</b>.</span>
+            </HomeFeatureItem>
         </section>
     )
 
diff --git a/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.module.scss b/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.module.scss
index 217ed0f98..93d876333 100644
--- a/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.module.scss
+++ b/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.module.scss
@@ -36,17 +36,15 @@
 
     .itemText {
         display: flex;
-        font-size: 1.6rem;
-        line-height: 2.4rem;
-        width: 28rem;
-        height: 9.6rem;
+        max-width: 28rem;
+        min-width: 28rem;
         color: #000;
         margin-right: 2.4rem;
         align-items: center;
         @screen md {
             display: flex;
-            width: 28rem;
-            height: 9.6rem;
+            max-width: 28rem;
+            min-width: 28rem;
             color: #000;
             margin-right: 2.4rem;
             align-items: center;
diff --git a/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.tsx b/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.tsx
index 35610dfff..8dd34cfa9 100644
--- a/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.tsx
+++ b/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.tsx
@@ -13,8 +13,10 @@ const HomeFeatureItem = ({ image, children }: HomeFeatureItemProps) => {
     return (
         <div className={s.homeFeatureItem}>
             <img className={classNames(s.itemImg, {
-            [s[image]]: image,
-          })} alt="home feature item img" /> 
+                [s[image]]: image,
+            })}
+            alt="home feature item img" 
+            /> 
             <div className={s.itemText}>{children}</div>
         </div> 
     )