From 23dec324765362cfd71545b277a1848ad118f2ef Mon Sep 17 00:00:00 2001 From: Paul Makles Date: Tue, 5 Jul 2022 15:49:08 +0100 Subject: [PATCH] feat(refactor): partially rewrite appearance settings --- package.json | 2 +- .../settings/appearance/AdvancedOptions.tsx | 63 ++++ .../settings/appearance/AppearanceOptions.tsx | 63 ++++ .../settings/appearance/ChatOptions.tsx | 56 ++++ src/components/settings/appearance/Shims.tsx | 290 ------------------ .../settings/appearance/ThemeOverrides.tsx | 175 +---------- .../settings/appearance/ThemeSelection.tsx | 64 ++++ .../appearance/{ => legacy}/EmojiSelector.tsx | 2 +- .../settings/appearance/legacy/README.md | 1 + .../{ => legacy}/ThemeBaseSelector.tsx | 0 .../appearance/legacy/ThemeOverrides.tsx | 170 ++++++++++ .../appearance/{ => legacy}/ThemeTools.tsx | 6 +- .../appearance/{ => legacy}/assets/dark.svg | 0 .../appearance/{ => legacy}/assets/light.svg | 0 .../{ => legacy}/assets/mutant_emoji.svg | 0 .../{ => legacy}/assets/noto_emoji.svg | 0 .../{ => legacy}/assets/openmoji_emoji.svg | 0 .../{ => legacy}/assets/twemoji_emoji.svg | 0 src/pages/settings/panes/Appearance.tsx | 48 +-- yarn.lock | 10 +- 20 files changed, 443 insertions(+), 507 deletions(-) create mode 100644 src/components/settings/appearance/AdvancedOptions.tsx create mode 100644 src/components/settings/appearance/AppearanceOptions.tsx create mode 100644 src/components/settings/appearance/ChatOptions.tsx delete mode 100644 src/components/settings/appearance/Shims.tsx create mode 100644 src/components/settings/appearance/ThemeSelection.tsx rename src/components/settings/appearance/{ => legacy}/EmojiSelector.tsx (98%) create mode 100644 src/components/settings/appearance/legacy/README.md rename src/components/settings/appearance/{ => legacy}/ThemeBaseSelector.tsx (100%) create mode 100644 src/components/settings/appearance/legacy/ThemeOverrides.tsx rename src/components/settings/appearance/{ => legacy}/ThemeTools.tsx (93%) rename src/components/settings/appearance/{ => legacy}/assets/dark.svg (100%) rename src/components/settings/appearance/{ => legacy}/assets/light.svg (100%) rename src/components/settings/appearance/{ => legacy}/assets/mutant_emoji.svg (100%) rename src/components/settings/appearance/{ => legacy}/assets/noto_emoji.svg (100%) rename src/components/settings/appearance/{ => legacy}/assets/openmoji_emoji.svg (100%) rename src/components/settings/appearance/{ => legacy}/assets/twemoji_emoji.svg (100%) diff --git a/package.json b/package.json index 6ee629bb..a22ed1cf 100644 --- a/package.json +++ b/package.json @@ -73,7 +73,7 @@ "@hcaptcha/react-hcaptcha": "^0.3.6", "@insertish/vite-plugin-babel-macros": "^1.0.5", "@preact/preset-vite": "^2.0.0", - "@revoltchat/ui": "1.0.54", + "@revoltchat/ui": "1.0.58", "@rollup/plugin-replace": "^2.4.2", "@styled-icons/boxicons-logos": "^10.38.0", "@styled-icons/boxicons-regular": "^10.38.0", diff --git a/src/components/settings/appearance/AdvancedOptions.tsx b/src/components/settings/appearance/AdvancedOptions.tsx new file mode 100644 index 00000000..d6b1c2a6 --- /dev/null +++ b/src/components/settings/appearance/AdvancedOptions.tsx @@ -0,0 +1,63 @@ +import { observer } from "mobx-react-lite"; + +import { Text } from "preact-i18n"; + +import { ObservedInputElement } from "@revoltchat/ui"; + +import TextAreaAutoSize from "../../../lib/TextAreaAutoSize"; + +import { useApplicationState } from "../../../mobx/State"; + +import { + MonospaceFonts, + MONOSPACE_FONTS, + MONOSPACE_FONT_KEYS, +} from "../../../context/Theme"; + +/** + * ! LEGACY + * Component providing a way to edit custom CSS. + */ +export const ShimThemeCustomCSS = observer(() => { + const theme = useApplicationState().settings.theme; + return ( + <> +

+ +

+ theme.setCSS(ev.currentTarget.value)} + /> + + ); +}); + +export default function AdvancedOptions() { + const settings = useApplicationState().settings; + return ( + <> + {/** Combo box of available monospaced fonts */} +

+ +

+ settings.theme.getMonospaceFont()} + onChange={(value) => + settings.theme.setMonospaceFont(value as MonospaceFonts) + } + options={MONOSPACE_FONT_KEYS.map((value) => ({ + value, + name: MONOSPACE_FONTS[value as keyof typeof MONOSPACE_FONTS] + .name, + }))} + /> + {/** Custom CSS */} + + + ); +} diff --git a/src/components/settings/appearance/AppearanceOptions.tsx b/src/components/settings/appearance/AppearanceOptions.tsx new file mode 100644 index 00000000..3d2bd73a --- /dev/null +++ b/src/components/settings/appearance/AppearanceOptions.tsx @@ -0,0 +1,63 @@ +import { Text } from "preact-i18n"; + +import { Column, ObservedInputElement } from "@revoltchat/ui"; + +import { useApplicationState } from "../../../mobx/State"; + +export default function AppearanceOptions() { + const settings = useApplicationState().settings; + + return ( + <> +

+ +

+ {/* Option to toggle "send message" button on desktop. */} + + settings.get("appearance:show_send_button") ?? false + } + onChange={(v) => settings.set("appearance:show_send_button", v)} + title={ + + } + description={ + + } + /> +
+

+ +

+ + {/* Option to toggle transparency effects in-app. */} + + settings.get("appearance:transparency") ?? true + } + onChange={(v) => settings.set("appearance:transparency", v)} + title={ + + } + description={ + + } + /> + {/* Option to toggle seasonal effects. */} + settings.get("appearance:seasonal") ?? true} + onChange={(v) => settings.set("appearance:seasonal", v)} + title={ + + } + description={ + + } + /> + + + ); +} diff --git a/src/components/settings/appearance/ChatOptions.tsx b/src/components/settings/appearance/ChatOptions.tsx new file mode 100644 index 00000000..a6a0aa11 --- /dev/null +++ b/src/components/settings/appearance/ChatOptions.tsx @@ -0,0 +1,56 @@ +import { observer } from "mobx-react-lite"; + +import { Text } from "preact-i18n"; + +import { Column, ObservedInputElement } from "@revoltchat/ui"; + +import { useApplicationState } from "../../../mobx/State"; + +import { FONTS, Fonts, FONT_KEYS } from "../../../context/Theme"; + +import { ShimDisplayEmoji } from "../appearance_legacy/Shims"; + +export default observer(() => { + const settings = useApplicationState().settings; + + return ( + <> + + {/* Combo box of available fonts. */} +

+ +

+ settings.theme.getFont()} + onChange={(value) => settings.theme.setFont(value as Fonts)} + options={FONT_KEYS.map((value) => ({ + value, + name: FONTS[value as keyof typeof FONTS].name, + }))} + /> + {/* Option to toggle liagures for supported fonts. */} + {settings.theme.getFont() === "Inter" && ( + + settings.get("appearance:ligatures") ?? true + } + onChange={(v) => + settings.set("appearance:ligatures", v) + } + title={ + + } + description={ + + } + /> + )} + +
+ {/* Emoji pack selector */} + + + ); +}); diff --git a/src/components/settings/appearance/Shims.tsx b/src/components/settings/appearance/Shims.tsx deleted file mode 100644 index 4eeab82c..00000000 --- a/src/components/settings/appearance/Shims.tsx +++ /dev/null @@ -1,290 +0,0 @@ -import { Brush } from "@styled-icons/boxicons-solid"; -import { observer } from "mobx-react-lite"; -import { Link } from "react-router-dom"; -// @ts-expect-error shade-blend-color does not have typings. -import pSBC from "shade-blend-color"; - -import { Text } from "preact-i18n"; - -import { - CategoryButton, - Checkbox, - ColourSwatches, - ComboBox, - Radio, -} from "@revoltchat/ui"; - -import TextAreaAutoSize from "../../../lib/TextAreaAutoSize"; - -import { useApplicationState } from "../../../mobx/State"; - -import { - Fonts, - FONTS, - FONT_KEYS, - MonospaceFonts, - MONOSPACE_FONTS, - MONOSPACE_FONT_KEYS, -} from "../../../context/Theme"; - -import { EmojiSelector } from "./EmojiSelector"; -import { ThemeBaseSelector } from "./ThemeBaseSelector"; - -/** - * Component providing a way to switch the base theme being used. - */ -export const ShimThemeBaseSelector = observer(() => { - const theme = useApplicationState().settings.theme; - return ( - { - theme.setBase(base); - theme.reset(); - }} - /> - ); -}); - -/** - * Component providing a link to the theme shop. - * Only appears if experiment is enabled. - */ -export const ShimThemeShop = () => { - return ( - - } - action="chevron" - description={ - - }> - - - - ); -}; - -/** - * Component providing a way to change current accent colour. - */ -export const ShimThemeAccent = observer(() => { - const theme = useApplicationState().settings.theme; - return ( - <> -

- -

- { - theme.setVariable("accent", colour as string); - theme.setVariable("scrollbar-thumb", pSBC(-0.2, colour)); - }} - /> - - ); -}); - -/** - * Component providing a way to edit custom CSS. - */ -export const ShimThemeCustomCSS = observer(() => { - const theme = useApplicationState().settings.theme; - return ( - <> -

- -

- theme.setCSS(ev.currentTarget.value)} - /> - - ); -}); - -/** - * Component providing a way to switch between compact and normal message view. - */ -export const ShimDisplayCompact = () => { - // TODO: WIP feature - return ( - <> -

- -

-
- - } - description={ - - } - value={true} - /> - - } - description={ - - } - value={false} - disabled - /> -
- - ); -}; - -/** - * Component providing a way to change primary text font. - */ -export const ShimDisplayFont = observer(() => { - const theme = useApplicationState().settings.theme; - return ( - <> -

- -

- theme.setFont(e.currentTarget.value as Fonts)}> - {FONT_KEYS.map((key) => ( - - ))} - - - ); -}); - -/** - * Component providing a way to change secondary, monospace text font. - */ -export const ShimDisplayMonospaceFont = observer(() => { - const theme = useApplicationState().settings.theme; - return ( - <> -

- -

- - theme.setMonospaceFont( - e.currentTarget.value as MonospaceFonts, - ) - }> - {MONOSPACE_FONT_KEYS.map((key) => ( - - ))} - - - ); -}); - -/** - * Component providing a way to toggle font ligatures. - */ -export const ShimDisplayLigatures = observer(() => { - const settings = useApplicationState().settings; - if (settings.theme.getFont() !== "Inter") return null; - - return ( - <> - settings.set("appearance:ligatures", v)} - title={} - description={ - - } - /> - - ); -}); - -/** - * Component providing a way to toggle showing the send button on desktop. - */ -export const ShimShowSendButton = observer(() => { - const settings = useApplicationState().settings; - - return ( - settings.set("appearance:show_send_button", v)} - title={ - - } - description={ - - } - /> - ); -}); - -/** - * Component providing a way to toggle seasonal themes. - */ -export const ShimDisplaySeasonal = observer(() => { - const settings = useApplicationState().settings; - - return ( - settings.set("appearance:seasonal", v)} - title={ - - } - description={ - - } - /> - ); -}); - -/** - * Component providing a way to toggle transparency effects. - */ -export const ShimDisplayTransparency = observer(() => { - const settings = useApplicationState().settings; - - return ( - settings.set("appearance:transparency", v)} - title={ - - } - description={ - - } - /> - ); -}); - -/** - * Component providing a way to change emoji pack. - */ -export const ShimDisplayEmoji = observer(() => { - const settings = useApplicationState().settings; - return ( - settings.set("appearance:emoji", v)} - /> - ); -}); diff --git a/src/components/settings/appearance/ThemeOverrides.tsx b/src/components/settings/appearance/ThemeOverrides.tsx index 9fb7b307..c92942ad 100644 --- a/src/components/settings/appearance/ThemeOverrides.tsx +++ b/src/components/settings/appearance/ThemeOverrides.tsx @@ -1,170 +1,11 @@ -import { Pencil } from "@styled-icons/boxicons-regular"; -import { observer } from "mobx-react-lite"; -import styled from "styled-components/macro"; - -import { InputBox } from "@revoltchat/ui"; - -import { useDebounceCallback } from "../../../lib/debounce"; - -import { useApplicationState } from "../../../mobx/State"; - -import { Variables } from "../../../context/Theme"; - -const Container = styled.div` - row-gap: 8px; - display: grid; - column-gap: 16px; - grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); - margin-bottom: 20px; - - .entry { - padding: 12px; - margin-top: 8px; - border: 1px solid black; - border-radius: var(--border-radius); - - span { - flex: 1; - display: block; - font-weight: 600; - font-size: 0.875rem; - margin-bottom: 8px; - text-transform: capitalize; - - background: inherit; - background-clip: text; - -webkit-background-clip: text; - } - - .override { - gap: 8px; - display: flex; - - .picker { - width: 38px; - height: 38px; - display: grid; - cursor: pointer; - place-items: center; - border-radius: var(--border-radius); - background: var(--primary-background); - } - - input[type="text"] { - width: 0; - min-width: 0; - flex-grow: 1; - } - } - - .input { - width: 0; - height: 0; - position: relative; - - input { - opacity: 0; - border: none; - display: block; - cursor: pointer; - position: relative; - - top: 48px; - } - } - } -`; - -export default observer(() => { - const theme = useApplicationState().settings.theme; - const setVariable = useDebounceCallback( - (data) => { - const { key, value } = data as { key: Variables; value: string }; - theme.setVariable(key, value); - }, - [theme], - 100, - ); +import Overrides from "./legacy/ThemeOverrides"; +import ThemeTools from "./legacy/ThemeTools"; +export default function ThemeOverrides() { return ( - - {( - [ - "accent", - "background", - "foreground", - "primary-background", - "primary-header", - "secondary-background", - "secondary-foreground", - "secondary-header", - "tertiary-background", - "tertiary-foreground", - "block", - "message-box", - "mention", - "scrollbar-thumb", - "scrollbar-track", - "status-online", - "status-away", - "status-busy", - "status-streaming", - "status-invisible", - "success", - "warning", - "error", - "hover", - ] as const - ).map((key) => ( -
-
- - setVariable({ - key, - value: el.currentTarget.value, - }) - } - /> -
- - {key} - -
-
- e.currentTarget.parentElement?.parentElement - ?.querySelector("input") - ?.click() - }> - -
- - setVariable({ - key, - value: el.currentTarget.value, - }) - } - /> -
-
- ))} - + <> + + + ); -}); +} diff --git a/src/components/settings/appearance/ThemeSelection.tsx b/src/components/settings/appearance/ThemeSelection.tsx new file mode 100644 index 00000000..a47b4e16 --- /dev/null +++ b/src/components/settings/appearance/ThemeSelection.tsx @@ -0,0 +1,64 @@ +import { Brush } from "@styled-icons/boxicons-solid"; +import { observer } from "mobx-react-lite"; +import { Link } from "react-router-dom"; +// @ts-expect-error shade-blend-color does not have typings. +import pSBC from "shade-blend-color"; + +import { Text } from "preact-i18n"; + +import { CategoryButton, ObservedInputElement } from "@revoltchat/ui"; + +import { useApplicationState } from "../../../mobx/State"; + +import { ThemeBaseSelector } from "./legacy/ThemeBaseSelector"; + +/** + * ! LEGACY + * Component providing a way to switch the base theme being used. + */ +export const ShimThemeBaseSelector = observer(() => { + const theme = useApplicationState().settings.theme; + return ( + { + theme.setBase(base); + theme.reset(); + }} + /> + ); +}); + +export default function ThemeSelection() { + const theme = useApplicationState().settings.theme; + + return ( + <> + {/** Allow users to change base theme */} + + {/** Provide a link to the theme shop */} + + } + action="chevron" + description={ + + }> + + + +
+

+ +

+ { + theme.setVariable("accent", colour as string); + theme.setVariable("scrollbar-thumb", pSBC(-0.2, colour)); + }} + /> + + ); +} diff --git a/src/components/settings/appearance/EmojiSelector.tsx b/src/components/settings/appearance/legacy/EmojiSelector.tsx similarity index 98% rename from src/components/settings/appearance/EmojiSelector.tsx rename to src/components/settings/appearance/legacy/EmojiSelector.tsx index 3dea0564..34bb370f 100644 --- a/src/components/settings/appearance/EmojiSelector.tsx +++ b/src/components/settings/appearance/legacy/EmojiSelector.tsx @@ -7,7 +7,7 @@ import notoSVG from "./assets/noto_emoji.svg"; import openmojiSVG from "./assets/openmoji_emoji.svg"; import twemojiSVG from "./assets/twemoji_emoji.svg"; -import { EmojiPack } from "../../common/Emoji"; +import { EmojiPack } from "../../../common/Emoji"; const Container = styled.div` gap: 12px; diff --git a/src/components/settings/appearance/legacy/README.md b/src/components/settings/appearance/legacy/README.md new file mode 100644 index 00000000..6a1782d5 --- /dev/null +++ b/src/components/settings/appearance/legacy/README.md @@ -0,0 +1 @@ +These components need to be ported to @revoltchat/ui. diff --git a/src/components/settings/appearance/ThemeBaseSelector.tsx b/src/components/settings/appearance/legacy/ThemeBaseSelector.tsx similarity index 100% rename from src/components/settings/appearance/ThemeBaseSelector.tsx rename to src/components/settings/appearance/legacy/ThemeBaseSelector.tsx diff --git a/src/components/settings/appearance/legacy/ThemeOverrides.tsx b/src/components/settings/appearance/legacy/ThemeOverrides.tsx new file mode 100644 index 00000000..3483b510 --- /dev/null +++ b/src/components/settings/appearance/legacy/ThemeOverrides.tsx @@ -0,0 +1,170 @@ +import { Pencil } from "@styled-icons/boxicons-regular"; +import { observer } from "mobx-react-lite"; +import styled from "styled-components/macro"; + +import { InputBox } from "@revoltchat/ui"; + +import { useDebounceCallback } from "../../../../lib/debounce"; + +import { useApplicationState } from "../../../../mobx/State"; + +import { Variables } from "../../../../context/Theme"; + +const Container = styled.div` + row-gap: 8px; + display: grid; + column-gap: 16px; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + margin-bottom: 20px; + + .entry { + padding: 12px; + margin-top: 8px; + border: 1px solid black; + border-radius: var(--border-radius); + + span { + flex: 1; + display: block; + font-weight: 600; + font-size: 0.875rem; + margin-bottom: 8px; + text-transform: capitalize; + + background: inherit; + background-clip: text; + -webkit-background-clip: text; + } + + .override { + gap: 8px; + display: flex; + + .picker { + width: 38px; + height: 38px; + display: grid; + cursor: pointer; + place-items: center; + border-radius: var(--border-radius); + background: var(--primary-background); + } + + input[type="text"] { + width: 0; + min-width: 0; + flex-grow: 1; + } + } + + .input { + width: 0; + height: 0; + position: relative; + + input { + opacity: 0; + border: none; + display: block; + cursor: pointer; + position: relative; + + top: 48px; + } + } + } +`; + +export default observer(() => { + const theme = useApplicationState().settings.theme; + const setVariable = useDebounceCallback( + (data) => { + const { key, value } = data as { key: Variables; value: string }; + theme.setVariable(key, value); + }, + [theme], + 100, + ); + + return ( + + {( + [ + "accent", + "background", + "foreground", + "primary-background", + "primary-header", + "secondary-background", + "secondary-foreground", + "secondary-header", + "tertiary-background", + "tertiary-foreground", + "block", + "message-box", + "mention", + "scrollbar-thumb", + "scrollbar-track", + "status-online", + "status-away", + "status-busy", + "status-streaming", + "status-invisible", + "success", + "warning", + "error", + "hover", + ] as const + ).map((key) => ( +
+
+ + setVariable({ + key, + value: el.currentTarget.value, + }) + } + /> +
+ + {key} + +
+
+ e.currentTarget.parentElement?.parentElement + ?.querySelector("input") + ?.click() + }> + +
+ + setVariable({ + key, + value: el.currentTarget.value, + }) + } + /> +
+
+ ))} + + ); +}); diff --git a/src/components/settings/appearance/ThemeTools.tsx b/src/components/settings/appearance/legacy/ThemeTools.tsx similarity index 93% rename from src/components/settings/appearance/ThemeTools.tsx rename to src/components/settings/appearance/legacy/ThemeTools.tsx index 068f15f7..bd3a3f5b 100644 --- a/src/components/settings/appearance/ThemeTools.tsx +++ b/src/components/settings/appearance/legacy/ThemeTools.tsx @@ -5,11 +5,11 @@ import { Text } from "preact-i18n"; import { Button } from "@revoltchat/ui"; -import { useApplicationState } from "../../../mobx/State"; +import { useApplicationState } from "../../../../mobx/State"; -import { useIntermediate } from "../../../context/intermediate/Intermediate"; +import { useIntermediate } from "../../../../context/intermediate/Intermediate"; -import Tooltip from "../../common/Tooltip"; +import Tooltip from "../../../common/Tooltip"; const Actions = styled.div` gap: 8px; diff --git a/src/components/settings/appearance/assets/dark.svg b/src/components/settings/appearance/legacy/assets/dark.svg similarity index 100% rename from src/components/settings/appearance/assets/dark.svg rename to src/components/settings/appearance/legacy/assets/dark.svg diff --git a/src/components/settings/appearance/assets/light.svg b/src/components/settings/appearance/legacy/assets/light.svg similarity index 100% rename from src/components/settings/appearance/assets/light.svg rename to src/components/settings/appearance/legacy/assets/light.svg diff --git a/src/components/settings/appearance/assets/mutant_emoji.svg b/src/components/settings/appearance/legacy/assets/mutant_emoji.svg similarity index 100% rename from src/components/settings/appearance/assets/mutant_emoji.svg rename to src/components/settings/appearance/legacy/assets/mutant_emoji.svg diff --git a/src/components/settings/appearance/assets/noto_emoji.svg b/src/components/settings/appearance/legacy/assets/noto_emoji.svg similarity index 100% rename from src/components/settings/appearance/assets/noto_emoji.svg rename to src/components/settings/appearance/legacy/assets/noto_emoji.svg diff --git a/src/components/settings/appearance/assets/openmoji_emoji.svg b/src/components/settings/appearance/legacy/assets/openmoji_emoji.svg similarity index 100% rename from src/components/settings/appearance/assets/openmoji_emoji.svg rename to src/components/settings/appearance/legacy/assets/openmoji_emoji.svg diff --git a/src/components/settings/appearance/assets/twemoji_emoji.svg b/src/components/settings/appearance/legacy/assets/twemoji_emoji.svg similarity index 100% rename from src/components/settings/appearance/assets/twemoji_emoji.svg rename to src/components/settings/appearance/legacy/assets/twemoji_emoji.svg diff --git a/src/pages/settings/panes/Appearance.tsx b/src/pages/settings/panes/Appearance.tsx index c3c994f4..d964f187 100644 --- a/src/pages/settings/panes/Appearance.tsx +++ b/src/pages/settings/panes/Appearance.tsx @@ -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 (
- - +
- +
-

- -

- -
-

- -

- - - - -
- - -
- +
}> - -

App

 }> - - +
); diff --git a/yarn.lock b/yarn.lock index 4f43ba05..130f5d85 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2231,9 +2231,9 @@ __metadata: languageName: node linkType: hard -"@revoltchat/ui@npm:1.0.54": - version: 1.0.54 - resolution: "@revoltchat/ui@npm:1.0.54" +"@revoltchat/ui@npm:1.0.58": + version: 1.0.58 + resolution: "@revoltchat/ui@npm:1.0.58" dependencies: "@styled-icons/boxicons-logos": ^10.38.0 "@styled-icons/boxicons-regular": ^10.38.0 @@ -2247,7 +2247,7 @@ __metadata: react-virtuoso: ^2.12.0 peerDependencies: revolt.js: "*" - checksum: 57014aa30f36272825b34e2dfa327b17f3e2b4efeba78f48e1805b5b30027f7dad4431f1c852816762e10643a9ef53b51a211d48ffc3bd14d07966fd5b3b183f + checksum: 1ebdb3963c77fbad11427963e27f1be1beb480e80360a59f06a3a2fd2d3f5e335ff33fbb8bf99f533549696848ae1d1db5072ff4d45e98d25c9b1b372f25d795 languageName: node linkType: hard @@ -3554,7 +3554,7 @@ __metadata: "@hcaptcha/react-hcaptcha": ^0.3.6 "@insertish/vite-plugin-babel-macros": ^1.0.5 "@preact/preset-vite": ^2.0.0 - "@revoltchat/ui": 1.0.54 + "@revoltchat/ui": 1.0.58 "@rollup/plugin-replace": ^2.4.2 "@styled-icons/boxicons-logos": ^10.38.0 "@styled-icons/boxicons-regular": ^10.38.0