add vesktop vs vencord explainer to updater & improve cards

src/components/Card.css

@@ -1,18 +1,30 @@
 .vc-card-base {
     background: var(--card-background-default);
-    border-radius: var(--radius-sm, 8px)
+    border-radius: var(--radius-sm, 8px);
 }
 
 .vc-card-normal {
-    border: 1px solid var(--border-subtle);
+    border: 1px var(--border-subtle);
 }
 
 .vc-card-warning {
-    border: 1px solid var(--icon-status-idle);
+    background-color: var(--background-feedback-warning);
+    border: 1px solid var(--icon-feedback-warning);
 }
 
 .vc-card-danger {
-    border: 1px solid var(--icon-status-dnd);
+    background-color: var(--background-feedback-critical);
+    border: 1px solid var(--icon-feedback-critical);
+}
+
+.vc-card-success {
+    background-color: var(--background-feedback-positive);
+    border: 1px solid var(--icon-feedback-positive);
+}
+
+.vc-card-info {
+    background: var(--background-feedback-info);
+    border: 1px solid var(--icon-feedback-info);
 }
 
 .vc-card-defaultPadding {

src/components/Card.tsx

@@ -13,7 +13,7 @@ import { ComponentPropsWithRef } from "react";
 const cl = classNameFactory("vc-card-");
 
 export interface CardProps extends ComponentPropsWithRef<"div"> {
-    variant?: "normal" | "warning" | "danger";
+    variant?: "normal" | "warning" | "danger" | "info" | "success";
     /** Add a default padding of 1em to the card. This is implied if no className prop is passed */
     defaultPadding?: boolean;
 }

src/components/settings/tabs/updater/Components.tsx

@@ -94,7 +94,6 @@ export function Updatable(props: CommonProps) {
             <Flex className={classes(Margins.bottom8, Margins.top8)}>
                 {isOutdated && (
                     <Button
-                        size={Button.Sizes.SMALL}
                         disabled={isUpdating || isChecking}
                         onClick={runWithDispatch(setIsUpdating, async () => {
                             if (await update()) {
@@ -120,7 +119,6 @@ export function Updatable(props: CommonProps) {
                     </Button>
                 )}
                 <Button
-                    size={Button.Sizes.SMALL}
                     disabled={isUpdating || isChecking}
                     onClick={runWithDispatch(setIsChecking, async () => {
                         const outdated = await checkForUpdates();

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

@@ -17,11 +17,17 @@
 */
 
 import { useSettings } from "@api/Settings";
+import { Button } from "@components/Button";
+import { Card } from "@components/Card";
 import { Divider } from "@components/Divider";
+import { Flex } from "@components/Flex";
 import { FormSwitch } from "@components/FormSwitch";
+import { HeadingSecondary } from "@components/Heading";
 import { Link } from "@components/Link";
+import { Paragraph } from "@components/Paragraph";
 import { SettingsTab, wrapTab } from "@components/settings/tabs/BaseTab";
 import { Margins } from "@utils/margins";
+import { classes } from "@utils/misc";
 import { useAwaiter } from "@utils/react";
 import { getRepo, isNewer, UpdateLogger } from "@utils/updater";
 import { Forms, React } from "@webpack/common";
@@ -30,6 +36,34 @@ import gitHash from "~git-hash";
 
 import { CommonProps, HashLink, Newer, Updatable } from "./Components";
 
+function VesktopSection() {
+    if (!IS_VESKTOP) return null;
+
+    const [isVesktopOutdated] = useAwaiter<boolean>(VesktopNative.app.isOutdated, { fallbackValue: false });
+
+    return (
+        <Flex className={Margins.bottom20} flexDirection="column" gap="1em">
+            <Card variant="info">
+                <HeadingSecondary>Vesktop & Vencord</HeadingSecondary>
+                <Paragraph>Vesktop and Vencord are two separate things. This updater is for Vencord.</Paragraph>
+                <Paragraph className={Margins.top8}>
+                    You receive separate popups for Vesktop updates. You can also manually update by installing the <Link href="https://vesktop.dev/install">latest version</Link>.
+                </Paragraph>
+            </Card>
+
+            {isVesktopOutdated && (
+                <Card variant="warning">
+                    <HeadingSecondary>Vesktop Outdated</HeadingSecondary>
+                    <Flex flexDirection="column" gap="0.5em">
+                        <Paragraph>Your version of Vesktop is outdated!</Paragraph>
+                        <Button variant="link" onClick={() => VesktopNative.app.openUpdater()}>Open Vesktop Updater</Button>
+                    </Flex>
+                </Card>
+            )}
+        </Flex>
+    );
+}
+
 function Updater() {
     const settings = useSettings(["autoUpdate", "autoUpdateNotification"]);
 
@@ -45,6 +79,8 @@ function Updater() {
 
     return (
         <SettingsTab>
+            <VesktopSection />
+
             <FormSwitch
                 title="Automatically update"
                 description="Automatically update Vencord without confirmation prompt"
@@ -59,7 +95,7 @@ function Updater() {
                 disabled={!settings.autoUpdate}
             />
 
-            <Forms.FormTitle tag="h5">Repo</Forms.FormTitle>
+            <Forms.FormTitle tag="h5" className={Margins.top20}>Repo</Forms.FormTitle>
 
             <Forms.FormText>
                 {repoPending
@@ -76,7 +112,7 @@ function Updater() {
                 (<HashLink hash={gitHash} repo={repo} disabled={repoPending} />)
             </Forms.FormText>
 
-            <Divider className={Margins.top8 + " " + Margins.bottom8} />
+            <Divider className={classes(Margins.top16, Margins.bottom16)} />
 
             <Forms.FormTitle tag="h5">Updates</Forms.FormTitle>