Small fixes to account settings

This commit is contained in:
nizune 2021-08-04 11:51:53 +02:00
parent 3887029f66
commit 907e11bd5e
3 changed files with 20 additions and 17 deletions

View file

@ -17,7 +17,7 @@ export default function Tooltip(props: Props) {
<Tippy content={content} {...tippyProps}> <Tippy content={content} {...tippyProps}>
{/* {/*
// @ts-expect-error */} // @ts-expect-error */}
<div>{children}</div> <div style={`display: flex;`}>{children}</div>
</Tippy> </Tippy>
); );
} }

View file

@ -59,14 +59,9 @@ export const Account = observer(() => {
onClick={() => switchPage("profile")} onClick={() => switchPage("profile")}
/> />
<div className={styles.userDetail}> <div className={styles.userDetail}>
<div className={styles.username}>
@{client.user!.username} @{client.user!.username}
</div>
<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" />}>
@ -82,7 +77,7 @@ export const Account = observer(() => {
[ [
["username", client.user!.username, <At size={24} />], ["username", client.user!.username, <At size={24} />],
["email", email, <Envelope size={24} />], ["email", email, <Envelope size={24} />],
["password", "***********", <Key size={24} />], ["password", "*********", <Key size={24} />],
] as const ] as const
).map(([field, value, icon]) => ( ).map(([field, value, icon]) => (
<div> <div>
@ -132,7 +127,6 @@ export const Account = observer(() => {
<h5> <h5>
<Text id="app.settings.pages.account.account_management.description" /> <Text id="app.settings.pages.account.account_management.description" />
</h5> </h5>
<h3> <h3>
<Text id="app.settings.pages.account.2fa.title" /> <Text id="app.settings.pages.account.2fa.title" />
</h3> </h3>

View file

@ -1,5 +1,7 @@
.user { .user {
.banner { .banner {
position: relative;
margin-top: 5px;
gap: 24px; gap: 24px;
width: 100%; width: 100%;
padding: 1em; padding: 1em;
@ -9,6 +11,14 @@
background: var(--secondary-header); background: var(--secondary-header);
border-radius: var(--border-radius); border-radius: var(--border-radius);
.userDetail {
display: flex;
gap: 2px;
flex-direction: column;
font-size: 1.5rem;
font-weight: 600;
}
.avatar { .avatar {
cursor: pointer; cursor: pointer;
transition: 0.2s ease filter; transition: 0.2s ease filter;
@ -18,13 +28,8 @@
} }
} }
.username {
font-size: 1.5rem;
font-weight: 600;
}
.userid { .userid {
font-size: .875rem; font-size: 12px;
font-weight: 600; font-weight: 600;
display: flex; display: flex;
align-items: center; align-items: center;
@ -41,6 +46,7 @@
.details { .details {
display: flex; display: flex;
margin-top: 1em; margin-top: 1em;
gap: 10px;
flex-direction: column; flex-direction: column;
> div { > div {
@ -49,7 +55,6 @@
display: flex; display: flex;
align-items: center; align-items: center;
flex-direction: row; flex-direction: row;
margin-bottom: 5px;
> svg { > svg {
flex-shrink: 0; flex-shrink: 0;
@ -527,3 +532,7 @@
align-items: center; align-items: center;
} }
} }
section {
margin-bottom: 20px;
}