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