cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-11-22 07:00:58 -05:00
Code Issues Projects Releases Packages Wiki Activity

Finished account settings

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/pages/settings/panes/Account.tsx
View file

@ -52,6 +52,7 @@ export const Account = observer(() => {
return (
<div className={styles.user}>
<div className={styles.banner}>
<div className={styles.container}>
<UserIcon
className={styles.avatar}
target={client.user!}
@ -61,10 +62,7 @@ export const Account = observer(() => {
<div className={styles.userDetail}>
@{client.user!.username}
<div className={styles.userid}>
<Tooltip
content={
<Text id="app.settings.pages.account.unique_id" />
}>
<Tooltip content={<Text id="app.settings.pages.account.unique_id" />}>
<HelpCircle size={16} />
</Tooltip>
<Tooltip content={<Text id="app.special.copy" />}>
@ -75,6 +73,13 @@ export const Account = observer(() => {
</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>

29
src/pages/settings/panes/Panes.module.scss
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;