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}>
{/*
// @ts-expect-error */}
<div>{children}</div>
<div style={`display: flex;`}>{children}</div>
</Tippy>
);
}

View file

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

View file

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