chore: update account setting styles

web/src/components/Settings/AccessTokenSection.tsx

@@ -9,6 +9,7 @@ import { useTranslate } from "@/utils/i18n";
 import showCreateAccessTokenDialog from "../CreateAccessTokenDialog";
 import { showCommonDialog } from "../Dialog/CommonDialog";
 import Icon from "../Icon";
+import LearnMore from "../LearnMore";
 
 const listAccessTokens = async (username: string) => {
   const { data } = await axios.get<ListUserAccessTokensResponse>(`/api/v2/users/${username}/access_tokens`);
@@ -57,12 +58,15 @@ const AccessTokenSection = () => {
     <>
       <div className="mt-8 w-full flex flex-col justify-start items-start space-y-4">
         <div className="w-full">
-          <div className="sm:flex sm:items-center">
-            <div className="sm:flex-auto">
-              <p className="text-sm mt-4 first:mt-2 mb-3 font-mono text-gray-500 dark:text-gray-400">Access Tokens</p>
-              <p className="mt-2 text-sm text-gray-700">A list of all access tokens for your account.</p>
+          <div className="sm:flex sm:items-center sm:justify-between">
+            <div className="sm:flex-auto space-y-1">
+              <p className="flex flex-row justify-start items-center font-medium text-gray-700 dark:text-gray-400">
+                Access Tokens
+                <LearnMore className="ml-2" url="https://usememos.com/docs/local-storage" />
+              </p>
+              <p className="text-sm text-gray-700">A list of all access tokens for your account.</p>
             </div>
-            <div className="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
+            <div className="mt-4 sm:mt-0">
               <Button
                 variant="outlined"
                 color="neutral"

web/src/components/Settings/MyAccountSection.tsx

@@ -13,14 +13,15 @@ const MyAccountSection = () => {
   return (
     <>
       <div className="section-container account-section-container">
-        <p className="text-sm mt-4 first:mt-2 mb-3 font-mono text-gray-500 dark:text-gray-400">{t("setting.account-section.title")}</p>
+        <p className="font-medium my-2 text-gray-700 dark:text-gray-400">{t("setting.account-section.title")}</p>
         <div className="flex flex-row justify-start items-center">
-          <UserAvatar className="mr-2" avatarUrl={user.avatarUrl} />
-          <span className="text-2xl leading-10 font-medium">{user.nickname}</span>
-          <span className="text-base ml-1 text-gray-500 leading-10 dark:text-gray-400">({user.username})</span>
+          <UserAvatar className="mr-2 w-14 h-14" avatarUrl={user.avatarUrl} />
+          <div className="flex flex-col justify-center items-start">
+            <span className="text-2xl font-medium">{user.nickname}</span>
+            <span className="-mt-2 text-base text-gray-500 dark:text-gray-400">({user.username})</span>
+          </div>
         </div>
-        <div className="flex flex-row justify-start items-center text-base text-gray-600 dark:text-gray-400">{user.email}</div>
-        <div className="w-full flex flex-row justify-start items-center mt-2 space-x-2">
+        <div className="w-full flex flex-row justify-start items-center mt-4 space-x-2">
           <Button variant="outlined" onClick={showUpdateAccountDialog}>
             {t("common.edit")}
           </Button>

web/src/components/UserAvatar.tsx

@@ -10,7 +10,7 @@ const UserAvatar = (props: Props) => {
   return (
     <div className={classNames(`w-8 h-8 overflow-clip rounded-full`, className)}>
       <img
-        className="w-full h-auto rounded-full min-w-full min-h-full object-cover dark:opacity-80"
+        className="w-full h-auto rounded-full shadow min-w-full min-h-full object-cover dark:opacity-80"
         src={avatarUrl || "/logo.webp"}
         alt=""
       />

web/src/layouts/Root.tsx

@@ -10,7 +10,7 @@ function Root() {
       </div>
       <div className="w-full max-w-6xl mx-auto flex flex-row justify-center items-start sm:px-4">
         <Header />
-        <main className="w-auto max-w-full flex-grow shrink flex flex-col justify-start items-start">
+        <main className="w-auto max-w-full sm:max-w-[calc(100%-14rem)] flex-grow shrink flex flex-col justify-start items-start">
           <Outlet />
         </main>
       </div>

web/src/pages/Setting.tsx

@@ -94,7 +94,7 @@ const Setting = () => {
             </>
           ) : null}
         </div>
-        <div className="section-content-container sm:max-w-[calc(100%-14rem)]">
+        <div className="section-content-container sm:max-w-[calc(100%-12rem)]">
           <Select
             className="block mb-2 sm:!hidden"
             value={state.selectedSection}