From 305eac5d269c58fd10cc7ffa86620ef0886bcea9 Mon Sep 17 00:00:00 2001
From: Vendicated <vendicated@riseup.net>
Date: Tue, 18 Aug 2026 02:08:43 +0200
Subject: [PATCH] Improve settings UI

---
 src/Vencord.ts                                |  3 +-
 src/components/FormSwitch.css                 |  4 +++
 src/components/FormSwitch.tsx                 |  2 +-
 .../settings/tabs/plugins/UIElements.css      |  4 +++
 .../settings/tabs/plugins/UIElements.tsx      |  4 +--
 .../tabs/plugins/components/styles.css        |  2 +-
 src/components/settings/tabs/styles.css       |  5 ++++
 .../settings/tabs/updater/index.tsx           | 30 +++++++++++--------
 .../settings/tabs/vencord/index.tsx           | 18 +++++++----
 9 files changed, 48 insertions(+), 24 deletions(-)

diff --git a/src/Vencord.ts b/src/Vencord.ts
index 430d61ed0..17790136d 100644
--- a/src/Vencord.ts
+++ b/src/Vencord.ts
@@ -63,7 +63,8 @@ async function syncSettings() {
             body: "We've noticed you have cloud integrations enabled in another client! Due to limitations, you will " +
                 "need to re-authenticate to continue using them. Click here to go to the settings page to do so!",
             color: "var(--yellow-360)",
-            onClick: () => SettingsRouter.openUserSettings("vencord_cloud_panel")
+            onClick: () => SettingsRouter.openUserSettings("vencord_cloud_panel"),
+            noPersist: true
         });
         return;
     }
diff --git a/src/components/FormSwitch.css b/src/components/FormSwitch.css
index 129c58475..44575d985 100644
--- a/src/components/FormSwitch.css
+++ b/src/components/FormSwitch.css
@@ -27,4 +27,8 @@
 
 .vc-form-switch-border {
     margin-top: 20px;
+}
+
+.vc-form-switch-description {
+    color: var(--text-subtle);
 }
\ No newline at end of file
diff --git a/src/components/FormSwitch.tsx b/src/components/FormSwitch.tsx
index 255f77992..ed436c3d4 100644
--- a/src/components/FormSwitch.tsx
+++ b/src/components/FormSwitch.tsx
@@ -30,7 +30,7 @@ export function FormSwitch({ onChange, title, value, description, disabled, clas
             <div className={classes("vc-form-switch", className, disabled && "vc-form-switch-disabled")}>
                 <div className={"vc-form-switch-text"}>
                     <Span size="md" weight="medium">{title}</Span>
-                    {description && <Span size="sm" weight="normal">{description}</Span>}
+                    {description && <Span size="sm" weight="normal" className="vc-form-switch-description">{description}</Span>}
                 </div>
 
                 <Switch checked={value} onChange={onChange} disabled={disabled} />
diff --git a/src/components/settings/tabs/plugins/UIElements.css b/src/components/settings/tabs/plugins/UIElements.css
index a362aad6a..3c3ba6b27 100644
--- a/src/components/settings/tabs/plugins/UIElements.css
+++ b/src/components/settings/tabs/plugins/UIElements.css
@@ -38,4 +38,8 @@
     :last-child {
         margin-left: auto;
     }
+}
+
+.vc-plugin-ui-elements-description {
+    color: var(--text-subtle);
 }
\ No newline at end of file
diff --git a/src/components/settings/tabs/plugins/UIElements.tsx b/src/components/settings/tabs/plugins/UIElements.tsx
index ba33fe43d..be5293d49 100644
--- a/src/components/settings/tabs/plugins/UIElements.tsx
+++ b/src/components/settings/tabs/plugins/UIElements.tsx
@@ -19,7 +19,7 @@ import { Margins } from "@utils/margins";
 import { classes } from "@utils/misc";
 import { IconComponent } from "@utils/types";
 import { RenderModalProps } from "@vencord/discord-types";
-import { Clickable, Modal,openModal } from "@webpack/common";
+import { Clickable, Modal, openModal } from "@webpack/common";
 
 
 const cl = classNameFactory("vc-plugin-ui-elements-");
@@ -76,7 +76,7 @@ function Section(props: {
     return (
         <section>
             <BaseText tag="h3" size="lg" weight="semibold">{title}</BaseText>
-            <Paragraph size="sm" className={classes(Margins.top8, Margins.bottom20)}>{description}</Paragraph>
+            <Paragraph size="sm" className={classes(Margins.top8, Margins.bottom20, cl("description"))}>{description}</Paragraph>
 
             <div className={cl("switches")}>
                 {switches.length === 0 && (
diff --git a/src/components/settings/tabs/plugins/components/styles.css b/src/components/settings/tabs/plugins/components/styles.css
index f104d4db5..52da69841 100644
--- a/src/components/settings/tabs/plugins/components/styles.css
+++ b/src/components/settings/tabs/plugins/components/styles.css
@@ -27,7 +27,7 @@
 }
 
 .vc-plugins-setting-description {
-    color: var(--text-default);
+    color: var(--text-subtle);
 }
 
 .vc-plugins-setting-error {
diff --git a/src/components/settings/tabs/styles.css b/src/components/settings/tabs/styles.css
index 6985a6ff7..89b9014a0 100644
--- a/src/components/settings/tabs/styles.css
+++ b/src/components/settings/tabs/styles.css
@@ -59,4 +59,9 @@
 
 .vc-cloud-button-icon {
     height: 1.25em;
+}
+
+.vc-settings-switches {
+    display: grid;
+    gap: 8px;
 }
\ No newline at end of file
diff --git a/src/components/settings/tabs/updater/index.tsx b/src/components/settings/tabs/updater/index.tsx
index 30191cb91..52960c60e 100644
--- a/src/components/settings/tabs/updater/index.tsx
+++ b/src/components/settings/tabs/updater/index.tsx
@@ -81,19 +81,23 @@ function Updater() {
         <SettingsTab>
             <VesktopSection />
 
-            <FormSwitch
-                title="Automatically update"
-                description="Automatically update Vencord without confirmation prompt"
-                value={settings.autoUpdate}
-                onChange={(v: boolean) => settings.autoUpdate = v}
-            />
-            <FormSwitch
-                title="Get notified when an automatic update completes"
-                description="Show a notification when Vencord automatically updates"
-                value={settings.autoUpdateNotification}
-                onChange={(v: boolean) => settings.autoUpdateNotification = v}
-                disabled={!settings.autoUpdate}
-            />
+            <div className="vc-settings-switches">
+                <FormSwitch
+                    title="Automatically update"
+                    description="Automatically update Vencord without confirmation prompt"
+                    value={settings.autoUpdate}
+                    onChange={(v: boolean) => settings.autoUpdate = v}
+                    hideBorder
+                />
+                <FormSwitch
+                    title="Get notified when an automatic update completes"
+                    description="Show a notification when Vencord automatically updates"
+                    value={settings.autoUpdateNotification}
+                    onChange={(v: boolean) => settings.autoUpdateNotification = v}
+                    disabled={!settings.autoUpdate}
+                    hideBorder
+                />
+            </div>
 
             <Forms.FormTitle tag="h5" className={Margins.top20}>Repo</Forms.FormTitle>
 
diff --git a/src/components/settings/tabs/vencord/index.tsx b/src/components/settings/tabs/vencord/index.tsx
index ce06f431b..ca4ddede6 100644
--- a/src/components/settings/tabs/vencord/index.tsx
+++ b/src/components/settings/tabs/vencord/index.tsx
@@ -57,11 +57,7 @@ function Switches() {
         {
             key: "useQuickCss",
             title: "Enable Custom CSS",
-        },
-        !IS_WEB && {
-            key: "enableReactDevtools",
-            title: "Enable React Developer Tools",
-            restartRequired: true
+            description: "Apply your configured QuickCSS"
         },
         !IS_WEB && (!IS_DISCORD_DESKTOP || !IS_WINDOWS ? {
             key: "frameless",
@@ -81,6 +77,7 @@ function Switches() {
         IS_DISCORD_DESKTOP && {
             key: "disableMinSize",
             title: "Disable minimum window size",
+            description: "Allows you to resize the window to any size, even smaller than Discord's minimum size",
             restartRequired: true
         },
         !IS_WEB && IS_WINDOWS && {
@@ -88,6 +85,12 @@ function Switches() {
             title: "Register Ctrl+Q as shortcut to close Discord (Alternative to Alt+F4)",
             restartRequired: true
         },
+        !IS_WEB && {
+            key: "enableReactDevtools",
+            title: "Enable React Developer Tools",
+            description: "Mainly useful for plugin developers. Ignore this if you don't know what it is",
+            restartRequired: true
+        },
     ] satisfies Array<false | {
         key: KeysOfType<typeof settings, boolean>;
         title: string;
@@ -108,6 +111,7 @@ function Switches() {
                 title={title}
                 description={description}
                 value={settings[key]}
+                hideBorder
                 onChange={v => {
                     settings[key] = v;
 
@@ -226,7 +230,9 @@ function VencordSettings() {
                     </a>!
                 </Forms.FormText>
 
-                <Switches />
+                <div className="vc-settings-switches">
+                    <Switches />
+                </div>
             </section>