Donor Badges && Add donate info to settings

1 files changed, 25 insertions, 3 deletions

diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx
index 363b1df..fc25901 100644
--- a/src/components/Settings.tsx
+++ b/src/components/Settings.tsx
@@ -20,7 +20,8 @@ import { useSettings } from "../api/settings";
 import { ChangeList } from "../utils/ChangeList";
 import IpcEvents from "../utils/IpcEvents";
 import { useAwaiter } from "../utils/misc";
-import { Alerts, Button, Forms, Margins, Parser, React, Switch } from "../webpack/common";
+import { Alerts, Button, Card, Forms, Margins, Parser, React, Switch } from "../webpack/common";
+import DonateButton from "./DonateButton";
 import ErrorBoundary from "./ErrorBoundary";
 import { Flex } from "./Flex";
 import { handleComponentFailed } from "./handleComponentFailed";
@@ -52,15 +53,36 @@ export default ErrorBoundary.wrap(function Settings() {
 
     return (
         <Forms.FormSection tag="h1" title="Vencord">
+            <Card style={{
+                padding: "1em",
+                display: "flex",
+                flexDirection: "row",
+                marginBottom: "1em"
+            }}>
+                <div>
+                    <Forms.FormTitle tag="h5">Support the Project</Forms.FormTitle>
+                    <Forms.FormText>
+                        Please consider supporting the Development of Vencord by donating!
+                    </Forms.FormText>
+                    <DonateButton style={{ transform: "translateX(-1em)" }} />
+                </div>
+                <img
+                    role="presentation"
+                    src="https://cdn.discordapp.com/emojis/1026533090627174460.png"
+                    alt=""
+                    style={{ marginLeft: "auto", transform: "rotate(10deg)" }}
+                />
+            </Card>
+
             <Forms.FormTitle tag="h5">
                 Settings
             </Forms.FormTitle>
 
-            <Forms.FormText>
+            <Forms.FormText className={Margins.marginBottom8}>
                 Settings Directory: <code style={{ userSelect: "text", cursor: "text" }}>{settingsDir}</code>
             </Forms.FormText>
 
-            {!IS_WEB && <Flex className={Margins.marginBottom20} style={{ marginTop: 8 }}>
+            {!IS_WEB && <Flex className={Margins.marginBottom20}>
                 <Button
                     onClick={() => window.DiscordNative.app.relaunch()}
                     size={Button.Sizes.SMALL}