Fix Donor Card Colors
This commit is contained in:
parent
708fb53a60
commit
c710fffa2f
4 changed files with 30 additions and 8 deletions
|
|
@ -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" />
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -136,7 +136,7 @@ function EquicordSettings() {
|
|||
backgroundImage={DONOR_BACKGROUND_IMAGE}
|
||||
backgroundColor="#ED87A9"
|
||||
>
|
||||
<DonateButtonComponent />
|
||||
<DonateButtonComponent donated={true} />
|
||||
</SpecialCard>
|
||||
) : (
|
||||
<SpecialCard
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue