mirror of
https://github.com/revoltchat/revite.git
synced 2024-12-25 07:02:10 -05:00
Finished account settings
This commit is contained in:
parent
90c46155e4
commit
5c9b3a1c86
2 changed files with 52 additions and 28 deletions
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue