diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/PluginSettings/components/BadgeComponent.tsx | 7 | ||||
| -rw-r--r-- | src/components/PluginSettings/index.tsx | 18 | ||||
| -rw-r--r-- | src/components/PluginSettings/styles.css | 61 | ||||
| -rw-r--r-- | src/components/PluginSettings/styles.ts | 61 | ||||
| -rw-r--r-- | src/components/VencordSettings/BackupRestoreTab.tsx | 9 | ||||
| -rw-r--r-- | src/components/VencordSettings/ThemesTab.tsx | 6 | ||||
| -rw-r--r-- | src/components/VencordSettings/Updater.tsx | 12 | ||||
| -rw-r--r-- | src/components/VencordSettings/VencordTab.tsx | 28 | ||||
| -rw-r--r-- | src/components/VencordSettings/index.tsx | 7 | ||||
| -rw-r--r-- | src/components/VencordSettings/settingsStyles.css | 24 |
10 files changed, 120 insertions, 113 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; +} |