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

42
src/pages/PaymentCancel.js
View File

@@ -9,7 +9,7 @@ const PaymentCancel = () => {
const navigate = useNavigate();
return (
<div className="min-h-screen bg-white">
<div className="min-h-screen bg-background">
<Navbar />
<div className="max-w-4xl mx-auto px-6 py-12">
@@ -22,48 +22,48 @@ const PaymentCancel = () => {
</div>
{/* Cancel Message */}
<h1 className="text-4xl md:text-5xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
<h1 className="text-4xl md:text-5xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Payment Cancelled
</h1>
<p className="text-lg text-[#664fa3] max-w-2xl mx-auto mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-lg text-var(--purple-lavender) max-w-2xl mx-auto mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Your payment was cancelled. No charges have been made to your account.
</p>
</div>
{/* Info Card */}
<Card className="p-8 bg-white rounded-2xl border border-[#ddd8eb] shadow-lg mb-8">
<h2 className="text-2xl font-semibold text-[#422268] mb-6 text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
<Card className="p-8 bg-background rounded-2xl border border-var(--neutral-800) shadow-lg mb-8">
<h2 className="text-2xl font-semibold text-var(--purple-ink) mb-6 text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
What Happened?
</h2>
<div className="space-y-6 mb-8">
<p className="text-[#664fa3] text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-var(--purple-lavender) text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
You cancelled the payment process or closed the checkout page. Your membership has not been activated yet.
</p>
<div className="bg-[#DDD8EB]/20 p-6 rounded-xl">
<h3 className="text-lg font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
<div className="bg-var(--neutral-800)/20 p-6 rounded-xl">
<h3 className="text-lg font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Ready to Complete Your Membership?
</h3>
<ul className="space-y-3">
<li className="flex items-start gap-3">
<CreditCard className="h-5 w-5 text-[#664fa3] flex-shrink-0 mt-0.5" />
<span className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<CreditCard className="h-5 w-5 text-var(--purple-lavender) flex-shrink-0 mt-0.5" />
<span className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Return to the plans page to complete your subscription
</span>
</li>
<li className="flex items-start gap-3">
<Mail className="h-5 w-5 text-[#664fa3] flex-shrink-0 mt-0.5" />
<span className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<Mail className="h-5 w-5 text-var(--purple-lavender) flex-shrink-0 mt-0.5" />
<span className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Contact us if you experienced any issues during checkout
</span>
</li>
</ul>
</div>
<div className="bg-[#f1eef9] p-6 rounded-xl">
<p className="text-sm text-[#664fa3] text-center mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<span className="font-medium text-[#422268]">Note:</span>{' '}
<div className="bg-var(--lavender-300) p-6 rounded-xl">
<p className="text-sm text-var(--purple-lavender) text-center mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<span className="font-medium text-var(--purple-ink)">Note:</span>{' '}
Your membership application is still validated. You can complete payment whenever you're ready.
</p>
</div>
@@ -73,7 +73,7 @@ const PaymentCancel = () => {
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Button
onClick={() => navigate('/plans')}
className="bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full px-8 py-6 text-lg font-semibold"
className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full px-8 py-6 text-lg font-semibold"
data-testid="try-again-button"
>
<CreditCard className="mr-2 h-5 w-5" />
@@ -82,7 +82,7 @@ const PaymentCancel = () => {
<Button
onClick={() => navigate('/dashboard')}
variant="outline"
className="border-2 border-[#664fa3] text-[#664fa3] hover:bg-[#664fa3] hover:text-white rounded-full px-8 py-6 text-lg font-semibold"
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"
data-testid="back-to-dashboard-button"
>
<ArrowLeft className="mr-2 h-5 w-5" />
@@ -92,17 +92,17 @@ const PaymentCancel = () => {
</Card>
{/* Support Section */}
<Card className="p-6 bg-gradient-to-br from-[#DDD8EB]/20 to-[#f1eef9]/20 rounded-2xl border border-[#ddd8eb]">
<h3 className="text-lg font-semibold text-[#422268] mb-3 text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
<Card className="p-6 bg-gradient-to-br from-var(--neutral-800)/20 to-var(--lavender-300)/20 rounded-2xl border border-var(--neutral-800)">
<h3 className="text-lg font-semibold text-var(--purple-ink) mb-3 text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
Need Assistance?
</h3>
<p className="text-[#664fa3] text-center mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-var(--purple-lavender) text-center mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
If you encountered any technical issues or have questions about the payment process, our support team is here to help.
</p>
<div className="text-center">
<a
href="mailto:support@loaf.org"
className="text-[#ff9e77] hover:text-[#664fa3] font-medium text-lg"
className="text-var(--orange-light) hover:text-var(--purple-lavender) font-medium text-lg"
>
support@loaf.org
</a>