From 8bcea844091e824e9ef4e8af63608fa50c202343 Mon Sep 17 00:00:00 2001
From: Mike Cao <moocao@gmail.com>
Date: Sun, 4 Feb 2024 23:55:14 -0800
Subject: [PATCH] Updated profile page.

---
 src/app/(main)/profile/ProfileSettings.tsx | 2 +-
 src/app/(main)/profile/page.module.css     | 9 +++++++++
 src/app/(main)/profile/page.tsx            | 5 +++--
 src/components/input/ProfileButton.tsx     | 6 ++----
 4 files changed, 15 insertions(+), 7 deletions(-)
 create mode 100644 src/app/(main)/profile/page.module.css

diff --git a/src/app/(main)/profile/ProfileSettings.tsx b/src/app/(main)/profile/ProfileSettings.tsx
index 4b6816bd..59f30fbe 100644
--- a/src/app/(main)/profile/ProfileSettings.tsx
+++ b/src/app/(main)/profile/ProfileSettings.tsx
@@ -19,7 +19,7 @@ export function ProfileSettings() {
 
   const { username, role } = user;
 
-  const renderRole = value => {
+  const renderRole = (value: string) => {
     if (value === ROLES.user) {
       return formatMessage(labels.user);
     }
diff --git a/src/app/(main)/profile/page.module.css b/src/app/(main)/profile/page.module.css
new file mode 100644
index 00000000..77ab4919
--- /dev/null
+++ b/src/app/(main)/profile/page.module.css
@@ -0,0 +1,9 @@
+.container {
+  margin: 0 auto;
+}
+
+@media screen and (max-width: 768px) {
+  .container {
+    margin: 0;
+  }
+}
diff --git a/src/app/(main)/profile/page.tsx b/src/app/(main)/profile/page.tsx
index 9dbd91f6..d774e528 100644
--- a/src/app/(main)/profile/page.tsx
+++ b/src/app/(main)/profile/page.tsx
@@ -1,13 +1,14 @@
 import ProfileHeader from './ProfileHeader';
 import ProfileSettings from './ProfileSettings';
 import { Metadata } from 'next';
+import styles from './page.module.css';
 
 export default function () {
   return (
-    <>
+    <div className={styles.container}>
       <ProfileHeader />
       <ProfileSettings />
-    </>
+    </div>
   );
 }
 
diff --git a/src/components/input/ProfileButton.tsx b/src/components/input/ProfileButton.tsx
index c689cb2c..2cabbff0 100644
--- a/src/components/input/ProfileButton.tsx
+++ b/src/components/input/ProfileButton.tsx
@@ -2,9 +2,7 @@ import { Key } from 'react';
 import { Icon, Button, PopupTrigger, Popup, Menu, Item, Text } from 'react-basics';
 import { useRouter } from 'next/navigation';
 import Icons from 'components/icons';
-import { useMessages } from 'components/hooks';
-import { useLogin } from 'components/hooks';
-import { useLocale } from 'components/hooks';
+import { useMessages, useLogin, useLocale } from 'components/hooks';
 import { CURRENT_VERSION } from 'lib/constants';
 import Avatar from 'components/common/Avatar';
 import styles from './ProfileButton.module.css';
@@ -18,7 +16,7 @@ export function ProfileButton() {
 
   const handleSelect = (key: Key, close: () => void) => {
     if (key === 'profile') {
-      router.push('/settings/profile');
+      router.push('/profile');
     }
     if (key === 'logout') {
       router.push('/logout');