feat(refactor): partially rewrite appearance settings

This commit is contained in:
Paul Makles
2022-07-05 15:49:08 +01:00
parent a24e027a48
commit 23dec32476
20 changed files with 443 additions and 507 deletions

View File

@@ -3,65 +3,33 @@ 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 AdvancedOptions from "../../../components/settings/appearance/AdvancedOptions";
import AppearanceOptions from "../../../components/settings/appearance/AppearanceOptions";
import ChatOptions from "../../../components/settings/appearance/ChatOptions";
import ThemeOverrides from "../../../components/settings/appearance/ThemeOverrides";
import ThemeTools from "../../../components/settings/appearance/ThemeTools";
import ThemeSelection from "../../../components/settings/appearance/ThemeSelection";
export const Appearance = observer(() => {
return (
<div className={styles.appearance}>
<ShimThemeBaseSelector />
<ShimThemeShop />
<ThemeSelection />
<hr />
<ShimThemeAccent />
<AppearanceOptions />
<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 />
<ChatOptions />
<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 />
<AdvancedOptions />
</CollapsibleSection>
</div>
);