mirrors/Vencord
1
0
Fork 1
mirror of https://github.com/Vendicated/Vencord.git synced 2025-01-25 08:46:25 +00:00
Code Activity

feat: new donate card

Browse source
This commit is contained in:
khcrysalis 2024-11-22 00:50:38 -08:00
parent 661a0157a8
commit 3bf1d0833b
4 changed files with 56 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/components/DonateButton.tsx
View file

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

29
src/components/VencordSettings/SpecialCard.tsx
View file

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

66
src/components/VencordSettings/VencordTab.tsx
View file

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

3
src/components/VencordSettings/specialCard.css
View file

@ -64,6 +64,5 @@
}
.vc-special-image {
width: 65px;
height: 65px;
width: 65%;
}