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,6 +52,7 @@ export const Account = observer(() => {
return ( return (
<div className={styles.user}> <div className={styles.user}>
<div className={styles.banner}> <div className={styles.banner}>
<div className={styles.container}>
<UserIcon <UserIcon
className={styles.avatar} className={styles.avatar}
target={client.user!} target={client.user!}
@ -61,10 +62,7 @@ export const Account = observer(() => {
<div className={styles.userDetail}> <div className={styles.userDetail}>
@{client.user!.username} @{client.user!.username}
<div className={styles.userid}> <div className={styles.userid}>
<Tooltip <Tooltip content={<Text id="app.settings.pages.account.unique_id" />}>
content={
<Text id="app.settings.pages.account.unique_id" />
}>
<HelpCircle size={16} /> <HelpCircle size={16} />
</Tooltip> </Tooltip>
<Tooltip content={<Text id="app.special.copy" />}> <Tooltip content={<Text id="app.special.copy" />}>
@ -75,6 +73,13 @@ export const Account = observer(() => {
</div> </div>
</div> </div>
</div> </div>
<Button
onClick={() => switchPage("profile")}
contrast>
Edit Profile
</Button>
</div>
<div className={styles.details}> <div className={styles.details}>
{( {(
[ [
@ -132,12 +137,6 @@ export const Account = observer(() => {
</div> </div>
))} ))}
</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> <h3>
<Text id="app.settings.pages.account.2fa.title" /> <Text id="app.settings.pages.account.2fa.title" />
</h3> </h3>

View file

@ -8,15 +8,26 @@
display: flex; display: flex;
overflow: hidden; overflow: hidden;
align-items: center; align-items: center;
/*background: var(--secondary-header);*/
border-radius: var(--border-radius); border-radius: var(--border-radius);
.container {
display: flex;
gap: 24px;
align-items: center;
flex-direction: row;
width: 100%;
}
.userDetail { .userDetail {
display: flex; display: flex;
flex-grow: 1;
gap: 2px; gap: 2px;
flex-direction: column; flex-direction: column;
font-size: 1.5rem; font-size: 1.5rem;
font-weight: 600; font-weight: 600;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
} }
.avatar { .avatar {
@ -45,7 +56,7 @@
.details { .details {
display: flex; display: flex;
margin-top: 1em; margin: 1em 0;
gap: 10px; gap: 10px;
flex-direction: column; 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 { .appearance {
.theme { .theme {
min-width: 0; min-width: 0;