diff --git a/src/components/common/Tooltip.tsx b/src/components/common/Tooltip.tsx index bd7c638f212ed58914c6441f5e8b073333f8d635..8699f8010b4be0f66bcfb0d05c8a0bb8b8559ae0 100644 --- a/src/components/common/Tooltip.tsx +++ b/src/components/common/Tooltip.tsx @@ -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> ); } diff --git a/src/pages/settings/panes/Account.tsx b/src/pages/settings/panes/Account.tsx index e0af6836a3b31af4953b9f7113a18208e15173dd..4f3f2b5a3438c24a29c1788c73ab024b6e00f2e4 100644 --- a/src/pages/settings/panes/Account.tsx +++ b/src/pages/settings/panes/Account.tsx @@ -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> diff --git a/src/pages/settings/panes/Panes.module.scss b/src/pages/settings/panes/Panes.module.scss index 8d107843f2db8b300bc4c4091cce19806cd98cc8..ebddedc74f4aa7d6e0406592d2d30530fc2afc47 100644 --- a/src/pages/settings/panes/Panes.module.scss +++ b/src/pages/settings/panes/Panes.module.scss @@ -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; @@ -526,4 +531,8 @@ justify-content: center; align-items: center; } +} + +section { + margin-bottom: 20px; } \ No newline at end of file