From 3f2d8c2d35a582752c997fec52c46e9b6dedbbf0 Mon Sep 17 00:00:00 2001
From: nizune <9-nizune@users.noreply.gitlab.insrt.uk>
Date: Tue, 6 Jul 2021 14:24:24 +0200
Subject: [PATCH] Update: Account management under settings +strings
---
src/components/ui/Button.tsx | 15 +++++++++++++
src/pages/settings/panes/Account.tsx | 25 +++++++++++++---------
src/pages/settings/panes/Panes.module.scss | 6 ++++++
3 files changed, 36 insertions(+), 10 deletions(-)
diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
index 2b72e4e..0dd41bc 100644
--- a/src/components/ui/Button.tsx
+++ b/src/components/ui/Button.tsx
@@ -1,6 +1,8 @@
import styled, { css } from "styled-components";
interface Props {
+ readonly compact?: boolean;
+ readonly accent?: boolean;
readonly contrast?: boolean;
readonly plain?: boolean;
readonly error?: boolean;
@@ -43,6 +45,19 @@ export default styled.button<Props>`
background: var(--secondary-background);
}
+ ${(props) =>
+ props.compact &&
+ css`
+ height: 32px !important;
+ padding: 2px 12px !important;
+ `}
+
+ ${(props) =>
+ props.accent &&
+ css`
+ background: var(--accent) !important;
+ `}
+
${(props) =>
props.plain &&
css`
diff --git a/src/pages/settings/panes/Account.tsx b/src/pages/settings/panes/Account.tsx
index fe9d79e..8e0741d 100644
--- a/src/pages/settings/panes/Account.tsx
+++ b/src/pages/settings/panes/Account.tsx
@@ -64,7 +64,7 @@ export function Account() {
<div className={styles.userDetail}>
<div className={styles.username}>@{user.username}</div>
<div className={styles.userid}>
- <Tooltip content={"This is your unique user identificator"}>
+ <Tooltip content={<Text id="app.settings.pages.account.tooltip_ulid" />}>
<HelpCircle size={16} />
</Tooltip>
{user._id}
@@ -102,16 +102,21 @@ export function Account() {
</div>
))}
</div>
- {/*<h3>Two-factor Authentication</h3>
- <h5>Coming Soon</h5>
- <h3>Account Management</h3>
- <h5>Disable, schedule your deletion or outright delete your account at any time. This action will log you out and fully delete your account, including your chat history and friends.</h5>
- <Button contrast>
- Disable Account
- </Button>
- <Button contrast>
- Delete Account
+ {/*<h3><Text id="app.settings.pages.account.two_factor_auth.title" /></h3>
+ <h5><Text id="app.settings.pages.account.two_factor_auth.description" /></h5>
+ <Button accent compact>
+ <Text id="app.settings.pages.account.two_factor_auth.add_auth" />
</Button>*/}
+ <h3><Text id="app.settings.pages.account.account_management.title" /></h3>
+ <h5><Text id="app.settings.pages.account.account_management.description" /></h5>
+ <div className={styles.buttons}>
+ {/*<Button error compact>
+ <Text id="app.settings.pages.account.account_management.disable_account" />
+ </Button>*/}
+ <Button error compact>
+ <Text id="app.settings.pages.account.account_management.delete_account" />
+ </Button>
+ </div>
<Tip>
<span>
<Text id="app.settings.tips.account.a" />
diff --git a/src/pages/settings/panes/Panes.module.scss b/src/pages/settings/panes/Panes.module.scss
index 3dfe7a9..91e5267 100644
--- a/src/pages/settings/panes/Panes.module.scss
+++ b/src/pages/settings/panes/Panes.module.scss
@@ -7,6 +7,7 @@
border-radius: 6px;
align-items: center;
background: var(--secondary-header);
+ overflow: hidden;
.avatar {
cursor: pointer;
@@ -96,6 +97,11 @@
flex-grow: 1;
}
}
+
+ .buttons {
+ display: flex;
+ gap: 12px;
+ }
}
.appearance {
--
GitLab