From c5a084fa3db92f33020b550a7a3894316247b747 Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Thu, 16 Sep 2021 17:59:18 +0700
Subject: [PATCH] :art: styles: account page layout

:%s
---
 src/components/common/Layout/Layout.module.scss   | 15 +++++++++++----
 src/components/common/Layout/Layout.tsx           |  8 +++++---
 .../account/AccountPage/AccountPage.module.scss   |  4 ++--
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/components/common/Layout/Layout.module.scss b/src/components/common/Layout/Layout.module.scss
index 679b0b48f..97ed29624 100644
--- a/src/components/common/Layout/Layout.module.scss
+++ b/src/components/common/Layout/Layout.module.scss
@@ -2,15 +2,22 @@
     display: flex;
     flex-direction: column;
     min-height: 100vh;
-    > main {
+    .wrapperWithBg {
+        @apply bg-background-gray;
+        width: 100%;
+        margin-top: -3.2rem;
+    }
+
+    > main,
+    .wrapperWithBg > main {
         flex: 1;
         width: 100%;
-        max-width: min( 100%, 1536px);
+        max-width: min(100%, 1536px);
         margin: auto;
     }
 }
-.filter{
+.filter {
     @screen xl {
         display: none;
     }
-}
\ No newline at end of file
+}
diff --git a/src/components/common/Layout/Layout.tsx b/src/components/common/Layout/Layout.tsx
index 5d1a61985..979e55c84 100644
--- a/src/components/common/Layout/Layout.tsx
+++ b/src/components/common/Layout/Layout.tsx
@@ -33,10 +33,12 @@ const Layout: FC<Props> = ({ children }) => {
         <CommerceProvider locale={locale}>
             <div className={s.mainLayout}>
                 <Header toggleFilter={toggleFilter} visibleFilter={visibleFilter} />
-                {   
+                {
                     router.pathname === ROUTE.ACCOUNT ?
-                    <section>{children}</section> :
-                    <main>{children}</main> 
+                        <section className={s.wrapperWithBg}>
+                            <main>{children}</main>
+                        </section> :
+                        <main>{children}</main>
                 }
                 <div className={s.filter}><MenuNavigationProductList categories={CATEGORY} brands={BRAND} featured={FEATURED} visible={visibleFilter} onClose={closeFilter} /> </div>
                 <ScrollToTop visibilityHeight={1500} />
diff --git a/src/components/modules/account/AccountPage/AccountPage.module.scss b/src/components/modules/account/AccountPage/AccountPage.module.scss
index 5660d7707..89beebd86 100644
--- a/src/components/modules/account/AccountPage/AccountPage.module.scss
+++ b/src/components/modules/account/AccountPage/AccountPage.module.scss
@@ -1,14 +1,14 @@
 @import '../../../../styles/utilities';
 
 .accountPage {
-    background-color: #F5F4F2;
-    margin-top: -3.2rem;
+    @apply bg-background-gray;
     padding: 3.2rem 2rem;
     min-height: 70rem;
 
     @screen md {
         padding-left: 2.8rem;
         padding-right: 2.8rem;
+        padding: 5.4rem 2rem;
     }
 
     @screen lg {