diff --git a/package.json b/package.json index 6f14588c..bebf161a 100644 --- a/package.json +++ b/package.json @@ -146,7 +146,6 @@ "revolt.js": "5.1.0-alpha.15", "rimraf": "^3.0.2", "sass": "^1.35.1", - "shade-blend-color": "^1.0.0", "styled-components": "^5.3.0", "typescript": "^4.4.2", "ulid": "^2.3.0", diff --git a/src/components/common/Emoji.tsx b/src/components/common/Emoji.tsx index 05d68f72..361df955 100644 --- a/src/components/common/Emoji.tsx +++ b/src/components/common/Emoji.tsx @@ -3,7 +3,7 @@ import { EmojiPacks } from "../../redux/reducers/settings"; let EMOJI_PACK = "mutant"; const REVISION = 3; -export function setEmojiPack(pack: EmojiPacks) { +export function setGlobalEmojiPack(pack: EmojiPacks) { EMOJI_PACK = pack; } diff --git a/src/components/settings/AppearanceShims.tsx b/src/components/settings/AppearanceShims.tsx index a4bcae0b..017c132a 100644 --- a/src/components/settings/AppearanceShims.tsx +++ b/src/components/settings/AppearanceShims.tsx @@ -1,13 +1,14 @@ import { Store } from "@styled-icons/boxicons-regular"; 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 TextAreaAutoSize from "../../lib/TextAreaAutoSize"; import { useApplicationState } from "../../mobx/State"; -import { EmojiPack } from "../../mobx/stores/Settings"; import { Fonts, @@ -23,13 +24,13 @@ import ColourSwatches from "../ui/ColourSwatches"; import ComboBox from "../ui/ComboBox"; import Radio from "../ui/Radio"; import CategoryButton from "../ui/fluent/CategoryButton"; -import mutantSVG from "./mutant_emoji.svg"; -import notoSVG from "./noto_emoji.svg"; -import openmojiSVG from "./openmoji_emoji.svg"; -import twemojiSVG from "./twemoji_emoji.svg"; +import { EmojiSelector } from "./appearance/EmojiSelector"; import { ThemeBaseSelector } from "./appearance/ThemeBaseSelector"; +/** + * Component providing a way to switch the base theme being used. + */ export const ThemeBaseSelectorShim = observer(() => { const theme = useApplicationState().settings.theme; return ( @@ -37,6 +38,11 @@ export const ThemeBaseSelectorShim = observer(() => { ); }); +/** + * Component providing a link to the theme shop. + * Only appears if experiment is enabled. + * TODO: stabilise + */ export const ThemeShopShim = () => { if (!useApplicationState().experiments.isEnabled("theme_shop")) return null; @@ -49,6 +55,9 @@ export const ThemeShopShim = () => { ); }; +/** + * Component providing a way to change current accent colour. + */ export const ThemeAccentShim = observer(() => { const theme = useApplicationState().settings.theme; return ( @@ -58,12 +67,18 @@ export const ThemeAccentShim = observer(() => { theme.setVariable("accent", colour)} + onChange={(colour) => { + theme.setVariable("accent", colour as string); + theme.setVariable("scrollbar-thumb", pSBC(-0.2, colour)); + }} /> ); }); +/** + * Component providing a way to edit custom CSS. + */ export const ThemeCustomCSSShim = observer(() => { const theme = useApplicationState().settings.theme; return ( @@ -82,7 +97,15 @@ export const ThemeCustomCSSShim = observer(() => { ); }); +export const ThemeImporterShim = observer(() => { + return ; +}); + +/** + * Component providing a way to switch between compact and normal message view. + */ export const DisplayCompactShim = () => { + // TODO: WIP feature return ( <>

@@ -108,6 +131,9 @@ export const DisplayCompactShim = () => { ); }; +/** + * Component providing a way to change primary text font. + */ export const DisplayFontShim = observer(() => { const theme = useApplicationState().settings.theme; return ( @@ -128,6 +154,9 @@ export const DisplayFontShim = observer(() => { ); }); +/** + * Component providing a way to change secondary, monospace text font. + */ export const DisplayMonospaceFontShim = observer(() => { const theme = useApplicationState().settings.theme; return ( @@ -155,6 +184,9 @@ export const DisplayMonospaceFontShim = observer(() => { ); }); +/** + * Component providing a way to toggle font ligatures. + */ export const DisplayLigaturesShim = observer(() => { const settings = useApplicationState().settings; if (settings.theme.getFont() !== "Inter") return null; @@ -173,86 +205,15 @@ export const DisplayLigaturesShim = observer(() => { ); }); +/** + * Component providing a way to change emoji pack. + */ export const DisplayEmojiShim = observer(() => { const settings = useApplicationState().settings; - const emojiPack = settings.get("appearance:emoji"); - const setPack = (v: EmojiPack) => () => settings.set("appearance:emoji", v); - return ( - <> -

- -

-
-
-
-
- e.preventDefault()} - /> -
-

- Mutant Remix{" "} - - (by Revolt) - -

-
-
-
- e.preventDefault()} - /> -
-

Twemoji

-
-
-
-
-
- e.preventDefault()} - /> -
-

Openmoji

-
-
-
- e.preventDefault()} - /> -
-

Noto Emoji

-
-
-
- + settings.set("appearance:emoji", v)} + /> ); }); diff --git a/src/components/settings/appearance/EmojiSelector.tsx b/src/components/settings/appearance/EmojiSelector.tsx new file mode 100644 index 00000000..84232664 --- /dev/null +++ b/src/components/settings/appearance/EmojiSelector.tsx @@ -0,0 +1,162 @@ +import styled from "styled-components"; + +import { Text } from "preact-i18n"; + +import { EmojiPack } from "../../../mobx/stores/Settings"; + +import mutantSVG from "./mutant_emoji.svg"; +import notoSVG from "./noto_emoji.svg"; +import openmojiSVG from "./openmoji_emoji.svg"; +import twemojiSVG from "./twemoji_emoji.svg"; + +const Container = styled.div` + gap: 12px; + display: flex; + flex-direction: column; + + .row { + gap: 12px; + display: flex; + + > div { + flex: 1; + display: flex; + flex-direction: column; + } + } + + .button { + padding: 2rem 1.2rem; + display: grid; + place-items: center; + + cursor: pointer; + transition: border 0.3s; + background: var(--hover); + border: 3px solid transparent; + border-radius: var(--border-radius); + + img { + max-width: 100%; + } + + &[data-active="true"] { + cursor: default; + background: var(--secondary-background); + border: 3px solid var(--accent); + + &:hover { + border: 3px solid var(--accent); + } + } + + &:hover { + background: var(--secondary-background); + border: 3px solid var(--tertiary-background); + } + } + + h4 { + text-transform: unset; + + a { + opacity: 0.7; + color: var(--accent); + font-weight: 600; + &:hover { + text-decoration: underline; + } + } + + @media only screen and (max-width: 800px) { + a { + display: block; + } + } + } +`; + +interface Props { + value?: EmojiPack; + setValue: (pack: EmojiPack) => void; +} + +export function EmojiSelector({ value, setValue }: Props) { + return ( + <> +

+ +

+ +
+
+
setValue("mutant")} + data-active={value === "mutant"}> + e.preventDefault()} + /> +
+

+ Mutant Remix{" "} + + (by Revolt) + +

+
+
+
setValue("twemoji")} + data-active={value === "twemoji"}> + e.preventDefault()} + /> +
+

Twemoji

+
+
+
+
+
setValue("openmoji")} + data-active={value === "openmoji"}> + e.preventDefault()} + /> +
+

Openmoji

+
+
+
setValue("noto")} + data-active={value === "noto"}> + e.preventDefault()} + /> +
+

Noto Emoji

+
+
+ + + ); +} diff --git a/src/components/settings/appearance/ThemeBaseSelector.tsx b/src/components/settings/appearance/ThemeBaseSelector.tsx index 54f1b72e..17702588 100644 --- a/src/components/settings/appearance/ThemeBaseSelector.tsx +++ b/src/components/settings/appearance/ThemeBaseSelector.tsx @@ -58,7 +58,7 @@ export function ThemeBaseSelector({ value, setValue }: Props) { src={lightSVG} draggable={false} data-active={value === "light"} - onClick={() => value !== "light" && setValue("light")} + onClick={() => setValue("light")} onContextMenu={(e) => e.preventDefault()} />

@@ -71,7 +71,7 @@ export function ThemeBaseSelector({ value, setValue }: Props) { src={darkSVG} draggable={false} data-active={value === "dark"} - onClick={() => value !== "dark" && setValue("dark")} + onClick={() => setValue("dark")} onContextMenu={(e) => e.preventDefault()} />

diff --git a/src/components/settings/appearance/ThemeOverrides.tsx b/src/components/settings/appearance/ThemeOverrides.tsx new file mode 100644 index 00000000..aaee68b8 --- /dev/null +++ b/src/components/settings/appearance/ThemeOverrides.tsx @@ -0,0 +1,181 @@ +import { Pencil } from "@styled-icons/boxicons-regular"; +import { observer } from "mobx-react-lite"; +import styled from "styled-components"; + +import { useDebounceCallback } from "../../../lib/debounce"; + +import { useApplicationState } from "../../../mobx/State"; + +import { Variables } from "../../../context/Theme"; + +import InputBox from "../../ui/InputBox"; + +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, + }) + } + /> +
+
+ ))} + + ); +}); + +function getContrastingColour(hex: string, fallback: string): string { + hex = hex.replace("#", ""); + const r = parseInt(hex.substr(0, 2), 16); + const g = parseInt(hex.substr(2, 2), 16); + const b = parseInt(hex.substr(4, 2), 16); + const cc = (r * 299 + g * 587 + b * 114) / 1000; + if (isNaN(r) || isNaN(g) || isNaN(b) || isNaN(cc)) + return getContrastingColour(fallback, "#fffff"); + return cc >= 175 ? "black" : "white"; +} diff --git a/src/components/settings/appearance/ThemeTools.tsx b/src/components/settings/appearance/ThemeTools.tsx new file mode 100644 index 00000000..2c503a20 --- /dev/null +++ b/src/components/settings/appearance/ThemeTools.tsx @@ -0,0 +1,89 @@ +import { Import, Reset } from "@styled-icons/boxicons-regular"; +import styled from "styled-components"; + +import { Text } from "preact-i18n"; + +import { useApplicationState } from "../../../mobx/State"; + +import { useIntermediate } from "../../../context/intermediate/Intermediate"; + +import Tooltip from "../../common/Tooltip"; +import Button from "../../ui/Button"; + +const Actions = styled.div` + gap: 8px; + display: flex; + margin: 18px 0 8px 0; + + .code { + cursor: pointer; + display: flex; + align-items: center; + font-size: 0.875rem; + min-width: 0; + flex-grow: 1; + padding: 8px; + font-family: var(--monospace-font); + border-radius: var(--border-radius); + background: var(--secondary-background); + + > div { + width: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + } +`; + +export default function ThemeTools() { + const { writeClipboard, openScreen } = useIntermediate(); + const theme = useApplicationState().settings.theme; + + return ( + + + }> + + +
writeClipboard(JSON.stringify(theme))}> + }> + {" "} + {JSON.stringify(theme)} + +
+ }> + + + + ); +} diff --git a/src/components/settings/mutant_emoji.svg b/src/components/settings/appearance/mutant_emoji.svg similarity index 100% rename from src/components/settings/mutant_emoji.svg rename to src/components/settings/appearance/mutant_emoji.svg diff --git a/src/components/settings/noto_emoji.svg b/src/components/settings/appearance/noto_emoji.svg similarity index 100% rename from src/components/settings/noto_emoji.svg rename to src/components/settings/appearance/noto_emoji.svg diff --git a/src/components/settings/openmoji_emoji.svg b/src/components/settings/appearance/openmoji_emoji.svg similarity index 100% rename from src/components/settings/openmoji_emoji.svg rename to src/components/settings/appearance/openmoji_emoji.svg diff --git a/src/components/settings/twemoji_emoji.svg b/src/components/settings/appearance/twemoji_emoji.svg similarity index 100% rename from src/components/settings/twemoji_emoji.svg rename to src/components/settings/appearance/twemoji_emoji.svg diff --git a/src/components/ui/ColourSwatches.tsx b/src/components/ui/ColourSwatches.tsx index f35523e4..4ff13e7a 100644 --- a/src/components/ui/ColourSwatches.tsx +++ b/src/components/ui/ColourSwatches.tsx @@ -5,6 +5,8 @@ import styled, { css } from "styled-components"; import { RefObject } from "preact"; import { useRef } from "preact/hooks"; +import { useDebounceCallback } from "../../lib/debounce"; + interface Props { value: string; onChange: (value: string) => void; @@ -115,6 +117,11 @@ const Rows = styled.div` export default function ColourSwatches({ value, onChange }: Props) { const ref = useRef() as RefObject; + const setValue = useDebounceCallback( + (value) => onChange(value as string), + [onChange], + 100, + ); return ( @@ -122,7 +129,7 @@ export default function ColourSwatches({ value, onChange }: Props) { type="color" value={value} ref={ref} - onChange={(ev) => onChange(ev.currentTarget.value)} + onChange={(ev) => setValue(ev.currentTarget.value)} /> client.removeListener("message", add); }, [client, props.messages]); + // Set global emoji pack. + useEffect(() => { + const v = state.settings.get("appearance:emoji"); + v && setGlobalEmojiPack(v); + }, [state.settings.get("appearance:emoji")]); + return null; } diff --git a/src/mobx/stores/Settings.ts b/src/mobx/stores/Settings.ts index 2362e069..4e35dfd7 100644 --- a/src/mobx/stores/Settings.ts +++ b/src/mobx/stores/Settings.ts @@ -2,7 +2,7 @@ import { action, computed, makeAutoObservable, ObservableMap } from "mobx"; import { mapToRecord } from "../../lib/conversion"; -import { Fonts, MonospaceFonts, Overrides, Theme } from "../../context/Theme"; +import { Fonts, MonospaceFonts, Overrides } from "../../context/Theme"; import { Sounds } from "../../assets/sounds/Audio"; import Persistent from "../interfaces/Persistent"; diff --git a/src/mobx/stores/helpers/STheme.ts b/src/mobx/stores/helpers/STheme.ts index c1ba98e7..17c69551 100644 --- a/src/mobx/stores/helpers/STheme.ts +++ b/src/mobx/stores/helpers/STheme.ts @@ -25,7 +25,42 @@ export default class STheme { constructor(settings: Settings) { this.settings = settings; makeAutoObservable(this); + this.setBase = this.setBase.bind(this); + this.reset = this.reset.bind(this); + } + + @computed toJSON() { + return JSON.parse( + JSON.stringify({ + ...this.getVariables(), + css: this.getCSS(), + font: this.getFont(), + monospaceFont: this.getMonospaceFont(), + }), + ); + } + + @action hydrate(data: Partial) { + for (const key of Object.keys(data)) { + const value = data[key as keyof Theme] as string; + switch (key) { + case "css": { + this.setCSS(value); + break; + } + case "font": { + this.setFont(value as Fonts); + break; + } + case "monospaceFont": { + this.setMonospaceFont(value as MonospaceFonts); + break; + } + default: + this.setVariable(key as Variables, value); + } + } } /** @@ -72,8 +107,8 @@ export default class STheme { * @returns Value of variable */ @computed getVariable(key: Variables) { - return (this.settings.get("appearance:theme:overrides") ?? - PRESETS[this.getBase()])[key]!; + return (this.settings.get("appearance:theme:overrides")?.[key] ?? + PRESETS[this.getBase()]?.[key])!; } @action setFont(font: Fonts) { @@ -125,4 +160,9 @@ export default class STheme { this.settings.remove("appearance:theme:base"); } } + + @action reset() { + this.settings.remove("appearance:theme:overrides"); + this.settings.remove("appearance:theme:css"); + } } diff --git a/src/pages/settings/panes/Appearance.tsx b/src/pages/settings/panes/Appearance.tsx index dfead624..a658ca31 100644 --- a/src/pages/settings/panes/Appearance.tsx +++ b/src/pages/settings/panes/Appearance.tsx @@ -1,231 +1,43 @@ -import { Reset, Import } from "@styled-icons/boxicons-regular"; -import { Pencil } from "@styled-icons/boxicons-solid"; import { observer } from "mobx-react-lite"; -// @ts-expect-error shade-blend-color does not have typings. -import pSBC from "shade-blend-color"; import styles from "./Panes.module.scss"; import { Text } from "preact-i18n"; -import { useCallback, useEffect, useState } from "preact/hooks"; - -import { debounce } from "../../../lib/debounce"; - -import { useApplicationState } from "../../../mobx/State"; -import { dispatch } from "../../../redux"; -import { connectState } from "../../../redux/connector"; -import { EmojiPacks, Settings } from "../../../redux/reducers/settings"; - -import { Theme, ThemeOptions } from "../../../context/Theme"; -import { useIntermediate } from "../../../context/intermediate/Intermediate"; import CollapsibleSection from "../../../components/common/CollapsibleSection"; -import Tooltip from "../../../components/common/Tooltip"; -import Button from "../../../components/ui/Button"; -import InputBox from "../../../components/ui/InputBox"; import { ThemeBaseSelectorShim, ThemeShopShim, ThemeAccentShim, - DisplayCompactShim, DisplayFontShim, DisplayMonospaceFontShim, DisplayLigaturesShim, DisplayEmojiShim, ThemeCustomCSSShim, } from "../../../components/settings/AppearanceShims"; +import ThemeOverrides from "../../../components/settings/appearance/ThemeOverrides"; +import ThemeTools from "../../../components/settings/appearance/ThemeTools"; -interface Props { - settings: Settings; -} - -// ! FIXME: code needs to be rewritten to fix jittering -export const Component = observer((props: Props) => { - //const theme = useApplicationState().settings.theme; - const { writeClipboard, openScreen } = useIntermediate(); - - /*function setTheme(theme: ThemeOptions) { - dispatch({ - type: "SETTINGS_SET_THEME", - theme, - }); - } - - const pushOverride = useCallback((custom: Partial) => { - dispatch({ - type: "SETTINGS_SET_THEME_OVERRIDE", - custom, - }); - }, []); - - function setAccent(accent: string) { - setOverride({ - accent, - "scrollbar-thumb": pSBC(-0.2, accent), - }); - } - - const emojiPack = props.settings.appearance?.emojiPack ?? "mutant"; - function setEmojiPack(emojiPack: EmojiPacks) { - dispatch({ - type: "SETTINGS_SET_APPEARANCE", - options: { - emojiPack, - }, - }); - } - - // eslint-disable-next-line react-hooks/exhaustive-deps - const setOverride = useCallback( - debounce(pushOverride as (...args: unknown[]) => void, 200), - [pushOverride], - ) as (custom: Partial) => void; - const [css, setCSS] = useState(props.settings.theme?.custom?.css ?? ""); - - useEffect(() => setOverride({ css }), [setOverride, css]); - - const selected = theme.getBase();*/ +export const Appearance = observer(() => { return (
- {/* + - */} + - {/*}> -
- - }> - - -
writeClipboard(JSON.stringify(theme))}> - }> - {" "} - {JSON.stringify(theme)} - -
- - }> - - -
+ +

App

-
- {( - [ - "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((x) => ( -
-
- - setOverride({ - [x]: v.currentTarget.value, - }) - } - /> -
- - {x} - -
-
- e.currentTarget.parentElement?.parentElement - ?.querySelector("input") - ?.click() - }> - -
- - setOverride({ - [x]: y.currentTarget.value, - }) - } - /> -
-
- ))} -
- */} + + { ); }); -export const Appearance = connectState(Component, (state) => { - return { - settings: state.settings, - }; -}); - -function getContrastingColour(hex: string, fallback: string): string { - hex = hex.replace("#", ""); - const r = parseInt(hex.substr(0, 2), 16); - const g = parseInt(hex.substr(2, 2), 16); - const b = parseInt(hex.substr(4, 2), 16); - const cc = (r * 299 + g * 587 + b * 114) / 1000; - if (isNaN(r) || isNaN(g) || isNaN(b) || isNaN(cc)) - return getContrastingColour(fallback, "#fffff"); - return cc >= 175 ? "black" : "white"; -} +// diff --git a/src/pages/settings/panes/Audio.tsx b/src/pages/settings/panes/Audio.tsx index 5365b047..35776b89 100644 --- a/src/pages/settings/panes/Audio.tsx +++ b/src/pages/settings/panes/Audio.tsx @@ -15,6 +15,8 @@ import Tip from "../../../components/ui/Tip"; const constraints = { audio: true }; +// TODO: do not rewrite this code until voice is rewritten! + export function Component() { const [mediaStream, setMediaStream] = useState( undefined, @@ -57,11 +59,11 @@ export function Component() { return () => { if (mediaStream) { // close microphone access on unmount - mediaStream.getTracks().forEach(track => { - track.stop() - }) + mediaStream.getTracks().forEach((track) => { + track.stop(); + }); } - } + }; }, [mediaStream]); useEffect(() => { diff --git a/src/pages/settings/panes/Panes.module.scss b/src/pages/settings/panes/Panes.module.scss index af330487..413ced1d 100644 --- a/src/pages/settings/panes/Panes.module.scss +++ b/src/pages/settings/panes/Panes.module.scss @@ -232,97 +232,6 @@ display: flex; flex-direction: column; } - - .actions { - gap: 8px; - display: flex; - margin: 18px 0 8px 0; - - .code { - cursor: pointer; - display: flex; - align-items: center; - font-size: 0.875rem; - min-width: 0; - flex-grow: 1; - padding: 8px; - font-family: var(--monospace-font); - border-radius: var(--border-radius); - background: var(--secondary-background); - - > div { - width: 100%; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } - } - } - - .overrides { - 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; - } - } - } - } } .sessions { diff --git a/src/redux/reducers/settings.ts b/src/redux/reducers/settings.ts index 65d367ba..079aebdc 100644 --- a/src/redux/reducers/settings.ts +++ b/src/redux/reducers/settings.ts @@ -1,6 +1,6 @@ import type { Theme, ThemeOptions } from "../../context/Theme"; -import { setEmojiPack } from "../../components/common/Emoji"; +import { setGlobalEmojiPack } from "../../components/common/Emoji"; import type { Sounds } from "../../assets/sounds/Audio"; import type { SyncUpdateAction } from "./sync"; @@ -59,7 +59,7 @@ export function settings( state = {} as Settings, action: SettingsAction, ): Settings { - setEmojiPack(state.appearance?.emojiPack ?? "mutant"); + // setGlobalEmojiPack(state.appearance?.emojiPack ?? "mutant"); switch (action.type) { case "SETTINGS_SET_THEME":