Fix Donor Card Colors

This commit is contained in:
thororen1234 2025-12-06 22:48:54 -05:00
parent 708fb53a60
commit c710fffa2f
No known key found for this signature in database
4 changed files with 30 additions and 8 deletions

View file

@ -25,6 +25,7 @@ import { showToast } from "@webpack/common";
export function DonateButton({
equicord = false,
className,
...props
}: Partial<ButtonProps> & { equicord?: boolean; }) {
const link = equicord ? "https://github.com/sponsors/thororen1234" : "https://github.com/sponsors/Vendicated";
@ -35,7 +36,7 @@ export function DonateButton({
size="medium"
type="button"
onClick={() => VencordNative.native.openExternal(link)}
className="vc-donate-button"
className={className || "vc-donate-button"}
>
<Heart />
Donate
@ -44,6 +45,7 @@ export function DonateButton({
}
export function InviteButton({
className,
...props
}: Partial<ButtonProps>) {
return (
@ -58,7 +60,7 @@ export function InviteButton({
showToast("Invalid or expired invite"),
);
}}
className="vc-invite-button"
className={className || "vc-donate-button"}
>
Invite
<OpenExternalIcon className="vc-invite-link" />

View file

@ -2,14 +2,28 @@
.vc-donate-button {
overflow: visible !important;
color: black;
background-color: color-mix(in srgb, #c3a3ce 15%, pink);
background-color: color-mix(in srgb, #ED87A9 25%, pink);
}
.vc-invite-button:hover,
.vc-donate-button:hover {
overflow: visible !important;
color: black;
background-color: color-mix(in srgb, hotpink 15%, pink);
background-color: color-mix(in srgb, #ED87A9 50%, pink);
}
.vc-invite-support-button,
.vc-donate-support-button {
overflow: visible !important;
color: black;
background-color: color-mix(in srgb, #c3a3ce 25%, rgb(240, 178, 240));
}
.vc-invite-support-button:hover,
.vc-donate-support-button:hover {
overflow: visible !important;
color: black;
background-color: color-mix(in srgb, #c3a3ce 50%, rgb(240, 178, 240));
}
.vc-invite-link {
@ -40,14 +54,18 @@
.vc-invite-button .vc-invite-link,
.vc-contrib-button .vc-contrib-github,
.vc-donate-button .vc-heart-icon {
.vc-donate-button .vc-heart-icon,
.vc-invite-support-button .vc-invite-link,
.vc-donate-support-button .vc-heart-icon {
transition: transform 0.3s;
margin-right: 0.5em;
}
.vc-invite-button:hover .vc-invite-link,
.vc-contrib-button:hover .vc-contrib-github,
.vc-donate-button:hover .vc-heart-icon {
.vc-donate-button:hover .vc-heart-icon,
.vc-invite-support-button:hover .vc-invite-link,
.vc-donate-support-button:hover .vc-heart-icon {
transform: scale(1.1);
z-index: 10;
position: relative;

View file

@ -15,13 +15,15 @@ export const isDonor = (userId: string) => !!(
|| GuildMemberStore?.getMember(VC_GUILD_ID, userId)?.roles.includes(DONOR_ROLE_ID)
);
export function DonateButtonComponent() {
export function DonateButtonComponent({ donated = false }) {
return (
<Flex>
<DonateButton
equicord={true}
className={!donated ? "vc-donate-support-button" : ""}
style={{ marginTop: "1em" }} />
<InviteButton
className={!donated ? "vc-invite-support-button" : ""}
style={{ marginTop: "1em" }} />
</Flex>
);

View file

@ -136,7 +136,7 @@ function EquicordSettings() {
backgroundImage={DONOR_BACKGROUND_IMAGE}
backgroundColor="#ED87A9"
>
<DonateButtonComponent />
<DonateButtonComponent donated={true} />
</SpecialCard>
) : (
<SpecialCard