revert some ui changes

package.json

@@ -97,7 +97,7 @@
         "typescript-transform-paths": "^3.5.6",
         "zip-local": "^0.3.5"
     },
-    "packageManager": "pnpm@11.21.0",
+    "packageManager": "pnpm@11.22.0",
     "engines": {
         "node": ">=22"
     }

src/components/FormSwitch.css

@@ -32,11 +32,3 @@
     flex-shrink: 0;
     padding-top: 2px;
 }
-
-.vc-form-switch-border {
-    margin-top: 20px;
-}
-
-.vc-form-switch-description {
-    color: var(--text-subtle);
-}

src/components/FormSwitch.tsx

@@ -9,7 +9,7 @@ import "./FormSwitch.css";
 import { classes } from "@utils/misc";
 import type { PropsWithChildren, ReactNode } from "react";
 
-import { Divider } from "./Divider";
+import { Flex } from "./Flex";
 import { Span } from "./Span";
 import { Switch } from "./Switch";
 
@@ -26,24 +26,22 @@ export interface FormSwitchProps {
 
 export function FormSwitch({ onChange, title, value, description, disabled, className, hideBorder }: FormSwitchProps) {
     return (
-        <label className="vc-form-switch-wrapper">
-            <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" className="vc-form-switch-description">{description}</Span>}
+        <div className={classes("vc-form-switch-container", hideBorder && "vc-form-switch-no-border")}>
+            <label className={classes("vc-form-switch", className, disabled && "vc-form-switch-disabled")}>
+                <div className="vc-form-switch-text">
+                    <Flex flexDirection="column" gap="4px">
+                        <Span size="md" weight="medium" color="text-strong">{title}</Span>
+                        {description && <Span size="sm" color="text-subtle">{description}</Span>}
+                    </Flex>
                 </div>
-
-                <Switch checked={value} onChange={onChange} disabled={disabled} />
-            </div>
-            {!hideBorder && <Divider className="vc-form-switch-border" />}
-        </label>
+                <div className="vc-form-switch-control">
+                    <Switch checked={value} onChange={onChange} disabled={disabled} />
+                </div>
+            </label>
+        </div>
     );
 }
 
-// #region Old compatibility
-
 export function FormSwitchCompat({ note, children, ...restProps }: PropsWithChildren<any>) {
     return <FormSwitch title={children ?? ""} description={note} {...restProps} />;
 }
-
-// #endregion

src/components/settings/tabs/plugins/components/styles.css

@@ -26,7 +26,7 @@
     color: var(--text-strong);
 }
 
-.vc-plugins-setting-description {
+.vc-plugins-setting-inline .vc-plugins-setting-description {
     color: var(--text-subtle);
 }
 

src/components/settings/tabs/vencord/index.tsx

@@ -258,19 +258,20 @@ function EquicordSettings() {
 
             <Divider className={Margins.top20} />
 
-            <section className={Margins.top16}>
-                <Heading tag="h5">Settings</Heading>
-                <Paragraph className={Margins.bottom20} style={{ color: "var(--text-muted)" }}>
-                    Hint: You can change the position of this settings section in the{" "}
-                    <a onClick={() => openPluginModal(SettingsPlugin)}>
-                        settings of the Settings plugin
-                    </a>!
-                </Paragraph>
-
-                <div className="vc-settings-switches">
-                    <Switches />
-                </div>
-            </section>
+            <Heading className={Margins.top20}>Client Settings</Heading>
+            <Paragraph className={Margins.bottom16}>
+                Configure how Equicord behaves and integrates with Discord. These settings affect the Discord client's appearance and behavior.
+            </Paragraph>
+            <Notice.Info className={Margins.bottom20} style={{ width: "100%" }}>
+                You can customize where this settings section appears in Discord's settings menu by configuring the{" "}
+                <a
+                    role="button"
+                    onClick={() => openPluginModal(SettingsPlugin)}
+                    style={{ cursor: "pointer", color: "var(--text-link)" }}
+                >
+                    Settings Plugin
+                </a>.
+            </Notice.Info>
 
             <Switches />