Refactor color classes to use new success color variable across admin and member pages; update Tailwind config to include success color definition.

This commit is contained in:
2026-01-09 13:46:01 -06:00
parent 4ba44d8997
commit 727c2bc710
56 changed files with 491 additions and 358 deletions

View File

@@ -65,10 +65,10 @@ const Donate = () => {
<div className="flex justify-center mb-4">
<img src={loafHearts} alt="Hearts" className="w-32 h-auto" onError={(e) => e.target.style.display = 'none'} />
</div>
<h1 className="text-3xl sm:text-4xl md:text-5xl font-bold text-[#48286e] mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
<h1 className="text-3xl sm:text-4xl md:text-5xl font-bold text-foreground mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
Donate
</h1>
<p className="text-xl text-[#48286e] font-medium" style={{ fontFamily: "'Poppins', sans-serif" }}>
<p className="text-xl text-foreground font-medium" style={{ fontFamily: "'Poppins', sans-serif" }}>
We really appreciate your donations. You can make your donation online
or send a check by mail.
</p>
@@ -85,7 +85,7 @@ const Donate = () => {
<Card className="p-8 bg-background rounded-3xl w-full h-full content-center">
<div className="flex items-center gap-4 mb-6">
<CreditCard className="size-24 text-muted-foreground" />
<h2 className="text-3xl font-bold text-[#48286e]" style={{ fontFamily: "'Inter', sans-serif" }}>
<h2 className="text-3xl font-bold text-foreground" style={{ fontFamily: "'Inter', sans-serif" }}>
Select Your Donation Amount
</h2>
</div>
@@ -97,7 +97,7 @@ const Donate = () => {
key={amount}
onClick={() => handleDonateAmount(amount * 100)}
disabled={processingAmount === amount * 100}
className="bg-muted-foreground hover:bg-[#48286e] text-white text-xl py-8 rounded-full disabled:opacity-50"
className="bg-muted-foreground hover:bg-foreground text-white text-xl py-8 rounded-full disabled:opacity-50"
>
{processingAmount === amount * 100 ? (
<Loader2 className="h-6 w-6 animate-spin" />
@@ -112,7 +112,7 @@ const Donate = () => {
<Button
onClick={() => setCustomAmountDialogOpen(true)}
disabled={processingAmount !== null}
className="w-full bg-muted-foreground hover:bg-[#48286e] text-white text-xl py-8 rounded-full flex items-center justify-center gap-2"
className="w-full bg-muted-foreground hover:bg-foreground text-white text-xl py-8 rounded-full flex items-center justify-center gap-2"
>
<Heart className="h-6 w-6" />
Donate Any Amount
@@ -134,10 +134,10 @@ const Donate = () => {
<Mail className="size-24 text-muted-foreground" />
<div>
<h3 className="text-2xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
<h3 className="text-2xl font-bold text-foreground mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Mail a Check
</h3>
<p className="text-lg text-[#48286e] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-lg text-foreground leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Our mailing address for checks:<br />
<span className="font-semibold">LOAF</span><br />
P.O. Box 7207<br />
@@ -153,14 +153,14 @@ const Donate = () => {
</div>
<div>
<h3 className="text-2xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
<h3 className="text-2xl font-bold text-foreground mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Pay with Zelle
</h3>
<p className="text-lg text-[#48286e] leading-relaxed mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-lg text-foreground leading-relaxed mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
If your bank allows the use of Zelle, please feel free to send money to:
</p>
<a href="mailto:LOAFHoustonTX@gmail.com"
className="text-muted-foreground text-lg font-bold underline hover:text-[#48286e] transition-colors"
className="text-muted-foreground text-lg font-bold underline hover:text-foreground transition-colors"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
LOAFHoustonTX@gmail.com
</a>
@@ -239,7 +239,7 @@ const Donate = () => {
<Button
type="button"
onClick={handleCustomDonate}
className="bg-muted-foreground text-white hover:bg-[#48286e] rounded-full"
className="bg-muted-foreground text-white hover:bg-foreground rounded-full"
>
Continue to Payment
</Button>