cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-11-26 00:50:56 -05:00
Code Issues Projects Releases Packages Wiki Activity

Settings account page done

Browse source
This commit is contained in:
nizune 2021-08-04 20:00:30 +02:00
parent 7a8b12e15c
commit fcbd0019a0
3 changed files with 19 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/components/ui/fluent/CategoryButton.tsx
View file

@ -11,17 +11,15 @@ interface BaseProps {
const CategoryBase = styled.div<BaseProps>` const CategoryBase = styled.div<BaseProps>`
/*height: 54px;*/ /*height: 54px;*/
padding: 10px 12px; padding: 9.8px 12px;
border-radius: 6px; border-radius: 6px;
margin-bottom: 10px; margin-bottom: 10px;
color: var(--foreground); color: var(--foreground);
background: var(--secondary-header); background: var(--secondary-header);
gap: 12px; gap: 12px;
display: flex; display: flex;
align-items: center; align-items: center;
flex-direction: row; flex-direction: row;
opacity: .7;
> svg { > svg {
flex-shrink: 0; flex-shrink: 0;
@ -77,19 +75,16 @@ const CategoryBase = styled.div<BaseProps>`
&:hover { &:hover {
background: var(--secondary-background); background: var(--secondary-background);
} }
a {
cursor: pointer;
}
`} `}
${(props) => ${(props) =>
props.disabled && props.disabled &&
css` css`
.content, opacity: .4;
/*.content,
.action { .action {
color: var(--tertiary-foreground); color: var(--tertiary-foreground);
} }*/
.action { .action {
font-size: 14px; font-size: 14px;
@ -102,6 +97,9 @@ const CategoryBase = styled.div<BaseProps>`
height: 54px; height: 54px;
.content { .content {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
.title { .title {
text-transform: uppercase; text-transform: uppercase;
font-size: 12px; font-size: 12px;

21
src/pages/settings/panes/Account.tsx
View file

@ -25,7 +25,6 @@ import {
import Tooltip from "../../../components/common/Tooltip"; import Tooltip from "../../../components/common/Tooltip";
import UserIcon from "../../../components/common/user/UserIcon"; import UserIcon from "../../../components/common/user/UserIcon";
import Button from "../../../components/ui/Button"; import Button from "../../../components/ui/Button";
import Overline from "../../../components/ui/Overline";
import Tip from "../../../components/ui/Tip"; import Tip from "../../../components/ui/Tip";
import CategoryButton from "../../../components/ui/fluent/CategoryButton"; import CategoryButton from "../../../components/ui/fluent/CategoryButton";
@ -152,25 +151,21 @@ export const Account = observer(() => {
<Text id="app.settings.pages.account.2fa.title" /> <Text id="app.settings.pages.account.2fa.title" />
</h3> </h3>
<h5> <h5>
<Text id="app.settings.pages.account.2fa.description" /> {/*<Text id="app.settings.pages.account.2fa.description" />*/}
</h5> Two-factor authentication is currently work-in-progress, see {` `}
<CategoryButton
icon={<Lock size={24} color="var(--error)" />}
description={
<>
Two-factor auth is currently work-in-progress, see{" "}
<a <a
href="https://gitlab.insrt.uk/insert/rauth/-/issues/2" href="https://gitlab.insrt.uk/insert/rauth/-/issues/2"
target="_blank" target="_blank"
rel="noreferrer"> rel="noreferrer">
tracking issue here tracking issue here
</a> </a>.
. </h5>
</> <CategoryButton
} icon={<Lock size={24} color="var(--error)" />}
description={"Set up 2FA Authentication on your account."}
disabled disabled
action="chevron"> action="chevron">
Currently not available Set up Two-factor authentication
</CategoryButton> </CategoryButton>
<h3> <h3>
<Text id="app.settings.pages.account.manage.title" /> <Text id="app.settings.pages.account.manage.title" />

4
src/pages/settings/panes/Panes.module.scss
View file

@ -1,8 +1,8 @@
.user { .user {
.banner { .banner {
position: relative; position: relative;
margin-top: 5px; margin-top: 8px;
margin-bottom: 10px; margin-bottom: 15px;
gap: 24px; gap: 24px;
width: 100%; width: 100%;
padding: 12px 10px; padding: 12px 10px;