diff --git a/src/components/ui/fluent/CategoryButton.tsx b/src/components/ui/fluent/CategoryButton.tsx index c01d911779ba5f0744ccc9352abc7f92ebea4cf5..12edbb074c284872bb1a34c2ad21ccdfd7ccaba0 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 30a62b70df34164ecb4f9d9a52c07e3314b272a6..5a52ee35dd1127432fe45966ed19d92042015de1 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 e75eb4f94fa506313fedb2aea594719bf57c176c..ff15965da9b006144d1ea919632067794f7b115b 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;