fix(settings): started work on settings cleanup

src/components/ui/fluent/CategoryButton.tsx

@@ -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;

src/pages/settings/Settings.module.scss

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

src/pages/settings/Settings.tsx

@@ -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>
+            }
         />
     );
 }

src/pages/settings/panes/Account.tsx

@@ -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>

src/pages/settings/panes/Appearance.tsx

@@ -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>