aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/components/PluginSettings/components/BadgeComponent.tsx7
-rw-r--r--src/components/PluginSettings/index.tsx18
-rw-r--r--src/components/PluginSettings/styles.css61
-rw-r--r--src/components/PluginSettings/styles.ts61
-rw-r--r--src/components/VencordSettings/BackupRestoreTab.tsx9
-rw-r--r--src/components/VencordSettings/ThemesTab.tsx6
-rw-r--r--src/components/VencordSettings/Updater.tsx12
-rw-r--r--src/components/VencordSettings/VencordTab.tsx28
-rw-r--r--src/components/VencordSettings/index.tsx7
-rw-r--r--src/components/VencordSettings/settingsStyles.css24
-rw-r--r--src/utils/misc.tsx2
11 files changed, 121 insertions, 114 deletions
diff --git a/src/components/PluginSettings/components/BadgeComponent.tsx b/src/components/PluginSettings/components/BadgeComponent.tsx
index 059376f..6acf42a 100644
--- a/src/components/PluginSettings/components/BadgeComponent.tsx
+++ b/src/components/PluginSettings/components/BadgeComponent.tsx
@@ -16,15 +16,12 @@
* 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 {
return (
- <div style={{
+ <div className="vc-plugins-badge" style={{
backgroundColor: color,
justifySelf: "flex-end",
- marginLeft: "auto",
- ...BadgeStyle
+ marginLeft: "auto"
}}>{text}</div>
);
}
diff --git a/src/components/PluginSettings/index.tsx b/src/components/PluginSettings/index.tsx
index 9818914..27618d4 100644
--- a/src/components/PluginSettings/index.tsx
+++ b/src/components/PluginSettings/index.tsx
@@ -16,16 +16,18 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
+import "./styles.css";
+
import * as DataStore from "@api/DataStore";
import { showNotice } from "@api/Notices";
import { Settings, useSettings } from "@api/settings";
+import { classNameFactory } from "@api/Styles";
import ErrorBoundary from "@components/ErrorBoundary";
import { ErrorCard } from "@components/ErrorCard";
import { Flex } from "@components/Flex";
import { handleComponentFailed } from "@components/handleComponentFailed";
import { Badge } from "@components/PluginSettings/components";
import PluginModal from "@components/PluginSettings/PluginModal";
-import * as styles from "@components/PluginSettings/styles";
import { ChangeList } from "@utils/ChangeList";
import Logger from "@utils/Logger";
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";
+const cl = classNameFactory("vc-plugins-");
+
import { startDependenciesRecursive, startPlugin, stopPlugin } from "../../plugins";
const logger = new Logger("PluginSettings", "#a6d189");
@@ -145,7 +149,7 @@ function PluginCard({ plugin, disabled, onRestartNeeded, onMouseEnter, onMouseLe
}
return (
- <Flex style={styles.PluginsGridItem} flexDirection="column" onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
+ <Flex className={cl("card")} flexDirection="column" onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
<Switch
onChange={toggleEnabled}
disabled={disabled}
@@ -174,7 +178,7 @@ function PluginCard({ plugin, disabled, onRestartNeeded, onMouseEnter, onMouseLe
>
{plugin.name}{(isNew) && <Badge text="NEW" color="#ED4245" />}
</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
? <CogWheel
style={{ color: iconHover ? "" : "var(--text-muted)" }}
@@ -278,8 +282,8 @@ export default ErrorBoundary.wrap(function Settings() {
<ReloadRequiredCard plugins={[...changes.getChanges()]} style={{ marginBottom: 16 }} />
- <div style={styles.FiltersBar}>
- <TextInput value={searchValue.value} placeholder={"Search for a plugin..."} onChange={onSearch} style={{ marginBottom: 24 }} />
+ <div className={cl("filter-controls")}>
+ <TextInput value={searchValue.value} placeholder="Search for a plugin..." onChange={onSearch} style={{ marginBottom: 24 }} />
<div className={InputStyles.inputWrapper}>
<Select
className={InputStyles.inputDefault}
@@ -298,7 +302,7 @@ export default ErrorBoundary.wrap(function Settings() {
<Forms.FormTitle className={Margins.marginTop20}>Plugins</Forms.FormTitle>
- <div style={styles.PluginsGrid}>
+ <div className={cl("grid")}>
{sortedPlugins?.length ? sortedPlugins
.filter(a => !a.required && !dependencyCheck(a.name, depMap).length && pluginFilter(a))
.map(plugin => {
@@ -319,7 +323,7 @@ export default ErrorBoundary.wrap(function Settings() {
<Forms.FormTitle tag="h5" className={classes(Margins.marginTop20, Margins.marginBottom8)}>
Required Plugins
</Forms.FormTitle>
- <div style={styles.PluginsGrid}>
+ <div className={cl("grid")}>
{sortedPlugins?.length ? sortedPlugins
.filter(a => a.required || dependencyCheck(a.name, depMap).length && pluginFilter(a))
.map(plugin => {
diff --git a/src/components/PluginSettings/styles.css b/src/components/PluginSettings/styles.css
new file mode 100644
index 0000000..f9856ee
--- /dev/null
+++ b/src/components/PluginSettings/styles.css
@@ -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);
+}
diff --git a/src/components/PluginSettings/styles.ts b/src/components/PluginSettings/styles.ts
deleted file mode 100644
index 5621b76..0000000
--- a/src/components/PluginSettings/styles.ts
+++ /dev/null
@@ -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)",
-};
diff --git a/src/components/VencordSettings/BackupRestoreTab.tsx b/src/components/VencordSettings/BackupRestoreTab.tsx
index f0730b3..c7dc7d2 100644
--- a/src/components/VencordSettings/BackupRestoreTab.tsx
+++ b/src/components/VencordSettings/BackupRestoreTab.tsx
@@ -18,19 +18,14 @@
import ErrorBoundary from "@components/ErrorBoundary";
import { Flex } from "@components/Flex";
+import { classes } from "@utils/misc";
import { downloadSettingsBackup, uploadSettingsBackup } from "@utils/settingsSync";
import { Button, Card, Forms, Margins, Text } from "@webpack/common";
function BackupRestoreTab() {
return (
<Forms.FormSection title="Settings Sync">
- <Card style={{
- backgroundColor: "var(--info-warning-background)",
- borderColor: "var(--info-warning-foreground)",
- color: "var(--info-warning-text)",
- padding: "1em",
- marginBottom: "0.5em",
- }}>
+ <Card className={classes("vc-settings-card", "vc-backup-restore-card")}>
<Flex flexDirection="column">
<strong>Warning</strong>
<span>Importing a settings file will overwrite your current settings.</span>
diff --git a/src/components/VencordSettings/ThemesTab.tsx b/src/components/VencordSettings/ThemesTab.tsx
index b673c4b..738715f 100644
--- a/src/components/VencordSettings/ThemesTab.tsx
+++ b/src/components/VencordSettings/ThemesTab.tsx
@@ -89,11 +89,7 @@ export default ErrorBoundary.wrap(function () {
return (
<>
- <Card style={{
- padding: "1em",
- marginBottom: "1em",
- marginTop: "1em"
- }}>
+ <Card className="vc-settings-card">
<Forms.FormTitle tag="h5">Paste links to .css / .theme.css files here</Forms.FormTitle>
<Forms.FormText>One link per line</Forms.FormText>
<Forms.FormText>Make sure to use the raw links or github.io links!</Forms.FormText>
diff --git a/src/components/VencordSettings/Updater.tsx b/src/components/VencordSettings/Updater.tsx
index 3369069..dea8766 100644
--- a/src/components/VencordSettings/Updater.tsx
+++ b/src/components/VencordSettings/Updater.tsx
@@ -69,14 +69,18 @@ interface CommonProps {
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; }) {
return (
<Card style={{ padding: ".5em" }}>
{updates.map(({ hash, author, message }) => (
<div>
- <Link href={`${repo}/commit/${hash}`} disabled={repoPending}>
- <code>{hash}</code>
- </Link>
+ <code><HashLink {...{ repo, hash }} disabled={repoPending} /></code>
<span style={{
marginLeft: "0.5em",
color: "var(--text-normal)"
@@ -199,7 +203,7 @@ function Updater() {
<Link href={repo}>
{repo.split("/").slice(-2).join("/")}
</Link>
- )} ({gitHash})</Forms.FormText>
+ )} (<HashLink hash={gitHash} repo={repo} disabled={repoPending} />)</Forms.FormText>
<Forms.FormDivider />
diff --git a/src/components/VencordSettings/VencordTab.tsx b/src/components/VencordSettings/VencordTab.tsx
index df25e2d..e59c449 100644
--- a/src/components/VencordSettings/VencordTab.tsx
+++ b/src/components/VencordSettings/VencordTab.tsx
@@ -18,13 +18,17 @@
import { useSettings } from "@api/settings";
+import { classNameFactory } from "@api/Styles";
import DonateButton from "@components/DonateButton";
import ErrorBoundary from "@components/ErrorBoundary";
import IpcEvents from "@utils/IpcEvents";
import { useAwaiter } from "@utils/misc";
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() {
const [settingsDir, , settingsDirPending] = useAwaiter(() => VencordNative.ipc.invoke<string>(IpcEvents.GET_SETTINGS_DIR), {
@@ -32,17 +36,13 @@ function VencordSettings() {
});
const settings = useSettings();
- const [donateImage] = React.useState(
- Math.random() > 0.5
- ? "https://cdn.discordapp.com/emojis/1026533090627174460.png"
- : "https://media.discordapp.net/stickers/1039992459209490513.png"
- );
+ const donateImage = React.useMemo(() => Math.random() > 0.5 ? DEFAULT_DONATE_IMAGE : SHIGGY_DONATE_IMAGE, []);
return (
<React.Fragment>
<DonateCard image={donateImage} />
<Forms.FormSection title="Quick Actions">
- <Card className={st("QuickActionCard")}>
+ <Card className={cl("quick-actions-card")}>
{IS_WEB ? (
<Button
onClick={() => require("../Monaco").launchMonacoEditor()}
@@ -121,18 +121,10 @@ interface DonateCardProps {
function DonateCard({ image }: DonateCardProps) {
return (
- <Card style={{
- padding: "1em",
- display: "flex",
- flexDirection: "row",
- marginBottom: "1em",
- marginTop: "1em"
- }}>
+ <Card className={cl("card", "donate")}>
<div>
<Forms.FormTitle tag="h5">Support the Project</Forms.FormTitle>
- <Forms.FormText>
- Please consider supporting the development of Vencord by donating!
- </Forms.FormText>
+ <Forms.FormText>Please consider supporting the development of Vencord by donating!</Forms.FormText>
<DonateButton style={{ transform: "translateX(-1em)" }} />
</div>
<img
@@ -140,7 +132,7 @@ function DonateCard({ image }: DonateCardProps) {
src={image}
alt=""
height={128}
- style={{ marginLeft: "auto", transform: "rotate(10deg)" }}
+ style={{ marginLeft: "auto", transform: image === DEFAULT_DONATE_IMAGE ? "rotate(10deg)" : "" }}
/>
</Card>
);
diff --git a/src/components/VencordSettings/index.tsx b/src/components/VencordSettings/index.tsx
index b3a3322..2ab9407 100644
--- a/src/components/VencordSettings/index.tsx
+++ b/src/components/VencordSettings/index.tsx
@@ -18,6 +18,7 @@
import "./settingsStyles.css";
+import { classNameFactory } from "@api/Styles";
import ErrorBoundary from "@components/ErrorBoundary";
import { findByCodeLazy } from "@webpack";
import { Forms, Router, Text } from "@webpack/common";
@@ -28,7 +29,7 @@ import ThemesTab from "./ThemesTab";
import Updater from "./Updater";
import VencordSettings from "./VencordTab";
-const st = (style: string) => `vcSettings${style}`;
+const cl = classNameFactory("vc-settings-");
const TabBar = findByCodeLazy('[role="tab"][aria-disabled="false"]');
@@ -62,7 +63,7 @@ function Settings(props: SettingsProps) {
<TabBar
type={TabBar.Types.TOP}
look={TabBar.Looks.BRAND}
- className={st("TabBar")}
+ className={cl("tab-bar")}
selectedItem={tab}
onItemSelect={Router.open}
>
@@ -70,7 +71,7 @@ function Settings(props: SettingsProps) {
if (!component) return null;
return <TabBar.Item
id={key}
- className={st("TabBarItem")}
+ className={cl("tab-bar-item")}
key={key}>
{name}
</TabBar.Item>;
diff --git a/src/components/VencordSettings/settingsStyles.css b/src/components/VencordSettings/settingsStyles.css
index e90ef14..4b1e16b 100644
--- a/src/components/VencordSettings/settingsStyles.css
+++ b/src/components/VencordSettings/settingsStyles.css
@@ -1,16 +1,16 @@
-.vcSettingsTabBar {
+.vc-settings-tab-bar {
margin-top: 20px;
margin-bottom: -2px;
border-bottom: 2px solid var(--background-modifier-accent);
}
-.vcSettingsTabBarItem {
+.vc-settings-tab-bar-item {
margin-right: 32px;
padding-bottom: 16px;
margin-bottom: -2px;
}
-.vcSettingsQuickActionCard {
+.vc-settings-quick-actions-card {
padding: 1em;
display: flex;
gap: 1em;
@@ -21,3 +21,21 @@
flex-direction: row;
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;
+}
diff --git a/src/utils/misc.tsx b/src/utils/misc.tsx
index 6710523..0ef7ffb 100644
--- a/src/utils/misc.tsx
+++ b/src/utils/misc.tsx
@@ -142,7 +142,7 @@ export function humanFriendlyJoin(elements: any[], mapper: (e: any) => string =
* classes("one", "two") => "one two"
*/
export function classes(...classes: string[]) {
- return classes.join(" ");
+ return classes.filter(c => typeof c === "string").join(" ");
}
/**
generated by cgit (git 2.46.0) at 2024-11-21 19:52:12 +0000