Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
No results found
Show changes
Hide whitespace changes
Inline Side-by-side
Showing
with 1933 additions and 1438 deletions
src/pages/settings/Settings.tsx
View file @ 1ac5de17
import { Gitlab } from "@styled-icons/boxicons-logos";
import {
Sync as SyncIcon,
Globe,
LogOut,
Sync as SyncIcon,
Globe,
LogOut,
Desktop,
} from "@styled-icons/boxicons-regular";
import {
Bell,
Palette,
Coffee,
IdCard,
CheckShield,
Flask,
User,
Megaphone,
Bell,
Palette,
Coffee,
IdCard,
CheckShield,
Flask,
User,
Megaphone,
} from "@styled-icons/boxicons-solid";
import { Route, useHistory } from "react-router-dom";
import { Route, Switch, useHistory } from "react-router-dom";
import { LIBRARY_VERSION } from "revolt.js";
import styles from "./Settings.module.scss";
......@@ -23,8 +24,8 @@ import { useContext } from "preact/hooks";
import RequiresOnline from "../../context/revoltjs/RequiresOnline";
import {
AppContext,
OperationsContext,
AppContext,
OperationsContext,
} from "../../context/revoltjs/RevoltClient";
import LineDivider from "../../components/ui/LineDivider";
......@@ -38,165 +39,188 @@ import { Appearance } from "./panes/Appearance";
import { ExperimentsPage } from "./panes/Experiments";
import { Feedback } from "./panes/Feedback";
import { Languages } from "./panes/Languages";
import { Native } from "./panes/Native";
import { Notifications } from "./panes/Notifications";
import { Profile } from "./panes/Profile";
import { Sessions } from "./panes/Sessions";
import { Sync } from "./panes/Sync";
export default function Settings() {
const history = useHistory();
const client = useContext(AppContext);
const operations = useContext(OperationsContext);
const history = useHistory();
const client = useContext(AppContext);
const operations = useContext(OperationsContext);
function switchPage(to?: string) {
if (to) {
history.replace(`/settings/${to}`);
} else {
history.replace(`/settings`);
}
}
function switchPage(to?: string) {
if (to) {
history.replace(`/settings/${to}`);
} else {
history.replace(`/settings`);
}
}
return (
<GenericSettings
pages={[
{
category: (
<Text id="app.settings.categories.user_settings" />
),
id: "account",
icon: <User size={20} />,
title: <Text id="app.settings.pages.account.title" />,
},
{
id: "profile",
icon: <IdCard size={20} />,
title: <Text id="app.settings.pages.profile.title" />,
},
{
id: "sessions",
icon: <CheckShield size={20} />,
title: <Text id="app.settings.pages.sessions.title" />,
},
{
category: (
<Text id="app.settings.categories.client_settings" />
),
id: "appearance",
icon: <Palette size={20} />,
title: <Text id="app.settings.pages.appearance.title" />,
},
{
id: "notifications",
icon: <Bell size={20} />,
title: <Text id="app.settings.pages.notifications.title" />,
},
{
id: "language",
icon: <Globe size={20} />,
title: <Text id="app.settings.pages.language.title" />,
},
{
id: "sync",
icon: <SyncIcon size={20} />,
title: <Text id="app.settings.pages.sync.title" />,
},
{
divider: true,
id: "experiments",
icon: <Flask size={20} />,
title: <Text id="app.settings.pages.experiments.title" />,
},
{
id: "feedback",
icon: <Megaphone size={20} />,
title: <Text id="app.settings.pages.feedback.title" />,
},
]}
children={[
<Route path="/settings/profile">
<Profile />
</Route>,
<Route path="/settings/sessions">
<RequiresOnline>
<Sessions />
</RequiresOnline>
</Route>,
<Route path="/settings/appearance">
<Appearance />
</Route>,
<Route path="/settings/notifications">
<Notifications />
</Route>,
<Route path="/settings/language">
<Languages />
</Route>,
<Route path="/settings/sync">
<Sync />
</Route>,
<Route path="/settings/experiments">
<ExperimentsPage />
</Route>,
<Route path="/settings/feedback">
<Feedback />
</Route>,
<Route path="/">
<Account />
</Route>,
]}
defaultPage="account"
switchPage={switchPage}
category="pages"
custom={[
<a href="https://gitlab.insrt.uk/revolt" target="_blank">
<ButtonItem compact>
<Gitlab size={20} />
<Text id="app.settings.pages.source_code" />
</ButtonItem>
</a>,
<a href="https://ko-fi.com/insertish" target="_blank">
<ButtonItem className={styles.donate} compact>
<Coffee size={20} />
<Text id="app.settings.pages.donate.title" />
</ButtonItem>
</a>,
<LineDivider />,
<ButtonItem
onClick={() => operations.logout()}
className={styles.logOut}
compact>
<LogOut size={20} />
<Text id="app.settings.pages.logOut" />
</ButtonItem>,
<div className={styles.version}>
<div>
<span className={styles.revision}>
<a
href={`${REPO_URL}/${GIT_REVISION}`}
target="_blank">
{GIT_REVISION.substr(0, 7)}
</a>
{` `}
<a
href={
GIT_BRANCH !== "DETACHED"
? `https://gitlab.insrt.uk/revolt/client/-/tree/${GIT_BRANCH}`
: undefined
}
target="_blank">
({GIT_BRANCH})
</a>
</span>
<span>
{GIT_BRANCH === "production" ? "Stable" : "Nightly"}{" "}
{APP_VERSION}
</span>
<span>
API: {client.configuration?.revolt ?? "N/A"}
</span>
<span>revolt.js: {LIBRARY_VERSION}</span>
</div>
</div>,
]}
/>
);
return (
<GenericSettings
pages={[
{
category: (
<Text id="app.settings.categories.user_settings" />
),
id: "account",
icon: <User size={20} />,
title: <Text id="app.settings.pages.account.title" />,
},
{
id: "profile",
icon: <IdCard size={20} />,
title: <Text id="app.settings.pages.profile.title" />,
},
{
id: "sessions",
icon: <CheckShield size={20} />,
title: <Text id="app.settings.pages.sessions.title" />,
},
{
category: (
<Text id="app.settings.categories.client_settings" />
),
id: "appearance",
icon: <Palette size={20} />,
title: <Text id="app.settings.pages.appearance.title" />,
},
{
id: "notifications",
icon: <Bell size={20} />,
title: <Text id="app.settings.pages.notifications.title" />,
},
{
id: "language",
icon: <Globe size={20} />,
title: <Text id="app.settings.pages.language.title" />,
},
{
id: "sync",
icon: <SyncIcon size={20} />,
title: <Text id="app.settings.pages.sync.title" />,
},
{
id: "native",
hidden: !window.isNative,
icon: <Desktop size={20} />,
title: <Text id="app.settings.pages.native.title" />,
},
{
divider: true,
id: "experiments",
icon: <Flask size={20} />,
title: <Text id="app.settings.pages.experiments.title" />,
},
{
id: "feedback",
icon: <Megaphone size={20} />,
title: <Text id="app.settings.pages.feedback.title" />,
},
]}
children={
<Switch>
<Route path="/settings/profile">
<Profile />
</Route>
<Route path="/settings/sessions">
<RequiresOnline>
<Sessions />
</RequiresOnline>
</Route>
<Route path="/settings/appearance">
<Appearance />
</Route>
<Route path="/settings/notifications">
<Notifications />
</Route>
<Route path="/settings/language">
<Languages />
</Route>
<Route path="/settings/sync">
<Sync />
</Route>
<Route path="/settings/native">
<Native />
</Route>
<Route path="/settings/experiments">
<ExperimentsPage />
</Route>
<Route path="/settings/feedback">
<Feedback />
</Route>
<Route path="/">
<Account />
</Route>
</Switch>
}
defaultPage="account"
switchPage={switchPage}
category="pages"
custom={
<>
<a
href="https://gitlab.insrt.uk/revolt"
target="_blank"
rel="noreferrer">
<ButtonItem compact>
<Gitlab size={20} />
<Text id="app.settings.pages.source_code" />
</ButtonItem>
</a>
<a
href="https://insrt.uk/donate"
target="_blank"
rel="noreferrer">
<ButtonItem className={styles.donate} compact>
<Coffee size={20} />
<Text id="app.settings.pages.donate.title" />
</ButtonItem>
</a>
<LineDivider />
<ButtonItem
onClick={() => operations.logout()}
className={styles.logOut}
compact>
<LogOut size={20} />
<Text id="app.settings.pages.logOut" />
</ButtonItem>
<div className={styles.version}>
<span className={styles.revision}>
<a
href={`${REPO_URL}/${GIT_REVISION}`}
target="_blank"
rel="noreferrer">
{GIT_REVISION.substr(0, 7)}
</a>
{` `}
<a
href={
GIT_BRANCH !== "DETACHED"
? `https://gitlab.insrt.uk/revolt/client/-/tree/${GIT_BRANCH}`
: undefined
}
target="_blank"
rel="noreferrer">
({GIT_BRANCH})
</a>
</span>
<span>
{GIT_BRANCH === "production" ? "Stable" : "Nightly"}{" "}
{APP_VERSION}
</span>
{window.isNative && (
<span>Native: {window.nativeVersion}</span>
)}
<span>
API: {client.configuration?.revolt ?? "N/A"}
</span>
<span>revolt.js: {LIBRARY_VERSION}</span>
</div>
</>
}
/>
);
}
src/pages/settings/assets/dark.svg
View file @ 1ac5de17
<svg xmlns="http://www.w3.org/2000/svg" width="323" height="202" viewBox="0 0 323 202">
<g id="Dark" transform="translate(-225 -535)">
<g id="Group_188" data-name="Group 188">
<rect id="Rectangle_207" data-name="Rectangle 207" width="323" height="202" rx="6" transform="translate(225 535)" fill="#333234"/>
<path id="Rectangle_209" data-name="Rectangle 209" d="M6,0H95a0,0,0,0,1,0,0V202a0,0,0,0,1,0,0H6a6,6,0,0,1-6-6V6A6,6,0,0,1,6,0Z" transform="translate(225 535)" fill="#212121"/>
<g id="Group_195" data-name="Group 195" transform="translate(-345 1)">
<g id="Group_196" data-name="Group 196" transform="translate(0 -6)">
<rect id="Rectangle_221" data-name="Rectangle 221" width="81" height="15" rx="2" transform="translate(577 560)" fill="#373737"/>
<rect id="Rectangle_217" data-name="Rectangle 217" width="22" height="4" rx="1" transform="translate(577 602)" fill="#efefef"/>
<rect id="Rectangle_231" data-name="Rectangle 231" width="29" height="4" rx="1" transform="translate(591 566)" fill="#fff"/>
<g id="Group_198" data-name="Group 198">
<rect id="Rectangle_226" data-name="Rectangle 226" width="81" height="15" rx="2" transform="translate(577 580)" fill="#212121"/>
<rect id="Rectangle_232" data-name="Rectangle 232" width="30" height="4" rx="1" transform="translate(613 586)" fill="#fff"/>
<rect id="Rectangle_233" data-name="Rectangle 233" width="20" height="4" rx="1" transform="translate(591 586)" fill="#fff"/>
</g>
<g id="Voice_Channel" data-name="Voice Channel">
<rect id="Rectangle_227" data-name="Rectangle 227" width="81" height="15" rx="2" transform="translate(577 614)" fill="#36ad93"/>
<rect id="Rectangle_230" data-name="Rectangle 230" width="16" height="4" rx="1" transform="translate(591 620)" fill="#fff"/>
<g id="Connected_Users" data-name="Connected Users">
<circle id="Ellipse_50" data-name="Ellipse 50" cx="4.5" cy="4.5" r="4.5" transform="translate(630 617)" fill="#8b8b8b"/>
<circle id="Ellipse_51" data-name="Ellipse 51" cx="4.5" cy="4.5" r="4.5" transform="translate(635 617)" fill="#b7b7b7"/>
<circle id="Ellipse_52" data-name="Ellipse 52" cx="4.5" cy="4.5" r="4.5" transform="translate(641 617)" fill="#e8e8e8"/>
</g>
</g>
<g id="Group_199" data-name="Group 199" transform="translate(0 54)">
<rect id="Rectangle_226-2" data-name="Rectangle 226" width="81" height="15" rx="2" transform="translate(577 580)" fill="#212121"/>
<rect id="Rectangle_234" data-name="Rectangle 234" width="25" height="4" rx="1" transform="translate(591 586)" fill="#fff"/>
</g>
<g id="Group_200" data-name="Group 200" transform="translate(0 74)">
<rect id="Rectangle_226-3" data-name="Rectangle 226" width="81" height="15" rx="2" transform="translate(577 580)" fill="#212121"/>
<rect id="Rectangle_235" data-name="Rectangle 235" width="15" height="4" rx="1" transform="translate(629 586)" fill="#fff"/>
<rect id="Rectangle_236" data-name="Rectangle 236" width="36" height="4" rx="1" transform="translate(591 586)" fill="#fff"/>
</g>
<g id="Group_201" data-name="Group 201" transform="translate(0 94)">
<rect id="Rectangle_226-4" data-name="Rectangle 226" width="81" height="15" rx="2" transform="translate(577 580)" fill="#212121"/>
<rect id="Rectangle_237" data-name="Rectangle 237" width="20" height="4" rx="1" transform="translate(591 586)" fill="#fff"/>
<rect id="Rectangle_238" data-name="Rectangle 238" width="30" height="4" rx="1" transform="translate(613 586)" fill="#fff"/>
</g>
</g>
<path id="Rectangle_224" data-name="Rectangle 224" d="M0,0H95a0,0,0,0,1,0,0V51a0,0,0,0,1,0,0H6a6,6,0,0,1-6-6V0A0,0,0,0,1,0,0Z" transform="translate(570 685)" fill="#404040"/>
</g>
</g>
<g id="Group_187" data-name="Group 187" transform="translate(0 -9)">
<circle id="Ellipse_49" data-name="Ellipse 49" cx="10.5" cy="10.5" r="10.5" transform="translate(336 681)" fill="#686868"/>
<rect id="Rectangle_210" data-name="Rectangle 210" width="34" height="8" rx="2" transform="translate(365 681)" fill="#e8e8e8"/>
<rect id="Rectangle_211" data-name="Rectangle 211" width="28" height="8" rx="2" transform="translate(404 681)" fill="#676767"/>
<rect id="Rectangle_212" data-name="Rectangle 212" width="24" height="6" rx="2" transform="translate(365 696)" fill="#fff"/>
<rect id="Rectangle_213" data-name="Rectangle 213" width="47" height="6" rx="2" transform="translate(393 696)" fill="#fff"/>
<rect id="Rectangle_214" data-name="Rectangle 214" width="55" height="6" rx="2" transform="translate(444 696)" fill="#fff"/>
</g>
<g id="Group_189" data-name="Group 189">
<line id="Line_18" data-name="Line 18" x2="191" transform="translate(335.5 656.5)" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1" opacity="0.5"/>
</g>
<g id="Group_192" data-name="Group 192" transform="translate(0 -83)">
<rect id="Rectangle_210-2" data-name="Rectangle 210" width="34" height="8" rx="2" transform="translate(365 681)" fill="#e8e8e8"/>
<rect id="Rectangle_211-2" data-name="Rectangle 211" width="28" height="8" rx="2" transform="translate(404 681)" fill="#676767"/>
<rect id="Rectangle_212-2" data-name="Rectangle 212" width="81" height="6" rx="2" transform="translate(365 696)" fill="#68abee"/>
<g id="Group_194" data-name="Group 194" transform="translate(0 2)">
<rect id="Rectangle_219" data-name="Rectangle 219" width="23" height="6" rx="2" transform="translate(372 707)" fill="#68abee"/>
<rect id="Rectangle_220" data-name="Rectangle 220" width="103" height="6" rx="2" transform="translate(372 718)" fill="#888"/>
<line id="Line_35" data-name="Line 35" y2="17" transform="translate(365.5 707.5)" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1"/>
</g>
<circle id="Ellipse_49-2" data-name="Ellipse 49" cx="10.5" cy="10.5" r="10.5" transform="translate(336 681)" fill="#686868"/>
</g>
<g id="Group_193" data-name="Group 193" transform="translate(0 -133)">
<circle id="Ellipse_49-3" data-name="Ellipse 49" cx="10.5" cy="10.5" r="10.5" transform="translate(336 681)" fill="#686868"/>
<rect id="Rectangle_210-3" data-name="Rectangle 210" width="34" height="8" rx="2" transform="translate(365 681)" fill="#e8e8e8"/>
<rect id="Rectangle_211-3" data-name="Rectangle 211" width="28" height="8" rx="2" transform="translate(404 681)" fill="#676767"/>
<rect id="Rectangle_212-3" data-name="Rectangle 212" width="95" height="6" rx="2" transform="translate(365 696)" fill="#fff"/>
<rect id="Rectangle_213-2" data-name="Rectangle 213" width="29" height="6" rx="2" transform="translate(365 709)" fill="#fff"/>
<rect id="Rectangle_218" data-name="Rectangle 218" width="50" height="6" rx="2" transform="translate(398 709)" fill="#fff"/>
<rect id="Rectangle_214-2" data-name="Rectangle 214" width="68" height="6" rx="2" transform="translate(464 696)" fill="#fff"/>
</g>
<rect id="Rectangle_228" data-name="Rectangle 228" width="191" height="18" rx="4" transform="translate(336 709)" fill="#434343"/>
<g id="Rectangle_229" data-name="Rectangle 229" transform="translate(506 709)" fill="#707070" stroke="#707070" stroke-width="1">
<path d="M0,0H17a4,4,0,0,1,4,4V14a4,4,0,0,1-4,4H0a0,0,0,0,1,0,0V0A0,0,0,0,1,0,0Z" stroke="none"/>
<path d="M1,.5H17A3.5,3.5,0,0,1,20.5,4V14A3.5,3.5,0,0,1,17,17.5H1A.5.5,0,0,1,.5,17V1A.5.5,0,0,1,1,.5Z" fill="none"/>
</g>
</g>
</svg>
<svg width="323" height="202" viewBox="0 0 323 202" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="323" height="202" fill="#191919"/>
<path d="M27 14C27 11.7909 28.7909 10 31 10H90V202H31C28.7909 202 27 200.209 27 198V14Z" fill="#1E1E1E"/>
<rect x="90" y="10" width="233" height="192" fill="#242424"/>
<rect x="90" y="10" width="233" height="18" fill="#363636"/>
<rect x="97" y="16" width="30" height="6" rx="2" fill="#DEDEDE"/>
<path d="M106.517 163.445C111.534 163.445 115.601 159.378 115.601 154.361C115.601 149.344 111.534 145.277 106.517 145.277C101.5 145.277 97.4326 149.344 97.4326 154.361C97.4326 159.378 101.5 163.445 106.517 163.445Z" fill="#686868"/>
<path d="M150.206 145.277H124.252C123.296 145.277 122.522 146.052 122.522 147.008V150.468C122.522 151.424 123.296 152.198 124.252 152.198H150.206C151.162 152.198 151.936 151.424 151.936 150.468V147.008C151.936 146.052 151.162 145.277 150.206 145.277Z" fill="#E8E8E8"/>
<path d="M178.756 145.277H157.992C157.037 145.277 156.262 146.052 156.262 147.008V150.468C156.262 151.424 157.037 152.198 157.992 152.198H178.756C179.711 152.198 180.486 151.424 180.486 150.468V147.008C180.486 146.052 179.711 145.277 178.756 145.277Z" fill="#676767"/>
<path d="M141.555 158.255H124.252C123.296 158.255 122.522 159.029 122.522 159.985V161.715C122.522 162.671 123.296 163.445 124.252 163.445H141.555C142.51 163.445 143.285 162.671 143.285 161.715V159.985C143.285 159.029 142.51 158.255 141.555 158.255Z" fill="white"/>
<path d="M185.677 158.255H148.476C147.52 158.255 146.746 159.029 146.746 159.985V161.715C146.746 162.671 147.52 163.445 148.476 163.445H185.677C186.632 163.445 187.407 162.671 187.407 161.715V159.985C187.407 159.029 186.632 158.255 185.677 158.255Z" fill="white"/>
<path d="M236.72 158.255H192.598C191.642 158.255 190.868 159.029 190.868 159.985V161.715C190.868 162.671 191.642 163.445 192.598 163.445H236.72C237.676 163.445 238.45 162.671 238.45 161.715V159.985C238.45 159.029 237.676 158.255 236.72 158.255Z" fill="white"/>
<path opacity="0.5" d="M97 131.868H262.242" stroke="#707070" stroke-width="0.86514" stroke-linecap="round"/>
<path d="M150.206 81.257H124.252C123.296 81.257 122.522 82.0316 122.522 82.9872V86.4478C122.522 87.4034 123.296 88.1781 124.252 88.1781H150.206C151.162 88.1781 151.936 87.4034 151.936 86.4478V82.9872C151.936 82.0316 151.162 81.257 150.206 81.257Z" fill="#E8E8E8"/>
<path d="M178.756 81.257H157.992C157.037 81.257 156.262 82.0316 156.262 82.9872V86.4478C156.262 87.4034 157.037 88.1781 157.992 88.1781H178.756C179.711 88.1781 180.486 87.4034 180.486 86.4478V82.9872C180.486 82.0316 179.711 81.257 178.756 81.257Z" fill="#676767"/>
<path d="M190.868 94.2341H124.252C123.296 94.2341 122.522 95.0088 122.522 95.9644V97.6947C122.522 98.6503 123.296 99.425 124.252 99.425H190.868C191.823 99.425 192.598 98.6503 192.598 97.6947V95.9644C192.598 95.0088 191.823 94.2341 190.868 94.2341Z" fill="#68ABEE"/>
<path d="M146.746 106.708H130.308C129.352 106.708 128.578 107.483 128.578 108.439V110.169C128.578 111.124 129.352 111.899 130.308 111.899H146.746C147.701 111.899 148.476 111.124 148.476 110.169V108.439C148.476 107.483 147.701 106.708 146.746 106.708Z" fill="#68ABEE"/>
<path d="M215.957 114.997H130.308C129.352 114.997 128.578 115.772 128.578 116.728V118.458C128.578 119.413 129.352 120.188 130.308 120.188H215.957C216.912 120.188 217.687 119.413 217.687 118.458V116.728C217.687 115.772 216.912 114.997 215.957 114.997Z" fill="#888888"/>
<path d="M122.954 105.913V120.621" stroke="#707070" stroke-width="0.86514" stroke-linecap="round"/>
<path d="M106.517 99.4249C111.534 99.4249 115.601 95.3579 115.601 90.3409C115.601 85.324 111.534 81.257 106.517 81.257C101.5 81.257 97.4326 85.324 97.4326 90.3409C97.4326 95.3579 101.5 99.4249 106.517 99.4249Z" fill="#686868"/>
<path d="M106.517 56.1679C111.534 56.1679 115.601 52.1009 115.601 47.084C115.601 42.067 111.534 38 106.517 38C101.5 38 97.4326 42.067 97.4326 47.084C97.4326 52.1009 101.5 56.1679 106.517 56.1679Z" fill="#686868"/>
<path d="M150.206 38H124.252C123.296 38 122.522 38.7747 122.522 39.7303V43.1908C122.522 44.1464 123.296 44.9211 124.252 44.9211H150.206C151.162 44.9211 151.936 44.1464 151.936 43.1908V39.7303C151.936 38.7747 151.162 38 150.206 38Z" fill="#E8E8E8"/>
<path d="M178.756 38H157.992C157.037 38 156.262 38.7747 156.262 39.7303V43.1908C156.262 44.1464 157.037 44.9211 157.992 44.9211H178.756C179.711 44.9211 180.486 44.1464 180.486 43.1908V39.7303C180.486 38.7747 179.711 38 178.756 38Z" fill="#676767"/>
<path d="M202.98 50.9771H124.252C123.296 50.9771 122.522 51.7517 122.522 52.7073V54.4376C122.522 55.3932 123.296 56.1679 124.252 56.1679H202.98C203.935 56.1679 204.71 55.3932 204.71 54.4376V52.7073C204.71 51.7517 203.935 50.9771 202.98 50.9771Z" fill="white"/>
<path d="M145.88 62.2239H124.252C123.296 62.2239 122.522 62.9985 122.522 63.9542V65.6844C122.522 66.64 123.296 67.4147 124.252 67.4147H145.88C146.836 67.4147 147.611 66.64 147.611 65.6844V63.9542C147.611 62.9985 146.836 62.2239 145.88 62.2239Z" fill="white"/>
<path d="M192.598 62.2239H152.802C151.846 62.2239 151.071 62.9985 151.071 63.9542V65.6844C151.071 66.64 151.846 67.4147 152.802 67.4147H192.598C193.554 67.4147 194.328 66.64 194.328 65.6844V63.9542C194.328 62.9985 193.554 62.2239 192.598 62.2239Z" fill="white"/>
<path d="M265.27 50.9771H209.901C208.945 50.9771 208.17 51.7517 208.17 52.7073V54.4376C208.17 55.3932 208.945 56.1679 209.901 56.1679H265.27C266.225 56.1679 267 55.3932 267 54.4376V52.7073C267 51.7517 266.225 50.9771 265.27 50.9771Z" fill="white"/>
<rect x="90" y="184" width="233" height="18" fill="#363636"/>
<circle cx="317" cy="5" r="2" fill="#C4C4C4"/>
<circle cx="310" cy="5" r="2" fill="#C4C4C4"/>
<circle cx="303" cy="5" r="2" fill="#C4C4C4"/>
<line x1="4.5" y1="34.5" x2="21.5" y2="34.5" stroke="#414141" stroke-linecap="round"/>
<rect x="30" y="16" width="36" height="6" rx="2" fill="#F3F3F3"/>
<rect x="30" y="35" width="26" height="4" rx="2" fill="#F3F3F3"/>
<rect x="39" y="46" width="32" height="4" rx="2" fill="#BBBBBB"/>
<rect x="39" y="70" width="29" height="4" rx="2" fill="#BBBBBB"/>
<rect x="39" y="58" width="13" height="4" rx="2" fill="#BBBBBB"/>
<rect x="55" y="58" width="22" height="4" rx="2" fill="#BBBBBB"/>
<rect x="30" y="83" width="26" height="4" rx="2" fill="#F3F3F3"/>
<rect x="39" y="94" width="32" height="4" rx="2" fill="#BBBBBB"/>
<rect x="39" y="118" width="29" height="4" rx="2" fill="#BBBBBB"/>
<rect x="39" y="106" width="13" height="4" rx="2" fill="#BBBBBB"/>
<rect x="55" y="106" width="22" height="4" rx="2" fill="#BBBBBB"/>
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="4" y="10" width="18" height="18">
<circle cx="13" cy="19" r="9" fill="#C4C4C4"/>
</mask>
<g mask="url(#mask0)">
<circle cx="13" cy="19" r="9" fill="url(#paint0_linear)"/>
<circle cx="11.92" cy="22.24" r="3.6" fill="#F9FAFB"/>
<path d="M4 22.6H6.88L9.04 21.52L11.2 20.8L12.64 21.52L14.44 21.16L16.24 21.52L16.96 21.88L19.12 21.52L20.56 21.88L22 21.16V29.08H16.6H11.92H4V24.04V22.6Z" fill="#C42626"/>
<path d="M6.88 22.6H4V24.04L6.88 22.6Z" fill="#882C2F"/>
<path d="M14.44 21.16L12.64 21.52L11.2 24.04L11.92 29.08H16.6L15.88 27.64L16.24 22.96L16.96 21.88L16.24 21.52L14.44 21.16Z" fill="#AF373B"/>
</g>
<mask id="mask1" mask-type="alpha" maskUnits="userSpaceOnUse" x="4" y="42" width="18" height="18">
<circle cx="13" cy="51" r="9" fill="#C4C4C4"/>
</mask>
<g mask="url(#mask1)">
<circle cx="13" cy="51" r="9" fill="#D6D4D5"/>
<path d="M13.612 53.8162C19.048 49.6124 22.0252 53.8162 22.0252 53.8162V60.4402H5.89721L7.49201 53.988C7.99666 53.5705 8.17601 58.02 13.612 53.8162Z" fill="url(#paint1_linear)"/>
<path d="M4.53998 54.0601C4.53998 54.0601 8.10867 49.2615 12.388 54.9961C16.3011 60.2399 20.3145 56.741 20.668 55.8518V55.6801C20.7021 55.7083 20.7011 55.7686 20.668 55.8518V60.684H4.53998V54.0601Z" fill="url(#paint2_linear)"/>
<path d="M21.568 47.1119C21.568 48.2254 20.6654 49.1279 19.552 49.1279C18.4386 49.1279 17.536 48.2254 17.536 47.1119C17.536 45.9985 18.4386 45.0959 19.552 45.0959C20.6654 45.0959 21.568 45.9985 21.568 47.1119Z" fill="#E76563"/>
<path d="M19.12 49.0559H19.984V49.4879H19.12V49.0559Z" fill="#E76563"/>
<rect x="19.12" y="49.344" width="0.864" height="0.072" fill="white"/>
<path d="M19.264 49.488H19.336V49.776H19.264V49.488Z" fill="#4F65B6"/>
<path d="M19.48 49.488H19.624V49.776H19.48V49.488Z" fill="#4F65B6"/>
<path d="M19.768 49.488H19.84V49.776H19.768V49.488Z" fill="#4F65B6"/>
<path d="M19.048 49.776H20.056L19.984 50.28H19.12L19.048 49.776Z" fill="#4F65B6"/>
</g>
<circle cx="20" cy="45" r="3.5" fill="#EF3B3B" stroke="black"/>
<mask id="mask2" mask-type="alpha" maskUnits="userSpaceOnUse" x="4" y="65" width="18" height="18">
<circle cx="13" cy="74" r="9" fill="#C4C4C4"/>
</mask>
<g mask="url(#mask2)">
<circle cx="13" cy="74" r="9" fill="url(#paint3_linear)"/>
<path d="M11.056 79.184L13.936 75.764V80.516L11.992 80.336L11.056 79.184Z" fill="#2E2816"/>
<path d="M5.97998 76.2679L13.72 80.3719L13.792 85.0159L5.97998 82.3519L5.15198 79.1839L5.97998 76.2679Z" fill="url(#paint4_linear)"/>
<path d="M4.75598 78.0319L5.97998 76.2679L5.22398 79.4719L4.93598 78.5359L4.75598 78.0319Z" fill="#7EA6A6"/>
<path d="M19.12 68.708L21.64 70.544L24.484 76.124L22.468 79.94L19.12 68.708Z" fill="#EDEDED"/>
<path d="M12.964 79.976L13.864 80.444L13.936 84.008L13 83.972L12.964 79.976Z" fill="#878787" fill-opacity="0.5"/>
<path d="M13.468 75.584L19.12 68.708L23.008 79.112L13.72 85.736L13.468 75.584Z" fill="url(#paint5_linear)"/>
</g>
<mask id="mask3" mask-type="alpha" maskUnits="userSpaceOnUse" x="4" y="88" width="18" height="18">
<circle cx="13" cy="97" r="9" fill="#C4C4C4"/>
</mask>
<g mask="url(#mask3)">
<circle cx="13" cy="97" r="9" fill="url(#paint6_linear)"/>
<path d="M4.252 89.404C4.252 89.404 11.236 87.2439 16.024 92.284C20.812 97.324 19.732 106.396 19.732 106.396H4.252L3.604 97.936L4.252 89.404Z" fill="url(#paint7_linear)"/>
<path d="M14.404 106.396C12.208 111.508 19.732 106.396 19.732 106.396C19.732 106.396 20.488 100.348 18.508 95.956C16.528 91.564 13.72 90.448 13.72 90.448C13.72 90.448 16.6 101.284 14.404 106.396Z" fill="url(#paint8_linear)"/>
</g>
<mask id="mask4" mask-type="alpha" maskUnits="userSpaceOnUse" x="4" y="110" width="18" height="18">
<circle cx="13" cy="119" r="9" fill="#C4C4C4"/>
</mask>
<g mask="url(#mask4)">
<circle cx="13" cy="119" r="9" fill="url(#paint9_linear)"/>
<path d="M3.35199 122.708L22.216 122.708" stroke="#8181B1" stroke-width="0.144"/>
<path d="M3.28003 121.376L22.144 121.376" stroke="#A2A2BE" stroke-width="0.144"/>
<path d="M3.56799 119.936L22.432 119.936" stroke="#ADADBD" stroke-width="0.216"/>
<path d="M3.784 118.496L22.648 118.496" stroke="#BBBBCD" stroke-width="0.216"/>
<line x1="3.35199" y1="124.004" x2="22.216" y2="124.004" stroke="#8181B1" stroke-width="0.072"/>
<line x1="3.35199" y1="125.3" x2="22.216" y2="125.3" stroke="#8181B1" stroke-width="0.072"/>
<path d="M13.144 122.816L13.828 123.824C13.828 123.824 13.936 124.256 13.828 124.328C13.72 124.4 13.288 123.824 13.18 123.5C13.072 123.176 13.144 122.816 13.144 122.816Z" fill="#E6E7F4"/>
<path d="M13.828 124.328V123.824C13.828 123.824 15.304 123.608 16.708 122.816C18.112 122.024 18.364 120.944 18.364 120.944C18.364 120.944 18.292 121.952 16.924 123.032C15.556 124.112 13.828 124.328 13.828 124.328Z" fill="#E6E7F4"/>
<path d="M18.364 120.944C15.448 120.764 13.144 122.826 13.144 122.826L13.828 123.834C13.828 123.834 17.644 123.248 18.364 120.944Z" fill="white"/>
<path d="M18.256 121.016C15.6819 120.86 13.252 122.816 13.252 122.816L13.864 123.716C13.864 123.716 17.6204 123.017 18.256 121.016Z" fill="url(#paint10_linear)"/>
</g>
<defs>
<linearGradient id="paint0_linear" x1="13" y1="10" x2="13" y2="28" gradientUnits="userSpaceOnUse">
<stop stop-color="#AAB6BD"/>
<stop offset="1" stop-color="#D4DDE1"/>
</linearGradient>
<linearGradient id="paint1_linear" x1="14.908" y1="54.744" x2="22.756" y2="61.08" gradientUnits="userSpaceOnUse">
<stop stop-color="#4F65B6"/>
<stop offset="1" stop-color="#C6D0F1"/>
</linearGradient>
<linearGradient id="paint2_linear" x1="8.39198" y1="54.276" x2="21.496" y2="60.324" gradientUnits="userSpaceOnUse">
<stop stop-color="#4F65B6"/>
<stop offset="1" stop-color="#C6D0F1"/>
</linearGradient>
<linearGradient id="paint3_linear" x1="9.292" y1="65.432" x2="18.22" y2="82.388" gradientUnits="userSpaceOnUse">
<stop stop-color="#009092"/>
<stop offset="1" stop-color="#79C6C8"/>
</linearGradient>
<linearGradient id="paint4_linear" x1="9.39998" y1="76.2679" x2="9.39998" y2="85.0519" gradientUnits="userSpaceOnUse">
<stop stop-color="#CBCBCB"/>
<stop offset="1" stop-color="#FAFAFA"/>
</linearGradient>
<linearGradient id="paint5_linear" x1="18.238" y1="68.708" x2="18.238" y2="85.736" gradientUnits="userSpaceOnUse">
<stop stop-color="#95ABA9"/>
<stop offset="1" stop-color="#DCDCDC"/>
</linearGradient>
<linearGradient id="paint6_linear" x1="10.876" y1="87.604" x2="17.86" y2="105.136" gradientUnits="userSpaceOnUse">
<stop stop-color="#41486A"/>
<stop offset="1" stop-color="#3B3F5C"/>
</linearGradient>
<linearGradient id="paint7_linear" x1="7.312" y1="91.168" x2="19.84" y2="107.224" gradientUnits="userSpaceOnUse">
<stop stop-color="#4C7799"/>
<stop offset="0.9999" stop-color="#39AEBF"/>
<stop offset="1" stop-color="#4C7799" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint8_linear" x1="16.636" y1="96.568" x2="12.388" y2="87.316" gradientUnits="userSpaceOnUse">
<stop stop-color="#DD4878"/>
<stop offset="1" stop-color="#D7E1E8"/>
</linearGradient>
<linearGradient id="paint9_linear" x1="9.94" y1="109.244" x2="13.756" y2="125.912" gradientUnits="userSpaceOnUse">
<stop stop-color="#847DAF"/>
<stop offset="1" stop-color="#4547AE"/>
</linearGradient>
<linearGradient id="paint10_linear" x1="15.484" y1="122.024" x2="16.924" y2="123.5" gradientUnits="userSpaceOnUse">
<stop stop-color="#DFDFE1"/>
<stop offset="1" stop-color="#F5F4FB"/>
</linearGradient>
</defs>
</svg>
src/pages/settings/assets/dark_old.svg 0 → 100644
View file @ 1ac5de17
<svg xmlns="http://www.w3.org/2000/svg" width="323" height="202" viewBox="0 0 323 202">
<g id="Dark" transform="translate(-225 -535)">
<g id="Group_188" data-name="Group 188">
<rect id="Rectangle_207" data-name="Rectangle 207" width="323" height="202" rx="6" transform="translate(225 535)" fill="#333234"/>
<path id="Rectangle_209" data-name="Rectangle 209" d="M6,0H95a0,0,0,0,1,0,0V202a0,0,0,0,1,0,0H6a6,6,0,0,1-6-6V6A6,6,0,0,1,6,0Z" transform="translate(225 535)" fill="#212121"/>
<g id="Group_195" data-name="Group 195" transform="translate(-345 1)">
<g id="Group_196" data-name="Group 196" transform="translate(0 -6)">
<rect id="Rectangle_221" data-name="Rectangle 221" width="81" height="15" rx="2" transform="translate(577 560)" fill="#373737"/>
<rect id="Rectangle_217" data-name="Rectangle 217" width="22" height="4" rx="1" transform="translate(577 602)" fill="#efefef"/>
<rect id="Rectangle_231" data-name="Rectangle 231" width="29" height="4" rx="1" transform="translate(591 566)" fill="#fff"/>
<g id="Group_198" data-name="Group 198">
<rect id="Rectangle_226" data-name="Rectangle 226" width="81" height="15" rx="2" transform="translate(577 580)" fill="#212121"/>
<rect id="Rectangle_232" data-name="Rectangle 232" width="30" height="4" rx="1" transform="translate(613 586)" fill="#fff"/>
<rect id="Rectangle_233" data-name="Rectangle 233" width="20" height="4" rx="1" transform="translate(591 586)" fill="#fff"/>
</g>
<g id="Voice_Channel" data-name="Voice Channel">
<rect id="Rectangle_227" data-name="Rectangle 227" width="81" height="15" rx="2" transform="translate(577 614)" fill="#36ad93"/>
<rect id="Rectangle_230" data-name="Rectangle 230" width="16" height="4" rx="1" transform="translate(591 620)" fill="#fff"/>
<g id="Connected_Users" data-name="Connected Users">
<circle id="Ellipse_50" data-name="Ellipse 50" cx="4.5" cy="4.5" r="4.5" transform="translate(630 617)" fill="#8b8b8b"/>
<circle id="Ellipse_51" data-name="Ellipse 51" cx="4.5" cy="4.5" r="4.5" transform="translate(635 617)" fill="#b7b7b7"/>
<circle id="Ellipse_52" data-name="Ellipse 52" cx="4.5" cy="4.5" r="4.5" transform="translate(641 617)" fill="#e8e8e8"/>
</g>
</g>
<g id="Group_199" data-name="Group 199" transform="translate(0 54)">
<rect id="Rectangle_226-2" data-name="Rectangle 226" width="81" height="15" rx="2" transform="translate(577 580)" fill="#212121"/>
<rect id="Rectangle_234" data-name="Rectangle 234" width="25" height="4" rx="1" transform="translate(591 586)" fill="#fff"/>
</g>
<g id="Group_200" data-name="Group 200" transform="translate(0 74)">
<rect id="Rectangle_226-3" data-name="Rectangle 226" width="81" height="15" rx="2" transform="translate(577 580)" fill="#212121"/>
<rect id="Rectangle_235" data-name="Rectangle 235" width="15" height="4" rx="1" transform="translate(629 586)" fill="#fff"/>
<rect id="Rectangle_236" data-name="Rectangle 236" width="36" height="4" rx="1" transform="translate(591 586)" fill="#fff"/>
</g>
<g id="Group_201" data-name="Group 201" transform="translate(0 94)">
<rect id="Rectangle_226-4" data-name="Rectangle 226" width="81" height="15" rx="2" transform="translate(577 580)" fill="#212121"/>
<rect id="Rectangle_237" data-name="Rectangle 237" width="20" height="4" rx="1" transform="translate(591 586)" fill="#fff"/>
<rect id="Rectangle_238" data-name="Rectangle 238" width="30" height="4" rx="1" transform="translate(613 586)" fill="#fff"/>
</g>
</g>
<path id="Rectangle_224" data-name="Rectangle 224" d="M0,0H95a0,0,0,0,1,0,0V51a0,0,0,0,1,0,0H6a6,6,0,0,1-6-6V0A0,0,0,0,1,0,0Z" transform="translate(570 685)" fill="#404040"/>
</g>
</g>
<g id="Group_187" data-name="Group 187" transform="translate(0 -9)">
<circle id="Ellipse_49" data-name="Ellipse 49" cx="10.5" cy="10.5" r="10.5" transform="translate(336 681)" fill="#686868"/>
<rect id="Rectangle_210" data-name="Rectangle 210" width="34" height="8" rx="2" transform="translate(365 681)" fill="#e8e8e8"/>
<rect id="Rectangle_211" data-name="Rectangle 211" width="28" height="8" rx="2" transform="translate(404 681)" fill="#676767"/>
<rect id="Rectangle_212" data-name="Rectangle 212" width="24" height="6" rx="2" transform="translate(365 696)" fill="#fff"/>
<rect id="Rectangle_213" data-name="Rectangle 213" width="47" height="6" rx="2" transform="translate(393 696)" fill="#fff"/>
<rect id="Rectangle_214" data-name="Rectangle 214" width="55" height="6" rx="2" transform="translate(444 696)" fill="#fff"/>
</g>
<g id="Group_189" data-name="Group 189">
<line id="Line_18" data-name="Line 18" x2="191" transform="translate(335.5 656.5)" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1" opacity="0.5"/>
</g>
<g id="Group_192" data-name="Group 192" transform="translate(0 -83)">
<rect id="Rectangle_210-2" data-name="Rectangle 210" width="34" height="8" rx="2" transform="translate(365 681)" fill="#e8e8e8"/>
<rect id="Rectangle_211-2" data-name="Rectangle 211" width="28" height="8" rx="2" transform="translate(404 681)" fill="#676767"/>
<rect id="Rectangle_212-2" data-name="Rectangle 212" width="81" height="6" rx="2" transform="translate(365 696)" fill="#68abee"/>
<g id="Group_194" data-name="Group 194" transform="translate(0 2)">
<rect id="Rectangle_219" data-name="Rectangle 219" width="23" height="6" rx="2" transform="translate(372 707)" fill="#68abee"/>
<rect id="Rectangle_220" data-name="Rectangle 220" width="103" height="6" rx="2" transform="translate(372 718)" fill="#888"/>
<line id="Line_35" data-name="Line 35" y2="17" transform="translate(365.5 707.5)" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1"/>
</g>
<circle id="Ellipse_49-2" data-name="Ellipse 49" cx="10.5" cy="10.5" r="10.5" transform="translate(336 681)" fill="#686868"/>
</g>
<g id="Group_193" data-name="Group 193" transform="translate(0 -133)">
<circle id="Ellipse_49-3" data-name="Ellipse 49" cx="10.5" cy="10.5" r="10.5" transform="translate(336 681)" fill="#686868"/>
<rect id="Rectangle_210-3" data-name="Rectangle 210" width="34" height="8" rx="2" transform="translate(365 681)" fill="#e8e8e8"/>
<rect id="Rectangle_211-3" data-name="Rectangle 211" width="28" height="8" rx="2" transform="translate(404 681)" fill="#676767"/>
<rect id="Rectangle_212-3" data-name="Rectangle 212" width="95" height="6" rx="2" transform="translate(365 696)" fill="#fff"/>
<rect id="Rectangle_213-2" data-name="Rectangle 213" width="29" height="6" rx="2" transform="translate(365 709)" fill="#fff"/>
<rect id="Rectangle_218" data-name="Rectangle 218" width="50" height="6" rx="2" transform="translate(398 709)" fill="#fff"/>
<rect id="Rectangle_214-2" data-name="Rectangle 214" width="68" height="6" rx="2" transform="translate(464 696)" fill="#fff"/>
</g>
<rect id="Rectangle_228" data-name="Rectangle 228" width="191" height="18" rx="4" transform="translate(336 709)" fill="#434343"/>
<g id="Rectangle_229" data-name="Rectangle 229" transform="translate(506 709)" fill="#707070" stroke="#707070" stroke-width="1">
<path d="M0,0H17a4,4,0,0,1,4,4V14a4,4,0,0,1-4,4H0a0,0,0,0,1,0,0V0A0,0,0,0,1,0,0Z" stroke="none"/>
<path d="M1,.5H17A3.5,3.5,0,0,1,20.5,4V14A3.5,3.5,0,0,1,17,17.5H1A.5.5,0,0,1,.5,17V1A.5.5,0,0,1,1,.5Z" fill="none"/>
</g>
</g>
</svg>
src/pages/settings/assets/light.svg
View file @ 1ac5de17
<svg xmlns="http://www.w3.org/2000/svg" width="323" height="202" viewBox="0 0 323 202">
<g id="Light" transform="translate(-225 -535)">
<g id="Group_188" data-name="Group 188">
<rect id="Rectangle_207" data-name="Rectangle 207" width="323" height="202" rx="6" transform="translate(225 535)" fill="#fbfbfb"/>
<path id="Rectangle_209" data-name="Rectangle 209" d="M6,0H95a0,0,0,0,1,0,0V202a0,0,0,0,1,0,0H6a6,6,0,0,1-6-6V6A6,6,0,0,1,6,0Z" transform="translate(225 535)" fill="#fff"/>
<g id="Group_195" data-name="Group 195" transform="translate(-345 1)">
<g id="Group_196" data-name="Group 196" transform="translate(0 -6)">
<rect id="Rectangle_221" data-name="Rectangle 221" width="81" height="15" rx="2" transform="translate(577 560)" fill="#e8e8e8"/>
<rect id="Rectangle_217" data-name="Rectangle 217" width="22" height="4" rx="1" transform="translate(577 602)" fill="#5a5a5a"/>
<rect id="Rectangle_231" data-name="Rectangle 231" width="29" height="4" rx="1" transform="translate(591 566)" fill="#464646"/>
<g id="Group_198" data-name="Group 198">
<rect id="Rectangle_226" data-name="Rectangle 226" width="81" height="15" rx="2" transform="translate(577 580)" fill="#fff"/>
<rect id="Rectangle_232" data-name="Rectangle 232" width="30" height="4" rx="1" transform="translate(613 586)" fill="#464646"/>
<rect id="Rectangle_233" data-name="Rectangle 233" width="20" height="4" rx="1" transform="translate(591 586)" fill="#464646"/>
</g>
<g id="Voice_Channel" data-name="Voice Channel">
<rect id="Rectangle_227" data-name="Rectangle 227" width="81" height="15" rx="2" transform="translate(577 614)" fill="#36ad93"/>
<rect id="Rectangle_230" data-name="Rectangle 230" width="16" height="4" rx="1" transform="translate(591 620)" fill="#fff"/>
<g id="Connected_Users" data-name="Connected Users">
<circle id="Ellipse_50" data-name="Ellipse 50" cx="4.5" cy="4.5" r="4.5" transform="translate(630 617)" fill="#8b8b8b"/>
<circle id="Ellipse_51" data-name="Ellipse 51" cx="4.5" cy="4.5" r="4.5" transform="translate(635 617)" fill="#b7b7b7"/>
<circle id="Ellipse_52" data-name="Ellipse 52" cx="4.5" cy="4.5" r="4.5" transform="translate(641 617)" fill="#e8e8e8"/>
</g>
</g>
<g id="Group_199" data-name="Group 199" transform="translate(0 54)">
<rect id="Rectangle_226-2" data-name="Rectangle 226" width="81" height="15" rx="2" transform="translate(577 580)" fill="#fff"/>
<rect id="Rectangle_234" data-name="Rectangle 234" width="25" height="4" rx="1" transform="translate(591 586)" fill="#464646"/>
</g>
<g id="Group_200" data-name="Group 200" transform="translate(0 74)">
<rect id="Rectangle_226-3" data-name="Rectangle 226" width="81" height="15" rx="2" transform="translate(577 580)" fill="#fff"/>
<rect id="Rectangle_235" data-name="Rectangle 235" width="15" height="4" rx="1" transform="translate(629 586)" fill="#464646"/>
<rect id="Rectangle_236" data-name="Rectangle 236" width="36" height="4" rx="1" transform="translate(591 586)" fill="#464646"/>
</g>
<g id="Group_201" data-name="Group 201" transform="translate(0 94)">
<rect id="Rectangle_226-4" data-name="Rectangle 226" width="81" height="15" rx="2" transform="translate(577 580)" fill="#fff"/>
<rect id="Rectangle_237" data-name="Rectangle 237" width="20" height="4" rx="1" transform="translate(591 586)" fill="#464646"/>
<rect id="Rectangle_238" data-name="Rectangle 238" width="30" height="4" rx="1" transform="translate(613 586)" fill="#464646"/>
</g>
</g>
<path id="Rectangle_224" data-name="Rectangle 224" d="M0,0H95a0,0,0,0,1,0,0V51a0,0,0,0,1,0,0H6a6,6,0,0,1-6-6V0A0,0,0,0,1,0,0Z" transform="translate(570 685)" fill="#c7c7c7"/>
</g>
</g>
<g id="Group_187" data-name="Group 187" transform="translate(0 -9)">
<circle id="Ellipse_49" data-name="Ellipse 49" cx="10.5" cy="10.5" r="10.5" transform="translate(336 681)" fill="#cfcfcf"/>
<rect id="Rectangle_210" data-name="Rectangle 210" width="34" height="8" rx="2" transform="translate(365 681)" fill="#464646"/>
<rect id="Rectangle_211" data-name="Rectangle 211" width="28" height="8" rx="2" transform="translate(404 681)" fill="#676767"/>
<rect id="Rectangle_212" data-name="Rectangle 212" width="24" height="6" rx="2" transform="translate(365 696)" fill="#4a4a4a"/>
<rect id="Rectangle_213" data-name="Rectangle 213" width="47" height="6" rx="2" transform="translate(393 696)" fill="#4a4a4a"/>
<rect id="Rectangle_214" data-name="Rectangle 214" width="55" height="6" rx="2" transform="translate(444 696)" fill="#4a4a4a"/>
</g>
<g id="Group_189" data-name="Group 189">
<line id="Line_18" data-name="Line 18" x2="191" transform="translate(335.5 656.5)" fill="none" stroke="#c5c5c5" stroke-linecap="round" stroke-width="1" opacity="0.5"/>
</g>
<g id="Group_192" data-name="Group 192" transform="translate(0 -83)">
<rect id="Rectangle_210-2" data-name="Rectangle 210" width="34" height="8" rx="2" transform="translate(365 681)" fill="#464646"/>
<rect id="Rectangle_211-2" data-name="Rectangle 211" width="28" height="8" rx="2" transform="translate(404 681)" fill="#676767"/>
<rect id="Rectangle_212-2" data-name="Rectangle 212" width="81" height="6" rx="2" transform="translate(365 696)" fill="#68abee"/>
<g id="Group_194" data-name="Group 194" transform="translate(0 2)">
<rect id="Rectangle_219" data-name="Rectangle 219" width="23" height="6" rx="2" transform="translate(372 707)" fill="#68abee"/>
<rect id="Rectangle_220" data-name="Rectangle 220" width="103" height="6" rx="2" transform="translate(372 718)" fill="#4a4a4a"/>
<line id="Line_35" data-name="Line 35" y2="17" transform="translate(365.5 707.5)" fill="none" stroke="#bfbfbf" stroke-linecap="round" stroke-width="1"/>
</g>
<circle id="Ellipse_49-2" data-name="Ellipse 49" cx="10.5" cy="10.5" r="10.5" transform="translate(336 681)" fill="#cfcfcf"/>
</g>
<g id="Group_193" data-name="Group 193" transform="translate(0 -133)">
<circle id="Ellipse_49-3" data-name="Ellipse 49" cx="10.5" cy="10.5" r="10.5" transform="translate(336 681)" fill="#cfcfcf"/>
<rect id="Rectangle_210-3" data-name="Rectangle 210" width="34" height="8" rx="2" transform="translate(365 681)" fill="#464646"/>
<rect id="Rectangle_211-3" data-name="Rectangle 211" width="28" height="8" rx="2" transform="translate(404 681)" fill="#676767"/>
<rect id="Rectangle_212-3" data-name="Rectangle 212" width="95" height="6" rx="2" transform="translate(365 696)" fill="#4a4a4a"/>
<rect id="Rectangle_213-2" data-name="Rectangle 213" width="29" height="6" rx="2" transform="translate(365 709)" fill="#4a4a4a"/>
<rect id="Rectangle_218" data-name="Rectangle 218" width="50" height="6" rx="2" transform="translate(398 709)" fill="#4a4a4a"/>
<rect id="Rectangle_214-2" data-name="Rectangle 214" width="68" height="6" rx="2" transform="translate(464 696)" fill="#4a4a4a"/>
</g>
<rect id="Rectangle_228" data-name="Rectangle 228" width="191" height="18" rx="4" transform="translate(336 709)" fill="#ececec"/>
<path id="Rectangle_229" data-name="Rectangle 229" d="M0,0H17a4,4,0,0,1,4,4V14a4,4,0,0,1-4,4H0a0,0,0,0,1,0,0V0A0,0,0,0,1,0,0Z" transform="translate(506 709)" fill="#bebfc1"/>
</g>
</svg>
<svg width="323" height="202" viewBox="0 0 323 202" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="323" height="202" fill="#F6F6F6"/>
<path d="M27 14C27 11.7909 28.7909 10 31 10H90V202H31C28.7909 202 27 200.209 27 198V14Z" fill="#EDEDED"/>
<rect x="90" y="10" width="233" height="192" fill="white"/>
<rect x="90" y="10" width="233" height="18" fill="#E8E8E8"/>
<rect x="97" y="16" width="30" height="6" rx="2" fill="#C4C4C4"/>
<path d="M106.517 163.445C111.534 163.445 115.601 159.378 115.601 154.361C115.601 149.344 111.534 145.277 106.517 145.277C101.5 145.277 97.4326 149.344 97.4326 154.361C97.4326 159.378 101.5 163.445 106.517 163.445Z" fill="#CFCFCF"/>
<path d="M150.206 145.277H124.252C123.296 145.277 122.522 146.052 122.522 147.008V150.468C122.522 151.424 123.296 152.198 124.252 152.198H150.206C151.162 152.198 151.936 151.424 151.936 150.468V147.008C151.936 146.052 151.162 145.277 150.206 145.277Z" fill="#464646"/>
<path d="M178.756 145.277H157.992C157.037 145.277 156.262 146.052 156.262 147.008V150.468C156.262 151.424 157.037 152.198 157.992 152.198H178.756C179.711 152.198 180.486 151.424 180.486 150.468V147.008C180.486 146.052 179.711 145.277 178.756 145.277Z" fill="#676767"/>
<path d="M141.555 158.255H124.252C123.296 158.255 122.522 159.029 122.522 159.985V161.715C122.522 162.671 123.296 163.445 124.252 163.445H141.555C142.51 163.445 143.285 162.671 143.285 161.715V159.985C143.285 159.029 142.51 158.255 141.555 158.255Z" fill="#4A4A4A"/>
<path d="M185.677 158.255H148.476C147.52 158.255 146.746 159.029 146.746 159.985V161.715C146.746 162.671 147.52 163.445 148.476 163.445H185.677C186.633 163.445 187.407 162.671 187.407 161.715V159.985C187.407 159.029 186.633 158.255 185.677 158.255Z" fill="#4A4A4A"/>
<path d="M236.72 158.255H192.598C191.642 158.255 190.868 159.029 190.868 159.985V161.715C190.868 162.671 191.642 163.445 192.598 163.445H236.72C237.676 163.445 238.45 162.671 238.45 161.715V159.985C238.45 159.029 237.676 158.255 236.72 158.255Z" fill="#4A4A4A"/>
<path opacity="0.5" d="M97 131.868H262.242" stroke="#707070" stroke-width="0.86514" stroke-linecap="round"/>
<path d="M150.206 81.257H124.252C123.296 81.257 122.522 82.0316 122.522 82.9872V86.4478C122.522 87.4034 123.296 88.1781 124.252 88.1781H150.206C151.162 88.1781 151.936 87.4034 151.936 86.4478V82.9872C151.936 82.0316 151.162 81.257 150.206 81.257Z" fill="#464646"/>
<path d="M178.756 81.257H157.992C157.037 81.257 156.262 82.0316 156.262 82.9872V86.4478C156.262 87.4034 157.037 88.1781 157.992 88.1781H178.756C179.711 88.1781 180.486 87.4034 180.486 86.4478V82.9872C180.486 82.0316 179.711 81.257 178.756 81.257Z" fill="#676767"/>
<path d="M190.868 94.2341H124.252C123.296 94.2341 122.522 95.0088 122.522 95.9644V97.6947C122.522 98.6503 123.296 99.425 124.252 99.425H190.868C191.823 99.425 192.598 98.6503 192.598 97.6947V95.9644C192.598 95.0088 191.823 94.2341 190.868 94.2341Z" fill="#68ABEE"/>
<path d="M146.746 106.708H130.308C129.352 106.708 128.578 107.483 128.578 108.439V110.169C128.578 111.124 129.352 111.899 130.308 111.899H146.746C147.701 111.899 148.476 111.124 148.476 110.169V108.439C148.476 107.483 147.701 106.708 146.746 106.708Z" fill="#68ABEE"/>
<path d="M215.957 114.997H130.308C129.352 114.997 128.578 115.772 128.578 116.728V118.458C128.578 119.413 129.352 120.188 130.308 120.188H215.957C216.912 120.188 217.687 119.413 217.687 118.458V116.728C217.687 115.772 216.912 114.997 215.957 114.997Z" fill="#4A4A4A"/>
<path d="M122.954 105.913V120.621" stroke="#BFBFBF" stroke-width="0.86514" stroke-linecap="round"/>
<path d="M106.517 99.4249C111.534 99.4249 115.601 95.3579 115.601 90.3409C115.601 85.324 111.534 81.257 106.517 81.257C101.5 81.257 97.4326 85.324 97.4326 90.3409C97.4326 95.3579 101.5 99.4249 106.517 99.4249Z" fill="#CFCFCF"/>
<path d="M106.517 56.1679C111.534 56.1679 115.601 52.1009 115.601 47.084C115.601 42.067 111.534 38 106.517 38C101.5 38 97.4326 42.067 97.4326 47.084C97.4326 52.1009 101.5 56.1679 106.517 56.1679Z" fill="#CFCFCF"/>
<path d="M150.206 38H124.252C123.296 38 122.522 38.7747 122.522 39.7303V43.1908C122.522 44.1464 123.296 44.9211 124.252 44.9211H150.206C151.162 44.9211 151.936 44.1464 151.936 43.1908V39.7303C151.936 38.7747 151.162 38 150.206 38Z" fill="#464646"/>
<path d="M178.756 38H157.992C157.037 38 156.262 38.7747 156.262 39.7303V43.1908C156.262 44.1464 157.037 44.9211 157.992 44.9211H178.756C179.711 44.9211 180.486 44.1464 180.486 43.1908V39.7303C180.486 38.7747 179.711 38 178.756 38Z" fill="#676767"/>
<path d="M202.98 50.9771H124.252C123.296 50.9771 122.522 51.7517 122.522 52.7073V54.4376C122.522 55.3932 123.296 56.1679 124.252 56.1679H202.98C203.935 56.1679 204.71 55.3932 204.71 54.4376V52.7073C204.71 51.7517 203.935 50.9771 202.98 50.9771Z" fill="#4A4A4A"/>
<path d="M145.88 62.2239H124.252C123.296 62.2239 122.522 62.9985 122.522 63.9542V65.6844C122.522 66.64 123.296 67.4147 124.252 67.4147H145.88C146.836 67.4147 147.611 66.64 147.611 65.6844V63.9542C147.611 62.9985 146.836 62.2239 145.88 62.2239Z" fill="#4A4A4A"/>
<path d="M192.598 62.2239H152.802C151.846 62.2239 151.071 62.9985 151.071 63.9542V65.6844C151.071 66.64 151.846 67.4147 152.802 67.4147H192.598C193.554 67.4147 194.328 66.64 194.328 65.6844V63.9542C194.328 62.9985 193.554 62.2239 192.598 62.2239Z" fill="#4A4A4A"/>
<path d="M265.27 50.9771H209.901C208.945 50.9771 208.17 51.7517 208.17 52.7073V54.4376C208.17 55.3932 208.945 56.1679 209.901 56.1679H265.27C266.225 56.1679 267 55.3932 267 54.4376V52.7073C267 51.7517 266.225 50.9771 265.27 50.9771Z" fill="#4A4A4A"/>
<rect x="90" y="184" width="233" height="18" fill="#D3D3D3"/>
<circle cx="317" cy="5" r="2" fill="#C4C4C4"/>
<circle cx="310" cy="5" r="2" fill="#C4C4C4"/>
<circle cx="303" cy="5" r="2" fill="#C4C4C4"/>
<line x1="4.5" y1="34.5" x2="21.5" y2="34.5" stroke="#C0C0C0" stroke-linecap="round"/>
<rect x="30" y="16" width="36" height="6" rx="2" fill="#BCBCBC"/>
<rect x="30" y="35" width="26" height="4" rx="2" fill="#676565"/>
<rect x="39" y="46" width="32" height="4" rx="2" fill="#9A9A9A"/>
<rect x="39" y="70" width="29" height="4" rx="2" fill="#9A9A9A"/>
<rect x="39" y="58" width="13" height="4" rx="2" fill="#9A9A9A"/>
<rect x="55" y="58" width="22" height="4" rx="2" fill="#9A9A9A"/>
<rect x="30" y="83" width="26" height="4" rx="2" fill="#676565"/>
<rect x="39" y="94" width="32" height="4" rx="2" fill="#9A9A9A"/>
<rect x="39" y="118" width="29" height="4" rx="2" fill="#9A9A9A"/>
<rect x="39" y="106" width="13" height="4" rx="2" fill="#9A9A9A"/>
<rect x="55" y="106" width="22" height="4" rx="2" fill="#9A9A9A"/>
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="4" y="10" width="18" height="18">
<circle cx="13" cy="19" r="9" fill="#C4C4C4"/>
</mask>
<g mask="url(#mask0)">
<circle cx="13" cy="19" r="9" fill="url(#paint0_linear)"/>
<circle cx="11.9199" cy="22.24" r="3.6" fill="#F9FAFB"/>
<path d="M4 22.6H6.88L9.04 21.52L11.2 20.8L12.64 21.52L14.44 21.16L16.24 21.52L16.96 21.88L19.12 21.52L20.56 21.88L22 21.16V29.08H16.6H11.92H4V24.04V22.6Z" fill="#C42626"/>
<path d="M6.88 22.6H4V24.04L6.88 22.6Z" fill="#882C2F"/>
<path d="M14.44 21.16L12.64 21.52L11.2 24.04L11.92 29.08H16.6L15.88 27.64L16.24 22.96L16.96 21.88L16.24 21.52L14.44 21.16Z" fill="#AF373B"/>
</g>
<mask id="mask1" mask-type="alpha" maskUnits="userSpaceOnUse" x="4" y="42" width="18" height="18">
<circle cx="13" cy="51" r="9" fill="#C4C4C4"/>
</mask>
<g mask="url(#mask1)">
<circle cx="13" cy="51" r="9" fill="#D6D4D5"/>
<path d="M13.612 53.8162C19.048 49.6124 22.0251 53.8162 22.0251 53.8162V60.4402H5.89715L7.49195 53.988C7.9966 53.5705 8.17595 58.02 13.612 53.8162Z" fill="url(#paint1_linear)"/>
<path d="M4.54004 54.0601C4.54004 54.0601 8.10873 49.2615 12.388 54.9961C16.3012 60.2399 20.3146 56.741 20.668 55.8518V55.6801C20.7021 55.7083 20.7011 55.7686 20.668 55.8518V60.684H4.54004V54.0601Z" fill="url(#paint2_linear)"/>
<path d="M21.568 47.1119C21.568 48.2254 20.6654 49.1279 19.552 49.1279C18.4386 49.1279 17.536 48.2254 17.536 47.1119C17.536 45.9985 18.4386 45.0959 19.552 45.0959C20.6654 45.0959 21.568 45.9985 21.568 47.1119Z" fill="#E76563"/>
<path d="M19.12 49.0559H19.984V49.4879H19.12V49.0559Z" fill="#E76563"/>
<rect x="19.12" y="49.344" width="0.864" height="0.072" fill="white"/>
<path d="M19.264 49.488H19.336V49.776H19.264V49.488Z" fill="#4F65B6"/>
<path d="M19.48 49.488H19.624V49.776H19.48V49.488Z" fill="#4F65B6"/>
<path d="M19.768 49.488H19.84V49.776H19.768V49.488Z" fill="#4F65B6"/>
<path d="M19.048 49.776H20.056L19.984 50.28H19.12L19.048 49.776Z" fill="#4F65B6"/>
</g>
<mask id="mask2" mask-type="alpha" maskUnits="userSpaceOnUse" x="4" y="65" width="18" height="18">
<circle cx="13" cy="74" r="9" fill="#C4C4C4"/>
</mask>
<g mask="url(#mask2)">
<circle cx="13" cy="74" r="9" fill="url(#paint3_linear)"/>
<path d="M11.056 79.184L13.936 75.764V80.516L11.992 80.336L11.056 79.184Z" fill="#2E2816"/>
<path d="M5.97998 76.2679L13.72 80.3719L13.792 85.0159L5.97998 82.3519L5.15198 79.1839L5.97998 76.2679Z" fill="url(#paint4_linear)"/>
<path d="M4.75598 78.0319L5.97998 76.2679L5.22398 79.4719L4.93598 78.5359L4.75598 78.0319Z" fill="#7EA6A6"/>
<path d="M19.12 68.708L21.64 70.544L24.484 76.124L22.468 79.94L19.12 68.708Z" fill="#EDEDED"/>
<path d="M12.964 79.976L13.864 80.444L13.936 84.008L13 83.972L12.964 79.976Z" fill="#878787" fill-opacity="0.5"/>
<path d="M13.468 75.584L19.12 68.708L23.008 79.112L13.72 85.736L13.468 75.584Z" fill="url(#paint5_linear)"/>
</g>
<mask id="mask3" mask-type="alpha" maskUnits="userSpaceOnUse" x="4" y="88" width="18" height="18">
<circle cx="13" cy="97" r="9" fill="#C4C4C4"/>
</mask>
<g mask="url(#mask3)">
<circle cx="13" cy="97" r="9" fill="url(#paint6_linear)"/>
<path d="M4.252 89.404C4.252 89.404 11.236 87.2439 16.024 92.284C20.812 97.324 19.732 106.396 19.732 106.396H4.252L3.604 97.936L4.252 89.404Z" fill="url(#paint7_linear)"/>
<path d="M14.404 106.396C12.208 111.508 19.732 106.396 19.732 106.396C19.732 106.396 20.488 100.348 18.508 95.956C16.528 91.564 13.72 90.448 13.72 90.448C13.72 90.448 16.6 101.284 14.404 106.396Z" fill="url(#paint8_linear)"/>
</g>
<mask id="mask4" mask-type="alpha" maskUnits="userSpaceOnUse" x="4" y="110" width="18" height="18">
<circle cx="13" cy="119" r="9" fill="#C4C4C4"/>
</mask>
<g mask="url(#mask4)">
<circle cx="13" cy="119" r="9" fill="url(#paint9_linear)"/>
<path d="M3.35205 122.708L22.2161 122.708" stroke="#8181B1" stroke-width="0.144"/>
<path d="M3.28003 121.376L22.144 121.376" stroke="#A2A2BE" stroke-width="0.144"/>
<path d="M3.56799 119.936L22.432 119.936" stroke="#ADADBD" stroke-width="0.216"/>
<path d="M3.78406 118.496L22.6481 118.496" stroke="#BBBBCD" stroke-width="0.216"/>
<line x1="3.35205" y1="124.004" x2="22.2161" y2="124.004" stroke="#8181B1" stroke-width="0.072"/>
<line x1="3.35205" y1="125.3" x2="22.2161" y2="125.3" stroke="#8181B1" stroke-width="0.072"/>
<path d="M13.144 122.816L13.828 123.824C13.828 123.824 13.936 124.256 13.828 124.328C13.72 124.4 13.288 123.824 13.18 123.5C13.072 123.176 13.144 122.816 13.144 122.816Z" fill="#E6E7F4"/>
<path d="M13.828 124.328V123.824C13.828 123.824 15.304 123.608 16.708 122.816C18.112 122.024 18.364 120.944 18.364 120.944C18.364 120.944 18.292 121.952 16.924 123.032C15.556 124.112 13.828 124.328 13.828 124.328Z" fill="#E6E7F4"/>
<path d="M18.364 120.944C15.448 120.764 13.144 122.826 13.144 122.826L13.828 123.834C13.828 123.834 17.644 123.248 18.364 120.944Z" fill="white"/>
<path d="M18.256 121.016C15.6818 120.86 13.252 122.816 13.252 122.816L13.864 123.716C13.864 123.716 17.6204 123.017 18.256 121.016Z" fill="url(#paint10_linear)"/>
</g>
<circle cx="20" cy="45" r="3.5" fill="#EF3B3B" stroke="#F6F6F6"/>
<defs>
<linearGradient id="paint0_linear" x1="13" y1="10" x2="13" y2="28" gradientUnits="userSpaceOnUse">
<stop stop-color="#AAB6BD"/>
<stop offset="1" stop-color="#D4DDE1"/>
</linearGradient>
<linearGradient id="paint1_linear" x1="14.908" y1="54.744" x2="22.7559" y2="61.08" gradientUnits="userSpaceOnUse">
<stop stop-color="#4F65B6"/>
<stop offset="1" stop-color="#C6D0F1"/>
</linearGradient>
<linearGradient id="paint2_linear" x1="8.39204" y1="54.276" x2="21.496" y2="60.324" gradientUnits="userSpaceOnUse">
<stop stop-color="#4F65B6"/>
<stop offset="1" stop-color="#C6D0F1"/>
</linearGradient>
<linearGradient id="paint3_linear" x1="9.292" y1="65.432" x2="18.22" y2="82.388" gradientUnits="userSpaceOnUse">
<stop stop-color="#009092"/>
<stop offset="1" stop-color="#79C6C8"/>
</linearGradient>
<linearGradient id="paint4_linear" x1="9.39998" y1="76.2679" x2="9.39998" y2="85.0519" gradientUnits="userSpaceOnUse">
<stop stop-color="#CBCBCB"/>
<stop offset="1" stop-color="#FAFAFA"/>
</linearGradient>
<linearGradient id="paint5_linear" x1="18.238" y1="68.708" x2="18.238" y2="85.736" gradientUnits="userSpaceOnUse">
<stop stop-color="#95ABA9"/>
<stop offset="1" stop-color="#DCDCDC"/>
</linearGradient>
<linearGradient id="paint6_linear" x1="10.876" y1="87.604" x2="17.86" y2="105.136" gradientUnits="userSpaceOnUse">
<stop stop-color="#41486A"/>
<stop offset="1" stop-color="#3B3F5C"/>
</linearGradient>
<linearGradient id="paint7_linear" x1="7.312" y1="91.168" x2="19.84" y2="107.224" gradientUnits="userSpaceOnUse">
<stop stop-color="#4C7799"/>
<stop offset="0.9999" stop-color="#39AEBF"/>
<stop offset="1" stop-color="#4C7799" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint8_linear" x1="16.636" y1="96.568" x2="12.388" y2="87.316" gradientUnits="userSpaceOnUse">
<stop stop-color="#DD4878"/>
<stop offset="1" stop-color="#D7E1E8"/>
</linearGradient>
<linearGradient id="paint9_linear" x1="9.94" y1="109.244" x2="13.756" y2="125.912" gradientUnits="userSpaceOnUse">
<stop stop-color="#847DAF"/>
<stop offset="1" stop-color="#4547AE"/>
</linearGradient>
<linearGradient id="paint10_linear" x1="15.484" y1="122.024" x2="16.924" y2="123.5" gradientUnits="userSpaceOnUse">
<stop stop-color="#DFDFE1"/>
<stop offset="1" stop-color="#F5F4FB"/>
</linearGradient>
</defs>
</svg>
src/pages/settings/assets/light_old.svg 0 → 100644
View file @ 1ac5de17
<svg xmlns="http://www.w3.org/2000/svg" width="323" height="202" viewBox="0 0 323 202">
<g id="Light" transform="translate(-225 -535)">
<g id="Group_188" data-name="Group 188">
<rect id="Rectangle_207" data-name="Rectangle 207" width="323" height="202" rx="6" transform="translate(225 535)" fill="#fbfbfb"/>
<path id="Rectangle_209" data-name="Rectangle 209" d="M6,0H95a0,0,0,0,1,0,0V202a0,0,0,0,1,0,0H6a6,6,0,0,1-6-6V6A6,6,0,0,1,6,0Z" transform="translate(225 535)" fill="#fff"/>
<g id="Group_195" data-name="Group 195" transform="translate(-345 1)">
<g id="Group_196" data-name="Group 196" transform="translate(0 -6)">
<rect id="Rectangle_221" data-name="Rectangle 221" width="81" height="15" rx="2" transform="translate(577 560)" fill="#e8e8e8"/>
<rect id="Rectangle_217" data-name="Rectangle 217" width="22" height="4" rx="1" transform="translate(577 602)" fill="#5a5a5a"/>
<rect id="Rectangle_231" data-name="Rectangle 231" width="29" height="4" rx="1" transform="translate(591 566)" fill="#464646"/>
<g id="Group_198" data-name="Group 198">
<rect id="Rectangle_226" data-name="Rectangle 226" width="81" height="15" rx="2" transform="translate(577 580)" fill="#fff"/>
<rect id="Rectangle_232" data-name="Rectangle 232" width="30" height="4" rx="1" transform="translate(613 586)" fill="#464646"/>
<rect id="Rectangle_233" data-name="Rectangle 233" width="20" height="4" rx="1" transform="translate(591 586)" fill="#464646"/>
</g>
<g id="Voice_Channel" data-name="Voice Channel">
<rect id="Rectangle_227" data-name="Rectangle 227" width="81" height="15" rx="2" transform="translate(577 614)" fill="#36ad93"/>
<rect id="Rectangle_230" data-name="Rectangle 230" width="16" height="4" rx="1" transform="translate(591 620)" fill="#fff"/>
<g id="Connected_Users" data-name="Connected Users">
<circle id="Ellipse_50" data-name="Ellipse 50" cx="4.5" cy="4.5" r="4.5" transform="translate(630 617)" fill="#8b8b8b"/>
<circle id="Ellipse_51" data-name="Ellipse 51" cx="4.5" cy="4.5" r="4.5" transform="translate(635 617)" fill="#b7b7b7"/>
<circle id="Ellipse_52" data-name="Ellipse 52" cx="4.5" cy="4.5" r="4.5" transform="translate(641 617)" fill="#e8e8e8"/>
</g>
</g>
<g id="Group_199" data-name="Group 199" transform="translate(0 54)">
<rect id="Rectangle_226-2" data-name="Rectangle 226" width="81" height="15" rx="2" transform="translate(577 580)" fill="#fff"/>
<rect id="Rectangle_234" data-name="Rectangle 234" width="25" height="4" rx="1" transform="translate(591 586)" fill="#464646"/>
</g>
<g id="Group_200" data-name="Group 200" transform="translate(0 74)">
<rect id="Rectangle_226-3" data-name="Rectangle 226" width="81" height="15" rx="2" transform="translate(577 580)" fill="#fff"/>
<rect id="Rectangle_235" data-name="Rectangle 235" width="15" height="4" rx="1" transform="translate(629 586)" fill="#464646"/>
<rect id="Rectangle_236" data-name="Rectangle 236" width="36" height="4" rx="1" transform="translate(591 586)" fill="#464646"/>
</g>
<g id="Group_201" data-name="Group 201" transform="translate(0 94)">
<rect id="Rectangle_226-4" data-name="Rectangle 226" width="81" height="15" rx="2" transform="translate(577 580)" fill="#fff"/>
<rect id="Rectangle_237" data-name="Rectangle 237" width="20" height="4" rx="1" transform="translate(591 586)" fill="#464646"/>
<rect id="Rectangle_238" data-name="Rectangle 238" width="30" height="4" rx="1" transform="translate(613 586)" fill="#464646"/>
</g>
</g>
<path id="Rectangle_224" data-name="Rectangle 224" d="M0,0H95a0,0,0,0,1,0,0V51a0,0,0,0,1,0,0H6a6,6,0,0,1-6-6V0A0,0,0,0,1,0,0Z" transform="translate(570 685)" fill="#c7c7c7"/>
</g>
</g>
<g id="Group_187" data-name="Group 187" transform="translate(0 -9)">
<circle id="Ellipse_49" data-name="Ellipse 49" cx="10.5" cy="10.5" r="10.5" transform="translate(336 681)" fill="#cfcfcf"/>
<rect id="Rectangle_210" data-name="Rectangle 210" width="34" height="8" rx="2" transform="translate(365 681)" fill="#464646"/>
<rect id="Rectangle_211" data-name="Rectangle 211" width="28" height="8" rx="2" transform="translate(404 681)" fill="#676767"/>
<rect id="Rectangle_212" data-name="Rectangle 212" width="24" height="6" rx="2" transform="translate(365 696)" fill="#4a4a4a"/>
<rect id="Rectangle_213" data-name="Rectangle 213" width="47" height="6" rx="2" transform="translate(393 696)" fill="#4a4a4a"/>
<rect id="Rectangle_214" data-name="Rectangle 214" width="55" height="6" rx="2" transform="translate(444 696)" fill="#4a4a4a"/>
</g>
<g id="Group_189" data-name="Group 189">
<line id="Line_18" data-name="Line 18" x2="191" transform="translate(335.5 656.5)" fill="none" stroke="#c5c5c5" stroke-linecap="round" stroke-width="1" opacity="0.5"/>
</g>
<g id="Group_192" data-name="Group 192" transform="translate(0 -83)">
<rect id="Rectangle_210-2" data-name="Rectangle 210" width="34" height="8" rx="2" transform="translate(365 681)" fill="#464646"/>
<rect id="Rectangle_211-2" data-name="Rectangle 211" width="28" height="8" rx="2" transform="translate(404 681)" fill="#676767"/>
<rect id="Rectangle_212-2" data-name="Rectangle 212" width="81" height="6" rx="2" transform="translate(365 696)" fill="#68abee"/>
<g id="Group_194" data-name="Group 194" transform="translate(0 2)">
<rect id="Rectangle_219" data-name="Rectangle 219" width="23" height="6" rx="2" transform="translate(372 707)" fill="#68abee"/>
<rect id="Rectangle_220" data-name="Rectangle 220" width="103" height="6" rx="2" transform="translate(372 718)" fill="#4a4a4a"/>
<line id="Line_35" data-name="Line 35" y2="17" transform="translate(365.5 707.5)" fill="none" stroke="#bfbfbf" stroke-linecap="round" stroke-width="1"/>
</g>
<circle id="Ellipse_49-2" data-name="Ellipse 49" cx="10.5" cy="10.5" r="10.5" transform="translate(336 681)" fill="#cfcfcf"/>
</g>
<g id="Group_193" data-name="Group 193" transform="translate(0 -133)">
<circle id="Ellipse_49-3" data-name="Ellipse 49" cx="10.5" cy="10.5" r="10.5" transform="translate(336 681)" fill="#cfcfcf"/>
<rect id="Rectangle_210-3" data-name="Rectangle 210" width="34" height="8" rx="2" transform="translate(365 681)" fill="#464646"/>
<rect id="Rectangle_211-3" data-name="Rectangle 211" width="28" height="8" rx="2" transform="translate(404 681)" fill="#676767"/>
<rect id="Rectangle_212-3" data-name="Rectangle 212" width="95" height="6" rx="2" transform="translate(365 696)" fill="#4a4a4a"/>
<rect id="Rectangle_213-2" data-name="Rectangle 213" width="29" height="6" rx="2" transform="translate(365 709)" fill="#4a4a4a"/>
<rect id="Rectangle_218" data-name="Rectangle 218" width="50" height="6" rx="2" transform="translate(398 709)" fill="#4a4a4a"/>
<rect id="Rectangle_214-2" data-name="Rectangle 214" width="68" height="6" rx="2" transform="translate(464 696)" fill="#4a4a4a"/>
</g>
<rect id="Rectangle_228" data-name="Rectangle 228" width="191" height="18" rx="4" transform="translate(336 709)" fill="#ececec"/>
<path id="Rectangle_229" data-name="Rectangle 229" d="M0,0H17a4,4,0,0,1,4,4V14a4,4,0,0,1-4,4H0a0,0,0,0,1,0,0V0A0,0,0,0,1,0,0Z" transform="translate(506 709)" fill="#bebfc1"/>
</g>
</svg>
src/pages/settings/assets/mutant_emoji.svg
View file @ 1ac5de17
<svg width="168" height="48" viewBox="0 0 168 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M46.6542 31.4888C46.6542 34.5025 45.8664 36.6415 44.6376 38.2006C43.3969 39.7748 41.6127 40.8766 39.4233 41.6367C34.9808 43.1788 29.2654 43.1935 24.1496 43.1935C19.0358 43.1935 13.2409 43.1793 8.71974 41.6345C6.48927 40.8724 4.66749 39.7674 3.40073 38.1907C2.14775 36.6313 1.34512 34.4956 1.34512 31.4888C1.34512 25.8668 2.55606 19.0242 6.00774 13.6332C9.40822 8.32209 15.0271 4.33438 24.1496 4.33438C32.7968 4.33438 38.3534 8.3292 41.8066 13.6813C45.3033 19.1009 46.6542 25.9511 46.6542 31.4888Z" fill="#FBC546" stroke="black" stroke-width="2.69025"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.2728 33.3183C13.8733 31.4729 12.147 28.7982 11.5225 25.7256H36.6027C35.9782 28.7982 34.2518 31.4729 31.8523 33.3183C30.4293 31.7762 17.6959 31.7762 16.2728 33.3183Z" fill="#722245"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.2744 33.3182C17.6975 31.7761 19.7271 30.8445 21.9206 30.8445C23.3155 30.8445 24.8128 30.8445 26.2077 30.8445C28.4012 30.8445 30.4309 31.7761 31.8539 33.3182C29.6963 34.9768 26.9948 35.9634 24.0642 35.9634C21.1336 35.9634 18.432 34.9768 16.2744 33.3182Z" fill="#CA3B8F"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.7473 24.4461C16.9349 24.4461 18.0725 23.9739 18.912 23.1344C19.7516 22.2949 20.2238 21.1572 20.2238 19.9696C20.2238 19.1288 20.2238 18.2483 20.2238 17.4075C20.2238 14.9338 18.2184 12.9285 15.7447 12.9285H15.7421C14.5545 12.9285 13.4169 13.4007 12.5774 14.2402C11.7378 15.0797 11.2656 16.2174 11.2656 17.405C11.2656 18.2458 11.2656 19.1262 11.2656 19.967C11.2656 22.4407 13.271 24.4461 15.7447 24.4461H15.7473V24.4461Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.8252 16.7675C13.8252 16.0892 14.0952 15.4378 14.5751 14.9579C15.055 14.478 15.7064 14.208 16.3847 14.208C17.0629 14.208 17.7143 14.478 18.1942 14.9579C18.6741 15.4378 18.9441 16.0892 18.9441 16.7675C18.9441 17.9653 18.9441 19.3884 18.9441 20.5849C18.9441 21.2645 18.6741 21.9146 18.1942 22.3958C17.7143 22.8757 17.0629 23.1444 16.3847 23.1444C15.7064 23.1444 15.055 22.8757 14.5751 22.3958C14.0952 21.9146 13.8252 21.2645 13.8252 20.5849C13.8252 19.3884 13.8252 17.9653 13.8252 16.7675Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M32.3789 24.4458C31.1913 24.4458 30.0536 23.9736 29.2141 23.1341C28.3746 22.2946 27.9023 21.1569 27.9023 19.9693C27.9023 19.1285 27.9023 18.2481 27.9023 17.4073C27.9023 14.9336 29.9077 12.9282 32.3814 12.9282H32.384C33.5716 12.9282 34.7093 13.4004 35.5488 14.24C36.3883 15.0795 36.8605 16.2171 36.8605 17.4047C36.8605 18.2455 36.8605 19.126 36.8605 19.9668C36.8605 22.4405 34.8551 24.4458 32.3814 24.4458H32.3789Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M34.3006 16.7675C34.3006 16.0892 34.0306 15.4378 33.5507 14.9579C33.0708 14.478 32.4194 14.208 31.7411 14.208C31.0629 14.208 30.4115 14.478 29.9316 14.9579C29.4517 15.4378 29.1816 16.0892 29.1816 16.7675C29.1816 17.9653 29.1816 19.3884 29.1816 20.5849C29.1816 21.2645 29.4517 21.9146 29.9316 22.3958C30.4115 22.8757 31.0629 23.1444 31.7411 23.1444C32.4194 23.1444 33.0708 22.8757 33.5507 22.3958C34.0306 21.9146 34.3006 21.2645 34.3006 20.5849C34.3006 19.3884 34.3006 17.9653 34.3006 16.7675Z" fill="black"/>
<g clip-path="url(#clip0)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M123 45C123 45 127.019 28.9275 129.02 20.922C129.669 18.3225 132.004 16.5 134.683 16.5H134.685C143.971 16.5 151.5 24.0285 151.5 33.315V33.3165C151.5 35.9955 149.678 38.331 147.078 38.9805C139.073 40.9815 123 45 123 45Z" stroke="black" stroke-width="6" stroke-miterlimit="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M142.5 25.5C142.5 25.5 145.146 24.177 147.568 22.9665C150.106 21.696 152.113 19.569 153.231 16.959C153.364 16.6485 153.501 16.332 153.636 16.0155C155.07 12.669 158.359 10.5 162 10.5" stroke="black" stroke-width="9" stroke-miterlimit="1.5" stroke-linecap="square" stroke-linejoin="round"/>
<path d="M136.5 19.5C136.5 19.5 136.5 18.5295 136.5 17.49C136.5 15.9645 137.362 14.5695 138.727 13.887C138.727 13.8855 138.729 13.8855 138.731 13.8855C139.73 13.3845 140.49 12.5085 140.844 11.448C141.196 10.3875 141.116 9.2295 140.615 8.2305C140.013 7.026 139.5 6 139.5 6" stroke="black" stroke-width="9" stroke-miterlimit="1.5" stroke-linecap="square" stroke-linejoin="round"/>
<path d="M150.75 30.75C150.75 30.75 151.517 30.75 152.417 30.75C154.28 30.75 156.117 31.1835 157.783 32.0175C159.421 32.8365 161.25 33.75 161.25 33.75" stroke="black" stroke-width="9" stroke-miterlimit="1.5" stroke-linecap="square" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M142.5 13.5L145.5 10.5L148.5 13.5L145.5 16.5L142.5 13.5Z" stroke="black" stroke-width="6" stroke-miterlimit="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M148.5 7.5L150 3L154.5 4.5L153 9L148.5 7.5Z" stroke="black" stroke-width="6" stroke-miterlimit="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M150 27L151.5 22.5L156 24L154.5 28.5L150 27Z" stroke="black" stroke-width="6" stroke-miterlimit="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M127.5 9L130.5 6L133.5 9L130.5 12L127.5 9Z" stroke="black" stroke-width="6" stroke-miterlimit="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M159 19.5L162 16.5L165 19.5L162 22.5L159 19.5Z" stroke="black" stroke-width="6" stroke-miterlimit="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M142.5 10.5L150 7.5H159V21H135V9L142.5 10.5Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M130.5 18.2695L149.734 37.504C149.014 38.206 148.107 38.728 147.078 38.9845C139.073 40.9855 123 45.004 123 45.004C123 45.004 127.019 28.9315 129.02 20.926C129.276 19.897 129.798 18.9895 130.5 18.2695Z" fill="#E4AB1B"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M130.5 18.2655C131.571 17.166 133.065 16.5 134.683 16.5H134.685C143.971 16.5 151.5 24.0285 151.5 33.315V33.3165C151.5 34.935 150.834 36.429 149.734 37.5H148.5C143.725 37.5 139.148 35.604 135.773 32.2275C132.396 28.8525 130.5 24.2745 130.5 19.5V18.2655V18.2655Z" fill="#5E3D05"/>
<path d="M142.5 25.5C142.5 25.5 145.146 24.177 147.568 22.9665C150.106 21.696 152.113 19.569 153.231 16.959C153.364 16.6485 153.501 16.332 153.636 16.0155C155.07 12.669 158.359 10.5 162 10.5" stroke="#37CBE8" stroke-width="3" stroke-miterlimit="1.5" stroke-linecap="square" stroke-linejoin="round"/>
<path d="M136.5 19.5C136.5 19.5 136.5 18.5295 136.5 17.49C136.5 15.9645 137.362 14.5695 138.727 13.887C138.727 13.8855 138.729 13.8855 138.731 13.8855C139.73 13.3845 140.49 12.5085 140.844 11.448C141.196 10.3875 141.116 9.2295 140.615 8.2305C140.013 7.026 139.5 6 139.5 6" stroke="#F2C618" stroke-width="3" stroke-miterlimit="1.5" stroke-linecap="square" stroke-linejoin="round"/>
<path d="M150.75 30.75C150.75 30.75 151.517 30.75 152.417 30.75C154.28 30.75 156.117 31.1835 157.783 32.0175C159.421 32.8365 161.25 33.75 161.25 33.75" stroke="#FF4586" stroke-width="3" stroke-miterlimit="1.5" stroke-linecap="square" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M142.5 13.5L145.5 10.5L148.5 13.5L145.5 16.5L142.5 13.5Z" fill="#9146DC"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M127.5 9L130.5 6L133.5 9L130.5 12L127.5 9Z" fill="#9146DC"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M159 19.5L162 16.5L165 19.5L162 22.5L159 19.5Z" fill="#9146DC"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M148.5 7.5L150 3L154.5 4.5L153 9L148.5 7.5Z" fill="#F2298A"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M150 27L151.5 22.5L156 24L154.5 28.5L150 27Z" fill="#F2C618"/>
</g>
<path fill-rule="evenodd" clip-rule="evenodd" d="M96 34.5L105 43.5V45H93C93 45 87.5445 39.5445 85.9395 37.9395C85.6575 37.6575 85.5 37.2765 85.5 36.879C85.5 33.1425 85.5 13.5765 85.5 6C85.5 4.3425 86.8425 3 88.5 3C88.5 3 93.876 13.752 95.5245 17.0505C95.838 17.6745 96 18.363 96 19.062C96 22.71 96 34.5 96 34.5Z" stroke="black" stroke-width="6" stroke-miterlimit="2" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M72 34.5L63 43.5V45H75C75 45 80.4555 39.5445 82.0605 37.9395C82.3425 37.6575 82.5 37.2765 82.5 36.879C82.5 33.1425 82.5 13.5765 82.5 6C82.5 4.3425 81.1575 3 79.5 3C79.5 3 74.124 13.752 72.4755 17.0505C72.162 17.6745 72 18.363 72 19.062C72 22.71 72 34.5 72 34.5Z" stroke="black" stroke-width="6" stroke-miterlimit="2" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M72 34.5H75L78.75 38.25V41.25L75 45H63V43.5L72 34.5Z" fill="#CE8D15"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M96 34.5H93L89.25 38.25V41.25L93 45H105V43.5L96 34.5Z" fill="#CE8D15"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M72 34.5L78.75 41.25C78.75 41.25 81.0705 38.9295 82.0605 37.9395C82.3425 37.6575 82.5 37.2765 82.5 36.879C82.5 33.1425 82.5 13.5765 82.5 6C82.5 4.3425 81.1575 3 79.5 3C79.5 3 74.124 13.752 72.4755 17.0505C72.162 17.6745 72 18.363 72 19.062C72 22.71 72 34.5 72 34.5Z" fill="#FFC20B"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M82.5 36H79.5C77.8425 36 76.5 34.6575 76.5 33C76.5 33 76.5 20.823 76.5 16.5C76.5 15.306 76.974 14.1615 77.8185 13.3185C78.6615 12.474 79.806 12 81 12L81.2235 12.006C82.335 12.06 83.391 12.5265 84.1815 13.3185C85.026 14.1615 85.5 15.306 85.5 16.5V33C85.5 34.6575 84.1575 36 82.5 36ZM79.5 33H82.5V16.5C82.5 16.1025 82.3425 15.72 82.0605 15.4395C81.78 15.1575 81.3975 15 81 15C80.6025 15 80.22 15.1575 79.9395 15.4395C79.6575 15.72 79.5 16.1025 79.5 16.5C79.5 20.823 79.5 33 79.5 33Z" fill="#765018"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M75 36V31.5H85.5V37.5H76.5L75 36Z" fill="#FFC20B"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M96 34.5L89.25 41.25C89.25 41.25 86.9295 38.9295 85.9395 37.9395C85.6575 37.6575 85.5 37.2765 85.5 36.879C85.5 33.1425 85.5 13.5765 85.5 6C85.5 4.3425 86.8425 3 88.5 3C88.5 3 93.876 13.752 95.5245 17.0505C95.838 17.6745 96 18.363 96 19.062C96 22.71 96 34.5 96 34.5Z" fill="#FFC20B"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M88.5 36C90.1575 36 91.5 34.6575 91.5 33C91.5 33 91.5 20.823 91.5 16.5C91.5 15.306 91.026 14.1615 90.1815 13.3185C89.3385 12.474 88.194 12 87 12C85.806 12 84.6615 12.474 83.8185 13.3185C82.974 14.1615 82.5 15.306 82.5 16.5C82.5 20.823 82.5 33 82.5 33C82.5 34.6575 83.8425 36 85.5 36H88.5ZM88.5 33V16.5C88.5 16.1025 88.3425 15.72 88.0605 15.4395C87.78 15.1575 87.3975 15 87 15C86.6025 15 86.22 15.1575 85.9395 15.4395C85.6575 15.72 85.5 16.1025 85.5 16.5V33H88.5Z" fill="#765018"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M91.5 37.5L93 36V31.5H82.5V37.5H91.5Z" fill="#FFC20B"/>
<defs>
<clipPath id="clip0">
<rect width="48" height="48" fill="white" transform="translate(120)"/>
</clipPath>
</defs>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="168" height="48" fill="none" xmlns:v="https://vecta.io/nano"><style><![CDATA[.B{fill-rule:evenodd}.C{stroke-linejoin:round}.D{stroke-width:6}.E{fill:#ffc20b}.F{stroke-miterlimit:1.5}.G{stroke-linecap:square}]]></style><path d="M46.654 31.489c0 3.014-.788 5.153-2.017 6.712-1.241 1.574-3.025 2.676-5.214 3.436-4.442 1.542-10.158 1.557-15.274 1.557s-10.909-.014-15.43-1.559c-2.23-.762-4.052-1.867-5.319-3.444-1.253-1.559-2.056-3.695-2.056-6.702 0-5.622 1.211-12.465 4.663-17.856 3.4-5.311 9.019-9.299 18.142-9.299 8.647 0 14.204 3.995 17.657 9.347 3.497 5.42 4.848 12.27 4.848 17.808z" fill="#fbc546" stroke="#000" stroke-width="2.69"/><g class="B"><path d="M16.273 33.318c-2.399-1.845-4.126-4.52-4.75-7.593h25.08c-.624 3.073-2.351 5.747-4.75 7.593-1.423-1.542-14.156-1.542-15.579 0z" fill="#722245"/><path d="M16.274 33.318a7.68 7.68 0 0 1 5.646-2.474h4.287a7.68 7.68 0 0 1 5.646 2.474 12.74 12.74 0 0 1-7.79 2.645 12.74 12.74 0 0 1-7.79-2.645z" fill="#ca3b8f"/><path d="M15.747 24.446c1.188 0 2.325-.472 3.165-1.312s1.312-1.977 1.312-3.165v-2.562a4.48 4.48 0 0 0-4.479-4.479h-.003c-1.188 0-2.325.472-3.165 1.312s-1.312 1.977-1.312 3.165v2.562a4.48 4.48 0 0 0 4.479 4.479h.003 0z" fill="#fff"/><path d="M13.825 16.768a2.56 2.56 0 0 1 2.559-2.559 2.56 2.56 0 0 1 2.559 2.559v3.817c0 .68-.27 1.33-.75 1.811a2.56 2.56 0 0 1-3.619 0c-.48-.481-.75-1.131-.75-1.811v-3.817z" fill="#000"/><path d="M32.379 24.446c-1.188 0-2.325-.472-3.165-1.312s-1.312-1.977-1.312-3.165v-2.562a4.48 4.48 0 0 1 4.479-4.479h.003c1.188 0 2.325.472 3.165 1.312s1.312 1.977 1.312 3.165v2.562a4.48 4.48 0 0 1-4.479 4.479h-.002z" fill="#fff"/><path d="M34.301 16.768a2.56 2.56 0 0 0-2.56-2.559 2.56 2.56 0 0 0-2.559 2.559v3.817c0 .68.27 1.33.75 1.811a2.56 2.56 0 0 0 3.619 0c.48-.481.75-1.131.75-1.811v-3.817z" fill="#000"/></g><g clip-path="url(#A)"><g stroke="#000" class="C F"><path d="M123 45l6.02-24.078c.649-2.599 2.984-4.422 5.663-4.422h.002A16.82 16.82 0 0 1 151.5 33.315v.002c0 2.679-1.822 5.015-4.422 5.664L123 45z" class="D"/><g stroke-width="9" class="G"><use xlink:href="#B"/><use xlink:href="#C"/><path d="M150.75 30.75h1.667c1.863 0 3.7.433 5.366 1.267l3.467 1.733"/></g><g class="D"><path d="M142.5 13.5l3-3 3 3-3 3-3-3zm6-6L150 3l4.5 1.5L153 9l-4.5-1.5zM150 27l1.5-4.5L156 24l-1.5 4.5L150 27zM127.5 9l3-3 3 3-3 3-3-3zM159 19.5l3-3 3 3-3 3-3-3z"/></g></g><g class="B"><path d="M142.5 10.5l7.5-3h9V21h-24V9l7.5 1.5z" fill="#000"/><path d="M130.5 18.27l19.234 19.234a5.81 5.81 0 0 1-2.656 1.48L123 45.004l6.02-24.078a5.81 5.81 0 0 1 1.48-2.656z" fill="#e4ab1b"/><path d="M130.5 18.266c1.071-1.099 2.565-1.765 4.183-1.765h.002A16.82 16.82 0 0 1 151.5 33.315v.002c0 1.619-.666 3.113-1.766 4.184H148.5a17.99 17.99 0 0 1-18-18v-1.235h0z" fill="#5e3d05"/></g><g stroke-width="3" class="C F G"><use xlink:href="#B" stroke="#37cbe8"/><use xlink:href="#C" stroke="#f2c618"/><path d="M150.75 30.75h1.667c1.863 0 3.7.433 5.366 1.267l3.467 1.733" stroke="#ff4586"/></g><g class="B"><g fill="#9146dc"><path d="M142.5 13.5l3-3 3 3-3 3-3-3zm-15-4.5l3-3 3 3-3 3-3-3zM159 19.5l3-3 3 3-3 3-3-3z"/></g><path d="M148.5 7.5L150 3l4.5 1.5L153 9l-4.5-1.5z" fill="#f2298a"/><path d="M150 27l1.5-4.5L156 24l-1.5 4.5L150 27z" fill="#f2c618"/></g></g><path d="M96 34.5l9 9V45H93l-7.061-7.06a1.5 1.5 0 0 1-.439-1.061V6a3 3 0 0 1 3-3l7.025 14.051A4.48 4.48 0 0 1 96 19.062V34.5zm-24 0l-9 9V45h12l7.061-7.06a1.5 1.5 0 0 0 .439-1.061V6a3 3 0 0 0-3-3l-7.025 14.051A4.48 4.48 0 0 0 72 19.062V34.5z" stroke="#000" stroke-miterlimit="2" class="C D"/><g class="B"><path d="M72 34.5h3l3.75 3.75v3L75 45H63v-1.5l9-9zm24 0h-3l-3.75 3.75v3L93 45h12v-1.5l-9-9z" fill="#ce8d15"/><path d="M72 34.5l6.75 6.75 3.311-3.31a1.5 1.5 0 0 0 .439-1.061V6a3 3 0 0 0-3-3l-7.025 14.051A4.48 4.48 0 0 0 72 19.062V34.5z" class="E"/><path d="M82.5 36h-3a3 3 0 0 1-3-3V16.5c0-1.194.474-2.338 1.319-3.181S79.806 12 81 12l.224.006a4.49 4.49 0 0 1 2.958 1.313c.844.843 1.319 1.987 1.319 3.182V33a3 3 0 0 1-3 3zm-3-3h3V16.5c0-.398-.157-.78-.439-1.06S81.398 15 81 15s-.78.158-1.061.44-.439.663-.439 1.06V33z" fill="#765018"/><g class="E"><path d="M75 36v-4.5h10.5v6h-9L75 36z"/><path d="M96 34.5l-6.75 6.75-3.311-3.31a1.5 1.5 0 0 1-.439-1.061V6a3 3 0 0 1 3-3l7.025 14.051A4.48 4.48 0 0 1 96 19.062V34.5z"/></g><path d="M88.5 36a3 3 0 0 0 3-3V16.5c0-1.194-.474-2.338-1.319-3.181S88.194 12 87 12s-2.338.474-3.181 1.319S82.5 15.306 82.5 16.5V33a3 3 0 0 0 3 3h3zm0-3V16.5c0-.398-.157-.78-.439-1.06S87.398 15 87 15s-.78.158-1.061.44-.439.663-.439 1.06V33h3z" fill="#765018"/><path d="M91.5 37.5L93 36v-4.5H82.5v6h9z" class="E"/></g><defs><clipPath id="A"><path fill="#fff" transform="translate(120)" d="M0 0h48v48H0z"/></clipPath><path id="B" d="M142.5 25.5l5.068-2.533c2.538-1.27 4.545-3.398 5.663-6.007l.405-.944A9.1 9.1 0 0 1 162 10.5"/><path id="C" d="M136.5 19.5v-2.01a4.03 4.03 0 0 1 2.227-3.603c1.003-.503 1.763-1.379 2.117-2.439s.272-2.219-.229-3.218L139.5 6"/></defs></svg>
\ No newline at end of file
src/pages/settings/assets/noto_emoji.svg
View file @ 1ac5de17
<svg width="168" height="48" viewBox="0 0 168 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M122.794 46.2263C123.645 47.1488 127.152 45.5401 129.919 44.2501C131.993 43.2863 140.292 39.8813 144.417 38.1151C145.53 37.6388 147.15 37.0163 148.317 35.4826C149.352 34.1176 152.097 28.3201 146.569 22.4476C140.959 16.4851 135.18 18.1313 133.02 19.6613C131.749 20.5613 130.714 22.5901 130.249 23.6213C128.284 27.9788 125.483 35.9626 124.343 39.1013C123.507 41.4151 121.95 45.3113 122.794 46.2263Z" fill="#FFC107"/>
<path d="M129.694 24.9338C129.746 25.5863 129.878 26.6476 130.328 28.6913C130.635 30.0938 131.138 31.5638 131.546 32.5351C132.773 35.4563 134.494 36.6338 136.238 37.5788C139.2 39.1838 141.214 39.4838 141.214 39.4838L138.799 40.4701C138.799 40.4701 137.336 40.1663 135.341 39.1838C133.44 38.2463 131.46 36.6601 130.013 33.5551C129.386 32.2088 129.023 30.9038 128.813 29.8688C128.554 28.5863 128.513 27.8588 128.513 27.8588L129.694 24.9338Z" fill="#FF8F00"/>
<path d="M126.728 32.5388C126.728 32.5388 127.028 34.9726 129.038 38.0438C131.393 41.6363 134.682 42.2251 134.682 42.2251L132.496 43.1251C132.496 43.1251 130.055 42.3788 127.733 39.2101C126.286 37.2338 125.881 34.8713 125.881 34.8713L126.728 32.5388Z" fill="#FF8F00"/>
<path d="M124.647 38.3062C124.647 38.3062 125.194 40.4062 126.394 41.9737C127.823 43.8449 129.642 44.3887 129.642 44.3887L127.965 45.1312C127.965 45.1312 126.694 44.8649 125.303 43.1024C124.245 41.7637 123.945 40.2262 123.945 40.2262L124.647 38.3062Z" fill="#FF8F00"/>
<g opacity="0.44">
<path opacity="0.44" d="M123.735 43.6387C123.66 43.4699 123.66 43.2787 123.739 43.1137L133.29 23.3062L134.862 29.2124L124.812 43.7287C124.542 44.1337 123.934 44.0812 123.735 43.6387Z" fill="#FFFDE7"/>
</g>
<path d="M135.619 31.1964C140.082 36.4164 145.163 35.7639 146.854 34.4439C148.549 33.1202 149.888 28.5714 145.444 23.4377C140.787 18.0602 135.514 19.5939 134.296 20.7564C133.077 21.9189 131.524 26.4077 135.619 31.1964Z" fill="url(#paint0_linear)"/>
<path d="M150.945 33.3449C149.318 31.9799 148.451 32.2237 147.289 32.7074C145.789 33.3299 143.43 33.7912 140.228 32.7074L141.191 30.3862C143.093 31.0274 144.469 30.7162 145.658 30.0149C147.188 29.1149 149.28 27.8812 152.535 30.6149C153.893 31.7549 155.284 32.5124 156.304 32.1674C157.046 31.9199 157.44 30.8137 157.639 29.9324C157.658 29.8537 157.688 29.6287 157.71 29.4299C157.89 28.0537 158.19 25.0837 160.403 23.5649C162.769 21.9412 165.255 21.9412 165.255 21.9412L165.705 26.4112C164.561 26.2424 163.766 26.4749 163.095 26.8462C160.568 28.2524 162.769 33.6524 158.835 35.4674C155.051 37.2262 151.958 34.1924 150.945 33.3449Z" fill="#03A9F4"/>
<path d="M137.025 27.645L135.397 26.1863C138.386 22.8488 137.599 20.3963 137.025 18.6113C136.909 18.2513 136.8 17.91 136.729 17.5837C136.474 16.4287 136.421 15.4238 136.5 14.5463C135.352 13.1175 134.846 11.6212 134.812 11.52C134.115 9.40875 134.64 7.35 135.844 5.41875C138.277 1.5 142.684 1.5 142.684 1.5L144.154 5.43375C143.036 5.38875 139.372 5.445 138.247 7.21875C136.826 9.45375 137.76 10.8337 137.827 10.9912C138.101 10.635 138.379 10.35 138.626 10.1288C140.422 8.535 141.982 8.30625 142.976 8.39625C144.094 8.4975 145.106 9.06 145.83 9.9825C146.621 10.995 146.947 12.3113 146.696 13.5075C146.452 14.6738 145.676 15.66 144.51 16.2863C142.474 17.3813 140.779 17.2312 139.642 16.8525C139.65 16.8787 139.654 16.9087 139.661 16.935C139.702 17.1225 139.785 17.385 139.882 17.6887C140.546 19.7437 141.78 23.0063 137.025 27.645ZM139.781 13.5712C139.999 13.7287 140.227 13.86 140.464 13.9537C141.251 14.2687 142.11 14.1637 143.085 13.6387C143.659 13.3312 143.726 13.0013 143.749 12.8925C143.816 12.5663 143.704 12.15 143.46 11.8387C143.246 11.565 142.999 11.4225 142.702 11.3925C142.14 11.3437 141.379 11.7 140.617 12.3787C140.254 12.705 139.976 13.1062 139.781 13.5712Z" fill="#F44336"/>
<path d="M143.539 28.2563L141.21 28.1925C141.21 28.1925 142.316 21.945 145.897 20.895C146.569 20.7 147.304 20.5013 148.042 20.3925C148.481 20.325 149.175 20.2238 149.516 20.0963C149.595 19.5075 149.347 18.7575 149.07 17.9063C148.852 17.2463 148.627 16.5675 148.507 15.825C148.275 14.3775 148.661 13.0988 149.595 12.2175C150.735 11.1488 152.576 10.8075 154.654 11.28C155.839 11.55 156.712 12.1313 157.481 12.6413C158.58 13.3725 159.221 13.7438 160.564 12.84C162.187 11.745 160.065 7.45876 158.936 4.98376L163.147 3.22876C163.714 4.46626 166.447 10.8338 164.644 14.4675C164.036 15.69 162.99 16.5 161.617 16.8038C158.632 17.4713 156.885 16.3088 155.61 15.4613C155.006 15.06 154.477 14.745 153.904 14.58C149.917 13.4438 155.482 19.3088 152.876 21.945C151.312 23.5238 147.491 23.94 147.244 24C144.784 24.5925 143.539 28.2563 143.539 28.2563Z" fill="#F48FB1"/>
<path d="M136.497 14.5464C136.426 15.3714 136.392 15.8626 136.606 16.9351C137.637 17.6926 139.883 17.6926 139.883 17.6926C139.786 17.3889 139.699 17.1264 139.662 16.9389C139.654 16.9126 139.651 16.8826 139.643 16.8564C137.359 15.7164 136.497 14.5464 136.497 14.5464Z" fill="#C92B27"/>
<path d="M131.825 18.2401L127.947 16.3388L129.879 13.5488L132.92 15.5626L131.825 18.2401Z" fill="#FFC107"/>
<path d="M126.109 12.975C124.129 12.7087 122.112 11.0287 121.891 10.8375L123.837 8.55371C124.426 9.05246 125.674 9.88871 126.511 10.0012L126.109 12.975Z" fill="#FB8C00"/>
<path d="M129.604 7.97611L126.754 7.04236C127.08 6.04486 127.166 4.96861 126.998 3.92986L129.96 3.45361C130.204 4.96111 130.08 6.52486 129.604 7.97611Z" fill="#03A9F4"/>
<path d="M150.334 5.10573L147.403 5.74683L148.25 9.61535L151.18 8.97425L150.334 5.10573Z" fill="#FB8C00"/>
<path d="M154.673 6.66367L152.61 4.48492C153.69 3.46117 153.938 2.12242 153.938 2.10742L156.9 2.59117C156.863 2.82742 156.484 4.94992 154.673 6.66367Z" fill="#FFC107"/>
<path d="M158.439 17.3992L155.819 18.218L156.714 21.0815L159.334 20.2627L158.439 17.3992Z" fill="#FB8C00"/>
<path d="M156.582 42.3863L153.601 42.0338C153.728 40.9725 152.937 39.6713 152.72 39.3825L155.12 37.5825C155.3 37.8188 156.863 39.9825 156.582 42.3863Z" fill="#F44336"/>
<path d="M165.139 38.5839C164.018 38.4151 162.87 38.3476 161.738 38.3889L161.637 35.3889C162.953 35.3439 164.284 35.4189 165.585 35.6176L165.139 38.5839Z" fill="#FB8C00"/>
<path d="M163.213 40.5786L161.105 42.7134L164.006 45.5774L166.114 43.4426L163.213 40.5786Z" fill="#F48FB1"/>
<path d="M157.08 26.2273L154.912 23.749L152.434 25.9165L154.601 28.3947L157.08 26.2273Z" fill="#F44336"/>
<g clip-path="url(#clip0)">
<path d="M66.7683 34.2337C66.7496 34.2187 66.7308 34.2037 66.7121 34.1924C66.5921 34.1212 66.5208 34.0124 66.4946 33.8849C66.4721 33.7574 66.5021 33.6224 66.5808 33.4949C67.4508 33.0824 73.8558 30.0262 75.4383 28.5899C75.8471 28.2187 76.0421 27.2812 76.4058 25.3724C76.4883 24.9374 76.5783 24.4724 76.6758 23.9812C76.7696 23.5274 77.0171 22.6874 77.2758 21.7987C77.6321 20.5874 77.9996 19.3387 78.1233 18.5999C79.1508 12.3862 80.0058 4.68369 80.0133 4.60869C80.1521 3.26994 80.4446 1.90869 81.5321 1.90869C82.8146 1.90869 83.7108 2.71494 83.7108 3.87369L83.7896 33.5099C83.7896 35.6324 82.9833 35.9399 82.0496 36.2962C81.5246 36.4949 80.9321 36.7237 80.5121 37.2824C79.6533 38.4299 78.7346 39.9524 77.8458 41.4262C77.4671 42.0524 77.0808 42.6974 76.7021 43.3012L66.7683 34.2337V34.2337Z" fill="url(#paint1_radial)"/>
<path d="M81.536 2.28003C82.616 2.28003 83.3398 2.91753 83.3398 3.87003L83.4185 33.5025C83.4185 35.3663 82.8223 35.595 81.9185 35.94C81.3485 36.1575 80.6998 36.405 80.216 37.05C79.346 38.2125 78.4235 39.7425 77.531 41.2275C77.231 41.7225 76.9273 42.2288 76.6273 42.7163L67.0273 33.9563C66.9935 33.9263 66.956 33.8963 66.9148 33.87C66.881 33.8513 66.8735 33.8325 66.8735 33.8138C66.8698 33.8025 66.8698 33.7875 66.8735 33.7725C68.111 33.1838 74.141 30.2813 75.6973 28.8675C76.196 28.4138 76.391 27.4913 76.781 25.4438C76.8635 25.0125 76.9535 24.5438 77.051 24.0563C77.141 23.6175 77.3848 22.785 77.6435 21.9075C78.0035 20.685 78.3748 19.425 78.4985 18.66C79.526 12.435 80.381 4.72503 80.3923 4.64253C80.5648 2.98503 80.906 2.28003 81.536 2.28003V2.28003ZM81.536 1.53003C80.0473 1.53003 79.7735 3.35628 79.646 4.56378C79.646 4.56378 78.7948 12.2588 77.7598 18.5363C77.5498 19.8075 76.5335 22.8263 76.316 23.9063C75.8548 26.1713 75.6185 27.9225 75.191 28.3125C73.5523 29.8013 66.3373 33.195 66.3373 33.195C65.9848 33.6413 66.0635 34.23 66.5173 34.5075L76.781 43.875C78.0935 41.8125 79.5223 39.225 80.8123 37.5C81.8435 36.12 84.1648 37.125 84.1648 33.5025L84.086 3.87003C84.086 2.58003 83.1185 1.53003 81.536 1.53003V1.53003Z" fill="#EDA600"/>
<path d="M77.838 48.9976L58.9043 48.7876L59.1143 34.23L71.0168 28.8863C71.5755 28.6388 72.2243 28.95 72.3743 29.5425C72.7305 30.9338 73.5593 33.4013 75.3743 35.8763C77.0843 38.2088 78.9293 40.0088 80.0768 41.0363C80.7368 41.6288 80.9243 42.585 80.5305 43.38L75.9705 46.8863L77.838 48.9976V48.9976Z" fill="url(#paint2_linear)"/>
<path d="M79.7246 6.75003C79.7246 6.75003 80.0321 4.81128 81.7946 4.81128C83.5571 4.81128 83.6771 6.75003 83.6771 6.75003" stroke="#EDA600" stroke-width="0.75" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M79.166 11.6251C79.166 11.6251 79.5523 9.50635 81.4198 9.50635C83.2873 9.50635 83.7148 11.6251 83.7148 11.6251" stroke="#EDA600" stroke-width="0.75" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<g opacity="0.2">
<path opacity="0.2" d="M71.3282 29.9813C71.7032 31.3875 72.5845 33.9713 74.467 36.54C76.207 38.91 78.0707 40.7475 79.327 41.8725C79.552 42.075 79.6495 42.3825 79.5932 42.6713L75.3107 45.795C75.0595 45.9788 74.8982 46.2525 74.857 46.56C74.8157 46.8675 74.9057 47.175 75.1007 47.415L75.4532 47.8463L60.052 47.6738L60.2357 34.965L71.3282 29.9813V29.9813ZM71.422 28.8C71.287 28.8 71.152 28.8263 71.0207 28.8863L59.1182 34.23L58.9082 48.7875L77.842 48.9975L75.9707 46.7025L80.5307 43.38C80.9245 42.585 80.7407 41.625 80.077 41.0363C78.9295 40.0088 77.0882 38.2125 75.3745 35.8763C73.5595 33.405 72.7307 30.9375 72.3745 29.5425C72.262 29.0888 71.8532 28.8 71.422 28.8V28.8Z" fill="#424242"/>
</g>
<path d="M91.1207 43.2974C90.7457 42.6937 90.3557 42.0487 89.977 41.4224C89.0882 39.9487 88.1695 38.4224 87.3107 37.2787C86.8907 36.7199 86.2982 36.4912 85.7732 36.2924C84.8395 35.9362 84.0332 35.6287 84.0332 33.5062L84.112 3.87369C84.112 2.71494 85.0082 1.90869 86.2907 1.90869C87.3782 1.90869 87.667 3.27369 87.8095 4.60869C87.817 4.68744 88.672 12.3899 89.6995 18.6037C89.8195 19.3424 90.1907 20.5949 90.547 21.8024C90.8095 22.6912 91.057 23.5312 91.147 23.9849C91.2482 24.4762 91.3382 24.9449 91.4207 25.3799C91.7845 27.2887 91.9795 28.2224 92.3882 28.5937C93.967 30.0299 100.376 33.0862 101.246 33.4987C101.324 33.6224 101.354 33.7574 101.332 33.8849C101.309 34.0124 101.234 34.1212 101.114 34.1924C101.096 34.2037 101.077 34.2187 101.058 34.2337L91.1207 43.2974V43.2974Z" fill="url(#paint3_radial)"/>
<path d="M86.2878 2.28003C86.9178 2.28003 87.259 2.98878 87.4353 4.64628C87.4428 4.72503 88.3015 12.435 89.329 18.66C89.4528 19.4213 89.8278 20.685 90.184 21.9038C90.4428 22.785 90.6865 23.6138 90.7765 24.0525C90.8778 24.5438 90.964 25.0088 91.0465 25.44C91.4365 27.4875 91.6315 28.41 92.1303 28.8638C93.6865 30.2813 99.7165 33.18 100.954 33.7688C100.958 33.7838 100.958 33.7988 100.954 33.81C100.95 33.825 100.943 33.8438 100.913 33.8663C100.872 33.8925 100.834 33.9188 100.8 33.9525L91.2003 42.7125C90.9003 42.225 90.5965 41.7188 90.2965 41.2238C89.404 39.7425 88.4778 38.2088 87.6115 37.0463C87.1278 36.4013 86.479 36.1538 85.909 35.9363C85.0053 35.5913 84.409 35.3625 84.409 33.5025L84.4878 3.86628C84.484 2.91753 85.2115 2.28003 86.2878 2.28003V2.28003ZM86.2878 1.53003C84.7053 1.53003 83.734 2.58003 83.734 3.87003L83.6553 33.5025C83.6553 37.125 85.9765 36.12 87.0078 37.5C88.2978 39.225 89.7265 41.8125 91.039 43.875L101.303 34.5113C101.757 34.2338 101.839 33.645 101.483 33.1988C101.483 33.1988 94.2678 29.805 92.629 28.3163C92.2015 27.9263 91.9653 26.175 91.504 23.91C91.2865 22.83 90.2703 19.8113 90.0603 18.54C89.0253 12.2625 88.174 4.56753 88.174 4.56753C88.054 3.35628 87.7765 1.53003 86.2878 1.53003V1.53003Z" fill="#EDA600"/>
<path d="M89.981 48.9976L108.915 48.7876L108.705 34.23L96.8022 28.8863C96.2435 28.6388 95.5947 28.95 95.4447 29.5425C95.0885 30.9338 94.2597 33.4013 92.4447 35.8763C90.7347 38.2088 88.8897 40.0088 87.7422 41.0363C87.0822 41.6288 86.8947 42.585 87.2885 43.38L91.8485 46.8863L89.981 48.9976V48.9976Z" fill="url(#paint4_linear)"/>
<path d="M88.099 6.75003C88.099 6.75003 87.7915 4.81128 86.029 4.81128C84.2665 4.81128 84.1465 6.75003 84.1465 6.75003" stroke="#EDA600" stroke-width="0.75" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M88.6571 11.6251C88.6571 11.6251 88.2709 9.50635 86.4034 9.50635C84.5321 9.50635 84.1084 11.6251 84.1084 11.6251" stroke="#EDA600" stroke-width="0.75" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<g opacity="0.2">
<path opacity="0.2" d="M96.4947 29.9813L107.591 34.9613L107.775 47.67L92.3735 47.8425L92.726 47.4113C92.921 47.1713 93.011 46.8638 92.9697 46.5563C92.9285 46.2488 92.7672 45.975 92.516 45.7913L88.2335 42.6675C88.1772 42.3788 88.2747 42.0713 88.4997 41.8688C89.756 40.7438 91.6197 38.9063 93.3597 36.5363C95.2385 33.9713 96.1197 31.3875 96.4947 29.9813V29.9813ZM96.401 28.8C95.966 28.8 95.561 29.0888 95.4447 29.5425C95.0885 30.9338 94.2597 33.4013 92.4447 35.8763C90.7347 38.2088 88.8897 40.0088 87.7422 41.0363C87.0822 41.6288 86.8947 42.585 87.2885 43.38L91.8485 46.7025L89.9772 48.9975L108.911 48.7875L108.701 34.23L96.8022 28.8863C96.671 28.8263 96.536 28.8 96.401 28.8V28.8Z" fill="#424242"/>
</g>
</g>
<path d="M23.707 44.55C13.2445 44.55 1.95703 37.9875 1.95703 23.5875C1.95703 9.1875 13.2445 2.625 23.707 2.625C29.5195 2.625 34.882 4.5375 38.857 8.025C43.1695 11.85 45.457 17.25 45.457 23.5875C45.457 29.925 43.1695 35.2875 38.857 39.1125C34.8745 42.6 29.482 44.55 23.707 44.55Z" fill="url(#paint5_radial)"/>
<path d="M16.5 15.3525C14.9287 15.3525 13.5 16.68 13.5 18.885C13.5 21.09 14.9287 22.4138 16.5 22.4138C18.075 22.4138 19.5 21.0863 19.5 18.885C19.5 16.6838 18.09 15.3525 16.5 15.3525Z" fill="#422B0D"/>
<path d="M16.369 16.8263C15.8365 16.5713 15.1953 16.7963 14.9365 17.3288C14.7378 17.745 14.8278 18.2438 15.1615 18.5663C15.694 18.8213 16.3353 18.5963 16.594 18.0638C16.7928 17.6475 16.7028 17.1488 16.369 16.8263Z" fill="#896024"/>
<path d="M30.8994 15.3525C29.3282 15.3525 27.8994 16.68 27.8994 18.885C27.8994 21.09 29.3282 22.4138 30.8994 22.4138C32.4707 22.4138 33.8994 21.0863 33.8994 18.885C33.8994 16.6838 32.4707 15.3525 30.8994 15.3525Z" fill="#422B0D"/>
<path d="M30.7499 16.8263C30.2174 16.5713 29.5762 16.7963 29.3174 17.3288C29.1187 17.745 29.2087 18.2438 29.5424 18.5663C30.0749 18.8213 30.7162 18.5963 30.9749 18.0638C31.1737 17.6475 31.0837 17.1488 30.7499 16.8263Z" fill="#896024"/>
<path d="M41.8085 11.1262C43.8072 14.3512 44.8497 18.1912 44.8497 22.4625C44.8497 28.8 42.5622 34.1625 38.2497 37.9875C34.2747 41.475 28.8747 43.425 23.0997 43.425C16.3272 43.425 9.22473 40.6687 5.03223 34.8225C9.06723 41.445 16.6572 44.55 23.8497 44.55C29.6247 44.55 35.0247 42.6 38.9997 39.1125C43.3122 35.2875 45.5997 29.925 45.5997 23.5875C45.5997 18.81 44.2985 14.565 41.8085 11.1262Z" fill="#EB8F00"/>
<path d="M38.2761 26.8576C37.7511 25.9088 36.6111 25.4926 35.5986 25.8751C31.7511 26.9963 27.7611 27.5551 23.7523 27.5363C19.7436 27.5551 15.7536 26.9963 11.9061 25.8751C10.8973 25.4926 9.75731 25.9051 9.23231 26.8501C8.72231 27.7913 9.08981 28.8826 9.52106 29.8238C11.9286 35.1113 17.2348 38.2763 23.7223 38.2951H23.7823C30.2698 38.2951 35.5761 35.1113 37.9873 29.8238C38.4148 28.8751 38.7861 27.7988 38.2761 26.8576Z" fill="#422B0D"/>
<path d="M29.7559 36.8024C29.6171 36.6749 29.4746 36.5586 29.3321 36.4274C27.8021 35.0811 25.8221 34.3574 23.7821 34.3986C21.6821 34.3649 19.6384 35.0624 17.9996 36.3749C17.8571 36.4911 17.7071 36.6036 17.5684 36.7499C17.4296 36.8961 17.3546 37.0011 17.2646 37.1249C19.3271 37.9311 21.5246 38.3436 23.7409 38.3324H23.8009C25.9234 38.3324 28.0271 37.9536 30.0146 37.2074C29.9396 37.0649 29.8534 36.9299 29.7559 36.8024Z" fill="#ED7770"/>
<path d="M35.5993 25.8749C31.7518 26.9962 27.7618 27.5549 23.753 27.5362C19.7443 27.5549 15.7543 26.9962 11.9068 25.8749C10.898 25.4924 9.75805 25.9049 9.23305 26.8499C9.15805 26.9924 9.09805 27.1424 9.06055 27.2962C9.1843 27.3599 9.3268 27.4237 9.49555 27.4912C14.0105 29.7524 19.0018 30.8999 24.0493 30.8399C28.8905 30.8962 33.6755 29.8424 38.048 27.7649C38.2243 27.6899 38.3705 27.6187 38.5018 27.5512C38.4718 27.3074 38.393 27.0674 38.2768 26.8499C37.7518 25.9049 36.6118 25.4887 35.5993 25.8749Z" fill="white"/>
<path d="M38.2911 26.8613C37.7586 25.9126 36.6148 25.4926 35.5948 25.8751C31.7473 26.9963 27.7573 27.5551 23.7523 27.5363C19.7436 27.5551 15.7536 26.9963 11.9061 25.8751C10.8973 25.4926 9.75731 25.9051 9.23231 26.8501C8.72231 27.7913 9.08981 28.8826 9.52106 29.8238C9.71231 30.2476 9.92606 30.6638 10.1623 31.0651C10.1623 31.0651 9.37481 28.1476 10.0573 27.3001C10.2898 26.9401 10.6798 26.7151 11.1073 26.6926C11.2836 26.6926 11.4561 26.7226 11.6248 26.7751C15.5398 27.9263 19.6011 28.5076 23.6848 28.5001H23.8161C27.8998 28.5076 31.9611 27.9263 35.8761 26.7751C36.0448 26.7226 36.2173 26.6926 36.3936 26.6926C36.8211 26.7151 37.2148 26.9401 37.4473 27.3001C38.1411 28.1476 37.3423 31.0763 37.3423 31.0763C37.5748 30.6751 37.8073 30.2626 38.0023 29.8351C38.4298 28.8938 38.8011 27.8063 38.2911 26.8613Z" fill="#EB8F00"/>
<defs>
<linearGradient id="paint0_linear" x1="147.895" y1="23.1896" x2="136.732" y2="29.8873" gradientUnits="userSpaceOnUse">
<stop offset="0.0235" stop-color="#8F4700"/>
<stop offset="1" stop-color="#703E2D"/>
</linearGradient>
<radialGradient id="paint1_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(79.3273 14.9794) scale(16.2763 24.2983)">
<stop offset="0.3533" stop-color="#FFCA28"/>
<stop offset="0.8723" stop-color="#FFB300"/>
</radialGradient>
<linearGradient id="paint2_linear" x1="58.9068" y1="38.8988" x2="80.7338" y2="38.8988" gradientUnits="userSpaceOnUse">
<stop stop-color="#2196F3"/>
<stop offset="1" stop-color="#64B5F6"/>
</linearGradient>
<radialGradient id="paint3_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(88.4879 14.9794) rotate(180) scale(16.2763 24.2983)">
<stop offset="0.3533" stop-color="#FFCA28"/>
<stop offset="0.8723" stop-color="#FFB300"/>
</radialGradient>
<linearGradient id="paint4_linear" x1="108.915" y1="38.8988" x2="87.0897" y2="38.8988" gradientUnits="userSpaceOnUse">
<stop stop-color="#2196F3"/>
<stop offset="1" stop-color="#64B5F6"/>
</linearGradient>
<radialGradient id="paint5_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(23.707 23.5875) scale(21.3599)">
<stop offset="0.5" stop-color="#FDE030"/>
<stop offset="0.92" stop-color="#F7C02B"/>
<stop offset="1" stop-color="#F4A223"/>
</radialGradient>
<clipPath id="clip0">
<rect width="48" height="48" fill="white" transform="translate(60)"/>
</clipPath>
</defs>
</svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="168" height="48" fill="none" xmlns:v="https://vecta.io/nano"><path d="M122.794 46.226c.851.922 4.358-.686 7.125-1.976 2.074-.964 10.373-4.369 14.498-6.135 1.113-.476 2.733-1.099 3.9-2.633 1.035-1.365 3.78-7.162-1.748-13.035-5.61-5.963-11.389-4.316-13.549-2.786-1.271.9-2.306 2.929-2.771 3.96-1.965 4.357-4.766 12.341-5.906 15.48-.836 2.314-2.393 6.21-1.549 7.125z" fill="#ffc107"/><path d="M129.694 24.934c.052.652.184 1.714.634 3.757.307 1.403.81 2.873 1.218 3.844 1.227 2.921 2.948 4.099 4.692 5.044 2.962 1.605 4.976 1.905 4.976 1.905l-2.415.986s-1.463-.304-3.458-1.286c-1.901-.937-3.881-2.524-5.328-5.629-.627-1.346-.99-2.651-1.2-3.686-.259-1.282-.3-2.01-.3-2.01l1.181-2.925zm-2.966 7.605s.3 2.434 2.31 5.505c2.355 3.593 5.644 4.181 5.644 4.181l-2.186.9s-2.441-.746-4.763-3.915c-1.447-1.976-1.852-4.339-1.852-4.339l.847-2.332zm-2.081 5.767s.547 2.1 1.747 3.668c1.429 1.871 3.248 2.415 3.248 2.415l-1.677.742s-1.271-.266-2.662-2.029c-1.058-1.339-1.358-2.876-1.358-2.876l.702-1.92z" fill="#ff8f00"/><path opacity=".194" d="M123.735 43.639c-.075-.169-.075-.36.004-.525l9.551-19.807 1.572 5.906-10.05 14.516a.62.62 0 0 1-1.077-.09z" fill="#fffde7"/><path d="M135.619 31.196c4.463 5.22 9.544 4.567 11.235 3.247s3.034-5.872-1.41-11.006c-4.657-5.378-9.93-3.844-11.148-2.681s-2.772 5.651 1.323 10.44z" fill="url(#A)"/><path d="M150.945 33.345c-1.627-1.365-2.494-1.121-3.656-.638-1.5.623-3.859 1.084-7.061 0l.963-2.321c1.902.641 3.278.33 4.467-.371 1.53-.9 3.622-2.134 6.877.6 1.358 1.14 2.749 1.898 3.769 1.553.742-.248 1.136-1.354 1.335-2.235.019-.079.049-.304.071-.503.18-1.376.48-4.346 2.693-5.865 2.366-1.624 4.852-1.624 4.852-1.624l.45 4.47c-1.144-.169-1.939.064-2.61.435-2.527 1.406-.326 6.806-4.26 8.621-3.784 1.759-6.877-1.275-7.89-2.122z" fill="#03a9f4"/><path d="M137.025 27.645l-1.628-1.459c2.989-3.337 2.202-5.79 1.628-7.575l-.296-1.028c-.255-1.155-.308-2.16-.229-3.037-1.148-1.429-1.654-2.925-1.688-3.026-.697-2.111-.172-4.17 1.032-6.101 2.433-3.919 6.84-3.919 6.84-3.919l1.47 3.934c-1.118-.045-4.782.011-5.907 1.785-1.421 2.235-.487 3.615-.42 3.772a6.38 6.38 0 0 1 .799-.862c1.796-1.594 3.356-1.823 4.35-1.733 1.118.101 2.13.664 2.854 1.586.791 1.012 1.117 2.329.866 3.525-.244 1.166-1.02 2.153-2.186 2.779-2.036 1.095-3.731.945-4.868.566.008.026.012.056.019.082.041.188.124.45.221.754.664 2.055 1.898 5.318-2.857 9.956zm2.756-14.074c.218.158.446.289.683.383.787.315 1.646.21 2.621-.315.574-.307.641-.637.664-.746.067-.326-.045-.742-.289-1.054-.214-.274-.461-.416-.758-.446-.562-.049-1.323.307-2.085.986-.363.326-.641.727-.836 1.192z" fill="#f44336"/><path d="M143.539 28.256l-2.329-.064s1.106-6.247 4.687-7.297c.672-.195 1.407-.394 2.145-.503.439-.067 1.133-.169 1.474-.296.079-.589-.169-1.339-.446-2.19-.218-.66-.443-1.339-.563-2.081-.232-1.447.154-2.726 1.088-3.607 1.14-1.069 2.981-1.41 5.059-.937 1.185.27 2.058.851 2.827 1.361 1.099.731 1.74 1.103 3.083.199 1.623-1.095-.499-5.381-1.628-7.856l4.211-1.755c.567 1.238 3.3 7.605 1.497 11.239-.608 1.223-1.654 2.033-3.027 2.336-2.985.668-4.732-.495-6.007-1.342-.604-.401-1.133-.716-1.706-.881-3.987-1.136 1.578 4.729-1.028 7.365-1.564 1.579-5.385 1.995-5.632 2.055-2.46.593-3.705 4.256-3.705 4.256z" fill="#f48fb1"/><path d="M136.497 14.546c-.071.825-.105 1.316.109 2.389 1.031.758 3.277.758 3.277.758l-.221-.754c-.008-.026-.011-.056-.019-.082-2.284-1.14-3.146-2.31-3.146-2.31z" fill="#c92b27"/><path d="M131.825 18.24l-3.878-1.901 1.932-2.79 3.041 2.014-1.095 2.678z" fill="#ffc107"/><path d="M126.109 12.975c-1.98-.266-3.997-1.946-4.218-2.137l1.946-2.284c.589.499 1.837 1.335 2.674 1.447l-.402 2.974z" fill="#fb8c00"/><path d="M129.604 7.976l-2.85-.934c.326-.998.412-2.074.244-3.113l2.962-.476c.244 1.507.12 3.071-.356 4.523z" fill="#03a9f4"/><path d="M150.334 5.106l-2.931.641.847 3.869 2.93-.641-.846-3.869z" fill="#fb8c00"/><path d="M154.673 6.664l-2.063-2.179c1.08-1.024 1.328-2.362 1.328-2.377l2.962.484c-.037.236-.416 2.359-2.227 4.073z" fill="#ffc107"/><path d="M158.439 17.399l-2.62.819.895 2.863 2.62-.819-.895-2.863z" fill="#fb8c00"/><path d="M156.582 42.386l-2.981-.352c.127-1.061-.664-2.362-.881-2.651l2.4-1.8c.18.236 1.743 2.4 1.462 4.804z" fill="#f44336"/><path d="M165.139 38.584c-1.121-.169-2.269-.236-3.401-.195l-.101-3c1.316-.045 2.647.03 3.948.229l-.446 2.966z" fill="#fb8c00"/><path d="M163.213 40.579l-2.108 2.135 2.901 2.864 2.108-2.135-2.901-2.864z" fill="#f48fb1"/><path d="M157.08 26.227l-2.168-2.478-2.478 2.168 2.167 2.478 2.479-2.167z" fill="#f44336"/><g clip-path="url(#G)"><path d="M66.768 34.234l-.056-.041c-.12-.071-.191-.18-.218-.307s.007-.263.086-.39c.87-.413 7.275-3.469 8.858-4.905.409-.371.604-1.309.968-3.218l.27-1.391c.094-.454.341-1.294.6-2.183.356-1.211.724-2.46.847-3.199 1.028-6.214 1.882-13.916 1.89-13.991.139-1.339.431-2.7 1.519-2.7 1.282 0 2.179.806 2.179 1.965l.079 29.636c0 2.122-.806 2.43-1.74 2.786-.525.199-1.117.428-1.537.986-.859 1.148-1.778 2.67-2.666 4.144l-1.144 1.875-9.934-9.068h0z" fill="url(#B)"/><path d="M81.536 2.28c1.08 0 1.804.638 1.804 1.59l.079 29.632c0 1.864-.596 2.093-1.5 2.438-.57.218-1.219.465-1.703 1.11-.87 1.163-1.792 2.693-2.685 4.178l-.904 1.489-9.6-8.76a.9.9 0 0 0-.112-.086c-.034-.019-.041-.037-.041-.056-.004-.011-.004-.026 0-.041 1.237-.589 7.267-3.491 8.824-4.905.499-.454.694-1.376 1.084-3.424l.27-1.387c.09-.439.334-1.271.593-2.149.36-1.223.731-2.482.855-3.247 1.027-6.225 1.882-13.935 1.894-14.017.172-1.657.514-2.362 1.144-2.362h0zm0-.75c-1.489 0-1.763 1.826-1.89 3.034 0 0-.851 7.695-1.886 13.973-.21 1.271-1.226 4.29-1.444 5.37-.461 2.265-.698 4.016-1.125 4.406-1.639 1.489-8.854 4.883-8.854 4.883-.352.446-.274 1.035.18 1.313l10.264 9.368c1.313-2.062 2.741-4.65 4.031-6.375 1.031-1.38 3.353-.375 3.353-3.998L84.086 3.87c0-1.29-.968-2.34-2.55-2.34h0z" fill="#eda600"/><path d="M77.838 48.998l-18.934-.21.21-14.558 11.903-5.344c.559-.247 1.207.064 1.358.656.356 1.391 1.185 3.859 3 6.334a34.43 34.43 0 0 0 4.703 5.16 1.97 1.97 0 0 1 .454 2.344l-4.56 3.506 1.867 2.111h0z" fill="url(#C)"/><g stroke="#eda600" stroke-width=".75" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"><path d="M79.725 6.75s.308-1.939 2.07-1.939 1.882 1.939 1.882 1.939m-4.511 4.875s.386-2.119 2.254-2.119 2.295 2.119 2.295 2.119"/></g><g opacity=".2"><path opacity=".2" d="M71.328 29.981a20.08 20.08 0 0 0 3.139 6.559c1.74 2.37 3.604 4.208 4.86 5.333a.86.86 0 0 1 .266.799l-4.282 3.124c-.251.184-.412.457-.454.765a1.12 1.12 0 0 0 .244.855l.352.431-15.401-.172.184-12.709 11.092-4.984h0zm.094-1.181c-.135 0-.27.026-.401.086L59.118 34.23l-.21 14.558 18.934.21-1.871-2.295 4.56-3.322c.394-.795.21-1.755-.454-2.344-1.147-1.027-2.989-2.824-4.703-5.16-1.815-2.471-2.644-4.939-3-6.334a.98.98 0 0 0-.953-.742h0z" fill="#424242"/></g><path d="M91.121 43.297l-1.144-1.875-2.666-4.144c-.42-.559-1.013-.788-1.537-.986-.934-.356-1.74-.664-1.74-2.786l.079-29.633c0-1.159.896-1.965 2.179-1.965 1.088 0 1.376 1.365 1.519 2.7.007.079.862 7.781 1.89 13.995.12.739.491 1.991.847 3.199.263.889.51 1.729.6 2.183l.274 1.395c.364 1.909.559 2.843.968 3.214 1.579 1.436 7.988 4.493 8.858 4.905.078.124.108.259.086.386s-.098.236-.218.307c-.018.011-.037.026-.056.041l-9.937 9.064h0z" fill="url(#D)"/><path d="M86.288 2.28c.63 0 .971.709 1.147 2.366.008.079.866 7.789 1.894 14.014.124.761.499 2.025.855 3.244.259.881.502 1.71.593 2.149l.27 1.388c.39 2.047.585 2.97 1.084 3.424 1.556 1.418 7.586 4.316 8.824 4.905.004.015.004.03 0 .041s-.011.034-.041.056a.66.66 0 0 0-.113.086l-9.6 8.76-.904-1.489c-.892-1.481-1.819-3.015-2.685-4.177-.484-.645-1.133-.893-1.703-1.11-.904-.345-1.5-.574-1.5-2.434l.079-29.636c-.004-.949.724-1.586 1.8-1.586h0zm0-.75c-1.583 0-2.554 1.05-2.554 2.34l-.079 29.632c0 3.623 2.321 2.617 3.353 3.998 1.29 1.725 2.719 4.313 4.031 6.375l10.264-9.364c.454-.277.536-.866.18-1.312 0 0-7.215-3.394-8.854-4.882-.428-.39-.664-2.141-1.125-4.406-.218-1.08-1.234-4.099-1.444-5.37-1.035-6.277-1.886-13.972-1.886-13.972-.12-1.211-.398-3.037-1.886-3.037h0z" fill="#eda600"/><path d="M89.981 48.998l18.934-.21-.21-14.558-11.903-5.344c-.559-.247-1.207.064-1.358.656-.356 1.391-1.185 3.859-3 6.334a34.43 34.43 0 0 1-4.703 5.16 1.97 1.97 0 0 0-.454 2.344l4.56 3.506-1.868 2.111h0z" fill="url(#E)"/><g stroke="#eda600" stroke-width=".75" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"><path d="M88.099 6.75s-.308-1.939-2.07-1.939-1.882 1.939-1.882 1.939m4.51 4.875s-.386-2.119-2.254-2.119-2.295 2.119-2.295 2.119"/></g><g opacity=".2"><path opacity=".2" d="M96.495 29.981l11.096 4.98.184 12.709-15.401.172.352-.431a1.12 1.12 0 0 0 .244-.855c-.041-.307-.203-.581-.454-.765l-4.282-3.124a.86.86 0 0 1 .266-.799c1.256-1.125 3.12-2.962 4.86-5.333 1.879-2.565 2.76-5.149 3.135-6.555h0zm-.094-1.181c-.435 0-.84.289-.956.742-.356 1.391-1.185 3.859-3 6.334a34.43 34.43 0 0 1-4.703 5.16 1.97 1.97 0 0 0-.454 2.344l4.56 3.322-1.871 2.295 18.934-.21-.21-14.558-11.899-5.344c-.131-.06-.266-.086-.401-.086h0z" fill="#424242"/></g></g><path d="M23.707 44.55c-10.462 0-21.75-6.562-21.75-20.962S13.245 2.625 23.707 2.625c5.813 0 11.175 1.912 15.15 5.4 4.313 3.825 6.6 9.225 6.6 15.562s-2.288 11.7-6.6 15.525c-3.983 3.488-9.375 5.438-15.15 5.438z" fill="url(#F)"/><path d="M16.5 15.353c-1.571 0-3 1.328-3 3.533s1.429 3.529 3 3.529 3-1.327 3-3.529-1.41-3.533-3-3.533z" fill="#422b0d"/><path d="M16.369 16.826a1.08 1.08 0 0 0-1.432.503c-.199.416-.109.915.225 1.237a1.08 1.08 0 0 0 1.433-.502c.199-.416.109-.915-.225-1.238z" fill="#896024"/><path d="M30.899 15.353c-1.571 0-3 1.328-3 3.533s1.429 3.529 3 3.529 3-1.327 3-3.529-1.429-3.533-3-3.533z" fill="#422b0d"/><path d="M30.75 16.826a1.08 1.08 0 0 0-1.433.503c-.199.416-.109.915.225 1.237a1.08 1.08 0 0 0 1.433-.502c.199-.416.109-.915-.225-1.238z" fill="#896024"/><path d="M41.809 11.126c1.999 3.225 3.041 7.065 3.041 11.336 0 6.338-2.288 11.7-6.6 15.525-3.975 3.488-9.375 5.438-15.15 5.438-6.772 0-13.875-2.756-18.067-8.602 4.035 6.623 11.625 9.728 18.817 9.728 5.775 0 11.175-1.95 15.15-5.437 4.313-3.825 6.6-9.187 6.6-15.525 0-4.777-1.301-9.022-3.791-12.461z" fill="#eb8f00"/><path d="M38.276 26.858a2.18 2.18 0 0 0-2.678-.983c-3.847 1.121-7.837 1.68-11.846 1.661-4.009.019-7.999-.54-11.846-1.661-1.009-.383-2.149.03-2.674.975-.51.941-.143 2.032.289 2.974 2.408 5.288 7.714 8.453 14.201 8.471h.06c6.488 0 11.794-3.184 14.205-8.471.428-.949.799-2.025.289-2.966z" fill="#422b0d"/><path d="M29.756 36.802l-.424-.375a8.15 8.15 0 0 0-5.55-2.029c-2.1-.034-4.144.664-5.782 1.976-.143.116-.293.229-.431.375s-.214.251-.304.375a17.55 17.55 0 0 0 6.476 1.208h.06a17.67 17.67 0 0 0 6.214-1.125 2.85 2.85 0 0 0-.259-.405z" fill="#ed7770"/><path d="M35.599 25.875c-3.847 1.121-7.837 1.68-11.846 1.661-4.009.019-7.999-.54-11.846-1.661-1.009-.383-2.149.03-2.674.975a1.96 1.96 0 0 0-.173.446 5.05 5.05 0 0 0 .435.195c4.515 2.261 9.506 3.409 14.554 3.349a31.75 31.75 0 0 0 13.999-3.075c.176-.075.322-.146.454-.214-.03-.244-.109-.484-.225-.701-.525-.945-1.665-1.361-2.678-.975z" fill="#fff"/><path d="M38.291 26.861c-.532-.949-1.676-1.369-2.696-.986-3.847 1.121-7.837 1.68-11.842 1.661-4.009.019-7.999-.54-11.846-1.661-1.009-.383-2.149.03-2.674.975-.51.941-.143 2.032.289 2.974.191.424.405.84.641 1.241 0 0-.787-2.918-.105-3.765a1.33 1.33 0 0 1 1.05-.608c.176 0 .349.03.518.082a42.47 42.47 0 0 0 12.06 1.725h.131a42.47 42.47 0 0 0 12.06-1.725c.169-.052.341-.082.517-.082a1.34 1.34 0 0 1 1.054.608c.694.848-.105 3.776-.105 3.776a14.5 14.5 0 0 0 .66-1.241c.428-.941.799-2.029.289-2.974z" fill="#eb8f00"/><defs><linearGradient id="A" x1="147.895" y1="23.19" x2="136.732" y2="29.887" xlink:href="#H"><stop offset=".024" stop-color="#8f4700"/><stop offset="1" stop-color="#703e2d"/></linearGradient><radialGradient id="B" cx="0" cy="0" r="1" gradientTransform="translate(79.3273 14.9794) scale(16.2763 24.2983)" xlink:href="#H"><stop offset=".353" stop-color="#ffca28"/><stop offset=".872" stop-color="#ffb300"/></radialGradient><linearGradient id="C" x1="58.907" y1="38.899" x2="80.734" y2="38.899" xlink:href="#H"><stop stop-color="#2196f3"/><stop offset="1" stop-color="#64b5f6"/></linearGradient><radialGradient id="D" cx="0" cy="0" r="1" gradientTransform="translate(88.4879 14.9794) rotate(180) scale(16.2763 24.2983)" xlink:href="#H"><stop offset=".353" stop-color="#ffca28"/><stop offset=".872" stop-color="#ffb300"/></radialGradient><linearGradient id="E" x1="108.915" y1="38.899" x2="87.09" y2="38.899" xlink:href="#H"><stop stop-color="#2196f3"/><stop offset="1" stop-color="#64b5f6"/></linearGradient><radialGradient id="F" cx="0" cy="0" r="1" gradientTransform="translate(23.707 23.5875) scale(21.3599)" xlink:href="#H"><stop offset=".5" stop-color="#fde030"/><stop offset=".92" stop-color="#f7c02b"/><stop offset="1" stop-color="#f4a223"/></radialGradient><clipPath id="G"><path fill="#fff" transform="translate(60)" d="M0 0h48v48H0z"/></clipPath><linearGradient id="H" gradientUnits="userSpaceOnUse"/></defs></svg>
\ No newline at end of file
src/pages/settings/assets/openmoji_emoji.svg
View file @ 1ac5de17
<svg width="168" height="48" viewBox="0 0 168 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M24.0003 39.3334C32.4687 39.3334 39.3337 32.4684 39.3337 24.0001C39.3337 15.5317 32.4687 8.66675 24.0003 8.66675C15.532 8.66675 8.66699 15.5317 8.66699 24.0001C8.66699 32.4684 15.532 39.3334 24.0003 39.3334Z" fill="#FCEA2B"/>
<path d="M33.7297 27.76C33.7378 28.7865 33.5406 29.8042 33.1497 30.7533C24.8231 32.7733 16.1964 30.98 14.8231 30.6667C14.4505 29.7432 14.2626 28.7557 14.2697 27.76H14.3431C14.3431 27.76 24.2097 30.1533 33.6031 27.8067L33.7297 27.76Z" fill="white"/>
<path d="M33.1499 30.7534C31.9566 33.6001 28.9166 35.5734 24.0232 35.5734C19.0832 35.5734 16.0032 33.5534 14.8232 30.6667C16.1966 30.9801 24.8232 32.7734 33.1499 30.7534Z" fill="#EA5A47"/>
<path d="M24.0003 39.3334C32.4687 39.3334 39.3337 32.4684 39.3337 24.0001C39.3337 15.5317 32.4687 8.66675 24.0003 8.66675C15.532 8.66675 8.66699 15.5317 8.66699 24.0001C8.66699 32.4684 15.532 39.3334 24.0003 39.3334Z" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M19.0459 24.1479C20.1505 24.1479 21.0459 22.535 21.0459 20.5454C21.0459 18.5558 20.1505 16.9429 19.0459 16.9429C17.9413 16.9429 17.0459 18.5558 17.0459 20.5454C17.0459 22.535 17.9413 24.1479 19.0459 24.1479Z" fill="black"/>
<path d="M28.9541 24.1501C30.0587 24.1501 30.9541 22.5372 30.9541 20.5476C30.9541 18.558 30.0587 16.9451 28.9541 16.9451C27.8495 16.9451 26.9541 18.558 26.9541 20.5476C26.9541 22.5372 27.8495 24.1501 28.9541 24.1501Z" fill="black"/>
<path d="M33.7297 27.76C33.7378 28.7865 33.5406 29.8042 33.1497 30.7533C24.8231 32.7733 16.1964 30.98 14.8231 30.6667C14.4505 29.7432 14.2626 28.7557 14.2697 27.76H14.3431C14.3431 27.76 24.2097 30.1533 33.6031 27.8067L33.7297 27.76Z" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M33.1499 30.7534C31.9566 33.6001 28.9166 35.5734 24.0232 35.5734C19.0832 35.5734 16.0032 33.5534 14.8232 30.6667C16.1966 30.9801 24.8232 32.7734 33.1499 30.7534Z" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M78.1115 45.3335H62.667V37.5557L72.667 32.5557C70.9314 38.2468 77.6371 42.2603 81.0003 40.3335L78.1115 45.3335Z" fill="#92D3F5"/>
<path d="M90.8605 45.3332H106.305V37.5554L96.305 32.5554C98.0406 38.2466 91.3349 42.2601 87.9717 40.3332L90.8605 45.3332Z" fill="#92D3F5"/>
<path d="M79.8873 40.7393C75.7701 40.7393 72.4385 37.5467 72.4385 33.6014C76.8551 30.9209 77.2922 24.3749 77.7505 20.6249C78.0839 18.6979 78.945 18.6979 79.2505 16.7708L81.0005 4.89821C81.4172 2.66661 84.0532 2.89447 84.4867 4.66661V35.9444C84.4867 37.2341 82.5561 38.2777 81.8895 38.2777C81.3477 38.2777 79.8873 40.2974 79.8873 40.7393Z" fill="#FCEA2B"/>
<path d="M89.0856 40.7393C93.2029 40.7393 96.5345 37.5467 96.5345 33.6014C92.1178 30.9209 91.6807 24.3749 91.2224 20.6249C90.8891 18.6979 90.0279 18.6979 89.7224 16.7708L87.9724 4.89826C87.5557 2.6666 84.9198 2.89446 84.4863 4.6666V35.9444C84.4863 37.2341 86.4169 38.2777 87.0835 38.2777C87.6252 38.2777 89.0856 40.2974 89.0856 40.7393Z" fill="#FCEA2B"/>
<path d="M78.1105 45.3335H62.666V37.5557L72.666 32.5557C70.9304 38.2468 77.6361 42.2603 80.9993 40.3335L78.1105 45.3335Z" stroke="black" stroke-width="1.33333" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M79.8864 40.7395C79.8864 40.2977 81.3468 38.278 81.8884 38.278C82.5551 38.278 84.4856 37.2344 84.4856 35.9446V4.66685C84.0522 2.89472 81.4162 2.66685 80.9996 4.89845L79.2496 16.771C78.944 18.6981 78.0829 18.6981 77.7496 20.6251C77.2912 24.3751 76.8542 30.9211 72.4375 33.6016" stroke="black" stroke-width="1.33333" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M90.8605 45.3335H106.305V37.5557L96.305 32.5557C98.0406 38.2468 91.3349 42.2603 87.9717 40.3335L90.8605 45.3335Z" stroke="black" stroke-width="1.33333" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M89.0846 40.7395C89.0846 40.2977 87.6242 38.278 87.0826 38.278C86.4159 38.278 84.4854 37.2344 84.4854 35.9446V4.66685C84.9188 2.89472 87.5548 2.66685 87.9715 4.89845L89.7215 16.771C90.027 18.6981 90.8882 18.6981 91.2215 20.6251C91.6798 24.3751 92.1169 30.9211 96.5336 33.6016" stroke="black" stroke-width="1.33333" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M137.453 13.4539L145.833 21.8333L154.212 30.2128L139.859 36.1865L125.506 42.1602L131.48 27.8071L137.453 13.4539Z" fill="#F1B31C"/>
<path d="M146.666 23.3334L137.128 13.7795L130.927 28.3597L124.727 42.9397L146.666 23.3334Z" fill="#FCEA2B"/>
<path d="M130.148 30.1899L137.523 37.5646L133.836 39.0656L128.638 33.8675L130.148 30.1899Z" fill="#EA5A47"/>
<path d="M131.562 36.8317L133.836 39.0656L137.523 37.5646L134.323 34.364L131.562 36.8317Z" fill="#D22F27"/>
<path d="M133.869 21.4417L138.333 25.9061L146.133 33.7055L141.951 35.6145L136.503 30.1665L132.1 25.7631L133.869 21.4417Z" fill="#EA5A47"/>
<path d="M137.69 31.3541L141.951 35.6143L146.133 33.7054L140.907 28.4797L137.69 31.3541Z" fill="#D22F27"/>
<path d="M140.197 10.9524C140.933 10.9524 141.53 10.3642 141.53 9.63857C141.53 8.91295 140.933 8.32471 140.197 8.32471C139.46 8.32471 138.863 8.91295 138.863 9.63857C138.863 10.3642 139.46 10.9524 140.197 10.9524Z" fill="#8967AA"/>
<path d="M160.197 13.6192C160.933 13.6192 161.53 13.0309 161.53 12.3053C161.53 11.5797 160.933 10.9915 160.197 10.9915C159.46 10.9915 158.863 11.5797 158.863 12.3053C158.863 13.0309 159.46 13.6192 160.197 13.6192Z" fill="#F1B31C"/>
<path d="M158.197 27.6192C158.933 27.6192 159.53 27.031 159.53 26.3053C159.53 25.5797 158.933 24.9915 158.197 24.9915C157.46 24.9915 156.863 25.5797 156.863 26.3053C156.863 27.031 157.46 27.6192 158.197 27.6192Z" fill="#D22F27"/>
<path d="M153.775 30.4264L153.887 30.5385L139.307 36.7391L124.727 42.9398L130.927 28.3597L137.128 13.7795" stroke="black" stroke-width="1.33333" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M137.2 13.8523L145.507 22.1593L153.775 30.4267" stroke="black" stroke-width="1.33333" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M137.128 13.7795L137.2 13.852" stroke="black" stroke-width="1.33333" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M150.993 4.91162C151.149 5.21075 151.261 5.54029 151.319 5.89362C151.62 7.72515 150.355 9.50302 148.493 9.86462" stroke="black" stroke-width="1.33333" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M148.622 9.85107C148.285 9.87667 147.946 9.95594 147.616 10.0937C145.903 10.8079 145.064 12.8224 145.742 14.5932" stroke="black" stroke-width="1.33333" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M161.195 17.8113C161.129 18.1424 161.01 18.4693 160.833 18.7809C159.919 20.3959 157.818 20.9869 156.142 20.1009" stroke="black" stroke-width="1.33333" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M156.249 20.1707C155.971 19.9795 155.658 19.8287 155.314 19.7287C153.532 19.2104 151.615 20.2532 151.032 22.0578" stroke="black" stroke-width="1.33333" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="168" height="48" fill="none" xmlns:v="https://vecta.io/nano"><style><![CDATA[.B{stroke:#000}.C{stroke-width:1.333}.D{stroke-linejoin:round}.E{fill:#fcea2b}.F{fill:#ea5a47}.G{stroke-linecap:round}.H{fill:#d22f27}.I{stroke-miterlimit:10}]]></style><use xlink:href="#B" class="E"/><use xlink:href="#C" fill="#fff"/><use xlink:href="#D" class="F"/><use xlink:href="#B" class="B C D"/><path d="M19.046 24.148c1.105 0 2-1.613 2-3.602s-.895-3.602-2-3.602-2 1.613-2 3.602.895 3.602 2 3.602zm9.908.002c1.105 0 2-1.613 2-3.602s-.895-3.602-2-3.602-2 1.613-2 3.602.895 3.602 2 3.602z" fill="#000"/><g class="B C D"><use xlink:href="#C"/><use xlink:href="#D"/></g><path d="M78.112 45.334H62.667v-7.778l10-5c-1.736 5.691 4.97 9.705 8.333 7.778l-2.889 5zm12.749-.001h15.445v-7.778l-10-5c1.736 5.691-4.97 9.705-8.333 7.778l2.889 5z" fill="#92d3f5"/><g class="E"><path d="M79.887 40.739c-4.117 0-7.449-3.193-7.449-7.138 4.417-2.68 4.854-9.226 5.312-12.976.333-1.927 1.194-1.927 1.5-3.854l1.75-11.873c.417-2.232 3.053-2.004 3.486-.232v31.278c0 1.29-1.931 2.333-2.597 2.333-.542 0-2.002 2.02-2.002 2.462z"/><path d="M89.086 40.739c4.117 0 7.449-3.193 7.449-7.138-4.417-2.68-4.854-9.226-5.312-12.976-.333-1.927-1.194-1.927-1.5-3.854l-1.75-11.873c-.417-2.232-3.053-2.004-3.486-.232v31.278c0 1.29 1.931 2.333 2.597 2.333.542 0 2.002 2.02 2.002 2.462z"/></g><g class="B C D I"><path d="M78.111 45.334H62.666v-7.778l10-5c-1.736 5.691 4.97 9.705 8.333 7.778l-2.889 5z"/><path d="M79.886 40.74c0-.442 1.46-2.462 2.002-2.462.667 0 2.597-1.044 2.597-2.333V4.667c-.433-1.772-3.069-2-3.486.232l-1.75 11.873c-.306 1.927-1.167 1.927-1.5 3.854-.458 3.75-.895 10.296-5.312 12.976" class="G"/><path d="M90.861 45.334h15.445v-7.778l-10-5c1.736 5.691-4.97 9.705-8.333 7.778l2.889 5z"/><path d="M89.085 40.74c0-.442-1.46-2.462-2.002-2.462-.667 0-2.597-1.044-2.597-2.333V4.667c.433-1.772 3.069-2 3.486.232l1.75 11.873c.305 1.927 1.167 1.927 1.5 3.854.458 3.75.895 10.296 5.312 12.976" class="G"/></g><path d="M137.453 13.454l8.38 8.379 8.379 8.38-14.353 5.974-14.353 5.974 5.974-14.353 5.973-14.353z" fill="#f1b31c"/><path d="M146.666 23.333l-9.538-9.554-6.201 14.58-6.2 14.58 21.939-19.606z" class="E"/><path d="M130.148 30.19l7.375 7.375-3.687 1.501-5.198-5.198 1.51-3.678z" class="F"/><path d="M131.562 36.832l2.274 2.234 3.687-1.501-3.2-3.201-2.761 2.468z" class="H"/><path d="M133.869 21.442l4.464 4.464 7.8 7.799-4.182 1.909-5.448-5.448-4.403-4.403 1.769-4.321z" class="F"/><path d="M137.69 31.354l4.261 4.26 4.182-1.909-5.226-5.226-3.217 2.874z" class="H"/><use xlink:href="#E" fill="#8967aa"/><use xlink:href="#E" x="20" y="2.667" fill="#f1b31c"/><use xlink:href="#E" x="18" y="16.667" class="H"/><g class="B C D G I"><path d="M153.775 30.426l.112.112-14.58 6.201-14.58 6.201 12.401-29.16"/><path d="M137.2 13.852l16.575 16.574M137.128 13.78l.072.072m13.793-8.94a3.26 3.26 0 0 1 .326.982c.301 1.832-.964 3.609-2.826 3.971"/><path d="M148.622 9.851a3.25 3.25 0 0 0-1.006.243c-1.713.714-2.552 2.729-1.874 4.499m15.453 3.218a3.24 3.24 0 0 1-.362.97c-.914 1.615-3.015 2.206-4.691 1.32m.107.07a3.24 3.24 0 0 0-.935-.442c-1.782-.518-3.699.524-4.282 2.329"/></g><defs ><path id="B" d="M24 39.333c8.468 0 15.333-6.865 15.333-15.333S32.469 8.667 24 8.667 8.667 15.532 8.667 24 15.532 39.333 24 39.333z"/><path id="C" d="M33.73 27.76a7.7 7.7 0 0 1-.58 2.993c-8.327 2.02-16.953.227-18.327-.087-.373-.923-.56-1.911-.553-2.907h.073s9.867 2.393 19.26.047l.127-.047z"/><path id="D" d="M33.15 30.753c-1.193 2.847-4.233 4.82-9.127 4.82-4.94 0-8.02-2.02-9.2-4.907 1.373.313 10 2.107 18.327.087z"/><path id="E" d="M140.197 10.952c.736 0 1.333-.588 1.333-1.314s-.597-1.314-1.333-1.314-1.334.588-1.334 1.314.597 1.314 1.334 1.314z"/></defs></svg>
\ No newline at end of file
src/pages/settings/assets/toki_pona.svg 0 → 100644
View file @ 1ac5de17
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="468pt" height="617pt" viewBox="0 0 468 617"
preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.5, written by Peter Selinger 2001-2004
</metadata>
<g transform="translate(0,617) scale(0.709091,-0.709091)"
fill="#000099" stroke="none">
<path fill="#000099" stroke="none" d="M302 838 c-14 -14 -16 -126 -3 -147 5
-8 16 -11 25 -8 12 5 16 21 16 71 0 89 -10 112 -38 84z"/>
<path fill="#000099" stroke="none" d="M521 775 c-27 -57 -32 -108 -10 -113
18 -3 84 122 75 144 -11 30 -44 15 -65 -31z"/>
<path fill="#000099" stroke="none" d="M34 797 c-8 -22 59 -158 76 -154 38 7
-11 167 -51 167 -11 0 -22 -6 -25 -13z"/>
<path fill="#000099" stroke="none" d="M254 590 c-50 -7 -128 -52 -175 -100
-98 -100 -65 -346 57 -423 63 -40 107 -50 200 -44 125 7 212 62 275 172 53 92
32 220 -51 317 -62 71 -170 99 -306 78z"/>
<path fill="#ffff63" stroke="none" d="M443 539 c47 -13 112 -70 138 -120 24
-48 26 -147 3 -190 -22 -43 -82 -108 -117 -125 -137 -71 -277 -55 -351 41 -39
52 -51 92 -51 175 1 77 19 113 82 161 80 63 198 86 296 58z"/>
<path fill="#000099" stroke="none" d="M462 367 c-5 -7 -15 -28 -21 -48 -21
-67 -100 -120 -144 -98 -30 15 -65 56 -88 102 -21 40 -51 48 -57 14 -5 -26 53
-111 96 -141 89 -62 204 -7 252 119 15 40 -15 81 -38 52z"/>
</g>
</svg>
\ No newline at end of file
src/pages/settings/assets/twemoji_emoji.svg
View file @ 1ac5de17
<svg width="168" height="48" viewBox="0 0 168 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path d="M100 29.3333C96.0005 29.3333 91.0831 38.7919 90.6671 42.6666C90.1058 47.8866 93.3338 47.9999 93.3338 47.9999H108V34.6666C108 34.6666 103.416 29.3333 100 29.3333Z" fill="#50A5E6"/>
<path d="M98.6551 39.078C100.808 35.3486 101.707 31.8364 100.662 31.2334C99.6178 30.6303 97.0255 33.1646 94.8723 36.894C92.7191 40.6234 91.8204 44.1356 92.865 44.7387C93.9096 45.3418 96.5019 42.8074 98.6551 39.078Z" fill="#1C6399"/>
<path d="M86.7813 0C88.356 0 89.632 1.276 89.632 2.85067C89.632 3.90267 90.5227 17.2827 90.5227 17.2827L83.9307 24V2.85067C83.9307 1.276 85.2067 0 86.7813 0Z" fill="#F9CA55"/>
<path d="M85.167 5.76406C85.167 4.29873 86.303 3.11206 87.7043 3.11206C89.1057 3.11206 90.2417 4.30006 90.2417 5.76406C90.2417 5.76406 90.955 13.6867 91.831 18.2574C93.0017 20.7454 93.6563 24.5001 93.5123 26.5881C93.5843 27.1187 101.012 33.2627 101.012 33.2627C100.638 35.6801 98.0003 41.4694 94.667 44.1414L89.9723 40.2427C86.1257 39.7041 84.0283 35.8014 84.0283 34.5574C84.0283 30.5787 85.167 5.76406 85.167 5.76406V5.76406Z" fill="#FFDC5D"/>
<path d="M68 29.3333C72 29.3333 76.9173 38.7919 77.3333 42.6666C77.8947 47.8866 74.6667 47.9999 74.6667 47.9999H60V34.6666C60 34.6666 64.584 29.3333 68 29.3333Z" fill="#50A5E6"/>
<path d="M75.1331 44.7366C76.1777 44.1335 75.279 40.6213 73.1258 36.8919C70.9726 33.1625 68.3803 30.6281 67.3357 31.2312C66.2911 31.8343 67.1898 35.3465 69.343 39.0759C71.4962 42.8053 74.0885 45.3397 75.1331 44.7366Z" fill="#1C6399"/>
<path d="M81.4146 0.0146466C79.7266 -0.154687 78.3039 1.16665 78.3039 2.81865C78.3039 3.85865 78.0586 16.5773 78.0586 16.5773L83.8599 24L83.9426 2.97998C83.9426 1.50531 82.8826 0.161313 81.4146 0.0146466V0.0146466Z" fill="#F9CA55"/>
<path d="M82.8336 5.76406C82.8336 4.29873 81.6976 3.11206 80.2963 3.11206C78.8949 3.11206 77.7589 4.30006 77.7589 5.76406C77.7589 5.76406 77.0456 13.6867 76.1696 18.2574C74.9989 20.7454 74.3443 24.5001 74.4883 26.5881C74.4163 27.1187 66.9883 33.2627 66.9883 33.2627C67.3629 35.6801 70.0003 41.4694 73.3336 44.1414L78.0283 40.2427C81.8749 39.7041 83.9723 35.8014 83.9723 34.5574C83.9723 30.5787 82.8336 5.76406 82.8336 5.76406V5.76406Z" fill="#FFDC5D"/>
<path d="M83.9443 34.4307C83.3923 34.4307 82.9443 33.9827 82.9443 33.4307V3.72266C82.9443 3.17066 83.3923 2.72266 83.9443 2.72266C84.4963 2.72266 84.9443 3.17066 84.9443 3.72266V33.432C84.9457 33.9827 84.4977 34.4307 83.9443 34.4307V34.4307Z" fill="#F9CA55"/>
</g>
<g clip-path="url(#clip1)">
<path d="M135.501 9.98415C135.352 10.1335 135.238 10.3135 135.144 10.5108L135.133 10.5002L120.178 44.1881L120.193 44.2028C119.916 44.7401 120.38 45.8335 121.33 46.7855C122.281 47.7361 123.374 48.2001 123.912 47.9228L123.925 47.9361L157.613 32.9801L157.602 32.9681C157.798 32.8748 157.978 32.7615 158.129 32.6095C160.212 30.5268 156.834 23.7735 150.588 17.5255C144.338 11.2775 137.585 7.90148 135.501 9.98415V9.98415Z" fill="#DD2E44"/>
<path d="M137.333 16L120.554 43.3413L120.178 44.188L120.193 44.2027C119.916 44.74 120.38 45.8333 121.33 46.7853C121.64 47.0947 121.961 47.3293 122.276 47.528L142.666 22.6667L137.333 16Z" fill="#EA596E"/>
<path d="M150.683 17.4214C156.909 23.6507 160.367 30.2907 158.401 32.2534C156.437 34.2187 149.797 30.7627 143.567 24.5361C137.339 18.3067 133.883 11.6641 135.847 9.70006C137.812 7.73606 144.452 11.1921 150.683 17.4214V17.4214Z" fill="#A0041E"/>
<path d="M144.786 18.1453C144.521 18.36 144.174 18.472 143.808 18.432C142.65 18.3067 141.677 17.904 140.996 17.268C140.274 16.5947 139.918 15.6907 140.016 14.7853C140.186 13.196 141.781 11.7373 144.5 12.0307C145.557 12.144 146.029 11.804 146.045 11.6413C146.064 11.48 145.676 11.0467 144.618 10.932C143.461 10.8067 142.488 10.404 141.805 9.76799C141.084 9.09466 140.726 8.19066 140.825 7.28532C140.998 5.69599 142.592 4.23732 145.308 4.53199C146.078 4.61465 146.485 4.45599 146.657 4.35332C146.794 4.26932 146.849 4.18932 146.854 4.14265C146.87 3.98132 146.488 3.54799 145.428 3.43332C144.696 3.35332 144.165 2.69732 144.246 1.96399C144.325 1.23199 144.98 0.702655 145.714 0.782655C148.43 1.07465 149.678 2.83865 149.506 4.42932C149.333 6.02132 147.74 7.47732 145.021 7.18532C144.25 7.10132 143.848 7.26132 143.674 7.36399C143.537 7.44665 143.481 7.52799 143.476 7.57332C143.458 7.73599 143.844 8.16799 144.904 8.28265C147.62 8.57599 148.868 10.3387 148.696 11.9293C148.524 13.5187 146.93 14.9773 144.213 14.6827C143.442 14.6 143.037 14.76 142.864 14.8613C142.725 14.9467 142.672 15.0267 142.666 15.072C142.649 15.2333 143.034 15.6667 144.093 15.7813C144.824 15.8613 145.356 16.5187 145.274 17.2507C145.237 17.616 145.052 17.932 144.786 18.1453V18.1453Z" fill="#AA8DD8"/>
<path d="M160.881 30.4761C163.512 29.7334 165.327 30.9067 165.759 32.4467C166.191 33.9854 165.255 35.9334 162.625 36.6734C161.599 36.9614 161.291 37.4521 161.332 37.6081C161.377 37.7654 161.899 38.0241 162.923 37.7347C165.552 36.9947 167.367 38.1681 167.799 39.7067C168.233 41.2467 167.295 43.1921 164.664 43.9334C163.639 44.2214 163.329 44.7134 163.375 44.8694C163.419 45.0254 163.939 45.2841 164.964 44.9961C165.671 44.7974 166.409 45.2094 166.608 45.9174C166.805 46.6267 166.393 47.3627 165.684 47.5627C163.056 48.3027 161.24 47.1321 160.805 45.5907C160.373 44.0521 161.311 42.1067 163.943 41.3654C164.969 41.0761 165.277 40.5867 165.232 40.4294C165.189 40.2734 164.669 40.0134 163.645 40.3014C161.013 41.0427 159.2 39.8721 158.767 38.3294C158.333 36.7907 159.271 34.8454 161.901 34.1027C162.925 33.8161 163.233 33.3227 163.191 33.1681C163.145 33.0107 162.627 32.7521 161.601 33.0401C160.892 33.2401 160.157 32.8267 159.957 32.1187C159.759 31.4121 160.172 30.6761 160.881 30.4761V30.4761Z" fill="#77B255"/>
<path d="M150.667 26.88C150.275 26.88 149.889 26.708 149.625 26.38C149.165 25.804 149.259 24.9653 149.833 24.5053C150.123 24.272 157.057 18.8267 166.855 20.228C167.585 20.332 168.091 21.0067 167.987 21.736C167.883 22.464 167.214 22.976 166.478 22.8667C157.821 21.6373 151.562 26.5387 151.501 26.588C151.253 26.7853 150.959 26.88 150.667 26.88V26.88Z" fill="#AA8DD8"/>
<path d="M127.672 21.3335C127.545 21.3335 127.416 21.3148 127.288 21.2775C126.582 21.0655 126.182 20.3228 126.394 19.6175C127.905 14.5868 129.274 6.55879 127.592 4.46545C127.404 4.22812 127.12 3.99479 126.469 4.04412C125.218 4.14012 125.337 6.77879 125.338 6.80545C125.394 7.54012 124.842 8.18012 124.109 8.23479C123.364 8.28012 122.734 7.73879 122.68 7.00412C122.542 5.16545 123.114 1.62412 126.269 1.38545C127.677 1.27879 128.846 1.76812 129.672 2.79479C132.833 6.72945 129.624 18.1361 128.949 20.3841C128.776 20.9615 128.245 21.3335 127.672 21.3335Z" fill="#77B255"/>
<path d="M154 14.6667C155.105 14.6667 156 13.7713 156 12.6667C156 11.5622 155.105 10.6667 154 10.6667C152.895 10.6667 152 11.5622 152 12.6667C152 13.7713 152.895 14.6667 154 14.6667Z" fill="#5C913B"/>
<path d="M122.667 26.6666C124.139 26.6666 125.333 25.4727 125.333 23.9999C125.333 22.5272 124.139 21.3333 122.667 21.3333C121.194 21.3333 120 22.5272 120 23.9999C120 25.4727 121.194 26.6666 122.667 26.6666Z" fill="#9266CC"/>
<path d="M163.333 28C164.438 28 165.333 27.1046 165.333 26C165.333 24.8954 164.438 24 163.333 24C162.228 24 161.333 24.8954 161.333 26C161.333 27.1046 162.228 28 163.333 28Z" fill="#5C913B"/>
<path d="M151.333 44C152.438 44 153.333 43.1046 153.333 42C153.333 40.8954 152.438 40 151.333 40C150.228 40 149.333 40.8954 149.333 42C149.333 43.1046 150.228 44 151.333 44Z" fill="#5C913B"/>
<path d="M157.334 8.00008C158.806 8.00008 160 6.80617 160 5.33341C160 3.86066 158.806 2.66675 157.334 2.66675C155.861 2.66675 154.667 3.86066 154.667 5.33341C154.667 6.80617 155.861 8.00008 157.334 8.00008Z" fill="#FFCC4D"/>
<path d="M163.333 13.3333C164.438 13.3333 165.333 12.4378 165.333 11.3333C165.333 10.2287 164.438 9.33325 163.333 9.33325C162.228 9.33325 161.333 10.2287 161.333 11.3333C161.333 12.4378 162.228 13.3333 163.333 13.3333Z" fill="#FFCC4D"/>
<path d="M159.333 18.6667C160.438 18.6667 161.333 17.7713 161.333 16.6667C161.333 15.5622 160.438 14.6667 159.333 14.6667C158.228 14.6667 157.333 15.5622 157.333 16.6667C157.333 17.7713 158.228 18.6667 159.333 18.6667Z" fill="#FFCC4D"/>
<path d="M130 33.3333C131.105 33.3333 132 32.4378 132 31.3333C132 30.2287 131.105 29.3333 130 29.3333C128.895 29.3333 128 30.2287 128 31.3333C128 32.4378 128.895 33.3333 130 33.3333Z" fill="#FFCC4D"/>
</g>
<path d="M48 24C48 37.2547 37.2547 48 24 48C10.7467 48 0 37.2547 0 24C0 10.7467 10.7467 0 24 0C37.2547 0 48 10.7467 48 24Z" fill="#FFCC4D"/>
<path d="M15.3333 23.9999C17.1743 23.9999 18.6667 20.7167 18.6667 16.6666C18.6667 12.6165 17.1743 9.33325 15.3333 9.33325C13.4924 9.33325 12 12.6165 12 16.6666C12 20.7167 13.4924 23.9999 15.3333 23.9999Z" fill="#664500"/>
<path d="M32.6663 23.9999C34.5073 23.9999 35.9997 20.7167 35.9997 16.6666C35.9997 12.6165 34.5073 9.33325 32.6663 9.33325C30.8254 9.33325 29.333 12.6165 29.333 16.6666C29.333 20.7167 30.8254 23.9999 32.6663 23.9999Z" fill="#664500"/>
<path d="M23.9997 29.3333C19.169 29.3333 15.9637 28.7706 11.9997 27.9999C11.0943 27.8253 9.33301 27.9999 9.33301 30.6666C9.33301 35.9999 15.4597 42.6666 23.9997 42.6666C32.5383 42.6666 38.6663 35.9999 38.6663 30.6666C38.6663 27.9999 36.905 27.8239 35.9997 27.9999C32.0357 28.7706 28.8303 29.3333 23.9997 29.3333Z" fill="#664500"/>
<path d="M12 30.6667C12 30.6667 16 32.0001 24 32.0001C32 32.0001 36 30.6667 36 30.6667C36 30.6667 33.3333 36.0001 24 36.0001C14.6667 36.0001 12 30.6667 12 30.6667Z" fill="white"/>
<defs>
<clipPath id="clip0">
<rect width="48" height="48" fill="white" transform="translate(60)"/>
</clipPath>
<clipPath id="clip1">
<rect width="48" height="48" fill="white" transform="translate(120)"/>
</clipPath>
</defs>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="168" height="48" fill="none" xmlns:v="https://vecta.io/nano"><g clip-path="url(#A)"><path d="M100 29.333c-3.999 0-8.917 9.459-9.333 13.333-.561 5.22 2.667 5.333 2.667 5.333H108V34.667s-4.584-5.333-8-5.333z" fill="#50a5e6"/><path d="M98.655 39.078c2.153-3.729 3.052-7.242 2.007-7.845s-3.637 1.931-5.79 5.661-3.052 7.242-2.007 7.845 3.637-1.931 5.79-5.661z" fill="#1c6399"/><path d="M86.781 0a2.85 2.85 0 0 1 2.851 2.851c0 1.052.891 14.432.891 14.432L83.931 24V2.851A2.85 2.85 0 0 1 86.781 0z" fill="#f9ca55"/><path d="M85.167 5.764c0-1.465 1.136-2.652 2.537-2.652s2.537 1.188 2.537 2.652c0 0 .713 7.923 1.589 12.493 1.171 2.488 1.825 6.243 1.681 8.331.072.531 7.5 6.675 7.5 6.675-.374 2.417-3.012 8.207-6.345 10.879l-4.695-3.899c-3.847-.539-5.944-4.441-5.944-5.685 0-3.979 1.139-28.793 1.139-28.793h0z" fill="#ffdc5d"/><path d="M68 29.333c4 0 8.917 9.459 9.333 13.333.561 5.22-2.667 5.333-2.667 5.333H60V34.667s4.584-5.333 8-5.333z" fill="#50a5e6"/><path d="M75.133 44.737c1.045-.603.146-4.115-2.007-7.845s-4.745-6.264-5.79-5.661-.146 4.115 2.007 7.845 4.745 6.264 5.79 5.661z" fill="#1c6399"/><path d="M81.415.015a2.82 2.82 0 0 0-3.111 2.804c0 1.04-.245 13.759-.245 13.759L83.86 24l.083-21.02c0-1.475-1.06-2.819-2.528-2.965h0z" fill="#f9ca55"/><path d="M82.834 5.764c0-1.465-1.136-2.652-2.537-2.652S77.759 4.3 77.759 5.764c0 0-.713 7.923-1.589 12.493-1.171 2.488-1.825 6.243-1.681 8.331-.072.531-7.5 6.675-7.5 6.675.375 2.417 3.012 8.207 6.345 10.879l4.695-3.899c3.847-.539 5.944-4.441 5.944-5.685 0-3.979-1.139-28.793-1.139-28.793h0z" fill="#ffdc5d"/><path d="M83.944 34.431a1 1 0 0 1-1-1V3.723a1 1 0 1 1 2 0v29.709a1 1 0 0 1-1 .999h0z" fill="#f9ca55"/></g><g clip-path="url(#B)"><path d="M135.501 9.984c-.149.149-.263.329-.357.527l-.011-.011-14.955 33.688.015.015c-.277.537.187 1.631 1.137 2.583s2.044 1.415 2.582 1.137l.013.013 33.688-14.956-.011-.012c.196-.093.376-.207.527-.359 2.083-2.083-1.295-8.836-7.541-15.084s-13.003-9.624-15.087-7.541h0z" fill="#dd2e44"/><path d="M137.333 16l-16.779 27.341-.376.847.015.015c-.277.537.187 1.631 1.137 2.583.31.309.631.544.946.743l20.39-24.861L137.333 16z" fill="#ea596e"/><path d="M150.683 17.421c6.226 6.229 9.684 12.869 7.718 14.832s-8.604-1.491-14.834-7.717-9.684-12.872-7.72-14.836 8.605 1.492 14.836 7.721h0z" fill="#a0041e"/><path d="M144.786 18.145a1.32 1.32 0 0 1-.978.287c-1.158-.125-2.131-.528-2.812-1.164-.722-.673-1.078-1.577-.98-2.483.17-1.589 1.765-3.048 4.484-2.755 1.057.113 1.529-.227 1.545-.389s-.369-.595-1.427-.709c-1.157-.125-2.13-.528-2.813-1.164-.721-.673-1.079-1.577-.98-2.483.173-1.589 1.767-3.048 4.483-2.753.77.083 1.177-.076 1.349-.179.137-.084.192-.164.197-.211.016-.161-.366-.595-1.426-.709-.732-.08-1.263-.736-1.182-1.469a1.33 1.33 0 0 1 1.468-1.181c2.716.292 3.964 2.056 3.792 3.647s-1.766 3.048-4.485 2.756c-.771-.084-1.173.076-1.347.179-.137.083-.193.164-.198.209-.018.163.368.595 1.428.709 2.716.293 3.964 2.056 3.792 3.647s-1.766 3.048-4.483 2.753c-.771-.083-1.176.077-1.349.179-.139.085-.192.165-.198.211-.017.161.368.595 1.427.709.731.08 1.263.737 1.181 1.469-.037.365-.222.681-.488.895h0z" fill="#aa8dd8"/><path d="M160.881 30.476c2.631-.743 4.446.431 4.878 1.971s-.504 3.487-3.134 4.227c-1.026.288-1.334.779-1.293.935s.567.416 1.591.127c2.629-.74 4.444.433 4.876 1.972s-.504 3.485-3.135 4.227c-1.025.288-1.335.78-1.289.936s.564.415 1.589.127c.707-.199 1.445.213 1.644.921s-.215 1.445-.924 1.645c-2.628.74-4.444-.431-4.879-1.972s.506-3.484 3.138-4.225c1.026-.289 1.334-.779 1.289-.936s-.563-.416-1.587-.128c-2.632.741-4.445-.429-4.878-1.972s.504-3.484 3.134-4.227c1.024-.287 1.332-.78 1.29-.935s-.564-.416-1.59-.128c-.709.2-1.444-.213-1.644-.921s.215-1.443.924-1.643h0z" fill="#77b255"/><path d="M150.667 26.88c-.392 0-.778-.172-1.042-.5-.46-.576-.366-1.415.208-1.875.29-.233 7.224-5.679 17.022-4.277.73.104 1.236.779 1.132 1.508s-.773 1.24-1.509 1.131c-8.657-1.229-14.916 3.672-14.977 3.721-.248.197-.542.292-.834.292h0z" fill="#aa8dd8"/><path d="M127.672 21.334a1.37 1.37 0 0 1-.384-.056c-.706-.212-1.106-.955-.894-1.66 1.511-5.031 2.88-13.059 1.198-15.152-.188-.237-.472-.471-1.123-.421-1.251.096-1.132 2.735-1.131 2.761.056.735-.496 1.375-1.229 1.429-.745.045-1.375-.496-1.429-1.231-.138-1.839.434-5.38 3.589-5.619 1.408-.107 2.577.383 3.403 1.409 3.161 3.935-.048 15.341-.723 17.589-.173.577-.704.949-1.277.949z" fill="#77b255"/><path d="M154 14.667a2 2 0 1 0 0-4 2 2 0 1 0 0 4z" fill="#5c913b"/><path d="M122.667 26.667c1.472 0 2.666-1.194 2.666-2.667s-1.194-2.667-2.666-2.667S120 22.527 120 24s1.194 2.667 2.667 2.667z" fill="#9266cc"/><g fill="#5c913b"><path d="M163.333 28a2 2 0 1 0 0-4 2 2 0 1 0 0 4zm-12 16a2 2 0 1 0 0-4 2 2 0 1 0 0 4z"/></g><g fill="#ffcc4d"><path d="M157.334 8C158.806 8 160 6.806 160 5.333s-1.194-2.667-2.666-2.667a2.67 2.67 0 0 0-2.667 2.667A2.67 2.67 0 0 0 157.334 8zm5.999 5.333a2 2 0 1 0 0-4 2 2 0 1 0 0 4zm-4 5.334a2 2 0 0 0 0-4 2 2 0 1 0 0 4zM130 33.333a2 2 0 1 0 0-4 2 2 0 1 0 0 4z"/></g></g><path d="M48 24c0 13.255-10.745 24-24 24S0 37.255 0 24 10.747 0 24 0s24 10.747 24 24z" fill="#ffcc4d"/><path d="M15.333 24c1.841 0 3.333-3.283 3.333-7.333s-1.492-7.333-3.333-7.333S12 12.617 12 16.667 13.492 24 15.333 24zm17.333 0C34.507 24 36 20.717 36 16.667s-1.492-7.333-3.333-7.333-3.333 3.283-3.333 7.333S30.825 24 32.666 24zM24 29.333c-4.831 0-8.036-.563-12-1.333-.905-.175-2.667 0-2.667 2.667 0 5.333 6.127 12 14.667 12s14.667-6.667 14.667-12C38.666 28 36.905 27.824 36 28c-3.964.771-7.169 1.333-12 1.333z" fill="#664500"/><path d="M12 30.667S16 32 24 32s12-1.333 12-1.333S33.333 36 24 36s-12-5.333-12-5.333z" fill="#fff"/><defs><clipPath id="A"><path fill="#fff" transform="translate(60)" d="M0 0h48v48H0z"/></clipPath><clipPath id="B"><path fill="#fff" transform="translate(120)" d="M0 0h48v48H0z"/></clipPath></defs></svg>
\ No newline at end of file
src/pages/settings/channel/Overview.tsx
View file @ 1ac5de17
import { Channels } from "revolt.js/dist/api/objects";
import { observer } from "mobx-react-lite";
import { Channel } from "revolt.js/dist/maps/Channels";
import styled from "styled-components";
import styles from "./Panes.module.scss";
import { Text } from "preact-i18n";
import { useContext, useEffect, useState } from "preact/hooks";
import { useEffect, useState } from "preact/hooks";
import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
import { FileUploader } from "../../../context/revoltjs/FileUploads";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
import Button from "../../../components/ui/Button";
import InputBox from "../../../components/ui/InputBox";
interface Props {
channel:
| Channels.GroupChannel
| Channels.TextChannel
| Channels.VoiceChannel;
channel: Channel;
}
export default function Overview({ channel }: Props) {
const client = useContext(AppContext);
const Row = styled.div`
gap: 20px;
display: flex;
const [name, setName] = useState(channel.name);
const [description, setDescription] = useState(channel.description ?? "");
.name {
flex-grow: 1;
useEffect(() => setName(channel.name), [channel.name]);
useEffect(
() => setDescription(channel.description ?? ""),
[channel.description],
);
input {
width: 100%;
}
}
`;
const [changed, setChanged] = useState(false);
function save() {
let changes: any = {};
if (name !== channel.name) changes.name = name;
if (description !== channel.description)
changes.description = description;
export default observer(({ channel }: Props) => {
const [name, setName] = useState(channel.name ?? undefined);
const [description, setDescription] = useState(channel.description ?? "");
client.channels.edit(channel._id, changes);
setChanged(false);
}
useEffect(() => setName(channel.name ?? undefined), [channel.name]);
useEffect(
() => setDescription(channel.description ?? ""),
[channel.description],
);
return (
<div className={styles.overview}>
<div className={styles.row}>
<FileUploader
width={80}
height={80}
style="icon"
fileType="icons"
behaviour="upload"
maxFileSize={2_500_000}
onUpload={(icon) =>
client.channels.edit(channel._id, { icon })
}
previewURL={client.channels.getIconURL(
channel._id,
{ max_side: 256 },
true,
)}
remove={() =>
client.channels.edit(channel._id, { remove: "Icon" })
}
defaultPreview={
channel.channel_type === "Group"
? "/assets/group.png"
: undefined
}
/>
<div className={styles.name}>
<h3>
{channel.channel_type === "Group" ? (
<Text id="app.main.groups.name" />
) : (
<Text id="app.main.servers.channel_name" />
)}
</h3>
<InputBox
contrast
value={name}
maxLength={32}
onChange={(e) => {
setName(e.currentTarget.value);
if (!changed) setChanged(true);
}}
/>
</div>
</div>
const [changed, setChanged] = useState(false);
function save() {
const changes: Record<string, string | undefined> = {};
if (name !== channel.name) changes.name = name;
if (description !== channel.description)
changes.description = description;
<h3>
{channel.channel_type === "Group" ? (
<Text id="app.main.groups.description" />
) : (
<Text id="app.main.servers.channel_description" />
)}
</h3>
<TextAreaAutoSize
maxRows={10}
minHeight={60}
maxLength={1024}
value={description}
placeholder={"Add a description..."}
onChange={(ev) => {
setDescription(ev.currentTarget.value);
if (!changed) setChanged(true);
}}
/>
<p>
<Button onClick={save} contrast disabled={!changed}>
<Text id="app.special.modals.actions.save" />
</Button>
</p>
</div>
);
}
channel.edit(changes);
setChanged(false);
}
return (
<div className="overview">
<Row>
<FileUploader
width={80}
height={80}
style="icon"
fileType="icons"
behaviour="upload"
maxFileSize={2_500_000}
onUpload={(icon) => channel.edit({ icon })}
previewURL={channel.generateIconURL(
{ max_side: 256 },
true,
)}
remove={() => channel.edit({ remove: "Icon" })}
defaultPreview={
channel.channel_type === "Group"
? "/assets/group.png"
: undefined
}
/>
<div className="name">
<h3>
{channel.channel_type === "Group" ? (
<Text id="app.main.groups.name" />
) : (
<Text id="app.main.servers.channel_name" />
)}
</h3>
<InputBox
contrast
value={name}
maxLength={32}
onChange={(e) => {
setName(e.currentTarget.value);
if (!changed) setChanged(true);
}}
/>
</div>
</Row>
<h3>
{channel.channel_type === "Group" ? (
<Text id="app.main.groups.description" />
) : (
<Text id="app.main.servers.channel_description" />
)}
</h3>
<TextAreaAutoSize
maxRows={10}
minHeight={60}
maxLength={1024}
value={description}
placeholder={"Add a description..."}
onChange={(ev) => {
setDescription(ev.currentTarget.value);
if (!changed) setChanged(true);
}}
/>
<p>
<Button onClick={save} contrast disabled={!changed}>
<Text id="app.special.modals.actions.save" />
</Button>
</p>
</div>
);
});
src/pages/settings/channel/Panes.module.scss deleted 100644 → 0
View file @ 7bd33d8d
.overview {
.row {
gap: 20px;
display: flex;
.name {
flex-grow: 1;
input {
width: 100%;
}
}
}
}
src/pages/settings/channel/Permissions.tsx
View file @ 1ac5de17
import { Channels } from "revolt.js/dist/api/objects";
import { ChannelPermission } from "revolt.js/dist/api/permissions";
import { observer } from "mobx-react-lite";
import {
ChannelPermission,
DEFAULT_PERMISSION_DM,
} from "revolt.js/dist/api/permissions";
import { Channel } from "revolt.js/dist/maps/Channels";
import { useContext, useEffect, useState } from "preact/hooks";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
import { useServer } from "../../../context/revoltjs/hooks";
import { useEffect, useState } from "preact/hooks";
import Button from "../../../components/ui/Button";
import Checkbox from "../../../components/ui/Checkbox";
import Tip from "../../../components/ui/Tip";
// ! FIXME: export from revolt.js
const DEFAULT_PERMISSION_DM =
ChannelPermission.View +
ChannelPermission.SendMessage +
ChannelPermission.ManageChannel +
ChannelPermission.VoiceCall +
ChannelPermission.InviteOthers +
ChannelPermission.EmbedLinks +
ChannelPermission.UploadFiles;
interface Props {
channel:
| Channels.GroupChannel
| Channels.TextChannel
| Channels.VoiceChannel;
channel: Channel;
}
// ! FIXME: bad code :)
export default function Permissions({ channel }: Props) {
const [selected, setSelected] = useState("default");
const client = useContext(AppContext);
export default observer(({ channel }: Props) => {
const [selected, setSelected] = useState("default");
type R = { name: string; permissions: number };
let roles: { [key: string]: R } = {};
if (channel.channel_type !== "Group") {
const server = useServer(channel.server);
const a = server?.roles ?? {};
for (let b of Object.keys(a)) {
roles[b] = {
name: a[b].name,
permissions: a[b].permissions[1],
};
}
}
type R = { name: string; permissions: number };
const roles: { [key: string]: R } = {};
if (channel.channel_type !== "Group") {
const server = channel.server;
const a = server?.roles ?? {};
for (const b of Object.keys(a)) {
roles[b] = {
name: a[b].name,
permissions: a[b].permissions[1],
};
}
}
const keys = ["default", ...Object.keys(roles)];
const keys = ["default", ...Object.keys(roles)];
const defaultRole = {
name: "Default",
permissions:
(channel.channel_type === "Group"
? channel.permissions
: channel.default_permissions) ?? DEFAULT_PERMISSION_DM,
};
const selectedRole = selected === "default" ? defaultRole : roles[selected];
const defaultRole = {
name: "Default",
permissions:
(channel.channel_type === "Group"
? channel.permissions
: channel.default_permissions) ?? DEFAULT_PERMISSION_DM,
};
const selectedRole = selected === "default" ? defaultRole : roles[selected];
if (!selectedRole) {
useEffect(() => setSelected("default"), []);
return null;
}
if (!selectedRole) {
useEffect(() => setSelected("default"), []);
return null;
}
const [p, setPerm] = useState(selectedRole.permissions >>> 0);
const [p, setPerm] = useState(selectedRole.permissions >>> 0);
useEffect(() => {
setPerm(selectedRole.permissions >>> 0);
}, [selected, selectedRole.permissions]);
useEffect(() => {
setPerm(selectedRole.permissions >>> 0);
}, [selected, selectedRole.permissions]);
return (
<div>
<Tip warning>This section is under construction.</Tip>
<h2>select role</h2>
{selected}
{keys.map((id) => {
let role: R = id === "default" ? defaultRole : roles[id];
return (
<div>
<Tip warning>This section is under construction.</Tip>
<h2>select role</h2>
{selected}
{keys.map((id) => {
const role: R = id === "default" ? defaultRole : roles[id];
return (
<Checkbox
checked={selected === id}
onChange={(selected) => selected && setSelected(id)}>
{role.name}
</Checkbox>
);
})}
<h2>channel per??issions</h2>
{Object.keys(ChannelPermission).map((perm) => {
let value =
ChannelPermission[perm as keyof typeof ChannelPermission];
if (value & DEFAULT_PERMISSION_DM) {
return (
<Checkbox
checked={(p & value) > 0}
onChange={(c) =>
setPerm(c ? p | value : p ^ value)
}>
{perm}
</Checkbox>
);
}
})}
<Button
contrast
onClick={() => {
client.channels.setPermissions(channel._id, selected, p);
}}>
click here to save permissions for role
</Button>
</div>
);
}
return (
<Checkbox
key={id}
checked={selected === id}
onChange={(selected) => selected && setSelected(id)}>
{role.name}
</Checkbox>
);
})}
<h2>channel permissions</h2>
{Object.keys(ChannelPermission).map((perm) => {
if (perm === "View") return null;
const value =
ChannelPermission[perm as keyof typeof ChannelPermission];
if (value & DEFAULT_PERMISSION_DM) {
return (
<Checkbox
checked={(p & value) > 0}
onChange={(c) =>
setPerm(c ? p | value : p ^ value)
}>
{perm}
</Checkbox>
);
}
})}
<Button
contrast
onClick={() => {
channel.setPermissions(selected, p);
}}>
click here to save permissions for role
</Button>
</div>
);
});
src/pages/settings/panes/Account.tsx
View file @ 1ac5de17
import { At } from "@styled-icons/boxicons-regular";
import { Envelope, Key } from "@styled-icons/boxicons-solid";
import { Link, useHistory } from "react-router-dom";
import { Users } from "revolt.js/dist/api/objects";
import { At, Key, Block } from "@styled-icons/boxicons-regular";
import {
Envelope,
HelpCircle,
Lock,
Trash,
} from "@styled-icons/boxicons-solid";
import { observer } from "mobx-react-lite";
import { useHistory } from "react-router-dom";
import { Profile } from "revolt-api/types/Users";
import styles from "./Panes.module.scss";
import { Text } from "preact-i18n";
import { useContext, useEffect, useState } from "preact/hooks";
import { stopPropagation } from "../../../lib/stopPropagation";
import { useIntermediate } from "../../../context/intermediate/Intermediate";
import {
ClientStatus,
StatusContext,
ClientStatus,
StatusContext,
useClient,
} from "../../../context/revoltjs/RevoltClient";
import { useForceUpdate, useSelf } from "../../../context/revoltjs/hooks";
import Tooltip from "../../../components/common/Tooltip";
import UserIcon from "../../../components/common/user/UserIcon";
import Button from "../../../components/ui/Button";
import Overline from "../../../components/ui/Overline";
import Tip from "../../../components/ui/Tip";
import CategoryButton from "../../../components/ui/fluent/CategoryButton";
export const Account = observer(() => {
const { openScreen, writeClipboard } = useIntermediate();
const status = useContext(StatusContext);
export function Account() {
const { openScreen } = useIntermediate();
const status = useContext(StatusContext);
const client = useClient();
const ctx = useForceUpdate();
const user = useSelf(ctx);
if (!user) return null;
const [email, setEmail] = useState("...");
const [revealEmail, setRevealEmail] = useState(false);
const [profile, setProfile] = useState<undefined | Profile>(undefined);
const history = useHistory();
const [email, setEmail] = useState("...");
const [profile, setProfile] = useState<undefined | Users.Profile>(
undefined,
);
const history = useHistory();
function switchPage(to: string) {
history.replace(`/settings/${to}`);
}
function switchPage(to: string) {
history.replace(`/settings/${to}`);
}
useEffect(() => {
if (email === "..." && status === ClientStatus.ONLINE) {
client
.req("GET", "/auth/user")
.then((account) => setEmail(account.email));
}
useEffect(() => {
if (email === "..." && status === ClientStatus.ONLINE) {
ctx.client
.req("GET", "/auth/user")
.then((account) => setEmail(account.email));
}
if (profile === undefined && status === ClientStatus.ONLINE) {
client
.user!.fetchProfile()
.then((profile) => setProfile(profile ?? {}));
}
}, [client, email, profile, status]);
if (profile === undefined && status === ClientStatus.ONLINE) {
ctx.client.users
.fetchProfile(user._id)
.then((profile) => setProfile(profile ?? {}));
}
}, [status]);
return (
<div className={styles.user}>
<div className={styles.banner}>
<div className={styles.container}>
<UserIcon
className={styles.avatar}
target={client.user!}
size={72}
onClick={() => switchPage("profile")}
/>
<div className={styles.userDetail}>
@{client.user!.username}
<div className={styles.userid}>
<Tooltip
content={
<Text id="app.settings.pages.account.unique_id" />
}>
<HelpCircle size={16} />
</Tooltip>
<Tooltip content={<Text id="app.special.copy" />}>
<a
onClick={() =>
writeClipboard(client.user!._id)
}>
{client.user!._id}
</a>
</Tooltip>
</div>
</div>
</div>
return (
<div className={styles.user}>
<div className={styles.banner}>
<UserIcon
className={styles.avatar}
target={user}
size={72}
onClick={() => switchPage("profile")}
/>
<div className={styles.username}>@{user.username}</div>
</div>
<div className={styles.details}>
{(
[
["username", user.username, <At size={24} />],
["email", email, <Envelope size={24} />],
["password", "*****", <Key size={24} />],
] as const
).map(([field, value, icon]) => (
<div>
{icon}
<div className={styles.detail}>
<Overline>
<Text id={`login.${field}`} />
</Overline>
<p>{value}</p>
</div>
<div>
<Button
onClick={() =>
openScreen({
id: "modify_account",
field: field,
})
}
contrast>
<Text id="app.settings.pages.account.change_field" />
</Button>
</div>
</div>
))}
</div>
<Tip>
<span>
<Text id="app.settings.tips.account.a" />
</span>{" "}
<a onClick={() => switchPage("profile")}>
<Text id="app.settings.tips.account.b" />
</a>
</Tip>
</div>
);
}
<Button onClick={() => switchPage("profile")} contrast>
<Text id="app.settings.pages.profile.edit_profile" />
</Button>
</div>
<div>
{(
[
[
"username",
client.user!.username,
<At key="at" size={24} />,
],
["email", email, <Envelope key="envelope" size={24} />],
["password", "•••••••••", <Key key="key" size={24} />],
] as const
).map(([field, value, icon]) => (
<CategoryButton
key={field}
icon={icon}
description={
field === "email" ? (
revealEmail ? (
<>
{value}{" "}
<a
onClick={(ev) =>
stopPropagation(
ev,
setRevealEmail(false),
)
}>
<Text id="app.special.modals.actions.hide" />
</a>
</>
) : (
<>
•••••••••••@{value.split("@").pop()}{" "}
<a
onClick={(ev) =>
stopPropagation(
ev,
setRevealEmail(true),
)
}>
<Text id="app.special.modals.actions.reveal" />
</a>
</>
)
) : (
value
)
}
account
action="chevron"
onClick={() =>
openScreen({
id: "modify_account",
field,
})
}>
<Text id={`login.${field}`} />
</CategoryButton>
))}
</div>
<h3>
<Text id="app.settings.pages.account.2fa.title" />
</h3>
<h5>
{/*<Text id="app.settings.pages.account.2fa.description" />*/}
Two-factor authentication is currently work-in-progress, see{" "}
{` `}
<a
href="https://gitlab.insrt.uk/insert/rauth/-/issues/2"
target="_blank"
rel="noreferrer">
tracking issue here
</a>
.
</h5>
<CategoryButton
icon={<Lock size={24} color="var(--error)" />}
description={"Set up 2FA Authentication on your account."}
disabled
action="chevron">
Set up Two-factor authentication
</CategoryButton>
<h3>
<Text id="app.settings.pages.account.manage.title" />
</h3>
<h5>
<Text id="app.settings.pages.account.manage.description" />
</h5>
<CategoryButton
icon={<Block size={24} color="var(--error)" />}
description={
"Disable your account. You won't be able to access it unless you log back in."
}
disabled
action={<Text id="general.unavailable" />}>
<Text id="app.settings.pages.account.manage.disable" />
</CategoryButton>
<a href="mailto:contact@revolt.chat?subject=Delete%20my%20account">
<CategoryButton
icon={<Trash size={24} color="var(--error)" />}
description={
"Delete your account, including all of your data."
}
hover
action="external">
<Text id="app.settings.pages.account.manage.delete" />
</CategoryButton>
</a>
<Tip>
<span>
<Text id="app.settings.tips.account.a" />
</span>{" "}
<a onClick={() => switchPage("profile")}>
<Text id="app.settings.tips.account.b" />
</a>
</Tip>
</div>
);
});
src/pages/settings/panes/Appearance.tsx
View file @ 1ac5de17
// @ts-ignore
import { Reset, Import } from "@styled-icons/boxicons-regular";
import { Pencil } from "@styled-icons/boxicons-solid";
// @ts-expect-error shade-blend-color does not have typings.
import pSBC from "shade-blend-color";
import styles from "./Panes.module.scss";
......@@ -13,19 +15,22 @@ import { connectState } from "../../../redux/connector";
import { EmojiPacks, Settings } from "../../../redux/reducers/settings";
import {
DEFAULT_FONT,
DEFAULT_MONO_FONT,
FONTS,
FONT_KEYS,
MONOSCAPE_FONTS,
MONOSCAPE_FONT_KEYS,
Theme,
ThemeContext,
ThemeOptions,
DEFAULT_FONT,
DEFAULT_MONO_FONT,
Fonts,
FONTS,
FONT_KEYS,
MonospaceFonts,
MONOSPACE_FONTS,
MONOSPACE_FONT_KEYS,
Theme,
ThemeContext,
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 Checkbox from "../../../components/ui/Checkbox";
import ColourSwatches from "../../../components/ui/ColourSwatches";
......@@ -39,92 +44,109 @@ import openmojiSVG from "../assets/openmoji_emoji.svg";
import twemojiSVG from "../assets/twemoji_emoji.svg";
interface Props {
settings: Settings;
settings: Settings;
}
// ! FIXME: code needs to be rewritten to fix jittering
export function Component(props: Props) {
const theme = useContext(ThemeContext);
const { writeClipboard, openScreen } = useIntermediate();
const theme = useContext(ThemeContext);
const { writeClipboard, openScreen } = useIntermediate();
function setTheme(theme: ThemeOptions) {
dispatch({
type: "SETTINGS_SET_THEME",
theme,
});
}
function setTheme(theme: ThemeOptions) {
dispatch({
type: "SETTINGS_SET_THEME",
theme,
});
}
function pushOverride(custom: Partial<Theme>) {
dispatch({
type: "SETTINGS_SET_THEME_OVERRIDE",
custom,
});
}
const pushOverride = useCallback((custom: Partial<Theme>) => {
dispatch({
type: "SETTINGS_SET_THEME_OVERRIDE",
custom,
});
}, []);
function setAccent(accent: string) {
setOverride({
accent,
"scrollbar-thumb": pSBC(-0.2, accent),
});
}
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,
},
});
}
const emojiPack = props.settings.appearance?.emojiPack ?? "mutant";
function setEmojiPack(emojiPack: EmojiPacks) {
dispatch({
type: "SETTINGS_SET_APPEARANCE",
options: {
emojiPack,
},
});
}
const setOverride = useCallback(debounce(pushOverride, 200), []) as (
custom: Partial<Theme>,
) => void;
const [css, setCSS] = useState(props.settings.theme?.custom?.css ?? "");
// eslint-disable-next-line react-hooks/exhaustive-deps
const setOverride = useCallback(
debounce(pushOverride as (...args: unknown[]) => void, 200),
[pushOverride],
) as (custom: Partial<Theme>) => void;
const [css, setCSS] = useState(props.settings.theme?.custom?.css ?? "");
useEffect(() => setOverride({ css }), [css]);
useEffect(() => setOverride({ css }), [setOverride, css]);
const selected = props.settings.theme?.preset ?? "dark";
return (
<div className={styles.appearance}>
<h3>
<Text id="app.settings.pages.appearance.theme" />
</h3>
<div className={styles.themes}>
<div className={styles.theme}>
<img
src={lightSVG}
data-active={selected === "light"}
onClick={() =>
selected !== "light" &&
setTheme({ preset: "light" })
}
/>
<h4>
<Text id="app.settings.pages.appearance.color.light" />
</h4>
</div>
<div className={styles.theme}>
<img
src={darkSVG}
data-active={selected === "dark"}
onClick={() =>
selected !== "dark" && setTheme({ preset: "dark" })
}
/>
<h4>
<Text id="app.settings.pages.appearance.color.dark" />
</h4>
</div>
</div>
const selected = props.settings.theme?.preset ?? "dark";
return (
<div className={styles.appearance}>
<h3>
<Text id="app.settings.pages.appearance.theme" />
</h3>
<div className={styles.themes}>
<div className={styles.theme}>
<img
loading="eager"
src={lightSVG}
draggable={false}
data-active={selected === "light"}
onClick={() =>
selected !== "light" &&
setTheme({ preset: "light" })
}
onContextMenu={(e) => e.preventDefault()}
/>
<h4>
<Text id="app.settings.pages.appearance.color.light" />
</h4>
</div>
<div className={styles.theme}>
<img
loading="eager"
src={darkSVG}
draggable={false}
data-active={selected === "dark"}
onClick={() =>
selected !== "dark" && setTheme({ preset: "dark" })
}
onContextMenu={(e) => e.preventDefault()}
/>
<h4>
<Text id="app.settings.pages.appearance.color.dark" />
</h4>
</div>
</div>
{/*<Checkbox
checked={props.settings.theme?.ligatures === true}
onChange={() =>
setTheme({
ligatures: !props.settings.theme?.ligatures,
})
}>
Use the system theme
</Checkbox>*/}
<h3>
<Text id="app.settings.pages.appearance.accent_selector" />
</h3>
<ColourSwatches value={theme.accent} onChange={setAccent} />
<h3>
<Text id="app.settings.pages.appearance.accent_selector" />
</h3>
<ColourSwatches value={theme.accent} onChange={setAccent} />
{/*<h3>
{/*<h3>
<Text id="app.settings.pages.appearance.message_display" />
</h3>
<div className={styles.display}>
......@@ -146,229 +168,280 @@ export function Component(props: Props) {
</Radio>
</div>*/}
<h3>
<Text id="app.settings.pages.appearance.font" />
</h3>
<ComboBox
value={theme.font ?? DEFAULT_FONT}
onChange={(e) =>
setTheme({ custom: { font: e.currentTarget.value as any } })
}>
{FONT_KEYS.map((key) => (
<option value={key}>
{FONTS[key as keyof typeof FONTS].name}
</option>
))}
</ComboBox>
<p>
<Checkbox
checked={props.settings.theme?.ligatures === true}
onChange={() =>
setTheme({
ligatures: !props.settings.theme?.ligatures,
})
}
description={
<Text id="app.settings.pages.appearance.ligatures_desc" />
}>
<Text id="app.settings.pages.appearance.ligatures" />
</Checkbox>
</p>
<h3>
<Text id="app.settings.pages.appearance.font" />
</h3>
<ComboBox
value={theme.font ?? DEFAULT_FONT}
onChange={(e) =>
pushOverride({ font: e.currentTarget.value as Fonts })
}>
{FONT_KEYS.map((key) => (
<option value={key} key={key}>
{FONTS[key as keyof typeof FONTS].name}
</option>
))}
</ComboBox>
{/* TOFIX: Only show when a font with ligature support is selected, i.e.: Inter.*/}
<p>
<Checkbox
checked={props.settings.theme?.ligatures === true}
onChange={() =>
setTheme({
ligatures: !props.settings.theme?.ligatures,
})
}
description={
<Text id="app.settings.pages.appearance.ligatures_desc" />
}>
<Text id="app.settings.pages.appearance.ligatures" />
</Checkbox>
</p>
<h3>
<Text id="app.settings.pages.appearance.emoji_pack" />
</h3>
<div className={styles.emojiPack}>
<div className={styles.row}>
<div>
<div
className={styles.button}
onClick={() => setEmojiPack("mutant")}
data-active={emojiPack === "mutant"}>
<img src={mutantSVG} draggable={false} />
</div>
<h4>
Mutant Remix{" "}
<a
href="https://mutant.revolt.chat"
target="_blank">
(by Revolt)
</a>
</h4>
</div>
<div>
<div
className={styles.button}
onClick={() => setEmojiPack("twemoji")}
data-active={emojiPack === "twemoji"}>
<img src={twemojiSVG} draggable={false} />
</div>
<h4>Twemoji</h4>
</div>
</div>
<div className={styles.row}>
<div>
<div
className={styles.button}
onClick={() => setEmojiPack("openmoji")}
data-active={emojiPack === "openmoji"}>
<img src={openmojiSVG} draggable={false} />
</div>
<h4>Openmoji</h4>
</div>
<div>
<div
className={styles.button}
onClick={() => setEmojiPack("noto")}
data-active={emojiPack === "noto"}>
<img src={notoSVG} draggable={false} />
</div>
<h4>Noto Emoji</h4>
</div>
</div>
</div>
<h3>
<Text id="app.settings.pages.appearance.emoji_pack" />
</h3>
<div className={styles.emojiPack}>
<div className={styles.row}>
<div>
<div
className={styles.button}
onClick={() => setEmojiPack("mutant")}
data-active={emojiPack === "mutant"}>
<img
loading="eager"
src={mutantSVG}
draggable={false}
onContextMenu={(e) => e.preventDefault()}
/>
</div>
<h4>
Mutant Remix{" "}
<a
href="https://mutant.revolt.chat"
target="_blank"
rel="noreferrer">
(by Revolt)
</a>
</h4>
</div>
<div>
<div
className={styles.button}
onClick={() => setEmojiPack("twemoji")}
data-active={emojiPack === "twemoji"}>
<img
loading="eager"
src={twemojiSVG}
draggable={false}
onContextMenu={(e) => e.preventDefault()}
/>
</div>
<h4>Twemoji</h4>
</div>
</div>
<div className={styles.row}>
<div>
<div
className={styles.button}
onClick={() => setEmojiPack("openmoji")}
data-active={emojiPack === "openmoji"}>
<img
loading="eager"
src={openmojiSVG}
draggable={false}
onContextMenu={(e) => e.preventDefault()}
/>
</div>
<h4>Openmoji</h4>
</div>
<div>
<div
className={styles.button}
onClick={() => setEmojiPack("noto")}
data-active={emojiPack === "noto"}>
<img
loading="eager"
src={notoSVG}
draggable={false}
onContextMenu={(e) => e.preventDefault()}
/>
</div>
<h4>Noto Emoji</h4>
</div>
</div>
</div>
<CollapsibleSection
id="settings_advanced_appearance"
defaultValue={false}
summary={<Text id="app.settings.pages.appearance.advanced" />}>
<h3>
<Text id="app.settings.pages.appearance.overrides" />
</h3>
<div className={styles.actions}>
<Button contrast onClick={() => setTheme({ custom: {} })}>
<Text id="app.settings.pages.appearance.reset_overrides" />
</Button>
<Button
contrast
onClick={() => writeClipboard(JSON.stringify(theme))}>
<Text id="app.settings.pages.appearance.export_clipboard" />
</Button>
<Button
contrast
onClick={async () => {
const text = await navigator.clipboard.readText();
setOverride(JSON.parse(text));
}}>
<Text id="app.settings.pages.appearance.import_clipboard" />
</Button>
<Button
contrast
onClick={async () => {
openScreen({
id: "_input",
question: (
<Text id="app.settings.pages.appearance.import_theme" />
),
field: (
<Text id="app.settings.pages.appearance.theme_data" />
),
callback: async (string) =>
setOverride(JSON.parse(string)),
});
}}>
<Text id="app.settings.pages.appearance.import_manual" />
</Button>
</div>
<div className={styles.overrides}>
{(
[
"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) => (
<div className={styles.entry} key={x}>
<span>{x}</span>
<div className={styles.override}>
<div
className={styles.picker}
style={{ backgroundColor: theme[x] }}>
<input
type="color"
value={theme[x]}
onChange={(v) =>
setOverride({
[x]: v.currentTarget.value,
})
}
/>
</div>
<InputBox
className={styles.text}
value={theme[x]}
onChange={(y) =>
setOverride({
[x]: y.currentTarget.value,
})
}
/>
</div>
</div>
))}
</div>
<CollapsibleSection
defaultValue={false}
id="settings_overrides"
summary={<Text id="app.settings.pages.appearance.overrides" />}>
<div className={styles.actions}>
<Tooltip
content={
<Text id="app.settings.pages.appearance.reset_overrides" />
}>
<Button
contrast
iconbutton
onClick={() => setTheme({ custom: {} })}>
<Reset size={22} />
</Button>
</Tooltip>
<div
className={styles.code}
onClick={() => writeClipboard(JSON.stringify(theme))}>
<Tooltip content={<Text id="app.special.copy" />}>
{" "}
{/*TOFIX: Try to put the tooltip above the .code div without messing up the css challenge */}
{JSON.stringify(theme)}
</Tooltip>
</div>
<Tooltip
content={
<Text id="app.settings.pages.appearance.import" />
}>
<Button
contrast
iconbutton
onClick={async () => {
try {
const text =
await navigator.clipboard.readText();
setOverride(JSON.parse(text));
} catch (err) {
openScreen({
id: "_input",
question: (
<Text id="app.settings.pages.appearance.import_theme" />
),
field: (
<Text id="app.settings.pages.appearance.theme_data" />
),
callback: async (string) =>
setOverride(JSON.parse(string)),
});
}
}}>
<Import size={22} />
</Button>
</Tooltip>
</div>
<h3>App</h3>
<div className={styles.overrides}>
{(
[
"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) => (
<div
className={styles.entry}
key={x}
style={{ backgroundColor: theme[x] }}>
<div className={styles.input}>
<input
type="color"
value={theme[x]}
onChange={(v) =>
setOverride({
[x]: v.currentTarget.value,
})
}
/>
</div>
<span>{x}</span>
<div className={styles.override}>
<div
className={styles.picker}
onClick={(e) =>
e.currentTarget.parentElement?.parentElement
?.querySelector("input")
?.click()
}>
<Pencil size={24} />
</div>
<InputBox
type="text"
className={styles.text}
value={theme[x]}
onChange={(y) =>
setOverride({
[x]: y.currentTarget.value,
})
}
/>
</div>
</div>
))}
</div>
</CollapsibleSection>
<h3>
<Text id="app.settings.pages.appearance.mono_font" />
</h3>
<ComboBox
value={theme.monoscapeFont ?? DEFAULT_MONO_FONT}
onChange={(e) =>
setTheme({
custom: {
monoscapeFont: e.currentTarget.value as any,
},
})
}>
{MONOSCAPE_FONT_KEYS.map((key) => (
<option value={key}>
{
MONOSCAPE_FONTS[
key as keyof typeof MONOSCAPE_FONTS
].name
}
</option>
))}
</ComboBox>
<CollapsibleSection
id="settings_advanced_appearance"
defaultValue={false}
summary={<Text id="app.settings.pages.appearance.advanced" />}>
<h3>
<Text id="app.settings.pages.appearance.mono_font" />
</h3>
<ComboBox
value={theme.monospaceFont ?? DEFAULT_MONO_FONT}
onChange={(e) =>
pushOverride({
monospaceFont: e.currentTarget
.value as MonospaceFonts,
})
}>
{MONOSPACE_FONT_KEYS.map((key) => (
<option value={key} key={key}>
{
MONOSPACE_FONTS[
key as keyof typeof MONOSPACE_FONTS
].name
}
</option>
))}
</ComboBox>
<h3>
<Text id="app.settings.pages.appearance.custom_css" />
</h3>
<TextAreaAutoSize
maxRows={20}
minHeight={480}
code
value={css}
onChange={(ev) => setCSS(ev.currentTarget.value)}
/>
</CollapsibleSection>
</div>
);
<h3>
<Text id="app.settings.pages.appearance.custom_css" />
</h3>
<TextAreaAutoSize
maxRows={20}
minHeight={480}
code
value={css}
onChange={(ev) => setCSS(ev.currentTarget.value)}
/>
</CollapsibleSection>
</div>
);
}
export const Appearance = connectState(Component, (state) => {
return {
settings: state.settings,
};
return {
settings: state.settings,
};
});
src/pages/settings/panes/Experiments.tsx
View file @ 1ac5de17
......@@ -4,52 +4,50 @@ import { Text } from "preact-i18n";
import { dispatch } from "../../../redux";
import { connectState } from "../../../redux/connector";
import {
AVAILABLE_EXPERIMENTS,
ExperimentOptions,
AVAILABLE_EXPERIMENTS,
ExperimentOptions,
EXPERIMENTS,
} from "../../../redux/reducers/experiments";
import Checkbox from "../../../components/ui/Checkbox";
interface Props {
options?: ExperimentOptions;
options?: ExperimentOptions;
}
export function Component(props: Props) {
return (
<div className={styles.experiments}>
<h3>
<Text id="app.settings.pages.experiments.features" />
</h3>
{AVAILABLE_EXPERIMENTS.map((key) => (
<Checkbox
checked={(props.options?.enabled ?? []).indexOf(key) > -1}
onChange={(enabled) =>
dispatch({
type: enabled
? "EXPERIMENTS_ENABLE"
: "EXPERIMENTS_DISABLE",
key,
})
}>
<Text id={`app.settings.pages.experiments.titles.${key}`} />
<p>
<Text
id={`app.settings.pages.experiments.descriptions.${key}`}
/>
</p>
</Checkbox>
))}
{AVAILABLE_EXPERIMENTS.length === 0 && (
<div className={styles.empty}>
<Text id="app.settings.pages.experiments.not_available" />
</div>
)}
</div>
);
return (
<div className={styles.experiments}>
<h3>
<Text id="app.settings.pages.experiments.features" />
</h3>
{AVAILABLE_EXPERIMENTS.map((key) => (
<Checkbox
key={key}
checked={(props.options?.enabled ?? []).indexOf(key) > -1}
onChange={(enabled) =>
dispatch({
type: enabled
? "EXPERIMENTS_ENABLE"
: "EXPERIMENTS_DISABLE",
key,
})
}
description={EXPERIMENTS[key].description}>
{EXPERIMENTS[key].title}
</Checkbox>
))}
{AVAILABLE_EXPERIMENTS.length === 0 && (
<div className={styles.empty}>
<Text id="app.settings.pages.experiments.not_available" />
</div>
)}
</div>
);
}
export const ExperimentsPage = connectState(Component, (state) => {
return {
options: state.experiments,
};
return {
options: state.experiments,
};
});
src/pages/settings/panes/Feedback.tsx
View file @ 1ac5de17
......@@ -2,7 +2,7 @@ import styles from "./Panes.module.scss";
import { Localizer, Text } from "preact-i18n";
import { useState } from "preact/hooks";
import { useSelf } from "../../../context/revoltjs/hooks";
import { useClient } from "../../../context/revoltjs/RevoltClient";
import Button from "../../../components/ui/Button";
import InputBox from "../../../components/ui/InputBox";
......@@ -10,101 +10,87 @@ import Radio from "../../../components/ui/Radio";
import TextArea from "../../../components/ui/TextArea";
export function Feedback() {
const user = useSelf();
const [other, setOther] = useState("");
const [description, setDescription] = useState("");
const [state, setState] = useState<"ready" | "sending" | "sent">("ready");
const [checked, setChecked] = useState<
"Bug" | "Feature Request" | "__other_option__"
>("Bug");
const client = useClient();
const [other, setOther] = useState("");
const [description, setDescription] = useState("");
const [state, setState] = useState<"ready" | "sending" | "sent">("ready");
const [checked, setChecked] = useState<
"Bug" | "Feature Request" | "__other_option__"
>("Bug");
async function onSubmit(ev: JSX.TargetedEvent<HTMLFormElement, Event>) {
ev.preventDefault();
setState("sending");
async function onSubmit(ev: JSX.TargetedEvent<HTMLFormElement, Event>) {
ev.preventDefault();
setState("sending");
await fetch(`https://workers.revolt.chat/feedback`, {
method: "POST",
body: JSON.stringify({
checked,
other,
description,
name: user?.username ?? "Unknown User",
}),
mode: "no-cors",
});
await fetch(`https://workers.revolt.chat/feedback`, {
method: "POST",
body: JSON.stringify({
checked,
other,
description,
name: client.user!.username,
}),
mode: "no-cors",
});
setState("sent");
setChecked("Bug");
setDescription("");
setOther("");
}
setState("sent");
setChecked("Bug");
setDescription("");
setOther("");
}
return (
<form className={styles.feedback} onSubmit={onSubmit}>
<h3>
<Text id="app.settings.pages.feedback.report" />
</h3>
<div className={styles.options}>
<Radio
checked={checked === "Bug"}
disabled={state === "sending"}
onSelect={() => setChecked("Bug")}>
<Text id="app.settings.pages.feedback.bug" />
</Radio>
<Radio
disabled={state === "sending"}
checked={checked === "Feature Request"}
onSelect={() => setChecked("Feature Request")}>
<Text id="app.settings.pages.feedback.feature" />
</Radio>
{(location.hostname === "vite.revolt.chat" ||
location.hostname === "local.revolt.chat") && (
<Radio
disabled={state === "sending"}
checked={other === "Revite"}
onSelect={() => {
setChecked("__other_option__");
setOther("Revite");
}}>
Issues with Revite
</Radio>
)}
<Radio
disabled={state === "sending"}
checked={
checked === "__other_option__" && other !== "Revite"
}
onSelect={() => setChecked("__other_option__")}>
<Localizer>
<InputBox
value={other}
disabled={state === "sending"}
name="entry.1151440373.other_option_response"
onChange={(e) => setOther(e.currentTarget.value)}
placeholder={
(
<Text id="app.settings.pages.feedback.other" />
) as any
}
/>
</Localizer>
</Radio>
</div>
<h3>
<Text id="app.settings.pages.feedback.describe" />
</h3>
<TextArea
// maxRows={10}
value={description}
id="entry.685672624"
disabled={state === "sending"}
onChange={(ev) => setDescription(ev.currentTarget.value)}
/>
<p>
<Button type="submit" contrast>
<Text id="app.settings.pages.feedback.send" />
</Button>
</p>
</form>
);
return (
<form className={styles.feedback} onSubmit={onSubmit}>
<h3>
<Text id="app.settings.pages.feedback.report" />
</h3>
<div className={styles.options}>
<Radio
checked={checked === "Bug"}
disabled={state === "sending"}
onSelect={() => setChecked("Bug")}>
<Text id="app.settings.pages.feedback.bug" />
</Radio>
<Radio
disabled={state === "sending"}
checked={checked === "Feature Request"}
onSelect={() => setChecked("Feature Request")}>
<Text id="app.settings.pages.feedback.feature" />
</Radio>
<Radio
disabled={state === "sending"}
checked={checked === "__other_option__"}
onSelect={() => setChecked("__other_option__")}>
<Localizer>
<InputBox
value={other}
disabled={state === "sending"}
name="entry.1151440373.other_option_response"
onChange={(e) => setOther(e.currentTarget.value)}
placeholder={
(
<Text id="app.settings.pages.feedback.other" />
) as unknown as string
}
/>
</Localizer>
</Radio>
</div>
<h3>
<Text id="app.settings.pages.feedback.describe" />
</h3>
<TextArea
// maxRows={10}
value={description}
id="entry.685672624"
disabled={state === "sending"}
onChange={(ev) => setDescription(ev.currentTarget.value)}
/>
<p>
<Button type="submit" contrast>
<Text id="app.settings.pages.feedback.send" />
</Button>
</p>
</form>
);
}
src/pages/settings/panes/Languages.tsx
View file @ 1ac5de17
......@@ -5,87 +5,103 @@ import { dispatch } from "../../../redux";
import { connectState } from "../../../redux/connector";
import {
Language,
LanguageEntry,
Languages as Langs,
Language,
LanguageEntry,
Languages as Langs,
} from "../../../context/Locale";
import Emoji from "../../../components/common/Emoji";
import Checkbox from "../../../components/ui/Checkbox";
import Tip from "../../../components/ui/Tip";
import tokiponaSVG from "../assets/toki_pona.svg";
type Props = {
locale: Language;
locale: Language;
};
type Key = [string, LanguageEntry];
function Entry({ entry: [x, lang], locale }: { entry: Key } & Props) {
return (
<Checkbox
key={x}
className={styles.entry}
checked={locale === x}
onChange={(v) => {
if (v) {
dispatch({
type: "SET_LOCALE",
locale: x as Language,
});
}
}}>
<div className={styles.flag}>
<Emoji size={42} emoji={lang.emoji} />
</div>
<span className={styles.description}>{lang.display}</span>
</Checkbox>
);
return (
<Checkbox
key={x}
className={styles.entry}
checked={locale === x}
onChange={(v) => {
if (v) {
dispatch({
type: "SET_LOCALE",
locale: x as Language,
});
}
}}>
<div className={styles.flag}>
{lang.emoji === "🙂" ? (
<img src={tokiponaSVG} width={42} />
) : (
<Emoji size={42} emoji={lang.emoji} />
)}
</div>
<span className={styles.description}>{lang.display}</span>
</Checkbox>
);
}
export function Component(props: Props) {
const languages = Object.keys(Langs).map((x) => [
x,
Langs[x as keyof typeof Langs],
]) as Key[];
const languages = Object.keys(Langs).map((x) => [
x,
Langs[x as keyof typeof Langs],
]) as Key[];
return (
<div className={styles.languages}>
<h3>
<Text id="app.settings.pages.language.select" />
</h3>
<div className={styles.list}>
{languages
.filter(([, lang]) => !lang.alt)
.map(([x, lang]) => (
<Entry key={x} entry={[x, lang]} {...props} />
))}
</div>
<h3>
<Text id="app.settings.pages.language.other" />
</h3>
<div className={styles.list}>
{languages
.filter(([, lang]) => lang.alt)
.map(([x, lang]) => (
<Entry key={x} entry={[x, lang]} {...props} />
))}
</div>
<Tip>
<span>
<Text id="app.settings.tips.languages.a" />
</span>{" "}
<a
href="https://weblate.insrt.uk/engage/revolt/?utm_source=widget"
target="_blank">
<Text id="app.settings.tips.languages.b" />
</a>
</Tip>
</div>
);
return (
<div className={styles.languages}>
<h3>
<Text id="app.settings.pages.language.select" />
</h3>
<div className={styles.list}>
{languages
.filter(([, lang]) => !lang.cat)
.map(([x, lang]) => (
<Entry key={x} entry={[x, lang]} {...props} />
))}
</div>
<h3>
<Text id="app.settings.pages.language.const" />
</h3>
<div className={styles.list}>
{languages
.filter(([, lang]) => lang.cat === "const")
.map(([x, lang]) => (
<Entry key={x} entry={[x, lang]} {...props} />
))}
</div>
<h3>
<Text id="app.settings.pages.language.other" />
</h3>
<div className={styles.list}>
{languages
.filter(([, lang]) => lang.cat === "alt")
.map(([x, lang]) => (
<Entry key={x} entry={[x, lang]} {...props} />
))}
</div>
<Tip>
<span>
<Text id="app.settings.tips.languages.a" />
</span>{" "}
<a
href="https://weblate.insrt.uk/engage/revolt/?utm_source=widget"
target="_blank"
rel="noreferrer">
<Text id="app.settings.tips.languages.b" />
</a>
</Tip>
</div>
);
}
export const Languages = connectState(Component, (state) => {
return {
locale: state.locale,
};
return {
locale: state.locale,
};
});
src/pages/settings/panes/Native.tsx 0 → 100644
View file @ 1ac5de17
import { useEffect, useState } from "preact/hooks";
import Button from "../../../components/ui/Button";
import Checkbox from "../../../components/ui/Checkbox";
export function Native() {
const [config, setConfig] = useState(window.native.getConfig());
const [autoStart, setAutoStart] = useState<boolean | undefined>();
const fetchValue = () => window.native.getAutoStart().then(setAutoStart);
const [hintReload, setHintReload] = useState(false);
const [hintRelaunch, setHintRelaunch] = useState(false);
const [confirmDev, setConfirmDev] = useState(false);
useEffect(() => {
fetchValue();
}, []);
return (
<div>
<h3>App Behavior</h3>
<h5>Some options might require a restart.</h5>
<Checkbox
checked={autoStart ?? false}
disabled={typeof autoStart === "undefined"}
onChange={async (v) => {
if (v) {
await window.native.enableAutoStart();
} else {
await window.native.disableAutoStart();
}
setAutoStart(v);
}}
description="Launch Revolt when you log into your computer.">
Start with computer
</Checkbox>
<Checkbox
checked={config.discordRPC}
onChange={(discordRPC) => {
window.native.set("discordRPC", discordRPC);
setConfig({
...config,
discordRPC,
});
}}
description="Rep Revolt on your Discord status.">
Enable Discord status
</Checkbox>
<Checkbox
checked={config.build === "nightly"}
onChange={(nightly) => {
const build = nightly ? "nightly" : "stable";
window.native.set("build", build);
setHintReload(true);
setConfig({
...config,
build,
});
}}
description="Use the beta branch of Revolt.">
Revolt Nightly
</Checkbox>
<h3>Titlebar</h3>
<Checkbox
checked={!config.frame}
onChange={(frame) => {
window.native.set("frame", !frame);
setHintRelaunch(true);
setConfig({
...config,
frame: !frame,
});
}}
description={<>Let Revolt use its own window frame.</>}>
Custom window frame
</Checkbox>
<Checkbox //FIXME: In Titlebar.tsx, enable .quick css
disabled={true}
checked={!config.frame}
onChange={(frame) => {
window.native.set("frame", !frame);
setHintRelaunch(true);
setConfig({
...config,
frame: !frame,
});
}}
description="Show mute/deafen buttons on the titlebar.">
Enable quick action buttons
</Checkbox>
<h3>Advanced</h3>
<Checkbox
checked={config.hardwareAcceleration}
onChange={async (hardwareAcceleration) => {
window.native.set(
"hardwareAcceleration",
hardwareAcceleration,
);
setHintRelaunch(true);
setConfig({
...config,
hardwareAcceleration,
});
}}
description="Uses your GPU to render the app, disable if you run into visual issues.">
Hardware Acceleration
</Checkbox>
<p style={{ display: "flex", gap: "8px" }}>
<Button
contrast
compact
disabled={!hintReload}
onClick={window.native.reload}>
Reload Page
</Button>
<Button
contrast
compact
disabled={!hintRelaunch}
onClick={window.native.relaunch}>
Reload App
</Button>
</p>
<h3 style={{ marginTop: "4em" }}>Local Development Mode</h3>
{config.build === "dev" ? (
<>
<h5>Development mode is currently on.</h5>
<Button
contrast
compact
onClick={() => {
window.native.set("build", "stable");
window.native.reload();
}}>
Exit Development Mode
</Button>
</>
) : (
<>
<Checkbox
checked={confirmDev}
onChange={setConfirmDev}
description={
<>
This will change the app to the 'dev' branch,
instead loading the app from a local server on
your machine.
<br />
<b>
Without a server running,{" "}
<span style={{ color: "var(--error)" }}>
the app will not load!
</span>
</b>
</>
}>
I understand there's no going back.
</Checkbox>
<p>
<Button
error
compact
disabled={!confirmDev}
onClick={() => {
window.native.set("build", "dev");
window.native.reload();
}}>
Enter Development Mode
</Button>
</p>
</>
)}
</div>
);
}
src/pages/settings/panes/Notifications.tsx
View file @ 1ac5de17
......@@ -9,9 +9,9 @@ import { urlBase64ToUint8Array } from "../../../lib/conversion";
import { dispatch } from "../../../redux";
import { connectState } from "../../../redux/connector";
import {
DEFAULT_SOUNDS,
NotificationOptions,
SoundOptions,
DEFAULT_SOUNDS,
NotificationOptions,
SoundOptions,
} from "../../../redux/reducers/settings";
import { useIntermediate } from "../../../context/intermediate/Intermediate";
......@@ -22,133 +22,135 @@ import Checkbox from "../../../components/ui/Checkbox";
import { SOUNDS_ARRAY } from "../../../assets/sounds/Audio";
interface Props {
options?: NotificationOptions;
options?: NotificationOptions;
}
export function Component({ options }: Props) {
const client = useContext(AppContext);
const { openScreen } = useIntermediate();
const [pushEnabled, setPushEnabled] = useState<undefined | boolean>(
undefined,
);
const client = useContext(AppContext);
const { openScreen } = useIntermediate();
const [pushEnabled, setPushEnabled] = useState<undefined | boolean>(
undefined,
);
// Load current state of pushManager.
useEffect(() => {
navigator.serviceWorker
?.getRegistration()
.then(async (registration) => {
const sub = await registration?.pushManager?.getSubscription();
setPushEnabled(sub !== null && sub !== undefined);
});
}, []);
// Load current state of pushManager.
useEffect(() => {
navigator.serviceWorker
?.getRegistration()
.then(async (registration) => {
const sub = await registration?.pushManager?.getSubscription();
setPushEnabled(sub !== null && sub !== undefined);
});
}, []);
const enabledSounds: SoundOptions = defaultsDeep(
options?.sounds ?? {},
DEFAULT_SOUNDS,
);
return (
<div className={styles.notifications}>
<h3>
<Text id="app.settings.pages.notifications.push_notifications" />
</h3>
<Checkbox
disabled={!("Notification" in window)}
checked={options?.desktopEnabled ?? false}
description={
<Text id="app.settings.pages.notifications.descriptions.enable_desktop" />
}
onChange={async (desktopEnabled) => {
if (desktopEnabled) {
let permission = await Notification.requestPermission();
if (permission !== "granted") {
return openScreen({
id: "error",
error: "DeniedNotification",
});
}
}
const enabledSounds: SoundOptions = defaultsDeep(
options?.sounds ?? {},
DEFAULT_SOUNDS,
);
return (
<div className={styles.notifications}>
<h3>
<Text id="app.settings.pages.notifications.push_notifications" />
</h3>
<Checkbox
disabled={!("Notification" in window)}
checked={options?.desktopEnabled ?? false}
description={
<Text id="app.settings.pages.notifications.descriptions.enable_desktop" />
}
onChange={async (desktopEnabled) => {
if (desktopEnabled) {
const permission =
await Notification.requestPermission();
if (permission !== "granted") {
return openScreen({
id: "error",
error: "DeniedNotification",
});
}
}
dispatch({
type: "SETTINGS_SET_NOTIFICATION_OPTIONS",
options: { desktopEnabled },
});
}}>
<Text id="app.settings.pages.notifications.enable_desktop" />
</Checkbox>
<Checkbox
disabled={typeof pushEnabled === "undefined"}
checked={pushEnabled ?? false}
description={
<Text id="app.settings.pages.notifications.descriptions.enable_push" />
}
onChange={async (pushEnabled) => {
try {
const reg =
await navigator.serviceWorker?.getRegistration();
if (reg) {
if (pushEnabled) {
const sub = await reg.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: urlBase64ToUint8Array(
client.configuration!.vapid,
),
});
dispatch({
type: "SETTINGS_SET_NOTIFICATION_OPTIONS",
options: { desktopEnabled },
});
}}>
<Text id="app.settings.pages.notifications.enable_desktop" />
</Checkbox>
<Checkbox
disabled={typeof pushEnabled === "undefined"}
checked={pushEnabled ?? false}
description={
<Text id="app.settings.pages.notifications.descriptions.enable_push" />
}
onChange={async (pushEnabled) => {
try {
const reg =
await navigator.serviceWorker?.getRegistration();
if (reg) {
if (pushEnabled) {
const sub = await reg.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: urlBase64ToUint8Array(
client.configuration!.vapid,
),
});
// tell the server we just subscribed
const json = sub.toJSON();
if (json.keys) {
client.req("POST", "/push/subscribe", {
endpoint: sub.endpoint,
...(json.keys as {
p256dh: string;
auth: string;
}),
});
setPushEnabled(true);
}
} else {
const sub =
await reg.pushManager.getSubscription();
sub?.unsubscribe();
setPushEnabled(false);
// tell the server we just subscribed
const json = sub.toJSON();
if (json.keys) {
client.req("POST", "/push/subscribe", {
endpoint: sub.endpoint,
...(json.keys as {
p256dh: string;
auth: string;
}),
});
setPushEnabled(true);
}
} else {
const sub =
await reg.pushManager.getSubscription();
sub?.unsubscribe();
setPushEnabled(false);
client.req("POST", "/push/unsubscribe");
}
}
} catch (err) {
console.error("Failed to enable push!", err);
}
}}>
<Text id="app.settings.pages.notifications.enable_push" />
</Checkbox>
<h3>
<Text id="app.settings.pages.notifications.sounds" />
</h3>
{SOUNDS_ARRAY.map((key) => (
<Checkbox
checked={enabledSounds[key] ? true : false}
onChange={(enabled) =>
dispatch({
type: "SETTINGS_SET_NOTIFICATION_OPTIONS",
options: {
sounds: {
...options?.sounds,
[key]: enabled,
},
},
})
}>
<Text
id={`app.settings.pages.notifications.sound.${key}`}
/>
</Checkbox>
))}
</div>
);
client.req("POST", "/push/unsubscribe");
}
}
} catch (err) {
console.error("Failed to enable push!", err);
}
}}>
<Text id="app.settings.pages.notifications.enable_push" />
</Checkbox>
<h3>
<Text id="app.settings.pages.notifications.sounds" />
</h3>
{SOUNDS_ARRAY.map((key) => (
<Checkbox
key={key}
checked={!!enabledSounds[key]}
onChange={(enabled) =>
dispatch({
type: "SETTINGS_SET_NOTIFICATION_OPTIONS",
options: {
sounds: {
...options?.sounds,
[key]: enabled,
},
},
})
}>
<Text
id={`app.settings.pages.notifications.sound.${key}`}
/>
</Checkbox>
))}
</div>
);
}
export const Notifications = connectState(Component, (state) => {
return {
options: state.settings.notification,
};
return {
options: state.settings.notification,
};
});