YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-06-05 22:09:59 +02:00
Code Issues Packages Projects Releases Wiki Activity

chore: update account setting styles

Browse Source
This commit is contained in:
Steven
2023-09-15 22:09:51 +08:00
parent 4e49d3cb22
commit d1156aa755
5 changed files with 19 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
web/src/components/Settings/AccessTokenSection.tsx
View File

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

13
web/src/components/Settings/MyAccountSection.tsx
View File

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

2
web/src/components/UserAvatar.tsx
View File

@ -10,7 +10,7 @@ const UserAvatar = (props: Props) => {
return ( return (
<div className={classNames(`w-8 h-8 overflow-clip rounded-full`, className)}> <div className={classNames(`w-8 h-8 overflow-clip rounded-full`, className)}>
<img <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"} src={avatarUrl || "/logo.webp"}
alt="" alt=""
/> />

2
web/src/layouts/Root.tsx
View File

@ -10,7 +10,7 @@ function Root() {
</div> </div>
<div className="w-full max-w-6xl mx-auto flex flex-row justify-center items-start sm:px-4"> <div className="w-full max-w-6xl mx-auto flex flex-row justify-center items-start sm:px-4">
<Header /> <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 /> <Outlet />
</main> </main>
</div> </div>

2
web/src/pages/Setting.tsx
View File

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