From 5c9b3a1c8630ff9c51d0ce2b0d9e02d169993115 Mon Sep 17 00:00:00 2001
From: nizune <9-nizune@users.noreply.gitlab.insrt.uk>
Date: Wed, 4 Aug 2021 12:56:59 +0200
Subject: [PATCH] Finished account settings

---
 src/pages/settings/panes/Account.tsx       | 51 +++++++++++-----------
 src/pages/settings/panes/Panes.module.scss | 29 +++++++++++-
 2 files changed, 52 insertions(+), 28 deletions(-)

diff --git a/src/pages/settings/panes/Account.tsx b/src/pages/settings/panes/Account.tsx
index b9d5fcd6..818d8b76 100644
--- a/src/pages/settings/panes/Account.tsx
+++ b/src/pages/settings/panes/Account.tsx
@@ -52,28 +52,33 @@ export const Account = observer(() => {
     return (
         <div className={styles.user}>
             <div className={styles.banner}>
-                <UserIcon
-                    className={styles.avatar}
-                    target={client.user!}
-                    size={72}
-                    onClick={() => switchPage("profile")}
-                />
-                <div className={styles.userDetail}>
-                    @{client.user!.username}
-                    <div className={styles.userid}>
-                        <Tooltip
-                            content={
-                                <Text id="app.settings.pages.account.unique_id" />
-                            }>
-                            <HelpCircle size={16} />
-                        </Tooltip>
-                        <Tooltip content={<Text id="app.special.copy" />}>
-                            <a onClick={() => writeClipboard(client.user!._id)}>
-                                {client.user!._id}
-                            </a>
-                        </Tooltip>
+                <div className={styles.container}>
+                    <UserIcon
+                        className={styles.avatar}
+                        target={client.user!}
+                        size={72}
+                        onClick={() => switchPage("profile")}
+                    />
+                    <div className={styles.userDetail}>
+                        @{client.user!.username}
+                        <div className={styles.userid}>
+                            <Tooltip content={<Text id="app.settings.pages.account.unique_id" />}>
+                                <HelpCircle size={16} />
+                            </Tooltip>
+                            <Tooltip content={<Text id="app.special.copy" />}>
+                                <a onClick={() => writeClipboard(client.user!._id)}>
+                                    {client.user!._id}
+                                </a>
+                            </Tooltip>
+                        </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>
diff --git a/src/pages/settings/panes/Panes.module.scss b/src/pages/settings/panes/Panes.module.scss
index 6a166fb1..5fa93ec4 100644
--- a/src/pages/settings/panes/Panes.module.scss
+++ b/src/pages/settings/panes/Panes.module.scss
@@ -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;