Finished account settings

This commit is contained in:
nizune 2021-08-04 12:56:59 +02:00
parent 90c46155e4
commit 5c9b3a1c86
2 changed files with 52 additions and 28 deletions

View file

@ -52,28 +52,33 @@ export const Account = observer(() => {
return (
<div className={styles.user}>
<div className={styles.banner}>
<UserIcon
className={styles.avatar}
target={client.user!}
size={72}
onClick={() => switchPage("profile")}
/>
<div className={styles.userDetail}>
@{client.user!.username}
<div className={styles.userid}>
<Tooltip
content={
<Text id="app.settings.pages.account.unique_id" />
}>
<HelpCircle size={16} />
</Tooltip>
<Tooltip content={<Text id="app.special.copy" />}>
<a onClick={() => writeClipboard(client.user!._id)}>
{client.user!._id}
</a>
</Tooltip>
<div className={styles.container}>
<UserIcon
className={styles.avatar}
target={client.user!}
size={72}
onClick={() => switchPage("profile")}
/>
<div className={styles.userDetail}>
@{client.user!.username}
<div className={styles.userid}>
<Tooltip content={<Text id="app.settings.pages.account.unique_id" />}>
<HelpCircle size={16} />
</Tooltip>
<Tooltip content={<Text id="app.special.copy" />}>
<a onClick={() => writeClipboard(client.user!._id)}>
{client.user!._id}
</a>
</Tooltip>
</div>
</div>
</div>
<Button
onClick={() => switchPage("profile")}
contrast>
Edit Profile
</Button>
</div>
<div className={styles.details}>
{(
@ -132,12 +137,6 @@ export const Account = observer(() => {
</div>
))}
</div>
<h3>
<Text id="app.settings.pages.account.account_management.title" />
</h3>
<h5>
<Text id="app.settings.pages.account.account_management.description" />
</h5>
<h3>
<Text id="app.settings.pages.account.2fa.title" />
</h3>

View file

@ -8,15 +8,26 @@
display: flex;
overflow: hidden;
align-items: center;
/*background: var(--secondary-header);*/
border-radius: var(--border-radius);
.container {
display: flex;
gap: 24px;
align-items: center;
flex-direction: row;
width: 100%;
}
.userDetail {
display: flex;
flex-grow: 1;
gap: 2px;
flex-direction: column;
font-size: 1.5rem;
font-weight: 600;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.avatar {
@ -45,7 +56,7 @@
.details {
display: flex;
margin-top: 1em;
margin: 1em 0;
gap: 10px;
flex-direction: column;
@ -140,6 +151,20 @@
}
}
@media only screen and (max-width: 800px) {
.user {
.banner {
gap: 18px;
padding: 0;
flex-direction: column;
> button {
width: 100%;
}
}
}
}
.appearance {
.theme {
min-width: 0;