diff --git a/package.json b/package.json index 4575a0e48..5c7ac944c 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "equicord", "private": "true", - "version": "1.13.0", + "version": "1.13.1", "description": "The other cutest Discord client mod", "homepage": "https://github.com/Equicord/Equicord#readme", "bugs": { diff --git a/packages/discord-types/src/components.d.ts b/packages/discord-types/src/components.d.ts index a20156e07..d8cc74b55 100644 --- a/packages/discord-types/src/components.d.ts +++ b/packages/discord-types/src/components.d.ts @@ -162,19 +162,6 @@ export type Button = ComponentType & { Link: any; }; -export type Switch = ComponentType>; - export type CheckboxAligns = { CENTER: "center"; TOP: "top"; diff --git a/src/components/FormDivider.css b/src/components/FormDivider.css new file mode 100644 index 000000000..66f988d5a --- /dev/null +++ b/src/components/FormDivider.css @@ -0,0 +1,5 @@ +.vc-form-divider { + border-top: thin solid var(--border-subtle); + width: 100%; + height: 1px; +} \ No newline at end of file diff --git a/src/components/FormDivider.tsx b/src/components/FormDivider.tsx new file mode 100644 index 000000000..f7465829e --- /dev/null +++ b/src/components/FormDivider.tsx @@ -0,0 +1,13 @@ +/* + * Vencord, a Discord client mod + * Copyright (c) 2025 Vendicated and contributors + * SPDX-License-Identifier: GPL-3.0-or-later + */ + +import "./FormDivider.css"; + +import { classes } from "@utils/misc"; + +export function FormDivider({ className }: { className?: string; }) { + return
; +} diff --git a/src/components/FormSwitch.css b/src/components/FormSwitch.css new file mode 100644 index 000000000..38cbea8d7 --- /dev/null +++ b/src/components/FormSwitch.css @@ -0,0 +1,29 @@ +.vc-form-switch-wrapper { + margin-bottom: 20px; +} + +.vc-form-switch { + display: flex; + width: 100%; + + > :last-child { + margin-left: auto; + } +} + +.vc-form-switch-disabled { + opacity: 0.5; + pointer-events: none; + cursor: not-allowed; +} + +.vc-form-switch-text { + display: flex; + flex-direction: column; + justify-content: center; + gap: 8px; +} + +.vc-form-switch-border { + margin-top: 20px; +} \ No newline at end of file diff --git a/src/components/FormSwitch.tsx b/src/components/FormSwitch.tsx new file mode 100644 index 000000000..3f207c2b3 --- /dev/null +++ b/src/components/FormSwitch.tsx @@ -0,0 +1,46 @@ +/* + * Vencord, a Discord client mod + * Copyright (c) 2025 Vendicated and contributors + * SPDX-License-Identifier: GPL-3.0-or-later + */ + +import "./FormSwitch.css"; + +import { classes } from "@utils/misc"; +import { Text } from "@webpack/common"; +import type { PropsWithChildren, ReactNode } from "react"; + +import { FormDivider } from "./FormDivider"; +import { Switch } from "./Switch"; + +export interface FormSwitchProps { + title: ReactNode; + description?: ReactNode; + value: boolean; + onChange(value: boolean): void; + + className?: string; + disabled?: boolean; + hideBorder?: boolean; +} + +export function FormSwitch({ onChange, title, value, description, disabled, className, hideBorder }: FormSwitchProps) { + return ( +
+
+
+ {title} + {description && {description}} +
+ + +
+ {!hideBorder && } +
+ ); +} + +/** Compatibility with Discord's old FormSwitch */ +export function FormSwitchCompat(props: PropsWithChildren) { + return ; +} diff --git a/src/components/settings/Switch.css b/src/components/Switch.css similarity index 97% rename from src/components/settings/Switch.css rename to src/components/Switch.css index e6dcf5626..685f6b228 100644 --- a/src/components/settings/Switch.css +++ b/src/components/Switch.css @@ -1,3 +1,3 @@ .vc-switch-slider { transition: 100ms transform ease-in-out; -} +} \ No newline at end of file diff --git a/src/components/settings/Switch.tsx b/src/components/Switch.tsx similarity index 100% rename from src/components/settings/Switch.tsx rename to src/components/Switch.tsx diff --git a/src/components/ThemeSettings/components/SettingBooleanComponent.tsx b/src/components/ThemeSettings/components/SettingBooleanComponent.tsx index 6b49ae43a..111aae073 100644 --- a/src/components/ThemeSettings/components/SettingBooleanComponent.tsx +++ b/src/components/ThemeSettings/components/SettingBooleanComponent.tsx @@ -4,7 +4,11 @@ * SPDX-License-Identifier: GPL-3.0-or-later */ -import { Forms, Switch } from "@webpack/common"; +import "./styles.css"; + +import { classNameFactory } from "@api/Styles"; +import { FormSwitch } from "@components/FormSwitch"; +import { Forms } from "@webpack/common"; interface Props { label: string; @@ -12,6 +16,8 @@ interface Props { themeSettings: Record; } +const cl = classNameFactory("vc-settings-boolean-"); + export function SettingBooleanComponent({ label, name, themeSettings }: Props) { function handleChange(value: boolean) { const corrected = value ? "1" : "0"; @@ -21,15 +27,14 @@ export function SettingBooleanComponent({ label, name, themeSettings }: Props) { return ( - - {label} - + /> ); } diff --git a/src/components/ThemeSettings/components/styles.css b/src/components/ThemeSettings/components/styles.css new file mode 100644 index 000000000..422bcd940 --- /dev/null +++ b/src/components/ThemeSettings/components/styles.css @@ -0,0 +1,3 @@ +.vc-settings-boolean-switch { + margin-bottom: 0.5em; +} \ No newline at end of file diff --git a/src/components/settings/AddonCard.tsx b/src/components/settings/AddonCard.tsx index 63be7c8af..1d39cd80d 100644 --- a/src/components/settings/AddonCard.tsx +++ b/src/components/settings/AddonCard.tsx @@ -20,7 +20,7 @@ import "./AddonCard.css"; import { classNameFactory } from "@api/Styles"; import { AddonBadge } from "@components/settings/PluginBadge"; -import { Switch } from "@components/settings/Switch"; +import { Switch } from "@components/Switch"; import { Text, useRef } from "@webpack/common"; import type { MouseEventHandler, ReactNode } from "react"; diff --git a/src/components/settings/OnlineThemeCard.tsx b/src/components/settings/OnlineThemeCard.tsx index fce5d3cc9..19d761a50 100644 --- a/src/components/settings/OnlineThemeCard.tsx +++ b/src/components/settings/OnlineThemeCard.tsx @@ -19,8 +19,8 @@ import "./AddonCard.css"; import { classNameFactory } from "@api/Styles"; +import { Switch } from "@components/settings"; import { AddonBadge } from "@components/settings/PluginBadge"; -import { Switch } from "@components/settings/Switch"; import { Text, useRef } from "@webpack/common"; import type { MouseEventHandler, ReactNode } from "react"; diff --git a/src/components/settings/index.ts b/src/components/settings/index.ts index c793ef38c..647721219 100644 --- a/src/components/settings/index.ts +++ b/src/components/settings/index.ts @@ -4,10 +4,10 @@ * SPDX-License-Identifier: GPL-3.0-or-later */ +export * from "../Switch"; export * from "./AddonCard"; export * from "./DonateButton"; export * from "./PluginBadge"; export * from "./QuickAction"; export * from "./SpecialCard"; -export * from "./Switch"; export * from "./tabs"; diff --git a/src/components/settings/tabs/patchHelper/ReplacementInput.tsx b/src/components/settings/tabs/patchHelper/ReplacementInput.tsx index c028c4774..99b3bbc68 100644 --- a/src/components/settings/tabs/patchHelper/ReplacementInput.tsx +++ b/src/components/settings/tabs/patchHelper/ReplacementInput.tsx @@ -4,8 +4,9 @@ * SPDX-License-Identifier: GPL-3.0-or-later */ +import { FormSwitch } from "@components/FormSwitch"; import { Margins } from "@utils/margins"; -import { Forms, Parser, Switch, TextInput, useEffect, useState } from "@webpack/common"; +import { Forms, Parser, TextInput, useEffect, useState } from "@webpack/common"; const RegexGuide = { "\\i": "Special regex escape sequence that matches identifiers (varnames, classnames, etc.)", @@ -69,15 +70,14 @@ export function ReplacementInput({ replacement, setReplacement, replacementError
)} - - Treat as Function - + /> ); } diff --git a/src/components/settings/tabs/plugins/components/BooleanSetting.tsx b/src/components/settings/tabs/plugins/components/BooleanSetting.tsx index c5408cb9b..44265c724 100644 --- a/src/components/settings/tabs/plugins/components/BooleanSetting.tsx +++ b/src/components/settings/tabs/plugins/components/BooleanSetting.tsx @@ -16,7 +16,7 @@ * along with this program. If not, see . */ -import { Switch } from "@components/settings/Switch"; +import { Switch } from "@components/Switch"; import { PluginOptionBoolean } from "@utils/types"; import { React, useState } from "@webpack/common"; diff --git a/src/components/settings/tabs/sync/CloudTab.tsx b/src/components/settings/tabs/sync/CloudTab.tsx index f30ff4ebe..f51d43fac 100644 --- a/src/components/settings/tabs/sync/CloudTab.tsx +++ b/src/components/settings/tabs/sync/CloudTab.tsx @@ -19,13 +19,14 @@ import { showNotification } from "@api/Notifications"; import { Settings, useSettings } from "@api/Settings"; import { CheckedTextInput } from "@components/CheckedTextInput"; +import { FormSwitch } from "@components/FormSwitch"; import { Grid } from "@components/Grid"; import { Link } from "@components/Link"; import { SettingsTab, wrapTab } from "@components/settings/tabs/BaseTab"; import { authorizeCloud, cloudLogger, deauthorizeCloud, getCloudAuth, getCloudUrl } from "@utils/cloud"; import { Margins } from "@utils/margins"; import { deleteCloudSettings, getCloudSettings, putCloudSettings } from "@utils/settingsSync"; -import { Alerts, Button, Forms, Switch, Tooltip, useState } from "@webpack/common"; +import { Alerts, Button, Forms, Tooltip, useState } from "@webpack/common"; function validateUrl(url: string) { try { @@ -72,14 +73,13 @@ function SettingsSyncSection() { Synchronize your settings to the cloud. This allows easy synchronization across multiple devices with minimal effort. - { cloud.settingsSync = v; }} - > - Settings Sync - + disabled={!cloud.authenticated} + />
- { setIgnoreCase(i, !values[i].ignoreCase); }} - style={{ marginTop: "0.5em", marginRight: "40px" }} - > - Ignore Case - + /> Whitelist/Blacklist
diff --git a/src/equicordplugins/keywordNotify/style.css b/src/equicordplugins/keywordNotify/style.css index 95fc9da84..68727ee4f 100644 --- a/src/equicordplugins/keywordNotify/style.css +++ b/src/equicordplugins/keywordNotify/style.css @@ -14,3 +14,8 @@ padding: 8px; cursor: pointer; } + +.vc-keywordnotify-switch { + margin-top: 0.5em; + margin-right: 40px; +} \ No newline at end of file diff --git a/src/equicordplugins/loginWithQR/images.ts b/src/equicordplugins/loginWithQR/images.ts index 865ea50ab..d53bc1c35 100644 --- a/src/equicordplugins/loginWithQR/images.ts +++ b/src/equicordplugins/loginWithQR/images.ts @@ -5,7 +5,7 @@ */ export const images = { - cross: "https://i.imgur.com/XxRnu3b.png", + cross: "https://cdn.discordapp.com/emojis/1423430200938463315.webp", deviceImage: { success: "https://github.com/nexpid/Themelings/raw/data/icons/images/native/img_remote_auth_succeeded.png", diff --git a/src/equicordplugins/moreUserTags/settings.tsx b/src/equicordplugins/moreUserTags/settings.tsx index 83577daeb..81e044a8d 100644 --- a/src/equicordplugins/moreUserTags/settings.tsx +++ b/src/equicordplugins/moreUserTags/settings.tsx @@ -5,9 +5,10 @@ */ import { definePluginSettings } from "@api/Settings"; +import { FormSwitch } from "@components/FormSwitch"; import { Margins } from "@utils/margins"; import { OptionType } from "@utils/types"; -import { Card, Flex, Forms, Switch, TextInput, Tooltip } from "@webpack/common"; +import { Card, Flex, Forms, TextInput, Tooltip } from "@webpack/common"; import { Tag, tags } from "./consts"; import { TagSettings } from "./types"; @@ -68,21 +69,19 @@ function SettingsComponent() { className={Margins.bottom16} /> - tagSettings[t.name].showInChat = v} hideBorder - > - Show in messages - + /> - tagSettings[t.name].showInNotChat = v} hideBorder - > - Show in member list and profiles - + /> ))}
diff --git a/src/equicordplugins/quoter/index.tsx b/src/equicordplugins/quoter/index.tsx index d82b9d04d..929a57bc7 100644 --- a/src/equicordplugins/quoter/index.tsx +++ b/src/equicordplugins/quoter/index.tsx @@ -6,12 +6,13 @@ import { findGroupChildrenByChildId } from "@api/ContextMenu"; import { definePluginSettings } from "@api/Settings"; +import { FormSwitch } from "@components/FormSwitch"; import { Devs } from "@utils/constants"; import { getCurrentChannel } from "@utils/discord"; import { ModalCloseButton, ModalContent, ModalHeader, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal"; import definePlugin, { OptionType } from "@utils/types"; import { Message } from "@vencord/discord-types"; -import { Button, Menu, Select, Switch, Text, UploadHandler, useEffect, useState } from "@webpack/common"; +import { Button, Menu, Select, Text, UploadHandler, useEffect, useState } from "@webpack/common"; import { QuoteIcon } from "./components"; import { canvasToBlob, fetchImageAsBlob, FixUpQuote, wrapText } from "./utils"; @@ -219,7 +220,7 @@ function QuoteModal({ message, ...props }: ModalProps & { message: Message; }) {



- Grayscale +