Extract inline styles to css (#370)
This commit is contained in:
parent
2e5d27b6b6
commit
374531d10e
11 changed files with 121 additions and 114 deletions
|
@ -16,15 +16,12 @@
|
||||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { BadgeStyle } from "@components/PluginSettings/styles";
|
|
||||||
|
|
||||||
export function Badge({ text, color }): JSX.Element {
|
export function Badge({ text, color }): JSX.Element {
|
||||||
return (
|
return (
|
||||||
<div style={{
|
<div className="vc-plugins-badge" style={{
|
||||||
backgroundColor: color,
|
backgroundColor: color,
|
||||||
justifySelf: "flex-end",
|
justifySelf: "flex-end",
|
||||||
marginLeft: "auto",
|
marginLeft: "auto"
|
||||||
...BadgeStyle
|
|
||||||
}}>{text}</div>
|
}}>{text}</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -16,16 +16,18 @@
|
||||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
import "./styles.css";
|
||||||
|
|
||||||
import * as DataStore from "@api/DataStore";
|
import * as DataStore from "@api/DataStore";
|
||||||
import { showNotice } from "@api/Notices";
|
import { showNotice } from "@api/Notices";
|
||||||
import { Settings, useSettings } from "@api/settings";
|
import { Settings, useSettings } from "@api/settings";
|
||||||
|
import { classNameFactory } from "@api/Styles";
|
||||||
import ErrorBoundary from "@components/ErrorBoundary";
|
import ErrorBoundary from "@components/ErrorBoundary";
|
||||||
import { ErrorCard } from "@components/ErrorCard";
|
import { ErrorCard } from "@components/ErrorCard";
|
||||||
import { Flex } from "@components/Flex";
|
import { Flex } from "@components/Flex";
|
||||||
import { handleComponentFailed } from "@components/handleComponentFailed";
|
import { handleComponentFailed } from "@components/handleComponentFailed";
|
||||||
import { Badge } from "@components/PluginSettings/components";
|
import { Badge } from "@components/PluginSettings/components";
|
||||||
import PluginModal from "@components/PluginSettings/PluginModal";
|
import PluginModal from "@components/PluginSettings/PluginModal";
|
||||||
import * as styles from "@components/PluginSettings/styles";
|
|
||||||
import { ChangeList } from "@utils/ChangeList";
|
import { ChangeList } from "@utils/ChangeList";
|
||||||
import Logger from "@utils/Logger";
|
import Logger from "@utils/Logger";
|
||||||
import { classes, LazyComponent, useAwaiter } from "@utils/misc";
|
import { classes, LazyComponent, useAwaiter } from "@utils/misc";
|
||||||
|
@ -36,6 +38,8 @@ import { Alerts, Button, Forms, Margins, Parser, React, Select, Switch, Text, Te
|
||||||
|
|
||||||
import Plugins from "~plugins";
|
import Plugins from "~plugins";
|
||||||
|
|
||||||
|
const cl = classNameFactory("vc-plugins-");
|
||||||
|
|
||||||
import { startDependenciesRecursive, startPlugin, stopPlugin } from "../../plugins";
|
import { startDependenciesRecursive, startPlugin, stopPlugin } from "../../plugins";
|
||||||
|
|
||||||
const logger = new Logger("PluginSettings", "#a6d189");
|
const logger = new Logger("PluginSettings", "#a6d189");
|
||||||
|
@ -145,7 +149,7 @@ function PluginCard({ plugin, disabled, onRestartNeeded, onMouseEnter, onMouseLe
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Flex style={styles.PluginsGridItem} flexDirection="column" onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
|
<Flex className={cl("card")} flexDirection="column" onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
|
||||||
<Switch
|
<Switch
|
||||||
onChange={toggleEnabled}
|
onChange={toggleEnabled}
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
|
@ -174,7 +178,7 @@ function PluginCard({ plugin, disabled, onRestartNeeded, onMouseEnter, onMouseLe
|
||||||
>
|
>
|
||||||
{plugin.name}{(isNew) && <Badge text="NEW" color="#ED4245" />}
|
{plugin.name}{(isNew) && <Badge text="NEW" color="#ED4245" />}
|
||||||
</Text>
|
</Text>
|
||||||
<button role="switch" onClick={() => openModal()} style={styles.SettingsIcon} className="button-12Fmur">
|
<button role="switch" onClick={() => openModal()} className={classes("button-12Fmur", cl("info-button"))}>
|
||||||
{plugin.options
|
{plugin.options
|
||||||
? <CogWheel
|
? <CogWheel
|
||||||
style={{ color: iconHover ? "" : "var(--text-muted)" }}
|
style={{ color: iconHover ? "" : "var(--text-muted)" }}
|
||||||
|
@ -278,8 +282,8 @@ export default ErrorBoundary.wrap(function Settings() {
|
||||||
|
|
||||||
<ReloadRequiredCard plugins={[...changes.getChanges()]} style={{ marginBottom: 16 }} />
|
<ReloadRequiredCard plugins={[...changes.getChanges()]} style={{ marginBottom: 16 }} />
|
||||||
|
|
||||||
<div style={styles.FiltersBar}>
|
<div className={cl("filter-controls")}>
|
||||||
<TextInput value={searchValue.value} placeholder={"Search for a plugin..."} onChange={onSearch} style={{ marginBottom: 24 }} />
|
<TextInput value={searchValue.value} placeholder="Search for a plugin..." onChange={onSearch} style={{ marginBottom: 24 }} />
|
||||||
<div className={InputStyles.inputWrapper}>
|
<div className={InputStyles.inputWrapper}>
|
||||||
<Select
|
<Select
|
||||||
className={InputStyles.inputDefault}
|
className={InputStyles.inputDefault}
|
||||||
|
@ -298,7 +302,7 @@ export default ErrorBoundary.wrap(function Settings() {
|
||||||
|
|
||||||
<Forms.FormTitle className={Margins.marginTop20}>Plugins</Forms.FormTitle>
|
<Forms.FormTitle className={Margins.marginTop20}>Plugins</Forms.FormTitle>
|
||||||
|
|
||||||
<div style={styles.PluginsGrid}>
|
<div className={cl("grid")}>
|
||||||
{sortedPlugins?.length ? sortedPlugins
|
{sortedPlugins?.length ? sortedPlugins
|
||||||
.filter(a => !a.required && !dependencyCheck(a.name, depMap).length && pluginFilter(a))
|
.filter(a => !a.required && !dependencyCheck(a.name, depMap).length && pluginFilter(a))
|
||||||
.map(plugin => {
|
.map(plugin => {
|
||||||
|
@ -319,7 +323,7 @@ export default ErrorBoundary.wrap(function Settings() {
|
||||||
<Forms.FormTitle tag="h5" className={classes(Margins.marginTop20, Margins.marginBottom8)}>
|
<Forms.FormTitle tag="h5" className={classes(Margins.marginTop20, Margins.marginBottom8)}>
|
||||||
Required Plugins
|
Required Plugins
|
||||||
</Forms.FormTitle>
|
</Forms.FormTitle>
|
||||||
<div style={styles.PluginsGrid}>
|
<div className={cl("grid")}>
|
||||||
{sortedPlugins?.length ? sortedPlugins
|
{sortedPlugins?.length ? sortedPlugins
|
||||||
.filter(a => a.required || dependencyCheck(a.name, depMap).length && pluginFilter(a))
|
.filter(a => a.required || dependencyCheck(a.name, depMap).length && pluginFilter(a))
|
||||||
.map(plugin => {
|
.map(plugin => {
|
||||||
|
|
61
src/components/PluginSettings/styles.css
Normal file
61
src/components/PluginSettings/styles.css
Normal file
|
@ -0,0 +1,61 @@
|
||||||
|
/*
|
||||||
|
* Vencord, a modification for Discord's desktop app
|
||||||
|
* Copyright (c) 2022 Vendicated and contributors
|
||||||
|
*
|
||||||
|
* This program is free software: you can redistribute it and/or modify
|
||||||
|
* it under the terms of the GNU General Public License as published by
|
||||||
|
* the Free Software Foundation, either version 3 of the License, or
|
||||||
|
* (at your option) any later version.
|
||||||
|
*
|
||||||
|
* This program is distributed in the hope that it will be useful,
|
||||||
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
* GNU General Public License for more details.
|
||||||
|
*
|
||||||
|
* You should have received a copy of the GNU General Public License
|
||||||
|
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
.vc-plugins-grid {
|
||||||
|
margin-top: 16px;
|
||||||
|
display: grid;
|
||||||
|
grid-gap: 16px;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||||
|
}
|
||||||
|
|
||||||
|
.vc-plugins-card {
|
||||||
|
background-color: var(--background-modifier-selected);
|
||||||
|
color: var(--interactive-active);
|
||||||
|
border-radius: 3px;
|
||||||
|
cursor: pointer;
|
||||||
|
display: block;
|
||||||
|
height: 100%;
|
||||||
|
padding: 10px;
|
||||||
|
width: 100%
|
||||||
|
}
|
||||||
|
|
||||||
|
.vc-plugins-card .vc-plugins-info-button {
|
||||||
|
height: 24px;
|
||||||
|
width: 24px;
|
||||||
|
padding: 0;
|
||||||
|
background: transparent;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vc-plugins-filter-controls {
|
||||||
|
display: grid;
|
||||||
|
height: 40px;
|
||||||
|
gap: 10px;
|
||||||
|
grid-template-columns: 1fr 150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vc-plugins-badge {
|
||||||
|
padding: 0 6px;
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-weight: 500;
|
||||||
|
border-radius: 8px;
|
||||||
|
height: 16px;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 16px;
|
||||||
|
color: var(--white-500);
|
||||||
|
}
|
|
@ -1,61 +0,0 @@
|
||||||
/*
|
|
||||||
* Vencord, a modification for Discord's desktop app
|
|
||||||
* Copyright (c) 2022 Vendicated and contributors
|
|
||||||
*
|
|
||||||
* This program is free software: you can redistribute it and/or modify
|
|
||||||
* it under the terms of the GNU General Public License as published by
|
|
||||||
* the Free Software Foundation, either version 3 of the License, or
|
|
||||||
* (at your option) any later version.
|
|
||||||
*
|
|
||||||
* This program is distributed in the hope that it will be useful,
|
|
||||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
||||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
||||||
* GNU General Public License for more details.
|
|
||||||
*
|
|
||||||
* You should have received a copy of the GNU General Public License
|
|
||||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
|
||||||
*/
|
|
||||||
|
|
||||||
export const PluginsGrid: React.CSSProperties = {
|
|
||||||
marginTop: 16,
|
|
||||||
display: "grid",
|
|
||||||
gridGap: 16,
|
|
||||||
gridTemplateColumns: "repeat(auto-fill, minmax(250px, 1fr))",
|
|
||||||
};
|
|
||||||
|
|
||||||
export const PluginsGridItem: React.CSSProperties = {
|
|
||||||
backgroundColor: "var(--background-modifier-selected)",
|
|
||||||
color: "var(--interactive-active)",
|
|
||||||
borderRadius: 3,
|
|
||||||
cursor: "pointer",
|
|
||||||
display: "block",
|
|
||||||
height: "100%",
|
|
||||||
padding: 10,
|
|
||||||
width: "100%",
|
|
||||||
};
|
|
||||||
|
|
||||||
export const FiltersBar: React.CSSProperties = {
|
|
||||||
gap: 10,
|
|
||||||
height: 40,
|
|
||||||
gridTemplateColumns: "1fr 150px",
|
|
||||||
display: "grid"
|
|
||||||
};
|
|
||||||
|
|
||||||
export const SettingsIcon: React.CSSProperties = {
|
|
||||||
height: "24px",
|
|
||||||
width: "24px",
|
|
||||||
padding: "0",
|
|
||||||
background: "transparent",
|
|
||||||
marginRight: 8
|
|
||||||
};
|
|
||||||
|
|
||||||
export const BadgeStyle: React.CSSProperties = {
|
|
||||||
padding: "0 6px",
|
|
||||||
fontFamily: "var(--font-display)",
|
|
||||||
fontWeight: "500",
|
|
||||||
borderRadius: "8px",
|
|
||||||
height: "16px",
|
|
||||||
fontSize: "12px",
|
|
||||||
lineHeight: "16px",
|
|
||||||
color: "var(--white-500)",
|
|
||||||
};
|
|
|
@ -18,19 +18,14 @@
|
||||||
|
|
||||||
import ErrorBoundary from "@components/ErrorBoundary";
|
import ErrorBoundary from "@components/ErrorBoundary";
|
||||||
import { Flex } from "@components/Flex";
|
import { Flex } from "@components/Flex";
|
||||||
|
import { classes } from "@utils/misc";
|
||||||
import { downloadSettingsBackup, uploadSettingsBackup } from "@utils/settingsSync";
|
import { downloadSettingsBackup, uploadSettingsBackup } from "@utils/settingsSync";
|
||||||
import { Button, Card, Forms, Margins, Text } from "@webpack/common";
|
import { Button, Card, Forms, Margins, Text } from "@webpack/common";
|
||||||
|
|
||||||
function BackupRestoreTab() {
|
function BackupRestoreTab() {
|
||||||
return (
|
return (
|
||||||
<Forms.FormSection title="Settings Sync">
|
<Forms.FormSection title="Settings Sync">
|
||||||
<Card style={{
|
<Card className={classes("vc-settings-card", "vc-backup-restore-card")}>
|
||||||
backgroundColor: "var(--info-warning-background)",
|
|
||||||
borderColor: "var(--info-warning-foreground)",
|
|
||||||
color: "var(--info-warning-text)",
|
|
||||||
padding: "1em",
|
|
||||||
marginBottom: "0.5em",
|
|
||||||
}}>
|
|
||||||
<Flex flexDirection="column">
|
<Flex flexDirection="column">
|
||||||
<strong>Warning</strong>
|
<strong>Warning</strong>
|
||||||
<span>Importing a settings file will overwrite your current settings.</span>
|
<span>Importing a settings file will overwrite your current settings.</span>
|
||||||
|
|
|
@ -89,11 +89,7 @@ export default ErrorBoundary.wrap(function () {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Card style={{
|
<Card className="vc-settings-card">
|
||||||
padding: "1em",
|
|
||||||
marginBottom: "1em",
|
|
||||||
marginTop: "1em"
|
|
||||||
}}>
|
|
||||||
<Forms.FormTitle tag="h5">Paste links to .css / .theme.css files here</Forms.FormTitle>
|
<Forms.FormTitle tag="h5">Paste links to .css / .theme.css files here</Forms.FormTitle>
|
||||||
<Forms.FormText>One link per line</Forms.FormText>
|
<Forms.FormText>One link per line</Forms.FormText>
|
||||||
<Forms.FormText>Make sure to use the raw links or github.io links!</Forms.FormText>
|
<Forms.FormText>Make sure to use the raw links or github.io links!</Forms.FormText>
|
||||||
|
|
|
@ -69,14 +69,18 @@ interface CommonProps {
|
||||||
repoPending: boolean;
|
repoPending: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function HashLink({ repo, hash, disabled = false }: { repo: string, hash: string, disabled?: boolean; }) {
|
||||||
|
return <Link href={`${repo}/commit/${hash}`} disabled={disabled}>
|
||||||
|
{hash}
|
||||||
|
</Link>;
|
||||||
|
}
|
||||||
|
|
||||||
function Changes({ updates, repo, repoPending }: CommonProps & { updates: typeof changes; }) {
|
function Changes({ updates, repo, repoPending }: CommonProps & { updates: typeof changes; }) {
|
||||||
return (
|
return (
|
||||||
<Card style={{ padding: ".5em" }}>
|
<Card style={{ padding: ".5em" }}>
|
||||||
{updates.map(({ hash, author, message }) => (
|
{updates.map(({ hash, author, message }) => (
|
||||||
<div>
|
<div>
|
||||||
<Link href={`${repo}/commit/${hash}`} disabled={repoPending}>
|
<code><HashLink {...{ repo, hash }} disabled={repoPending} /></code>
|
||||||
<code>{hash}</code>
|
|
||||||
</Link>
|
|
||||||
<span style={{
|
<span style={{
|
||||||
marginLeft: "0.5em",
|
marginLeft: "0.5em",
|
||||||
color: "var(--text-normal)"
|
color: "var(--text-normal)"
|
||||||
|
@ -199,7 +203,7 @@ function Updater() {
|
||||||
<Link href={repo}>
|
<Link href={repo}>
|
||||||
{repo.split("/").slice(-2).join("/")}
|
{repo.split("/").slice(-2).join("/")}
|
||||||
</Link>
|
</Link>
|
||||||
)} ({gitHash})</Forms.FormText>
|
)} (<HashLink hash={gitHash} repo={repo} disabled={repoPending} />)</Forms.FormText>
|
||||||
|
|
||||||
<Forms.FormDivider />
|
<Forms.FormDivider />
|
||||||
|
|
||||||
|
|
|
@ -18,13 +18,17 @@
|
||||||
|
|
||||||
|
|
||||||
import { useSettings } from "@api/settings";
|
import { useSettings } from "@api/settings";
|
||||||
|
import { classNameFactory } from "@api/Styles";
|
||||||
import DonateButton from "@components/DonateButton";
|
import DonateButton from "@components/DonateButton";
|
||||||
import ErrorBoundary from "@components/ErrorBoundary";
|
import ErrorBoundary from "@components/ErrorBoundary";
|
||||||
import IpcEvents from "@utils/IpcEvents";
|
import IpcEvents from "@utils/IpcEvents";
|
||||||
import { useAwaiter } from "@utils/misc";
|
import { useAwaiter } from "@utils/misc";
|
||||||
import { Button, Card, Forms, Margins, React, Switch } from "@webpack/common";
|
import { Button, Card, Forms, Margins, React, Switch } from "@webpack/common";
|
||||||
|
|
||||||
const st = (style: string) => `vcSettings${style}`;
|
const cl = classNameFactory("vc-settings-");
|
||||||
|
|
||||||
|
const DEFAULT_DONATE_IMAGE = "https://cdn.discordapp.com/emojis/1026533090627174460.png";
|
||||||
|
const SHIGGY_DONATE_IMAGE = "https://media.discordapp.net/stickers/1039992459209490513.png";
|
||||||
|
|
||||||
function VencordSettings() {
|
function VencordSettings() {
|
||||||
const [settingsDir, , settingsDirPending] = useAwaiter(() => VencordNative.ipc.invoke<string>(IpcEvents.GET_SETTINGS_DIR), {
|
const [settingsDir, , settingsDirPending] = useAwaiter(() => VencordNative.ipc.invoke<string>(IpcEvents.GET_SETTINGS_DIR), {
|
||||||
|
@ -32,17 +36,13 @@ function VencordSettings() {
|
||||||
});
|
});
|
||||||
const settings = useSettings();
|
const settings = useSettings();
|
||||||
|
|
||||||
const [donateImage] = React.useState(
|
const donateImage = React.useMemo(() => Math.random() > 0.5 ? DEFAULT_DONATE_IMAGE : SHIGGY_DONATE_IMAGE, []);
|
||||||
Math.random() > 0.5
|
|
||||||
? "https://cdn.discordapp.com/emojis/1026533090627174460.png"
|
|
||||||
: "https://media.discordapp.net/stickers/1039992459209490513.png"
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<React.Fragment>
|
<React.Fragment>
|
||||||
<DonateCard image={donateImage} />
|
<DonateCard image={donateImage} />
|
||||||
<Forms.FormSection title="Quick Actions">
|
<Forms.FormSection title="Quick Actions">
|
||||||
<Card className={st("QuickActionCard")}>
|
<Card className={cl("quick-actions-card")}>
|
||||||
{IS_WEB ? (
|
{IS_WEB ? (
|
||||||
<Button
|
<Button
|
||||||
onClick={() => require("../Monaco").launchMonacoEditor()}
|
onClick={() => require("../Monaco").launchMonacoEditor()}
|
||||||
|
@ -121,18 +121,10 @@ interface DonateCardProps {
|
||||||
|
|
||||||
function DonateCard({ image }: DonateCardProps) {
|
function DonateCard({ image }: DonateCardProps) {
|
||||||
return (
|
return (
|
||||||
<Card style={{
|
<Card className={cl("card", "donate")}>
|
||||||
padding: "1em",
|
|
||||||
display: "flex",
|
|
||||||
flexDirection: "row",
|
|
||||||
marginBottom: "1em",
|
|
||||||
marginTop: "1em"
|
|
||||||
}}>
|
|
||||||
<div>
|
<div>
|
||||||
<Forms.FormTitle tag="h5">Support the Project</Forms.FormTitle>
|
<Forms.FormTitle tag="h5">Support the Project</Forms.FormTitle>
|
||||||
<Forms.FormText>
|
<Forms.FormText>Please consider supporting the development of Vencord by donating!</Forms.FormText>
|
||||||
Please consider supporting the development of Vencord by donating!
|
|
||||||
</Forms.FormText>
|
|
||||||
<DonateButton style={{ transform: "translateX(-1em)" }} />
|
<DonateButton style={{ transform: "translateX(-1em)" }} />
|
||||||
</div>
|
</div>
|
||||||
<img
|
<img
|
||||||
|
@ -140,7 +132,7 @@ function DonateCard({ image }: DonateCardProps) {
|
||||||
src={image}
|
src={image}
|
||||||
alt=""
|
alt=""
|
||||||
height={128}
|
height={128}
|
||||||
style={{ marginLeft: "auto", transform: "rotate(10deg)" }}
|
style={{ marginLeft: "auto", transform: image === DEFAULT_DONATE_IMAGE ? "rotate(10deg)" : "" }}
|
||||||
/>
|
/>
|
||||||
</Card>
|
</Card>
|
||||||
);
|
);
|
||||||
|
|
|
@ -18,6 +18,7 @@
|
||||||
|
|
||||||
import "./settingsStyles.css";
|
import "./settingsStyles.css";
|
||||||
|
|
||||||
|
import { classNameFactory } from "@api/Styles";
|
||||||
import ErrorBoundary from "@components/ErrorBoundary";
|
import ErrorBoundary from "@components/ErrorBoundary";
|
||||||
import { findByCodeLazy } from "@webpack";
|
import { findByCodeLazy } from "@webpack";
|
||||||
import { Forms, Router, Text } from "@webpack/common";
|
import { Forms, Router, Text } from "@webpack/common";
|
||||||
|
@ -28,7 +29,7 @@ import ThemesTab from "./ThemesTab";
|
||||||
import Updater from "./Updater";
|
import Updater from "./Updater";
|
||||||
import VencordSettings from "./VencordTab";
|
import VencordSettings from "./VencordTab";
|
||||||
|
|
||||||
const st = (style: string) => `vcSettings${style}`;
|
const cl = classNameFactory("vc-settings-");
|
||||||
|
|
||||||
const TabBar = findByCodeLazy('[role="tab"][aria-disabled="false"]');
|
const TabBar = findByCodeLazy('[role="tab"][aria-disabled="false"]');
|
||||||
|
|
||||||
|
@ -62,7 +63,7 @@ function Settings(props: SettingsProps) {
|
||||||
<TabBar
|
<TabBar
|
||||||
type={TabBar.Types.TOP}
|
type={TabBar.Types.TOP}
|
||||||
look={TabBar.Looks.BRAND}
|
look={TabBar.Looks.BRAND}
|
||||||
className={st("TabBar")}
|
className={cl("tab-bar")}
|
||||||
selectedItem={tab}
|
selectedItem={tab}
|
||||||
onItemSelect={Router.open}
|
onItemSelect={Router.open}
|
||||||
>
|
>
|
||||||
|
@ -70,7 +71,7 @@ function Settings(props: SettingsProps) {
|
||||||
if (!component) return null;
|
if (!component) return null;
|
||||||
return <TabBar.Item
|
return <TabBar.Item
|
||||||
id={key}
|
id={key}
|
||||||
className={st("TabBarItem")}
|
className={cl("tab-bar-item")}
|
||||||
key={key}>
|
key={key}>
|
||||||
{name}
|
{name}
|
||||||
</TabBar.Item>;
|
</TabBar.Item>;
|
||||||
|
|
|
@ -1,16 +1,16 @@
|
||||||
.vcSettingsTabBar {
|
.vc-settings-tab-bar {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
margin-bottom: -2px;
|
margin-bottom: -2px;
|
||||||
border-bottom: 2px solid var(--background-modifier-accent);
|
border-bottom: 2px solid var(--background-modifier-accent);
|
||||||
}
|
}
|
||||||
|
|
||||||
.vcSettingsTabBarItem {
|
.vc-settings-tab-bar-item {
|
||||||
margin-right: 32px;
|
margin-right: 32px;
|
||||||
padding-bottom: 16px;
|
padding-bottom: 16px;
|
||||||
margin-bottom: -2px;
|
margin-bottom: -2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.vcSettingsQuickActionCard {
|
.vc-settings-quick-actions-card {
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 1em;
|
gap: 1em;
|
||||||
|
@ -21,3 +21,21 @@
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
margin-bottom: 1em;
|
margin-bottom: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.vc-settings-donate {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vc-settings-card {
|
||||||
|
padding: 1em;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
margin-top: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vc-backup-restore-card {
|
||||||
|
background-color: var(--info-warning-background);
|
||||||
|
border-color: var(--info-warning-foreground);
|
||||||
|
color: var(--info-warning-text);
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
|
@ -142,7 +142,7 @@ export function humanFriendlyJoin(elements: any[], mapper: (e: any) => string =
|
||||||
* classes("one", "two") => "one two"
|
* classes("one", "two") => "one two"
|
||||||
*/
|
*/
|
||||||
export function classes(...classes: string[]) {
|
export function classes(...classes: string[]) {
|
||||||
return classes.join(" ");
|
return classes.filter(c => typeof c === "string").join(" ");
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
Loading…
Reference in a new issue