From 149c12fbe4972133f5a36e6dcf9a3114a6f90d12 Mon Sep 17 00:00:00 2001
From: sonnguyenkieio <sonnguyen@kie.io>
Date: Thu, 16 Sep 2021 12:43:28 +0700
Subject: [PATCH] :art: restyle: Layout for Account Page

---
 src/components/common/Layout/Layout.module.scss | 5 +++++
 src/components/common/Layout/Layout.tsx         | 8 +++++++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/components/common/Layout/Layout.module.scss b/src/components/common/Layout/Layout.module.scss
index 679b0b48f..447ecb107 100644
--- a/src/components/common/Layout/Layout.module.scss
+++ b/src/components/common/Layout/Layout.module.scss
@@ -8,6 +8,11 @@
         max-width: min( 100%, 1536px);
         margin: auto;
     }
+    .bgForAccount {
+        flex: 1;
+        width: 100%;
+        margin: auto;
+    }
 }
 .filter{
     @screen xl {
diff --git a/src/components/common/Layout/Layout.tsx b/src/components/common/Layout/Layout.tsx
index 233c53bbc..b1f2d5c0b 100644
--- a/src/components/common/Layout/Layout.tsx
+++ b/src/components/common/Layout/Layout.tsx
@@ -19,6 +19,8 @@ const Layout: FC<Props> = ({ children }) => {
     const { locale = 'en-US' } = useRouter()
     const { visible: visibleFilter, openModal: openFilter, closeModal: closeFilter } = useModalCommon({ initialValue: false })
 
+    const router = useRouter()
+
     const toggleFilter = () => {
         if (visibleFilter) {
             closeFilter()
@@ -26,11 +28,15 @@ const Layout: FC<Props> = ({ children }) => {
             openFilter()
         }
     }
+
     return (
         <CommerceProvider locale={locale}>
             <div className={s.mainLayout}>
                 <Header toggleFilter={toggleFilter} visibleFilter={visibleFilter} />
-                <main >{children}</main>
+                { router.pathname === "/account" ?
+                    <section className={s.bgForAccount}>{children}</section> :
+                    <main>{children}</main> }
+                {/* <main>{children}</main> */}
                 <div className={s.filter}><MenuNavigationProductList categories={CATEGORY} brands={BRAND} featured={FEATURED} visible={visibleFilter} onClose={closeFilter} /> </div>
                 <ScrollToTop visibilityHeight={1500} />
                 <Footer />