Refactor Members Directory and Newsletter Archive styles to use new color palette
- Updated color classes in MembersDirectory.js to use new color variables for borders, backgrounds, and text. - Enhanced visual consistency by replacing hardcoded colors with Tailwind CSS color utilities. - Modified NewsletterArchive.js to align with the new design system, ensuring a cohesive look across components. - Added new color variables in tailwind.config.js for better maintainability and scalability.
This commit is contained in:
@@ -58,7 +58,7 @@ const Donate = () => {
|
||||
<div className="min-h-screen">
|
||||
<PublicNavbar />
|
||||
|
||||
<main className="bg-gradient-to-bl from-[#F9FAFB] to-[#DDD8EB] px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-8 sm:py-10 md:py-12">
|
||||
<main className="bg-gradient-to-bl from-[#F9FAFB] to-chart-6 px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-8 sm:py-10 md:py-12">
|
||||
{/* Hero Section */}
|
||||
<section className="py-12">
|
||||
<div className="max-w-4xl mx-auto text-center h-full">
|
||||
@@ -79,96 +79,96 @@ const Donate = () => {
|
||||
<div className="py-12">
|
||||
<div className='grid grid-cols-1 items-stretch lg:grid-cols-[2fr_1fr] gap-8 lg:max-h-[450px]'>
|
||||
|
||||
{/* Donation Amount Buttons */}
|
||||
<section className="flex flex-col h-full">
|
||||
<div className="mx-auto flex-1 w-full h-full">
|
||||
<Card className="p-8 bg-white rounded-3xl w-full h-full content-center">
|
||||
<div className="flex items-center gap-4 mb-6">
|
||||
<CreditCard className="size-24 text-[#664fa3]" />
|
||||
<h2 className="text-3xl font-bold text-[#48286e]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
Select Your Donation Amount
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{/* Donation Buttons Grid */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
|
||||
{[25, 50, 100, 250].map(amount => (
|
||||
<Button
|
||||
key={amount}
|
||||
onClick={() => handleDonateAmount(amount * 100)}
|
||||
disabled={processingAmount === amount * 100}
|
||||
className="bg-[#664fa3] hover:bg-[#48286e] text-white text-xl py-8 rounded-full disabled:opacity-50"
|
||||
>
|
||||
{processingAmount === amount * 100 ? (
|
||||
<Loader2 className="h-6 w-6 animate-spin" />
|
||||
) : (
|
||||
`$${amount}`
|
||||
)}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Custom Amount Button */}
|
||||
<Button
|
||||
onClick={() => setCustomAmountDialogOpen(true)}
|
||||
disabled={processingAmount !== null}
|
||||
className="w-full bg-[#664fa3] hover:bg-[#48286e] text-white text-xl py-8 rounded-full flex items-center justify-center gap-2"
|
||||
>
|
||||
<Heart className="h-6 w-6" />
|
||||
Donate Any Amount
|
||||
</Button>
|
||||
|
||||
<p className="text-sm text-[#664fa3] text-center mt-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
Secure donation processing powered by Stripe
|
||||
</p>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Alternative Payment Methods */}
|
||||
<section className="flex flex-col">
|
||||
<div className="max-w-6xl mx-auto w-full">
|
||||
<div className="flex flex-col gap-8 w-full">
|
||||
{/* Mail Check */}
|
||||
<Card className="p-8 bg-white rounded-3xl flex gap-4 items-center flex-1">
|
||||
<Mail className="size-24 text-[#664fa3]" />
|
||||
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold text-[#48286e] 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" }}>
|
||||
Our mailing address for checks:<br />
|
||||
<span className="font-semibold">LOAF</span><br />
|
||||
P.O. Box 7207<br />
|
||||
Houston, Texas 77248-7207
|
||||
</p>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Zelle */}
|
||||
<Card className="p-8 bg-white rounded-3xl flex gap-4 items-center flex-1">
|
||||
<div className="w-44">
|
||||
<img src={zelleLogo} alt="Zelle" className=" w-32" onError={(e) => e.target.style.display = 'none'} />
|
||||
{/* Donation Amount Buttons */}
|
||||
<section className="flex flex-col h-full">
|
||||
<div className="mx-auto flex-1 w-full h-full">
|
||||
<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" }}>
|
||||
Select Your Donation Amount
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold text-[#48286e] 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" }}>
|
||||
If your bank allows the use of Zelle, please feel free to send money to:
|
||||
</p>
|
||||
<a href="mailto:LOAFHoustonTX@gmail.com"
|
||||
className="text-[#664fa3] text-lg font-bold underline hover:text-[#48286e] transition-colors"
|
||||
style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
LOAFHoustonTX@gmail.com
|
||||
</a>
|
||||
{/* Donation Buttons Grid */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
|
||||
{[25, 50, 100, 250].map(amount => (
|
||||
<Button
|
||||
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"
|
||||
>
|
||||
{processingAmount === amount * 100 ? (
|
||||
<Loader2 className="h-6 w-6 animate-spin" />
|
||||
) : (
|
||||
`$${amount}`
|
||||
)}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Custom Amount Button */}
|
||||
<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"
|
||||
>
|
||||
<Heart className="h-6 w-6" />
|
||||
Donate Any Amount
|
||||
</Button>
|
||||
|
||||
<p className="text-sm text-muted-foreground text-center mt-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
Secure donation processing powered by Stripe
|
||||
</p>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
{/* Alternative Payment Methods */}
|
||||
<section className="flex flex-col">
|
||||
<div className="max-w-6xl mx-auto w-full">
|
||||
<div className="flex flex-col gap-8 w-full">
|
||||
{/* Mail Check */}
|
||||
<Card className="p-8 bg-background rounded-3xl flex gap-4 items-center flex-1">
|
||||
<Mail className="size-24 text-muted-foreground" />
|
||||
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold text-[#48286e] 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" }}>
|
||||
Our mailing address for checks:<br />
|
||||
<span className="font-semibold">LOAF</span><br />
|
||||
P.O. Box 7207<br />
|
||||
Houston, Texas 77248-7207
|
||||
</p>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Zelle */}
|
||||
<Card className="p-8 bg-background rounded-3xl flex gap-4 items-center flex-1">
|
||||
<div className="w-44">
|
||||
<img src={zelleLogo} alt="Zelle" className=" w-32" onError={(e) => e.target.style.display = 'none'} />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold text-[#48286e] 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" }}>
|
||||
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"
|
||||
style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
LOAFHoustonTX@gmail.com
|
||||
</a>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@@ -179,23 +179,23 @@ const Donate = () => {
|
||||
|
||||
{/* Custom Amount Dialog */}
|
||||
<Dialog open={customAmountDialogOpen} onOpenChange={setCustomAmountDialogOpen}>
|
||||
<DialogContent className="sm:max-w-[450px] bg-white rounded-3xl">
|
||||
<DialogContent className="sm:max-w-[450px] bg-background rounded-3xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-2xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
<DialogTitle className="text-2xl font-semibold text-primary" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
Enter Donation Amount
|
||||
</DialogTitle>
|
||||
<DialogDescription className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
<DialogDescription className="text-muted-foreground" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
Choose how much you'd like to donate to support our community
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4 py-4">
|
||||
<div>
|
||||
<Label htmlFor="customAmount" className="text-[#422268] font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
<Label htmlFor="customAmount" className="text-primary font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
Amount (USD)
|
||||
</Label>
|
||||
<div className="relative mt-2">
|
||||
<span className="absolute left-4 top-1/2 transform -translate-y-1/2 text-[#664fa3] text-xl font-semibold">
|
||||
<span className="absolute left-4 top-1/2 transform -translate-y-1/2 text-muted-foreground text-xl font-semibold">
|
||||
$
|
||||
</span>
|
||||
<Input
|
||||
@@ -206,7 +206,7 @@ const Donate = () => {
|
||||
value={customAmount}
|
||||
onChange={(e) => setCustomAmount(e.target.value)}
|
||||
placeholder="50.00"
|
||||
className="pl-10 h-14 text-xl border-2 border-[#ddd8eb] focus:border-[#664fa3] rounded-xl"
|
||||
className="pl-10 h-14 text-xl border-2 border-chart-6 focus:border-muted-foreground rounded-xl"
|
||||
onKeyPress={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
handleCustomDonate();
|
||||
@@ -214,13 +214,13 @@ const Donate = () => {
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-sm text-[#664fa3] mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
<p className="text-sm text-muted-foreground mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
Minimum donation: $1.00
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-[#f1eef9] rounded-lg p-4">
|
||||
<p className="text-sm text-[#422268] text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
<div className="bg-muted rounded-lg p-4">
|
||||
<p className="text-sm text-primary text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
<strong>Thank you for supporting LOAF!</strong><br />
|
||||
Your donation helps us continue our mission and provide meaningful experiences for our community.
|
||||
</p>
|
||||
@@ -232,14 +232,14 @@ const Donate = () => {
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => setCustomAmountDialogOpen(false)}
|
||||
className="rounded-full border-2 border-[#ddd8eb]"
|
||||
className="rounded-full border-2 border-chart-6"
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={handleCustomDonate}
|
||||
className="bg-[#664fa3] text-white hover:bg-[#48286e] rounded-full"
|
||||
className="bg-muted-foreground text-white hover:bg-[#48286e] rounded-full"
|
||||
>
|
||||
Continue to Payment
|
||||
</Button>
|
||||
|
||||
Reference in New Issue
Block a user