From e3221a48a5e41f6aa1b6871d48c3e56e7d753b9b Mon Sep 17 00:00:00 2001
From: sonnguyenkieio <sonnguyen@kie.io>
Date: Fri, 10 Sep 2021 14:30:26 +0700
Subject: [PATCH] :sparkles: feat: Account Page

---
 .../AccountPage/AccountPage.module.scss       | 17 +++++++++++++++
 .../account/AccountPage/AccountPage.tsx       |  8 ++++---
 .../AccountInfomation.module.scss             | 21 ++++++++++++++++++-
 .../OrderInformation/OrderInformation.tsx     |  1 +
 4 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/src/components/modules/account/AccountPage/AccountPage.module.scss b/src/components/modules/account/AccountPage/AccountPage.module.scss
index faa4582ee..3f8307750 100644
--- a/src/components/modules/account/AccountPage/AccountPage.module.scss
+++ b/src/components/modules/account/AccountPage/AccountPage.module.scss
@@ -6,4 +6,21 @@
     margin-top: -3.2rem;
     padding-top: 3.2rem;
     padding-bottom: 3.2rem;
+
+    @screen md {
+        padding-left: 3.2rem;
+        padding-right: 3.2rem;
+    }
+
+    @screen xl {
+        @apply spacing-horizontal
+    }
+
+    .header {
+        margin-bottom: 1.2rem;
+
+        @screen md {
+            margin-bottom: 3.8rem;
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/components/modules/account/AccountPage/AccountPage.tsx b/src/components/modules/account/AccountPage/AccountPage.tsx
index d150c72f3..a5a0ef79d 100644
--- a/src/components/modules/account/AccountPage/AccountPage.tsx
+++ b/src/components/modules/account/AccountPage/AccountPage.tsx
@@ -19,7 +19,7 @@ const waiting = [
 const delivering = [
     {
         id: "NO 123456",
-        products: ["Tomato", "Fish", "Pork", "Onion"],
+        products: ["Tomato", "Fish", "Pork", "Onion", "Tomato", "Fish", "Pork", "Onion"],
         totalPrice : 1000
     }
 ]
@@ -27,7 +27,7 @@ const delivering = [
 const delivered = [
     {
         id: "NO 123456",
-        products: ["Tomato", "Fish", "Pork", "Onion"],
+        products: ["Tomato", "Fish", "Pork", "Onion", "Tomato", "Fish", "Pork", "Onion"],
         totalPrice : 1000
     }
 ]
@@ -62,7 +62,9 @@ const AccountPage = ({defaultActiveContent="orders"} : AccountPageProps) => {
     return (
         <>
             <section className={s.accountPage}>
-                <HeadingCommon>Account</HeadingCommon>
+                <div className={s.header}>
+                    <HeadingCommon>Account</HeadingCommon>
+                </div>
 
                 <AccountNavigation defaultActiveIndex={activeTab}>
                     <TabPane tabName="Customer Information"> 
diff --git a/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.module.scss b/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.module.scss
index 1308df677..442dae2eb 100644
--- a/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.module.scss
+++ b/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.module.scss
@@ -1,13 +1,27 @@
 @import '../../../../../../styles/utilities';
 
 .accountInfomation {
-    transition: opacity 6s;
+    @apply flex justify-center items-center;
+    text-align: center;
+    margin-top: 1.6rem;
     
+    @screen md {
+        @apply block;
+        text-align: left;
+        margin-top: 0;
+    }
+
     .avatar {
         height: 22rem;
         width: 22rem;
         border-radius: 50%;
+        margin: auto;
         margin-bottom: 4rem;
+        
+
+        @screen md {
+            margin-left: 0
+        }
     }
 
     .accountName {
@@ -33,6 +47,7 @@
 
     .editInfoBtn {
         @apply text-center font-bold custom-border-radius;
+        margin: auto;
         margin-top: 2.4rem;
         margin-bottom: 2.4rem;
         padding: .8rem 1.6rem;
@@ -44,5 +59,9 @@
             @apply cursor-pointer;
             background-color: #FBFBFB;
         }
+
+        @screen md {
+            margin-left: 0;
+        }
     }
 }
\ No newline at end of file
diff --git a/src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.tsx b/src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.tsx
index 98f305b9e..76985b9fd 100644
--- a/src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.tsx
+++ b/src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.tsx
@@ -10,6 +10,7 @@ interface OrderInformationProps {
     waiting: {id: string, products: string[], totalPrice: number}[],
     delivering: {id: string, products: string[], totalPrice: number}[],
     delivered: {id: string, products: string[], totalPrice: number}[],
+    // active?: boolean
 }
 
 const OrderInformation = ({ waiting, delivering, delivered} : OrderInformationProps) => {