Files
handmade-revolt/src/pages/settings/panes/Appearance.tsx
2022-06-12 15:24:00 +01:00

71 lines
2.2 KiB
TypeScript

import { observer } from "mobx-react-lite";
import styles from "./Panes.module.scss";
import { Text } from "preact-i18n";
import { Column } from "@revoltchat/ui";
import CollapsibleSection from "../../../components/common/CollapsibleSection";
import {
ShimThemeBaseSelector,
ShimThemeShop,
ShimThemeAccent,
ShimDisplayFont,
ShimDisplayMonospaceFont,
ShimDisplayLigatures,
ShimDisplayEmoji,
ShimThemeCustomCSS,
ShimDisplaySeasonal,
ShimDisplayTransparency,
ShimShowSendButton,
} from "../../../components/settings/appearance/Shims";
import ThemeOverrides from "../../../components/settings/appearance/ThemeOverrides";
import ThemeTools from "../../../components/settings/appearance/ThemeTools";
export const Appearance = observer(() => {
return (
<div className={styles.appearance}>
<ShimThemeBaseSelector />
<ShimThemeShop />
<hr />
<ShimThemeAccent />
<hr />
<h3>
<Text id="app.settings.pages.appearance.appearance_options.title" />
</h3>
<ShimShowSendButton />
<hr />
<h3>
<Text id="app.settings.pages.appearance.theme_options.title" />
</h3>
<Column>
<ShimDisplayTransparency />
<ShimDisplaySeasonal />
</Column>
<hr />
<ShimDisplayFont />
<ShimDisplayLigatures />
<hr />
<ShimDisplayEmoji />
<hr />
<CollapsibleSection
defaultValue={false}
id="settings_overrides"
summary={<Text id="app.settings.pages.appearance.overrides" />}>
<ThemeTools />
<h3>App</h3>
<ThemeOverrides />
</CollapsibleSection>
<CollapsibleSection
id="settings_advanced_appearance"
defaultValue={false}
summary={<Text id="app.settings.pages.appearance.advanced" />}>
<ShimDisplayMonospaceFont />
<ShimThemeCustomCSS />
</CollapsibleSection>
</div>
);
});
// <DisplayCompactShim />