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

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

Browse Source
This commit is contained in:
kayela
2026-01-13 22:01:33 -06:00
parent 30d32d8823
commit e04d39fe17
61 changed files with 731 additions and 735 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/pages/PaymentCancel.js
View File

@@ -25,7 +25,7 @@ const PaymentCancel = () => {
<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-[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" }}>
Your payment was cancelled. No charges have been made to your account.
</p>
</div>
@@ -37,7 +37,7 @@ const PaymentCancel = () => {
</h2>
<div className="space-y-6 mb-8">
<p className="text-[var(--purple-lavender)] text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-brand-purple 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>
@@ -47,14 +47,14 @@ const PaymentCancel = () => {
</h3>
<ul className="space-y-3">
<li className="flex items-start gap-3">
<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" }}>
<CreditCard className="h-5 w-5 text-brand-purple flex-shrink-0 mt-0.5" />
<span className="text-brand-purple " 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-[var(--purple-lavender)] flex-shrink-0 mt-0.5" />
<span className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<Mail className="h-5 w-5 text-brand-purple flex-shrink-0 mt-0.5" />
<span className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Contact us if you experienced any issues during checkout
</span>
</li>
@@ -62,7 +62,7 @@ const PaymentCancel = () => {
</div>
<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" }}>
<p className="text-sm text-brand-purple 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>
@@ -82,7 +82,7 @@ const PaymentCancel = () => {
<Button
onClick={() => navigate('/dashboard')}
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="back-to-dashboard-button"
>
<ArrowLeft className="mr-2 h-5 w-5" />
@@ -96,13 +96,13 @@ const PaymentCancel = () => {
<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-[var(--purple-lavender)] text-center mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-brand-purple 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-[var(--orange-light)] hover:text-[var(--purple-lavender)] font-medium text-lg"
className="text-[var(--orange-light)] hover:text-brand-purple font-medium text-lg"
>
support@loaf.org
</a>