✨ feat: Account Page

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;
+        }
+    }
 }

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}>
+                <div className={s.header}>
                     <HeadingCommon>Account</HeadingCommon>
+                </div>
 
                 <AccountNavigation defaultActiveIndex={activeTab}>
                     <TabPane tabName="Customer Information"> 

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;
+        }
     }
 }

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) => {