From fcbd0019a015acad6bd76bad82715f1178bfdeeb Mon Sep 17 00:00:00 2001
From: nizune <9-nizune@users.noreply.gitlab.insrt.uk>
Date: Wed, 4 Aug 2021 20:00:30 +0200
Subject: [PATCH] Settings account page done
---
src/components/ui/fluent/CategoryButton.tsx | 16 ++++++-------
src/pages/settings/panes/Account.tsx | 25 +++++++++------------
src/pages/settings/panes/Panes.module.scss | 4 ++--
3 files changed, 19 insertions(+), 26 deletions(-)
diff --git a/src/components/ui/fluent/CategoryButton.tsx b/src/components/ui/fluent/CategoryButton.tsx
index c01d911..12edbb0 100644
--- a/src/components/ui/fluent/CategoryButton.tsx
+++ b/src/components/ui/fluent/CategoryButton.tsx
@@ -11,17 +11,15 @@ interface BaseProps {
const CategoryBase = styled.div<BaseProps>`
/*height: 54px;*/
- padding: 10px 12px;
+ padding: 9.8px 12px;
border-radius: 6px;
margin-bottom: 10px;
-
color: var(--foreground);
background: var(--secondary-header);
gap: 12px;
display: flex;
align-items: center;
flex-direction: row;
- opacity: .7;
> svg {
flex-shrink: 0;
@@ -77,19 +75,16 @@ const CategoryBase = styled.div<BaseProps>`
&:hover {
background: var(--secondary-background);
}
-
- a {
- cursor: pointer;
- }
`}
${(props) =>
props.disabled &&
css`
- .content,
+ opacity: .4;
+ /*.content,
.action {
color: var(--tertiary-foreground);
- }
+ }*/
.action {
font-size: 14px;
@@ -102,6 +97,9 @@ const CategoryBase = styled.div<BaseProps>`
height: 54px;
.content {
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
.title {
text-transform: uppercase;
font-size: 12px;
diff --git a/src/pages/settings/panes/Account.tsx b/src/pages/settings/panes/Account.tsx
index 30a62b7..5a52ee3 100644
--- a/src/pages/settings/panes/Account.tsx
+++ b/src/pages/settings/panes/Account.tsx
@@ -25,7 +25,6 @@ import {
import Tooltip from "../../../components/common/Tooltip";
import UserIcon from "../../../components/common/user/UserIcon";
import Button from "../../../components/ui/Button";
-import Overline from "../../../components/ui/Overline";
import Tip from "../../../components/ui/Tip";
import CategoryButton from "../../../components/ui/fluent/CategoryButton";
@@ -152,25 +151,21 @@ export const Account = observer(() => {
<Text id="app.settings.pages.account.2fa.title" />
</h3>
<h5>
- <Text id="app.settings.pages.account.2fa.description" />
+ {/*<Text id="app.settings.pages.account.2fa.description" />*/}
+ Two-factor authentication is currently work-in-progress, see {` `}
+ <a
+ href="https://gitlab.insrt.uk/insert/rauth/-/issues/2"
+ target="_blank"
+ rel="noreferrer">
+ tracking issue here
+ </a>.
</h5>
<CategoryButton
icon={<Lock size={24} color="var(--error)" />}
- description={
- <>
- Two-factor auth is currently work-in-progress, see{" "}
- <a
- href="https://gitlab.insrt.uk/insert/rauth/-/issues/2"
- target="_blank"
- rel="noreferrer">
- tracking issue here
- </a>
- .
- </>
- }
+ description={"Set up 2FA Authentication on your account."}
disabled
action="chevron">
- Currently not available
+ Set up Two-factor authentication
</CategoryButton>
<h3>
<Text id="app.settings.pages.account.manage.title" />
diff --git a/src/pages/settings/panes/Panes.module.scss b/src/pages/settings/panes/Panes.module.scss
index e75eb4f..ff15965 100644
--- a/src/pages/settings/panes/Panes.module.scss
+++ b/src/pages/settings/panes/Panes.module.scss
@@ -1,8 +1,8 @@
.user {
.banner {
position: relative;
- margin-top: 5px;
- margin-bottom: 10px;
+ margin-top: 8px;
+ margin-bottom: 15px;
gap: 24px;
width: 100%;
padding: 12px 10px;
--
GitLab