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

60
src/pages/admin/AdminSubscriptions.js
View File

@@ -277,7 +277,7 @@ Proceed with activation?`;
if (loading) {
return (
<div className="flex items-center justify-center min-h-screen">
<Loader2 className="h-12 w-12 animate-spin text-[var(--purple-lavender)]" />
<Loader2 className="h-12 w-12 animate-spin text-brand-purple " />
</div>
);
}
@@ -289,7 +289,7 @@ Proceed with activation?`;
<h1 className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
Subscription Management
</h1>
<p className="text-[var(--purple-lavender)] mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-brand-purple mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
View and manage all member subscriptions
</p>
</div>
@@ -299,7 +299,7 @@ Proceed with activation?`;
<Card className="p-6 bg-background rounded-2xl border-2 border-[var(--neutral-800)]">
<div className="flex items-center justify-between">
<div>
<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" }}>
Total Subscriptions
</p>
<p className="text-3xl font-bold text-[var(--purple-ink)] mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
@@ -307,7 +307,7 @@ Proceed with activation?`;
</p>
</div>
<div className="p-3 bg-[var(--neutral-800)]/20 rounded-full">
<CreditCard className="h-6 w-6 text-[var(--purple-lavender)]" />
<CreditCard className="h-6 w-6 text-brand-purple " />
</div>
</div>
</Card>
@@ -315,7 +315,7 @@ Proceed with activation?`;
<Card className="p-6 bg-background rounded-2xl border-2 border-[var(--neutral-800)]">
<div className="flex items-center justify-between">
<div>
<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" }}>
Active Members
</p>
<p className="text-3xl font-bold text-[var(--green-light)] mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
@@ -331,7 +331,7 @@ Proceed with activation?`;
<Card className="p-6 bg-background rounded-2xl border-2 border-[var(--neutral-800)]">
<div className="flex items-center justify-between">
<div>
<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" }}>
Total Revenue
</p>
<p className="text-3xl font-bold text-[var(--purple-ink)] mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
@@ -339,7 +339,7 @@ Proceed with activation?`;
</p>
</div>
<div className="p-3 bg-[var(--neutral-800)]/20 rounded-full">
<DollarSign className="h-6 w-6 text-[var(--purple-lavender)]" />
<DollarSign className="h-6 w-6 text-brand-purple " />
</div>
</div>
</Card>
@@ -347,7 +347,7 @@ Proceed with activation?`;
<Card className="p-6 bg-background rounded-2xl border-2 border-[var(--neutral-800)]">
<div className="flex items-center justify-between">
<div>
<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" }}>
Total Donations
</p>
<p className="text-3xl font-bold text-[var(--orange-light)] mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
@@ -367,12 +367,12 @@ Proceed with activation?`;
{/* Search */}
<div className="md:col-span-1">
<div className="relative">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-[var(--purple-lavender)]" />
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-brand-purple " />
<Input
placeholder="Search by name or email..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="pl-10 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
className="pl-10 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
/>
</div>
</div>
@@ -409,7 +409,7 @@ Proceed with activation?`;
</div>
<div className="mt-4 flex items-center justify-between">
<div className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<div className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Showing {filteredSubscriptions.length} of {subscriptions.length} subscriptions
</div>
@@ -430,14 +430,14 @@ Proceed with activation?`;
onClick={() => handleExport('all')}
className="cursor-pointer hover:bg-[var(--lavender-300)] rounded-lg p-3"
>
<FileDown className="h-4 w-4 mr-2 text-[var(--purple-lavender)]" />
<FileDown className="h-4 w-4 mr-2 text-brand-purple " />
<span className="text-[var(--purple-ink)]">Export All Subscriptions</span>
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => handleExport('current')}
className="cursor-pointer hover:bg-[var(--lavender-300)] rounded-lg p-3"
>
<FileDown className="h-4 w-4 mr-2 text-[var(--purple-lavender)]" />
<FileDown className="h-4 w-4 mr-2 text-brand-purple " />
<span className="text-[var(--purple-ink)]">Export Current View</span>
</DropdownMenuItem>
</DropdownMenuContent>
@@ -460,7 +460,7 @@ Proceed with activation?`;
<p className="font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
{sub.user.first_name} {sub.user.last_name}
</p>
<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" }}>
{sub.user.email}
</p>
</div>
@@ -470,12 +470,12 @@ Proceed with activation?`;
{/* Plan & Period */}
<div className="grid grid-cols-2 gap-3 text-sm">
<div>
<p className="text-xs text-[var(--purple-lavender)] mb-1">Plan</p>
<p className="text-xs text-brand-purple mb-1">Plan</p>
<p className="font-medium text-[var(--purple-ink)]">{sub.plan.name}</p>
<p className="text-xs text-[var(--purple-lavender)]">{sub.plan.billing_cycle}</p>
<p className="text-xs text-brand-purple ">{sub.plan.billing_cycle}</p>
</div>
<div>
<p className="text-xs text-[var(--purple-lavender)] mb-1">Period</p>
<p className="text-xs text-brand-purple mb-1">Period</p>
<p className="text-[var(--purple-ink)]">
{new Date(sub.current_period_start).toLocaleDateString()} -
{new Date(sub.current_period_end).toLocaleDateString()}
@@ -486,19 +486,19 @@ Proceed with activation?`;
{/* Pricing */}
<div className="grid grid-cols-3 gap-2 text-sm bg-background/50 p-3 rounded">
<div>
<p className="text-xs text-[var(--purple-lavender)] mb-1">Base Fee</p>
<p className="text-xs text-brand-purple mb-1">Base Fee</p>
<p className="font-medium text-[var(--purple-ink)]">
${(sub.base_fee_cents / 100).toFixed(2)}
</p>
</div>
<div>
<p className="text-xs text-[var(--purple-lavender)] mb-1">Donation</p>
<p className="text-xs text-brand-purple mb-1">Donation</p>
<p className="font-medium text-[var(--purple-ink)]">
${(sub.donation_cents / 100).toFixed(2)}
</p>
</div>
<div>
<p className="text-xs text-[var(--purple-lavender)] mb-1">Total</p>
<p className="text-xs text-brand-purple mb-1">Total</p>
<p className="font-semibold text-[var(--purple-ink)]">
${(sub.total_cents / 100).toFixed(2)}
</p>
@@ -512,7 +512,7 @@ Proceed with activation?`;
size="sm"
variant="outline"
onClick={() => handleEdit(sub)}
className="flex-1 text-[var(--purple-lavender)] hover:bg-[var(--neutral-800)]"
className="flex-1 text-brand-purple hover:bg-[var(--neutral-800)]"
>
<Edit className="h-4 w-4 mr-2" />
Edit
@@ -534,7 +534,7 @@ Proceed with activation?`;
</Card>
))
) : (
<div className="p-12 text-center text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<div className="p-12 text-center text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
No subscriptions found
</div>
)}
@@ -579,7 +579,7 @@ Proceed with activation?`;
<div className="font-medium text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
{sub.user.first_name} {sub.user.last_name}
</div>
<div className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<div className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{sub.user.email}
</div>
</td>
@@ -587,7 +587,7 @@ Proceed with activation?`;
<div className="text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{sub.plan.name}
</div>
<div className="text-xs text-[var(--purple-lavender)]">
<div className="text-xs text-brand-purple ">
{sub.plan.billing_cycle}
</div>
</td>
@@ -599,7 +599,7 @@ Proceed with activation?`;
<td className="p-4">
<div className="text-sm text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<div>{formatDate(sub.start_date)}</div>
<div className="text-xs text-[var(--purple-lavender)]">to {formatDate(sub.end_date)}</div>
<div className="text-xs text-brand-purple ">to {formatDate(sub.end_date)}</div>
</div>
</td>
<td className="p-4 text-right text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
@@ -618,7 +618,7 @@ Proceed with activation?`;
size="sm"
variant="outline"
onClick={() => handleEdit(sub)}
className="text-[var(--purple-lavender)] hover:bg-[var(--neutral-800)]"
className="text-brand-purple hover:bg-[var(--neutral-800)]"
>
<Edit className="h-4 w-4" />
</Button>
@@ -639,7 +639,7 @@ Proceed with activation?`;
))
) : (
<tr>
<td colSpan="8" className="p-12 text-center text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<td colSpan="8" className="p-12 text-center text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
No subscriptions found
</td>
</tr>
@@ -656,7 +656,7 @@ Proceed with activation?`;
<DialogTitle className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
Edit Subscription
</DialogTitle>
<DialogDescription className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<DialogDescription className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Update subscription status or end date for {selectedSubscription?.user.first_name} {selectedSubscription?.user.last_name}
</DialogDescription>
</DialogHeader>
@@ -740,13 +740,13 @@ Proceed with activation?`;
End Date
</Label>
<div className="relative">
<Calendar className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-[var(--purple-lavender)]" />
<Calendar className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-brand-purple " />
<Input
id="end_date"
type="date"
value={editFormData.end_date}
onChange={(e) => setEditFormData({ ...editFormData, end_date: e.target.value })}
className="pl-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
className="pl-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
/>
</div>
</div>