Improve settings UI

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;
     }

src/components/FormSwitch.css

@@ -27,4 +27,8 @@
 
 .vc-form-switch-border {
     margin-top: 20px;
+}
+
+.vc-form-switch-description {
+    color: var(--text-subtle);
 }

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} />

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);
 }

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 && (

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 {

src/components/settings/tabs/styles.css

@@ -59,4 +59,9 @@
 
 .vc-cloud-button-icon {
     height: 1.25em;
+}
+
+.vc-settings-switches {
+    display: grid;
+    gap: 8px;
 }

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>
 

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>