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 b9d5fcd..818d8b7 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 6a166fb..5fa93ec 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;
--
GitLab