From cc5d64ce5a526ad7d8e19f76aaadf9f10a91db4b Mon Sep 17 00:00:00 2001
From: Jy <tanjy0206@gmail.com>
Date: Wed, 31 Jul 2024 19:18:43 +0800
Subject: [PATCH] feat: user settings page

Signed-off-by: Jy <tanjy0206@gmail.com>
---
 client/src/pages/userAccount/userSettings.tsx | 47 ++++++++++++++-----
 1 file changed, 36 insertions(+), 11 deletions(-)

diff --git a/client/src/pages/userAccount/userSettings.tsx b/client/src/pages/userAccount/userSettings.tsx
index 3ae09172..eb279097 100644
--- a/client/src/pages/userAccount/userSettings.tsx
+++ b/client/src/pages/userAccount/userSettings.tsx
@@ -33,26 +33,51 @@ const SettingPage: PageComponent = (props) => {
   );
 
   return (
-    <div {...props} className="mx-auto mb-7 mt-3">
+    <div {...props} className="mx-auto mb-7 mt-3 w-full">
       <div className="flex-col">
         <h1 className=" text-center text-2xl font-bold">My Account</h1>
-        <div className="mx-auto my-7 block max-w-3xl rounded-md bg-primary-dark p-4 text-lg dark:text-text-light">
-          <div className="flex justify-between">
-            <div className="w-1/2 text-left">
-              <h4 className="font-semibold underline">Personal Particulars</h4>
-              <p>Username: {user?.username}</p>
-              <p>Email: {user?.email}</p>
+        <div className="mx-auto my-7 block size-full rounded-md bg-primary-dark p-10 text-lg dark:text-text-light">
+          <div className="box-content flex grid-cols-1 justify-between md:grid-cols-2">
+            <div className="text-left">
+              <h4 className="mb-3 font-semibold underline">
+                Personal Particulars
+              </h4>
+              <div className="grid-cols-2">
+                <p className="mb-3 text-right">
+                  Username:{' '}
+                  <span className="inline-block w-1/2 rounded-md bg-gray-50 px-2 py-1 text-left text-sm">
+                    {user?.username}
+                  </span>
+                </p>
+              </div>
+              <div className="grid-cols-2">
+                <p className="text-right">
+                  Email:{' '}
+                  <span className="inline-block w-1/2 rounded-md bg-gray-50 px-5 py-1 text-left text-sm">
+                    {user?.email}
+                  </span>
+                </p>
+              </div>
             </div>
-            <div className="w-1/2 text-right">
+            <div className="text-left">
               <h4 className="font-semibold underline">Security</h4>
-              <p>Password:</p>
-              <Button variant="secondary" size="default">
+              <p>
+                Password:{' '}
+                <span className="inline-block w-1/2 rounded-md bg-gray-50 px-5 py-1 text-left">
+                  *********
+                </span>
+              </p>
+              <Button
+                variant="secondary"
+                size="default"
+                className="mt-5 px-2 py-1 text-right"
+              >
                 Edit
               </Button>
             </div>
           </div>
         </div>
-        <div className="mx-auto my-7 block max-w-3xl rounded-md bg-primary-dark p-4">
+        <div className="mx-auto my-7 block w-4/5 rounded-md bg-primary-dark p-4">
           <a href="/" className="flex justify-center">
             <Button
               type="submit"