From 781a2f7c60fac73176540b4ebe2ab1a91e914fee Mon Sep 17 00:00:00 2001 From: Vendicated Date: Wed, 28 Jan 2026 04:42:03 +0100 Subject: [PATCH] misc Settings ui improvements --- src/api/Notifications/styles.css | 4 +- src/components/Button.css | 6 +-- src/components/settings/QuickAction.css | 7 ++-- .../settings/tabs/plugins/PluginModal.css | 6 ++- .../settings/tabs/plugins/PluginModal.tsx | 5 ++- .../settings/tabs/plugins/UIElements.tsx | 39 +++++++++++-------- src/components/settings/tabs/styles.css | 4 +- src/plugins/decor/ui/styles.css | 4 +- src/plugins/imageZoom/index.tsx | 8 ++-- src/plugins/reviewDB/settings.tsx | 11 +++--- src/plugins/voiceMessages/styles.css | 2 +- 11 files changed, 54 insertions(+), 42 deletions(-) diff --git a/src/api/Notifications/styles.css b/src/api/Notifications/styles.css index 5ced23678..400fb7d4a 100644 --- a/src/api/Notifications/styles.css +++ b/src/api/Notifications/styles.css @@ -136,6 +136,6 @@ } .vc-notification-log-danger-btn { - color: var(--white-500); - background-color: var(--redesign-button-danger-background); + color: var(--control-critical-primary-text-default); + background-color: var(--control-critical-primary-background-default); } \ No newline at end of file diff --git a/src/components/Button.css b/src/components/Button.css index 74a7df262..9a77eaf86 100644 --- a/src/components/Button.css +++ b/src/components/Button.css @@ -144,11 +144,11 @@ } .vc-btn-positive { - background-color: var(--redesign-button-positive-background, var(--green-430)); + background-color: var(--control-connected-background-default, var(--green-430)); color: var(--white); &:hover { - background-color: var(--redesign-button-positive-pressed-background, var(--green-460)); + background-color: var(--control-connected-background-hover, var(--green-460)); } } @@ -215,4 +215,4 @@ .vc-text-btn-link { color: var(--text-link); -} +} \ No newline at end of file diff --git a/src/components/settings/QuickAction.css b/src/components/settings/QuickAction.css index caef5a290..58fcfb609 100644 --- a/src/components/settings/QuickAction.css +++ b/src/components/settings/QuickAction.css @@ -14,8 +14,9 @@ .vc-settings-quickActions-pill { all: unset; - background: var(--redesign-button-secondary-background); - color: var(--text-default); + cursor: pointer; + background: var(--control-secondary-background-default); + color: var(--control-secondary-text-default, var(--text-default)); display: flex; align-items: center; gap: 0.5em; @@ -26,7 +27,7 @@ } .vc-settings-quickActions-pill:hover { - background: var(--redesign-button-secondary-pressed-background); + background: var(--control-secondary-background-hover); transform: translateY(-1px); box-shadow: var(--elevation-high); } diff --git a/src/components/settings/tabs/plugins/PluginModal.css b/src/components/settings/tabs/plugins/PluginModal.css index 1f4b9aaad..a4a84391f 100644 --- a/src/components/settings/tabs/plugins/PluginModal.css +++ b/src/components/settings/tabs/plugins/PluginModal.css @@ -1,7 +1,11 @@ +.vc-settings-modal-content { + padding-bottom: 24px; +} + .vc-plugin-modal-info { align-items: center; } .vc-plugin-modal-description { flex-grow: 1; -} +} \ No newline at end of file diff --git a/src/components/settings/tabs/plugins/PluginModal.tsx b/src/components/settings/tabs/plugins/PluginModal.tsx index fd76c2008..cb014c831 100644 --- a/src/components/settings/tabs/plugins/PluginModal.tsx +++ b/src/components/settings/tabs/plugins/PluginModal.tsx @@ -72,7 +72,8 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti const pluginSettings = useSettings([`plugins.${plugin.name}.*`]).plugins[plugin.name]; const hasSettings = Boolean(pluginSettings && plugin.options && !isObjectEmpty(plugin.options)); - const [authors, setAuthors] = useState[]>([]); + // prefill dummy user to avoid layout shift + const [authors, setAuthors] = useState[]>(() => [makeDummyUser({ username: "Loading...", id: "-1465912127305809920" })]); useEffect(() => { (async () => { @@ -157,7 +158,7 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti - +
{plugin.description} diff --git a/src/components/settings/tabs/plugins/UIElements.tsx b/src/components/settings/tabs/plugins/UIElements.tsx index 1e4600ac2..8d2b26fc8 100644 --- a/src/components/settings/tabs/plugins/UIElements.tsx +++ b/src/components/settings/tabs/plugins/UIElements.tsx @@ -56,28 +56,35 @@ function Section(props: { }) { const { buttonMap, description, title, settings } = props; + const switches = Array.from(buttonMap, ([name, { icon }]) => { + const Icon = icon ?? PlaceholderIcon; + return ( + + + {name} + { + settings[name] ??= {} as any; + settings[name].enabled = v; + }} + /> + + ); + }); + return (
{title} {description}
- {Array.from(buttonMap, ([name, { icon }]) => { - const Icon = icon ?? PlaceholderIcon; - return ( - - - {name} - { - settings[name] ??= {} as any; - settings[name].enabled = v; - }} - /> - - ); - })} + {switches.length === 0 && ( + + Buttons of enabled plugins will appear here. + + )} + {switches}
); diff --git a/src/components/settings/tabs/styles.css b/src/components/settings/tabs/styles.css index edf5fe8bf..a0152abca 100644 --- a/src/components/settings/tabs/styles.css +++ b/src/components/settings/tabs/styles.css @@ -47,8 +47,8 @@ } .vc-cloud-erase-data-danger-btn { - color: var(--white-500); - background-color: var(--redesign-button-danger-background); + color: var(--control-critical-primary-text-default); + background-color: var(--control-critical-primary-background-default); } .vc-cloud-icon-with-button { diff --git a/src/plugins/decor/ui/styles.css b/src/plugins/decor/ui/styles.css index ba95e483d..28a1f9887 100644 --- a/src/plugins/decor/ui/styles.css +++ b/src/plugins/decor/ui/styles.css @@ -1,6 +1,6 @@ .vc-decor-danger-btn { - color: var(--white-500); - background-color: var(--redesign-button-danger-background); + color: var(--control-critical-primary-text-default); + background-color: var(--control-critical-primary-background-default); } .vc-decor-change-decoration-modal-content { diff --git a/src/plugins/imageZoom/index.tsx b/src/plugins/imageZoom/index.tsx index 94216b969..061407411 100644 --- a/src/plugins/imageZoom/index.tsx +++ b/src/plugins/imageZoom/index.tsx @@ -21,7 +21,7 @@ import { definePluginSettings } from "@api/Settings"; import { debounce } from "@shared/debounce"; import { Devs } from "@utils/constants"; import { Logger } from "@utils/Logger"; -import definePlugin, { makeRange, OptionType } from "@utils/types"; +import definePlugin, { OptionType } from "@utils/types"; import { createRoot, Menu } from "@webpack/common"; import { JSX } from "react"; import type { Root } from "react-dom/client"; @@ -58,14 +58,14 @@ export const settings = definePluginSettings({ zoom: { description: "Zoom of the lens", type: OptionType.SLIDER, - markers: makeRange(1, 50, 4), + markers: [1, 5, 10, 20, 30, 40, 50], default: 2, stickToMarkers: false, }, size: { description: "Radius / Size of the lens", type: OptionType.SLIDER, - markers: makeRange(50, 1000, 50), + markers: [50, 100, 250, 500, 750, 1000], default: 100, stickToMarkers: false, }, @@ -73,7 +73,7 @@ export const settings = definePluginSettings({ zoomSpeed: { description: "How fast the zoom / lens size changes", type: OptionType.SLIDER, - markers: makeRange(0.1, 5, 0.2), + markers: [0.1, 0.5, 1, 2, 3, 4, 5], default: 0.5, stickToMarkers: false, }, diff --git a/src/plugins/reviewDB/settings.tsx b/src/plugins/reviewDB/settings.tsx index 2b58d080c..e7b32e5ae 100644 --- a/src/plugins/reviewDB/settings.tsx +++ b/src/plugins/reviewDB/settings.tsx @@ -17,8 +17,9 @@ */ import { definePluginSettings } from "@api/Settings"; +import { Button } from "@components/Button"; +import { openInviteModal } from "@utils/discord"; import { OptionType } from "@utils/types"; -import { Button } from "@webpack/common"; import { authorize, getToken } from "./auth"; import { openBlockModal } from "./components/BlockedUserModal"; @@ -60,7 +61,7 @@ export const settings = definePluginSettings({ - - diff --git a/src/plugins/voiceMessages/styles.css b/src/plugins/voiceMessages/styles.css index 5736a3378..52fce852c 100644 --- a/src/plugins/voiceMessages/styles.css +++ b/src/plugins/voiceMessages/styles.css @@ -21,7 +21,7 @@ } .vc-vmsg-preview-indicator { - background: var(--redesign-button-secondary-background); + background: var(--control-secondary-background-default); width: 16px; height: 16px; border-radius: 50%;