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 { 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"

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

@ -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>

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

@ -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=""
/>