Port settings.

src/context/Theme.tsx

@@ -1,5 +1,6 @@
 import { isTouchscreenDevice } from "../lib/isTouchscreenDevice";
 import { createGlobalStyle } from "styled-components";
+import { connectState } from "../redux/connector";
 import { Children } from "../types/Preact";
 import { createContext } from "preact";
 import { Helmet } from "react-helmet";
@@ -116,10 +117,15 @@ export const ThemeContext = createContext<Theme>({} as any);
 
 interface Props {
     children: Children;
+    options?: ThemeOptions;
 }
 
-export default function Theme(props: Props) {
-    const theme = PRESETS.dark;
+function Theme(props: Props) {
+    const theme: Theme = {
+        ...PRESETS["dark"],
+        ...(PRESETS as any)[props.options?.preset as any],
+        ...props.options?.custom
+    };
 
     return (
         <ThemeContext.Provider value={theme}>
@@ -134,7 +140,16 @@ export default function Theme(props: Props) {
                 />
             </Helmet>
             <GlobalTheme theme={theme} />
+            {theme.css && (
+                <style dangerouslySetInnerHTML={{ __html: theme.css }} />
+            )}
             {props.children}
         </ThemeContext.Provider>
     );
 }
+
+export default connectState(Theme, state => {
+    return {
+        options: state.settings.theme
+    };
+});

src/context/intermediate/modals/Onboarding.tsx

@@ -7,8 +7,6 @@ import Button from "../../../components/ui/Button";
 import FormField from "../../../pages/login/FormField";
 import Preloader from "../../../components/ui/Preloader";
 
-// import WideSvg from "../../../assets/wide.svg";
-
 interface Props {
     onClose: () => void;
     callback: (username: string, loginAfterSuccess?: true) => Promise<void>;
@@ -34,6 +32,7 @@ export function OnboardingModal({ onClose, callback }: Props) {
             <div className={styles.header}>
                 <h1>
                     <Text id="app.special.modals.onboarding.welcome" />
+                    <img src="/assets/wide.svg" />
                 </h1>
             </div>
             <div className={styles.form}>

src/context/intermediate/popovers/UserProfile.module.scss

@@ -9,6 +9,7 @@
     background-size: cover;
     border-radius: 8px 8px 0 0;
     background-position: center;
+    background-color: var(--secondary-background);
 
     &[data-force="light"] {
         color: white;

src/context/revoltjs/FileUploads.module.scss

@@ -0,0 +1,82 @@
+.uploader {
+    display: flex;
+    flex-direction: column;
+
+    &.icon {
+        .image {
+            border-radius: 50%;
+        }
+    }
+
+    &.banner {
+        .image {
+            border-radius: 4px;
+        }
+
+        .modify {
+            gap: 4px;
+            flex-direction: row;
+        }
+    }
+
+    .image {
+        cursor: pointer;
+        overflow: hidden;
+        background-size: cover;
+        background-position: center;
+        background-color: var(--secondary-background);
+
+        .uploading {
+            width: 100%;
+            height: 100%;
+            display: grid;
+            place-items: center;
+            background: rgba(0, 0, 0, 0.5);
+        }
+
+        &:hover .edit {
+            opacity: 1;
+        }
+
+        &:active .edit {
+            filter: brightness(0.8);
+        }
+
+        .edit {
+            opacity: 0;
+            width: 100%;
+            height: 100%;
+            display: grid;
+            color: white;
+            place-items: center;
+            background: rgba(95, 95, 95, 0.5);
+            transition: .2s ease-in-out opacity;
+        }
+    }
+
+    .modify {
+        display: flex;
+        margin-top: 5px;
+        font-size: 12px;
+        align-items: center;
+        flex-direction: column;
+        justify-content: center;
+
+        :first-child {
+            cursor: pointer;
+        }
+
+        .small {
+            display: flex;
+            font-size: 10px;
+            flex-direction: column;
+            color: var(--tertiary-foreground);
+        }
+    }
+
+    &[data-uploading="true"] {
+        .image, .modify:first-child {
+            cursor: not-allowed !important;
+        }
+    }
+}

src/context/revoltjs/FileUploads.tsx

@@ -0,0 +1,148 @@
+// ! FIXME: also TEMP CODE
+// ! RE-WRITE WITH STYLED-COMPONENTS
+
+import { Text } from "preact-i18n";
+import { takeError } from "./util";
+import classNames from "classnames";
+import styles from './FileUploads.module.scss';
+import Axios, { AxiosRequestConfig } from "axios";
+import { useContext, useState } from "preact/hooks";
+import { Edit, Plus, X } from "@styled-icons/feather";
+import Preloader from "../../components/ui/Preloader";
+import { determineFileSize } from "../../lib/fileSize";
+import IconButton from '../../components/ui/IconButton';
+import { useIntermediate } from "../intermediate/Intermediate";
+import { AppContext } from "./RevoltClient";
+
+type Props = {
+    maxFileSize: number
+    remove: () => Promise<void>
+    fileType: 'backgrounds' | 'icons' | 'avatars' | 'attachments' | 'banners'
+} & (
+    { behaviour: 'ask', onChange: (file: File) => void } |
+    { behaviour: 'upload', onUpload: (id: string) => Promise<void> }
+) & (
+    { style: 'icon' | 'banner', defaultPreview?: string, previewURL?: string, width?: number, height?: number } |
+    { style: 'attachment', attached: boolean, uploading: boolean, cancel: () => void, size?: number }
+)
+
+export async function uploadFile(autumnURL: string, tag: string, file: File, config?: AxiosRequestConfig) {
+    const formData = new FormData();
+    formData.append("file", file);
+    
+    const res = await Axios.post(autumnURL + "/" + tag, formData, {
+        headers: {
+            "Content-Type": "multipart/form-data"
+        },
+        ...config
+    });
+
+    return res.data.id;
+}
+
+export function FileUploader(props: Props) {
+    const { fileType, maxFileSize, remove } = props;
+    const { openScreen } = useIntermediate();
+    const client = useContext(AppContext);
+
+    const [ uploading, setUploading ] = useState(false);
+
+    function onClick() {
+        if (uploading) return;
+
+        const input = document.createElement("input");
+        input.type = "file";
+
+        input.onchange = async e => {
+            setUploading(true);
+
+            try {
+                const files = (e.target as any)?.files;
+                if (files && files[0]) {
+                    let file = files[0];
+
+                    if (file.size > maxFileSize) {
+                        return openScreen({ id: "error", error: "FileTooLarge" });
+                    }
+
+                    if (props.behaviour === 'ask') {
+                        await props.onChange(file);
+                    } else {
+                        await props.onUpload(await uploadFile(client.configuration!.features.autumn.url, fileType, file));
+                    }
+                }
+            } catch (err) {
+                return openScreen({ id: "error", error: takeError(err) });
+            } finally {
+                setUploading(false);
+            }
+        };
+
+        input.click();
+    }
+
+    function removeOrUpload() {
+        if (uploading) return;
+
+        if (props.style === 'attachment') {
+            if (props.attached) {
+                props.remove();
+            } else {
+                onClick();
+            }
+        } else {
+            if (props.previewURL) {
+                props.remove();
+            } else {
+                onClick();
+            }
+        }
+    }
+
+    if (props.style === 'icon' || props.style === 'banner') {
+        const { style, previewURL, defaultPreview, width, height } = props;
+        return (
+            <div className={classNames(styles.uploader,
+                { [styles.icon]: style === 'icon',
+                [styles.banner]: style === 'banner' })}
+                data-uploading={uploading}>
+                <div className={styles.image}
+                    style={{ backgroundImage:
+                        style === 'icon' ? `url('${previewURL ?? defaultPreview}')` :
+                        (previewURL ? `linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('${previewURL}')` : 'black'),
+                        width, height
+                    }}
+                    onClick={onClick}>
+                    { uploading ?
+                        <div className={styles.uploading}>
+                            <Preloader />
+                        </div> :
+                        <div className={styles.edit}>
+                            <Edit size={30} />
+                        </div> }
+                </div>
+                <div className={styles.modify}>
+                    <span onClick={removeOrUpload}>{ 
+                        uploading ? <Text id="app.main.channel.uploading_file" /> :
+                        props.previewURL ? <Text id="app.settings.actions.remove" /> :
+                        <Text id="app.settings.actions.upload" /> }</span>
+                    <span className={styles.small}><Text id="app.settings.actions.max_filesize" fields={{ filesize: determineFileSize(maxFileSize) }} /></span>
+                </div>
+            </div>
+        )
+    } else if (props.style === 'attachment') {
+        const { attached, uploading, cancel, size } = props;
+        return (
+            <IconButton
+                onClick={() => {
+                    if (uploading) return cancel();
+                    if (attached) return remove();
+                    onClick();
+                }}>
+                { attached ? <X size={size} /> : <Plus size={size} />}
+            </IconButton>
+        )
+    }
+
+    return null;
+}

src/context/revoltjs/RequiresOnline.tsx

@@ -0,0 +1,44 @@
+import { Text } from "preact-i18n";
+import styled from "styled-components";
+import { useContext } from "preact/hooks";
+import { Children } from "../../types/Preact";
+import { WifiOff } from "@styled-icons/feather";
+import Preloader from "../../components/ui/Preloader";
+import { ClientStatus, StatusContext } from "./RevoltClient";
+
+interface Props {
+    children: Children;
+}
+
+const Base = styled.div`
+    gap: 16px;
+    padding: 1em;
+    display: flex;
+    user-select: none;
+    align-items: center;
+    flex-direction: row;
+    justify-content: center;
+    color: var(--tertiary-foreground);
+    background: var(--secondary-header);
+
+    > div {
+        font-size: 18px;
+    }
+`;
+
+export default function RequiresOnline(props: Props) {
+    const status = useContext(StatusContext);
+
+    if (status === ClientStatus.CONNECTING) return <Preloader />;
+    if (status !== ClientStatus.ONLINE && status !== ClientStatus.READY)
+        return (
+            <Base>
+                <WifiOff size={16} />
+                <div>
+                    <Text id="app.special.requires_online" />
+                </div>
+            </Base>
+        );
+
+    return <>{ props.children }</>;
+}