misc Settings ui improvements

2026-01-28 04:42:03 +01:00 · 2026-01-28 04:42:03 +01:00 · 781a2f7c60
commit 781a2f7c60
parent 816243e702
11 changed files with 54 additions and 42 deletions
--- 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);
 }
--- 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);
-}
+}
--- 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);
 }
--- 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;
-}
+}
--- 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<Partial<User>[]>([]);
+    // prefill dummy user to avoid layout shift
+    const [authors, setAuthors] = useState<Partial<User>[]>(() => [makeDummyUser({ username: "Loading...", id: "-1465912127305809920" })]);

    useEffect(() => {
        (async () => {
@ -157,7 +158,7 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
                <ModalCloseButton onClick={onClose} />
            </ModalHeader>

-            <ModalContent className={Margins.bottom16}>
+            <ModalContent className={"vc-settings-modal-content"}>
                <section>
                    <Flex className={cl("info")}>
                        <Forms.FormText className={cl("description")}>{plugin.description}</Forms.FormText>
--- 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 (
+            <Paragraph size="md" weight="semibold" key={name} className={cl("switches-row")}>
+                <Icon height={20} width={20} />
+                {name}
+                <Switch
+                    checked={settings[name]?.enabled ?? true}
+                    onChange={v => {
+                        settings[name] ??= {} as any;
+                        settings[name].enabled = v;
+                    }}
+                />
+            </Paragraph>
+        );
+    });
+
    return (
        <section>
            <BaseText tag="h3" size="xl" weight="bold">{title}</BaseText>
            <Paragraph size="sm" className={classes(Margins.top8, Margins.bottom20)}>{description}</Paragraph>

            <div className={cl("switches")}>
-                {Array.from(buttonMap, ([name, { icon }]) => {
-                    const Icon = icon ?? PlaceholderIcon;
-                    return (
-                        <Paragraph size="md" weight="semibold" key={name} className={cl("switches-row")}>
-                            <Icon height={20} width={20} />
-                            {name}
-                            <Switch
-                                checked={settings[name]?.enabled ?? true}
-                                onChange={v => {
-                                    settings[name] ??= {} as any;
-                                    settings[name].enabled = v;
-                                }}
-                            />
-                        </Paragraph>
-                    );
-                })}
+                {switches.length === 0 && (
+                    <Paragraph weight="medium" className={cl("switches-row")} style={{ color: "var(--text-muted)" }}>
+                        Buttons of enabled plugins will appear here.
+                    </Paragraph>
+                )}
+                {switches}
            </div>
        </section>
    );
--- 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 {
--- 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 {
--- 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,
    },
--- 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({
                <Button onClick={openBlockModal}>Manage Blocked Users</Button>

                <Button
-                    color={Button.Colors.GREEN}
+                    variant="positive"
                    onClick={() => {
                        VencordNative.native.openExternal("https://github.com/sponsors/mantikafasi");
                    }}
@ -68,7 +69,7 @@ export const settings = definePluginSettings({
                    Support ReviewDB development
                </Button>

-                <Button onClick={async () => {
+                <Button variant="link" onClick={async () => {
                    let url = "https://reviewdb.mantikafasi.dev";
                    const token = await getToken();
                    if (token)
@ -80,9 +81,7 @@ export const settings = definePluginSettings({
                </Button>


-                <Button onClick={() => {
-                    VencordNative.native.openExternal("https://discord.gg/eWPBSbvznt");
-                }}>
+                <Button variant="link" onClick={() => openInviteModal("eWPBSbvznt")}>
                    ReviewDB Support Server
                </Button>
            </div >
--- 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%;