andika/membership-fe
3
1
Fork 1
Code Issues 17 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

40
src/pages/Plans.js
View File

@@ -217,27 +217,27 @@ const Plans = () => {
<h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Membership Plans
</h1>
<p className="text-lg text-[var(--purple-lavender)] max-w-2xl mx-auto" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-lg text-brand-purple max-w-2xl mx-auto" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Choose the membership plan that works best for you and become part of our vibrant community.
</p>
</div>
{/* Status Banner */}
{statusInfo && statusInfo.title && (
<Card className="max-w-3xl mx-auto mb-8 p-6 bg-gradient-to-r from-[var(--lavender-300)] to-[var(--neutral-800)]/30 border-2 border-[var(--purple-lavender)]">
<Card className="max-w-3xl mx-auto mb-8 p-6 bg-gradient-to-r from-[var(--lavender-300)] to-[var(--neutral-800)]/30 border-2 border-brand-purple ">
<div className="flex items-start gap-4">
<AlertCircle className="h-6 w-6 text-[var(--purple-lavender)] flex-shrink-0 mt-1" />
<AlertCircle className="h-6 w-6 text-brand-purple flex-shrink-0 mt-1" />
<div className="flex-1">
<h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
{statusInfo.title}
</h3>
<p className="text-[var(--purple-lavender)] mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-brand-purple mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{statusInfo.message}
</p>
{statusInfo.action && statusInfo.actionLink && (
<Button
onClick={() => navigate(statusInfo.actionLink)}
className="bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-ink)] rounded-full"
className="bg-brand-purple text-white hover:bg-[var(--purple-ink)] rounded-full"
>
{statusInfo.action}
</Button>
@@ -249,8 +249,8 @@ const Plans = () => {
{loading ? (
<div className="text-center py-20">
<Loader2 className="h-12 w-12 text-[var(--purple-lavender)] mx-auto mb-4 animate-spin" />
<p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading plans...</p>
<Loader2 className="h-12 w-12 text-brand-purple mx-auto mb-4 animate-spin" />
<p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading plans...</p>
</div>
) : plans.length > 0 ? (
<div className={`grid gap-6 sm:gap-8 mx-auto ${plans.length === 1
@@ -266,19 +266,19 @@ const Plans = () => {
return (
<Card
key={plan.id}
className="p-8 bg-background rounded-2xl border-2 border-[var(--neutral-800)] hover:border-[var(--purple-lavender)] hover:shadow-xl transition-all"
className="p-8 bg-background rounded-2xl border-2 border-[var(--neutral-800)] hover:border-brand-purple hover:shadow-xl transition-all"
data-testid={`plan-card-${plan.id}`}
>
{/* Plan Header */}
<div className="text-center mb-6">
<div className="bg-[var(--neutral-800)]/20 p-4 rounded-full w-16 h-16 mx-auto mb-4 flex items-center justify-center">
<CreditCard className="h-8 w-8 text-[var(--purple-lavender)]" />
<CreditCard className="h-8 w-8 text-brand-purple " />
</div>
<h2 className="text-2xl font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
{plan.name}
</h2>
{plan.description && (
<p className="text-sm text-[var(--purple-lavender)] mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-sm text-brand-purple mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{plan.description}
</p>
)}
@@ -286,18 +286,18 @@ const Plans = () => {
{/* Pricing */}
<div className="text-center mb-8">
<div className="text-sm text-[var(--purple-lavender)] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<div className="text-sm text-brand-purple mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Starting at
</div>
<div className="text-2xl sm:text-3xl md:text-4xl font-bold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
{formatPrice(minimumPrice)}
</div>
{suggestedPrice > minimumPrice && (
<div className="text-sm text-[var(--purple-lavender)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<div className="text-sm text-brand-purple mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Suggested: {formatPrice(suggestedPrice)}
</div>
)}
<p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{getBillingCycleLabel(plan.billing_cycle)}
</p>
{plan.allow_donation && (
@@ -356,7 +356,7 @@ const Plans = () => {
<h3 className="text-2xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
No Plans Available
</h3>
<p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Membership plans are not currently available. Please check back later!
</p>
</div>
@@ -368,13 +368,13 @@ const Plans = () => {
<h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-4 text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
Need Help Choosing?
</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 have any questions about our membership plans or need assistance, please contact us.
</p>
<div className="text-center">
<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>
@@ -390,7 +390,7 @@ const Plans = () => {
<DialogTitle className="text-2xl text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
Choose Your Amount
</DialogTitle>
<DialogDescription className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<DialogDescription className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{selectedPlan?.name} - {getBillingCycleLabel(selectedPlan?.billing_cycle)}
</DialogDescription>
</DialogHeader>
@@ -402,7 +402,7 @@ const Plans = () => {
Amount (USD) *
</Label>
<div className="relative mt-2">
<span className="absolute left-4 top-1/2 transform -translate-y-1/2 text-[var(--purple-lavender)] text-lg font-semibold">
<span className="absolute left-4 top-1/2 transform -translate-y-1/2 text-brand-purple text-lg font-semibold">
$
</span>
<Input
@@ -412,11 +412,11 @@ const Plans = () => {
min={selectedPlan ? (selectedPlan.minimum_price_cents / 100).toFixed(2) : "30.00"}
value={amountInput}
onChange={(e) => setAmountInput(e.target.value)}
className="pl-8 h-14 text-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
className="pl-8 h-14 text-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
placeholder="50.00"
/>
</div>
<p className="text-sm text-[var(--purple-lavender)] mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-sm text-brand-purple mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Minimum: {selectedPlan ? formatPrice(selectedPlan.minimum_price_cents || 3000) : '$30.00'}
</p>
</div>