andika/membership-fe
3
1
Fork 1
Code Issues 17 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: update styles in MembersDirectory and NewsletterArchive for consistency and improved theming

Browse Source 
- Updated color classes to use CSS variables for better maintainability and theming.
- Refactored component styles in MembersDirectory.js to enhance visual consistency.
- Adjusted loading states and empty states in NewsletterArchive.js for improved user experience.
- Added new brand colors to tailwind.config.js for future use.
This commit is contained in:
kayela
2026-01-12 20:10:33 -06:00
parent a93e2aa863
commit 7694532d53
77 changed files with 2519 additions and 2338 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/pages/DonationSuccess.js
View File

@@ -11,12 +11,12 @@ const DonationSuccess = () => {
const loafHearts = `${process.env.PUBLIC_URL}/loaf-hearts.png`;
return (
<div className="min-h-screen bg-white">
<div className="min-h-screen bg-background">
<PublicNavbar />
<main className="bg-gradient-to-b from-white to-[#f1eef9] px-6 py-20">
<main className="bg-gradient-to-b from-white to-var(--lavender-300) px-6 py-20">
<div className="max-w-2xl mx-auto">
<Card className="p-6 sm:p-8 md:p-12 bg-white rounded-2xl border-2 border-[#ddd8eb] shadow-xl text-center">
<Card className="p-6 sm:p-8 md:p-12 bg-background rounded-2xl border-2 border-var(--neutral-800) shadow-xl text-center">
{/* Success Icon */}
<div className="flex justify-center mb-4">
<img
@@ -26,34 +26,34 @@ const DonationSuccess = () => {
onError={(e) => e.target.style.display = 'none'}
/>
</div>
<div className="inline-flex items-center justify-center w-20 h-20 bg-[#81B29A]/10 rounded-full mb-6">
<CheckCircle className="h-12 w-12 text-[#81B29A]" />
<div className="inline-flex items-center justify-center w-20 h-20 bg-var(--green-light)/10 rounded-full mb-6">
<CheckCircle className="h-12 w-12 text-var(--green-light)" />
</div>
{/* Title */}
<h1 className="text-2xl sm:text-3xl md:text-4xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
<h1 className="text-2xl sm:text-3xl md:text-4xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Thank You for Your Donation!
</h1>
{/* Message */}
<div className="space-y-4 mb-8">
<p className="text-xl text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-xl text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Your generous contribution helps support our community and continue our mission.
</p>
<div className="bg-gradient-to-r from-[#f1eef9] to-[#DDD8EB]/30 rounded-2xl p-6 border-2 border-[#ddd8eb]">
<div className="flex items-center justify-center gap-2 text-[#ff9e77] mb-2">
<div className="bg-gradient-to-r from-var(--lavender-300) to-var(--neutral-800)/30 rounded-2xl p-6 border-2 border-var(--neutral-800)">
<div className="flex items-center justify-center gap-2 text-var(--orange-light) mb-2">
<Heart className="h-6 w-6" />
<span className="text-lg font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
Your Support Makes a Difference
</span>
</div>
<p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
A receipt for your donation has been sent to your email address.
</p>
</div>
<p className="text-base text-[#664fa3] pt-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-base text-var(--purple-lavender) pt-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
We deeply appreciate your support and commitment to LOAF's mission of building a vibrant, inclusive community.
</p>
</div>
@@ -62,7 +62,7 @@ const DonationSuccess = () => {
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Button
onClick={() => navigate('/')}
className="bg-[#664fa3] text-white hover:bg-[#422268] rounded-full px-8 py-6 text-lg font-medium shadow-lg"
className="bg-var(--purple-lavender) text-white hover:bg-var(--purple-ink) rounded-full px-8 py-6 text-lg font-medium shadow-lg"
style={{ fontFamily: "'Inter', sans-serif" }}
>
Return to Home
@@ -70,7 +70,7 @@ const DonationSuccess = () => {
<Button
onClick={() => navigate('/donate')}
variant="outline"
className="border-2 border-[#664fa3] text-[#664fa3] hover:bg-[#DDD8EB]/20 rounded-full px-8 py-6 text-lg font-medium"
className="border-2 border-var(--purple-lavender) text-var(--purple-lavender) hover:bg-var(--neutral-800)/20 rounded-full px-8 py-6 text-lg font-medium"
style={{ fontFamily: "'Inter', sans-serif" }}
>
Make Another Donation
@@ -80,12 +80,12 @@ const DonationSuccess = () => {
{/* Additional Info */}
<div className="mt-12 text-center">
<p className="text-sm text-[#664fa3] mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-sm text-var(--purple-lavender) mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Have questions about your donation?
</p>
<a
href="mailto:support@loaf.org"
className="text-[#ff9e77] hover:text-[#664fa3] font-medium transition-colors"
className="text-var(--orange-light) hover:text-var(--purple-lavender) font-medium transition-colors"
style={{ fontFamily: "'Inter', sans-serif" }}
>
Contact us at support@loaf.org