From 8e446e44abcd33dd760772e8dea0e57129d733b0 Mon Sep 17 00:00:00 2001 From: Vendicated Date: Thu, 10 Jul 2025 01:37:13 +0200 Subject: [PATCH] Online Themes: fix & improve ui --- src/components/PluginSettings/index.tsx | 2 +- src/components/PluginSettings/styles.css | 7 -- src/components/VencordSettings/ThemesTab.tsx | 67 +++---------------- .../VencordSettings/settingsStyles.css | 20 ++++-- .../VencordSettings/specialCard.css | 5 -- src/plugins/_core/supportHelper.tsx | 2 +- src/plugins/voiceMessages/index.tsx | 2 +- src/utils/cspViolations.ts | 2 +- 8 files changed, 26 insertions(+), 81 deletions(-) diff --git a/src/components/PluginSettings/index.tsx b/src/components/PluginSettings/index.tsx index 27eb10a3..4d4e41e7 100644 --- a/src/components/PluginSettings/index.tsx +++ b/src/components/PluginSettings/index.tsx @@ -62,7 +62,7 @@ function showErrorToast(message: string) { function ReloadRequiredCard({ required }: { required: boolean; }) { return ( - + {required ? ( <> Restart required! diff --git a/src/components/PluginSettings/styles.css b/src/components/PluginSettings/styles.css index ed5e9aa1..c3d97051 100644 --- a/src/components/PluginSettings/styles.css +++ b/src/components/PluginSettings/styles.css @@ -66,13 +66,6 @@ gap: 0.25em; } -.vc-plugins-restart-card { - padding: 1em; - background: var(--info-warning-background); - border: 1px solid var(--info-warning-foreground); - color: var(--info-warning-foreground); -} - .vc-plugins-restart-button { margin-top: 0.5em; background: var(--info-warning-foreground) !important; diff --git a/src/components/VencordSettings/ThemesTab.tsx b/src/components/VencordSettings/ThemesTab.tsx index f557adf1..6d41ab86 100644 --- a/src/components/VencordSettings/ThemesTab.tsx +++ b/src/components/VencordSettings/ThemesTab.tsx @@ -29,7 +29,7 @@ import { openInviteModal } from "@utils/discord"; import { Margins } from "@utils/margins"; import { classes } from "@utils/misc"; import { relaunch } from "@utils/native"; -import { useAwaiter, useForceUpdater } from "@utils/react"; +import { useForceUpdater } from "@utils/react"; import { getStylusWebStoreUrl } from "@utils/web"; import { findLazy } from "@webpack"; import { Alerts, Button, Card, Forms, React, showToast, TabBar, TextArea, useEffect, useRef, useState } from "@webpack/common"; @@ -52,62 +52,6 @@ const FileInput: FileInput = findLazy(m => m.prototype?.activateUploadDialogue & const cl = classNameFactory("vc-settings-theme-"); -function Validator({ link }: { link: string; }) { - const [res, err, pending] = useAwaiter(() => fetch(link).then(res => { - if (res.status > 300) throw `${res.status} ${res.statusText}`; - const contentType = res.headers.get("Content-Type"); - if (!contentType?.startsWith("text/css") && !contentType?.startsWith("text/plain")) - throw "Not a CSS file. Remember to use the raw link!"; - - return "Okay!"; - })); - - const text = pending - ? "Checking..." - : err - ? `Error: ${err instanceof Error ? err.message : String(err)}` - : "Valid!"; - - return {text}; -} - -function Validators({ themeLinks }: { themeLinks: string[]; }) { - if (!themeLinks.length) return null; - - return ( - <> - Validator - This section will tell you whether your themes can successfully be loaded -
- {themeLinks.map(rawLink => { - const { label, link } = (() => { - const match = /^@(light|dark) (.*)/.exec(rawLink); - if (!match) return { label: rawLink, link: rawLink }; - - const [, mode, link] = match; - return { label: `[${mode} mode only] ${link}`, link }; - })(); - - return - - {label} - - - ; - })} -
- - ); -} - interface ThemeCardProps { theme: UserThemeHeader; enabled: boolean; @@ -309,6 +253,12 @@ function ThemesTab() { function renderOnlineThemes() { return ( <> + + + This section is for advanced users. If you are having difficulties using it, use the + Local Themes tab instead. + + Paste links to css files here One link per line @@ -321,12 +271,11 @@ function ThemesTab() { value={themeText} onChange={setThemeText} className={"vc-settings-theme-links"} - placeholder="Theme Links" + placeholder="Enter Theme Links..." spellCheck={false} onBlur={onBlur} rows={10} /> - ); diff --git a/src/components/VencordSettings/settingsStyles.css b/src/components/VencordSettings/settingsStyles.css index 0161ff4e..c92d588f 100644 --- a/src/components/VencordSettings/settingsStyles.css +++ b/src/components/VencordSettings/settingsStyles.css @@ -1,7 +1,7 @@ .vc-settings-tab-bar { margin-top: 20px; margin-bottom: 10px; - border-bottom: 2px solid var(--background-modifier-accent); + border-bottom: 1px solid var(--border-subtle); } .vc-settings-tab-bar-item { @@ -20,6 +20,13 @@ margin-bottom: 1em; } +.vc-warning-card { + padding: 1em; + background: var(--info-warning-background); + border: 1px solid var(--info-warning-foreground); + color: var(--info-warning-foreground); +} + .vc-backup-restore-card { background-color: var(--info-warning-background); border-color: var(--info-warning-foreground); @@ -30,19 +37,20 @@ /* Needed to fix bad themes that hide certain textarea elements for whatever eldritch reason */ display: inline-block !important; color: var(--text-default) !important; - padding: 0.5em; - border: 1px solid var(--background-modifier-accent); + padding: 0.5em 1em; + border: 1px solid var(--input-border); max-height: unset; background-color: transparent; box-sizing: border-box; - font-size: 12px; - line-height: 14px; resize: none; width: 100%; + font-size: 1em; + line-height: 2em; + white-space: nowrap; } .vc-settings-theme-links::placeholder { - color: var(--header-secondary); + color: var(--text-muted) !important; } .vc-settings-theme-links:focus { diff --git a/src/components/VencordSettings/specialCard.css b/src/components/VencordSettings/specialCard.css index 07b628f5..fb868283 100644 --- a/src/components/VencordSettings/specialCard.css +++ b/src/components/VencordSettings/specialCard.css @@ -12,11 +12,6 @@ position: relative; } -.vc-settings-card { - padding: 1em; - margin-bottom: 1em; -} - .vc-special-card-special { padding: 1em 1.5em; margin-bottom: 1em; diff --git a/src/plugins/_core/supportHelper.tsx b/src/plugins/_core/supportHelper.tsx index 956343f6..82e09b88 100644 --- a/src/plugins/_core/supportHelper.tsx +++ b/src/plugins/_core/supportHelper.tsx @@ -318,7 +318,7 @@ export default definePlugin({ if (RelationshipStore.isFriend(userId) || isPluginDev(UserStore.getCurrentUser()?.id)) return null; return ( - + Please do not private message Vencord plugin developers for support!
Instead, use the Vencord support channel: {Parser.parse("https://discord.com/channels/1015060230222131221/1026515880080842772")} diff --git a/src/plugins/voiceMessages/index.tsx b/src/plugins/voiceMessages/index.tsx index 8365bb51..74f39ea3 100644 --- a/src/plugins/voiceMessages/index.tsx +++ b/src/plugins/voiceMessages/index.tsx @@ -219,7 +219,7 @@ function Modal({ modalProps }: { modalProps: ModalProps; }) { /> {isUnsupportedFormat && ( - + Voice Messages have to be OggOpus to be playable on iOS. This file is {blob.type} so it will not be playable on iOS. diff --git a/src/utils/cspViolations.ts b/src/utils/cspViolations.ts index 9477bcaa..b1acc4c6 100644 --- a/src/utils/cspViolations.ts +++ b/src/utils/cspViolations.ts @@ -8,7 +8,7 @@ import { useLayoutEffect } from "@webpack/common"; import { useForceUpdater } from "./react"; -const cssRelevantDirectives = ["style-src", "img-src", "font-src"] as const; +const cssRelevantDirectives = ["style-src", "style-src-elem", "img-src", "font-src"] as const; export const CspBlockedUrls = new Set(); const CspErrorListeners = new Set<() => void>();