Refactor color scheme in member-related pages to use brand colors instead of CSS variables for consistency and improved readability

This commit is contained in:
2026-01-13 22:01:33 -06:00
parent 30d32d8823
commit e04d39fe17
61 changed files with 731 additions and 735 deletions

View File

@@ -36,7 +36,7 @@ const PaymentSuccess = () => {
<h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Payment Successful!
</h1>
<p className="text-lg text-[var(--purple-lavender)] max-w-2xl mx-auto mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-lg text-brand-purple max-w-2xl mx-auto mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Thank you for your payment. Your LOAF membership is now active!
</p>
</div>
@@ -55,25 +55,25 @@ const PaymentSuccess = () => {
<ul className="space-y-3">
<li className="flex items-start gap-3">
<CheckCircle className="h-5 w-5 text-[var(--green-light)] flex-shrink-0 mt-0.5" />
<span className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<span className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Your membership is now active and you have full access to all member benefits
</span>
</li>
<li className="flex items-start gap-3">
<CheckCircle className="h-5 w-5 text-[var(--green-light)] flex-shrink-0 mt-0.5" />
<span className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<span className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
You can now RSVP and attend members-only events
</span>
</li>
<li className="flex items-start gap-3">
<CheckCircle className="h-5 w-5 text-[var(--green-light)] flex-shrink-0 mt-0.5" />
<span className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<span className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Access the community directory and connect with other members
</span>
</li>
<li className="flex items-start gap-3">
<CheckCircle className="h-5 w-5 text-[var(--green-light)] flex-shrink-0 mt-0.5" />
<span className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<span className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
You'll receive our newsletter with exclusive updates and announcements
</span>
</li>
@@ -82,11 +82,11 @@ const PaymentSuccess = () => {
{sessionId && (
<div className="bg-[var(--neutral-800)]/20 p-4 rounded-xl">
<p className="text-sm text-[var(--purple-lavender)] text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-sm text-brand-purple text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<span className="font-medium text-[var(--purple-ink)]">Transaction ID:</span>{' '}
<span className="font-mono text-xs">{sessionId}</span>
</p>
<p className="text-xs text-[var(--purple-lavender)] text-center mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-xs text-brand-purple text-center mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
A confirmation email has been sent to your registered email address.
</p>
</div>
@@ -106,7 +106,7 @@ const PaymentSuccess = () => {
<Button
onClick={() => navigate('/events')}
variant="outline"
className="border-2 border-[var(--purple-lavender)] text-[var(--purple-lavender)] hover:bg-[var(--purple-lavender)] hover:text-white rounded-full px-8 py-6 text-lg font-semibold"
className="border-2 border-brand-purple text-brand-purple hover:bg-brand-purple hover:text-white rounded-full px-8 py-6 text-lg font-semibold"
data-testid="browse-events-button"
>
<Calendar className="mr-2 h-5 w-5" />
@@ -117,11 +117,11 @@ const PaymentSuccess = () => {
{/* Additional Info */}
<div className="text-center">
<p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Need help? Contact us at{' '}
<a
href="mailto:support@loaf.org"
className="text-[var(--orange-light)] hover:text-[var(--purple-lavender)] font-medium"
className="text-[var(--orange-light)] hover:text-brand-purple font-medium"
>
support@loaf.org
</a>