From 907e11bd5e101033111ee8284e0107b4fde63f0e Mon Sep 17 00:00:00 2001
From: nizune <9-nizune@users.noreply.gitlab.insrt.uk>
Date: Wed, 4 Aug 2021 11:51:53 +0200
Subject: [PATCH] Small fixes to account settings

---
 src/components/common/Tooltip.tsx          |  2 +-
 src/pages/settings/panes/Account.tsx       | 12 +++--------
 src/pages/settings/panes/Panes.module.scss | 23 +++++++++++++++-------
 3 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/src/components/common/Tooltip.tsx b/src/components/common/Tooltip.tsx
index bd7c638f..8699f801 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 e0af6836..4f3f2b5a 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 8d107843..ebddedc7 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