fix(settings): started work on settings cleanup

This commit is contained in:
trashtemp 2021-12-23 16:46:50 +01:00 committed by Paul Makles
parent d2d7083542
commit cc76e78db8
5 changed files with 50 additions and 6 deletions

View file

@ -1,4 +1,8 @@
import { ChevronRight, LinkExternal } from "@styled-icons/boxicons-regular";
import {
ChevronRight,
LinkExternal,
Pencil,
} from "@styled-icons/boxicons-regular";
import styled, { css } from "styled-components";
import { Children } from "../../../types/Preact";
@ -11,7 +15,6 @@ interface BaseProps {
}
const CategoryBase = styled.div<BaseProps>`
/*height: 54px;*/
padding: 9.8px 12px;
border-radius: var(--border-radius);
margin-bottom: 10px;
@ -21,6 +24,7 @@ const CategoryBase = styled.div<BaseProps>`
display: flex;
align-items: center;
flex-direction: row;
overflow: hidden;
> svg {
flex-shrink: 0;

View file

@ -244,6 +244,10 @@
margin-top: 0;
font-size: 0.75rem;
font-weight: 400;
> a:hover {
text-decoration: underline;
}
}
h6 {

View file

@ -34,6 +34,7 @@ import {
OperationsContext,
} from "../../context/revoltjs/RevoltClient";
import UserIcon from "../../components/common/user/UserIcon";
import LineDivider from "../../components/ui/LineDivider";
import ButtonItem from "../../components/navigation/items/ButtonItem";
@ -54,7 +55,14 @@ import { Sessions } from "./panes/Sessions";
import { Sync } from "./panes/Sync";
import { ThemeShop } from "./panes/ThemeShop";
const IndexHeader = styled.div``;
const IndexHeader = styled.div`
display: flex;
background: var(--secondary-background);
border-radius: var(--border-radius);
padding: 20px;
align-items: center;
gap: 10px;
`;
export default function Settings() {
const history = useHistory();
@ -261,7 +269,12 @@ export default function Settings() {
</div>
</>
}
indexHeader={<IndexHeader>{/**/}</IndexHeader>}
indexHeader={
<IndexHeader>
<UserIcon size={64} />
Username
</IndexHeader>
}
/>
);
}

View file

@ -1,4 +1,4 @@
import { At, Key, Block } from "@styled-icons/boxicons-regular";
import { At, Key, Block, ListOl } from "@styled-icons/boxicons-regular";
import {
Envelope,
HelpCircle,
@ -165,6 +165,7 @@ export const Account = observer(() => {
</CategoryButton>
))}
</div>
<hr />
<h3>
<Text id="app.settings.pages.account.2fa.title" />
</h3>
@ -184,9 +185,17 @@ export const Account = observer(() => {
icon={<Lock size={24} color="var(--error)" />}
description={"Set up 2FA on your account."}
disabled
action="chevron">
action={<Text id="general.unavailable" />}>
Set up Two-factor authentication
</CategoryButton>
{/*<CategoryButton
icon={<ListOl size={24} />}
description={"View and download your 2FA backup codes."}
disabled
action="chevron">
View my backup codes
</CategoryButton>*/}
<hr />
<h3>
<Text id="app.settings.pages.account.manage.title" />
</h3>

View file

@ -165,6 +165,20 @@ export function Component(props: Props) {
</h3>
<ColourSwatches value={theme.accent} onChange={setAccent} />
{/* TOFIX: Chane this checkbox to turn off the seasonal home page animations*/}
<Checkbox
checked={props.settings.theme?.ligatures === true}
onChange={() =>
setTheme({
ligatures: !props.settings.theme?.ligatures,
})
}
description={
"Displays effects in the home tab during holiday seasons."
}>
Seasonal theme
</Checkbox>
{/*<h3>
<Text id="app.settings.pages.appearance.message_display" />
</h3>