Merge branch 'master' into cleanup

src/pages/settings/panes/Account.tsx

@@ -5,7 +5,8 @@ import Button from "../../../components/ui/Button";
 import { Users } from "revolt.js/dist/api/objects";
 import { Link, useHistory } from "react-router-dom";
 import Overline from "../../../components/ui/Overline";
-import { At, Key, Envelope } from "@styled-icons/boxicons-regular";
+import { Envelope, Key } from "@styled-icons/boxicons-solid";
+import { At } from "@styled-icons/boxicons-regular";
 import { useContext, useEffect, useState } from "preact/hooks";
 import UserIcon from "../../../components/common/user/UserIcon";
 import { useForceUpdate, useSelf } from "../../../context/revoltjs/hooks";
@@ -47,9 +48,7 @@ export function Account() {
     return (
         <div className={styles.user}>
             <div className={styles.banner}>
-                <Link to="/settings/profile">
-                    <UserIcon target={user} size={72} />
-                </Link>
+                <UserIcon className={styles.avatar} target={user} size={72} onClick={() => switchPage("profile")}/>
                 <div className={styles.username}>@{user.username}</div>
             </div>
             <div className={styles.details}>

src/pages/settings/panes/Appearance.tsx

@@ -2,15 +2,18 @@ import { Text } from "preact-i18n";
 import styles from "./Panes.module.scss";
 import { debounce } from "../../../lib/debounce";
 import Button from "../../../components/ui/Button";
+import Checkbox from "../../../components/ui/Checkbox";
+import ComboBox from "../../../components/ui/ComboBox";
 import InputBox from "../../../components/ui/InputBox";
 import { connectState } from "../../../redux/connector";
 import { WithDispatcher } from "../../../redux/reducers";
 import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
 import ColourSwatches from "../../../components/ui/ColourSwatches";
 import { EmojiPacks, Settings } from "../../../redux/reducers/settings";
-import { Theme, ThemeContext, ThemeOptions } from "../../../context/Theme";
 import { useCallback, useContext, useEffect, useState } from "preact/hooks";
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
+import CollapsibleSection from "../../../components/common/CollapsibleSection";
+import { FONTS, FONT_KEYS, MONOSCAPE_FONTS, MONOSCAPE_FONT_KEYS, Theme, ThemeContext, ThemeOptions } from "../../../context/Theme";
 
 // @ts-ignore
 import pSBC from 'shade-blend-color';
@@ -129,6 +132,25 @@ export function Component(props: Props & WithDispatcher) {
                 </Radio>
             </div>*/}
 
+            <h3>
+                <Text id="app.settings.pages.appearance.font" />
+            </h3>
+            <ComboBox value={theme.font} onChange={e => setTheme({ custom: { font: e.currentTarget.value as any } })}>
+                {
+                    FONT_KEYS
+                        .map(key =>
+                            <option value={key}>{ FONTS[key as keyof typeof FONTS].name }</option>
+                        )
+                }
+            </ComboBox>
+            <p>
+                <Checkbox checked={props.settings.theme?.ligatures === true}
+                    onChange={() => setTheme({ ligatures: !props.settings.theme?.ligatures })}
+                    description={<Text id="app.settings.pages.appearance.ligatures_desc" />}>
+                    <Text id="app.settings.pages.appearance.ligatures" />
+                </Checkbox>
+            </p>
+
             <h3>
                 <Text id="app.settings.pages.appearance.emoji_pack" />
             </h3>
@@ -171,11 +193,7 @@ export function Component(props: Props & WithDispatcher) {
                 </div>
             </div>
 
-            <details>
-                <summary>
-                    <Text id="app.settings.pages.appearance.advanced" />
-                    <div className={styles.divider}></div>
-                </summary>
+            <CollapsibleSection id="settings_advanced_appearance" defaultValue={false} summary={<Text id="app.settings.pages.appearance.advanced" />}>
                 <h3>
                     <Text id="app.settings.pages.appearance.overrides" />
                 </h3>
@@ -263,6 +281,19 @@ export function Component(props: Props & WithDispatcher) {
                         </div>
                     ))}
                 </div>
+
+                <h3>
+                    <Text id="app.settings.pages.appearance.mono_font" />
+                </h3>
+                <ComboBox value={theme.monoscapeFont} onChange={e => setTheme({ custom: { monoscapeFont: e.currentTarget.value as any } })}>
+                    {
+                        MONOSCAPE_FONT_KEYS
+                            .map(key =>
+                                <option value={key}>{ MONOSCAPE_FONTS[key as keyof typeof MONOSCAPE_FONTS].name }</option>
+                            )
+                    }
+                </ComboBox>
+
                 <h3>
                     <Text id="app.settings.pages.appearance.custom_css" />
                 </h3>
@@ -272,7 +303,7 @@ export function Component(props: Props & WithDispatcher) {
                     code
                     value={css}
                     onChange={ev => setCSS(ev.currentTarget.value)} />
-            </details>
+            </CollapsibleSection>
         </div>
     );
 }

src/pages/settings/panes/Notifications.tsx

@@ -39,6 +39,7 @@ export function Component({ options, dispatcher }: Props & WithDispatcher) {
             <Checkbox
                 disabled={!("Notification" in window)}
                 checked={options?.desktopEnabled ?? false}
+                description={<Text id="app.settings.pages.notifications.descriptions.enable_desktop" />}
                 onChange={async desktopEnabled => {
                     if (desktopEnabled) {
                         let permission = await Notification.requestPermission();
@@ -57,13 +58,11 @@ export function Component({ options, dispatcher }: Props & WithDispatcher) {
                 }}
             >
                 <Text id="app.settings.pages.notifications.enable_desktop" />
-                <p>
-                    <Text id="app.settings.pages.notifications.descriptions.enable_desktop" />
-                </p>
             </Checkbox>
             <Checkbox
                 disabled={typeof pushEnabled === "undefined"}
                 checked={pushEnabled ?? false}
+                description={<Text id="app.settings.pages.notifications.descriptions.enable_push" />}
                 onChange={async pushEnabled => {
                     try {
                         const reg = await navigator.serviceWorker?.getRegistration();
@@ -99,9 +98,6 @@ export function Component({ options, dispatcher }: Props & WithDispatcher) {
                 }}
             >
                 <Text id="app.settings.pages.notifications.enable_push" />
-                <p>
-                    <Text id="app.settings.pages.notifications.descriptions.enable_push" />
-                </p>
             </Checkbox>
             <h3>
                 <Text id="app.settings.pages.notifications.sounds" />

src/pages/settings/panes/Panes.module.scss

@@ -8,16 +8,18 @@
         align-items: center;
         background: var(--secondary-header);
 
+        .avatar {
+            cursor: pointer;
+            transition: 0.2s ease filter;
+
+            &:hover {
+                filter: brightness(80%);
+            }
+        }
+
         .username {
             font-size: 24px;
-        }
-
-        a {
-            transition: 0.2s ease filter;
-        }
-
-        a:hover {
-            filter: brightness(80%);
+            font-weight: 600;
         }
     }
 
@@ -32,6 +34,10 @@
             display: flex;
             align-items: center;
             flex-direction: row;
+
+            > svg {
+                flex-shrink: 0;
+            }
         }
 
         .detail {
@@ -321,30 +327,16 @@
     }
 }
 
-.notifications {
-    label {
-        margin-top: 12px;
-    }
-
-    p {
-        margin-top: 0;
-        font-size: 0.9em;
-        color: var(--secondary-foreground);
-    }
-}
-
 .languages {
     .list {
         margin-bottom: 1em;
         
         .entry {
-            padding: 2px 8px;
             height: 50px;
-            border-radius: 4px;
         }
 
         .entry > span > span {
-            gap: 8px;
+            gap: 20px;
             display: flex;
             align-items: center;
             flex-direction: row;

src/pages/settings/panes/Sync.tsx

@@ -25,6 +25,7 @@ export function Component(props: Props & WithDispatcher) {
                     ([ key, title ]) =>
                         <Checkbox
                             checked={(props.options?.disabled ?? []).indexOf(key) === -1}
+                            description={<Text id={`app.settings.pages.sync.descriptions.${key}`} />}
                             onChange={enabled => {
                                 props.dispatcher({
                                     type: enabled ? 'SYNC_ENABLE_KEY' : 'SYNC_DISABLE_KEY',
@@ -33,9 +34,6 @@ export function Component(props: Props & WithDispatcher) {
                             }}
                         >
                             <Text id={`app.settings.pages.${title}`} />
-                            <p>
-                                <Text id={`app.settings.pages.sync.descriptions.${key}`} />
-                            </p>
                         </Checkbox>
                 )
             }