From 3bf1d0833b4074fe945ef63fa1a3ae45580ecb8c Mon Sep 17 00:00:00 2001
From: khcrysalis <97859147+khcrysalis@users.noreply.github.com>
Date: Fri, 22 Nov 2024 00:50:38 -0800
Subject: [PATCH] feat: new donate card

---
 src/components/DonateButton.tsx               | 10 ++-
 .../VencordSettings/SpecialCard.tsx           | 29 +++++---
 src/components/VencordSettings/VencordTab.tsx | 66 ++++++++-----------
 .../VencordSettings/specialCard.css           |  3 +-
 4 files changed, 56 insertions(+), 52 deletions(-)

diff --git a/src/components/DonateButton.tsx b/src/components/DonateButton.tsx
index c027fcf27..d042dc04d 100644
--- a/src/components/DonateButton.tsx
+++ b/src/components/DonateButton.tsx
@@ -20,12 +20,16 @@ import { Button } from "@webpack/common";
 
 import { Heart } from "./Heart";
 
-export default function DonateButton(props: any) {
+export default function DonateButton({
+    look = Button.Looks.LINK,
+    color = Button.Colors.TRANSPARENT,
+    ...props
+}) {
     return (
         <Button
             {...props}
-            look={Button.Looks.LINK}
-            color={Button.Colors.TRANSPARENT}
+            look={look}
+            color={color}
             onClick={() => VencordNative.native.openExternal("https://github.com/sponsors/Vendicated")}
         >
             <Heart />
diff --git a/src/components/VencordSettings/SpecialCard.tsx b/src/components/VencordSettings/SpecialCard.tsx
index c36a2d839..b20e8b365 100644
--- a/src/components/VencordSettings/SpecialCard.tsx
+++ b/src/components/VencordSettings/SpecialCard.tsx
@@ -20,12 +20,13 @@ import "./specialCard.css";
 
 import { classNameFactory } from "@api/Styles";
 import { Card, Forms, React } from "@webpack/common";
+import type { PropsWithChildren } from "react";
 
 const cl = classNameFactory("vc-special-");
 
 interface StyledCardProps {
     title: string;
-    subtitle: string;
+    subtitle?: string;
     description: string;
     cardImage?: string;
     backgroundImage?: string;
@@ -34,7 +35,7 @@ interface StyledCardProps {
     buttonOnClick?: () => void;
 }
 
-export function SpecialCard({ title, subtitle, description, cardImage, backgroundImage, backgroundColor, buttonTitle, buttonOnClick: onClick }: StyledCardProps) {
+export function SpecialCard({ title, subtitle, description, cardImage, backgroundImage, backgroundColor, buttonTitle, buttonOnClick: onClick, children }: PropsWithChildren<StyledCardProps>) {
     const cardStyle: React.CSSProperties = {
         backgroundColor: backgroundColor || "#9c85ef",
         backgroundImage: `url(${backgroundImage || ""})`,
@@ -61,15 +62,23 @@ export function SpecialCard({ title, subtitle, description, cardImage, backgroun
                             </React.Fragment>
                         ))}
                     </Forms.FormText>
+
+                    {children}
                 </div>
-                <div className={cl("image-container")}>
-                    <img
-                        role="presentation"
-                        src={cardImage}
-                        alt=""
-                        className={cl("image")}
-                    />
-                </div>
+                {
+                    cardImage && (
+                        <>
+                            <div className={cl("image-container")}>
+                                <img
+                                    role="presentation"
+                                    src={cardImage}
+                                    alt=""
+                                    className={cl("image")}
+                                />
+                            </div>
+                        </>
+                    )
+                }
             </div>
             {
                 buttonTitle && (
diff --git a/src/components/VencordSettings/VencordTab.tsx b/src/components/VencordSettings/VencordTab.tsx
index b87d6286d..977468695 100644
--- a/src/components/VencordSettings/VencordTab.tsx
+++ b/src/components/VencordSettings/VencordTab.tsx
@@ -108,18 +108,37 @@ function VencordSettings() {
     return (
         <SettingsTab title="Vencord Settings">
             {
-                isDonor(user?.id) ? <SpecialCard
-                    title="Donations"
-                    subtitle="Thank you for donating!"
-                    description={"People will be able to see your requested badge through Vencord, you're able to request to change it any time.\n\nDon't worry about your perks running out if you stop your subscription, you're keeping your perks forever!"}
-                    cardImage={VENNIE_DONATOR_IMAGE}
-                    backgroundImage={"https://github.com/user-attachments/assets/2aa0826f-faa4-4bb0-8b59-ca8859f5c7f1"}
-                    backgroundColor="#ED87A9"
-                /> : <DonateCard image={donateImage} />
+                // TODO: change backgroundimage to svg instead
+                isDonor("0")
+                    ?
+                    <SpecialCard
+                        title="Donations"
+                        subtitle="Thank you for donating!"
+                        description={"People will be able to see your requested badge through Vencord, you're able to request to change it any time.\n\nDon't worry about your perks running out if you stop your subscription, you're keeping your perks forever!"}
+                        cardImage={VENNIE_DONATOR_IMAGE}
+                        backgroundImage={"https://github.com/user-attachments/assets/2aa0826f-faa4-4bb0-8b59-ca8859f5c7f1"}
+                        backgroundColor="#ED87A9"
+                    />
+                    :
+                    <SpecialCard
+                        title="Support the Project"
+                        description={"Please consider supporting the development of Vencord by donating!"}
+                        cardImage={donateImage}
+                        backgroundImage={"https://github.com/user-attachments/assets/2aa0826f-faa4-4bb0-8b59-ca8859f5c7f1"}
+                        backgroundColor="#c3a3ce"
+                    >
+                        <DonateButton
+                            look={Button.Looks.FILLED}
+                            color={Button.Colors.WHITE}
+                            style={{ marginTop: "1em" }}
+                        />
+                    </SpecialCard>
             }
             {
-                isPluginDev(user?.id)
-                && <SpecialCard
+                // TODO: change backgroundimage to svg instead
+                isPluginDev("0")
+                &&
+                <SpecialCard
                     title="Contributions"
                     subtitle="Thank you for contributing!"
                     description={"Since you've contributed to Vencord and added yourself to contributors list, you now have a cool new badge!\n\nTo avoid pesky help from people you don't know, theres gonna be a warning on your profile to not ask for support in your DMs."}
@@ -270,33 +289,6 @@ function VencordSettings() {
     );
 }
 
-interface DonateCardProps {
-    image: string;
-}
-
-function DonateCard({ image }: DonateCardProps) {
-    return (
-        <Card className={cl("card", "donate")}>
-            <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={image}
-                alt=""
-                height={128}
-                style={{
-                    imageRendering: image === SHIGGY_DONATE_IMAGE ? "pixelated" : void 0,
-                    marginLeft: "auto",
-                    transform: image === DEFAULT_DONATE_IMAGE ? "rotate(10deg)" : void 0
-                }}
-            />
-        </Card>
-    );
-}
-
 function isDonor(userId: string): boolean {
     const donorBadges = (Plugins.BadgeAPI as unknown as typeof import("../../plugins/_api/badges").default).getDonorBadges(userId);
     return GuildMemberStore.getMember(VENCORD_GUILD_ID, userId)?.roles.includes(DONOR_ROLE_ID) || !!donorBadges;
diff --git a/src/components/VencordSettings/specialCard.css b/src/components/VencordSettings/specialCard.css
index 7a284f0cd..e2fcfb71c 100644
--- a/src/components/VencordSettings/specialCard.css
+++ b/src/components/VencordSettings/specialCard.css
@@ -64,6 +64,5 @@
 }
 
 .vc-special-image {
-    width: 65px;
-    height: 65px;
+    width: 65%;
 }
\ No newline at end of file