Refactor Members Directory and Newsletter Archive styles to use new color palette
- Updated color classes in MembersDirectory.js to use new color variables for borders, backgrounds, and text. - Enhanced visual consistency by replacing hardcoded colors with Tailwind CSS color utilities. - Modified NewsletterArchive.js to align with the new design system, ensuring a cohesive look across components. - Added new color variables in tailwind.config.js for better maintainability and scalability.
This commit is contained in:
@@ -167,13 +167,13 @@ const AdminDonations = () => {
|
||||
};
|
||||
|
||||
const getTypeBadgeColor = (type) => {
|
||||
return type === 'member' ? 'bg-[#81B29A]' : 'bg-[#664fa3]';
|
||||
return type === 'member' ? 'bg-[#81B29A]' : 'bg-muted-foreground';
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-screen">
|
||||
<Loader2 className="h-12 w-12 animate-spin text-[#664fa3]" />
|
||||
<Loader2 className="h-12 w-12 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -182,36 +182,36 @@ const AdminDonations = () => {
|
||||
<div className="space-y-8">
|
||||
{/* Header */}
|
||||
<div>
|
||||
<h1 className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
<h1 className="text-3xl font-semibold text-primary" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
Donation Management
|
||||
</h1>
|
||||
<p className="text-[#664fa3] mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
<p className="text-muted-foreground mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
Track and manage all donations from members and the public
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Stats Cards */}
|
||||
<div className="grid md:grid-cols-4 gap-6">
|
||||
<Card className="p-6 bg-white rounded-2xl border-2 border-[#ddd8eb]">
|
||||
<Card className="p-6 bg-background rounded-2xl border-2 border-chart-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
<p className="text-sm text-muted-foreground" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
Total Donations
|
||||
</p>
|
||||
<p className="text-3xl font-bold text-[#422268] mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
<p className="text-3xl font-bold text-primary mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
{stats.total_donations || 0}
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-3 bg-[#DDD8EB]/20 rounded-full">
|
||||
<Heart className="h-6 w-6 text-[#664fa3]" />
|
||||
<div className="p-3 bg-chart-6/20 rounded-full">
|
||||
<Heart className="h-6 w-6 text-muted-foreground" />
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="p-6 bg-white rounded-2xl border-2 border-[#ddd8eb]">
|
||||
<Card className="p-6 bg-background rounded-2xl border-2 border-chart-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
<p className="text-sm text-muted-foreground" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
Member Donations
|
||||
</p>
|
||||
<p className="text-3xl font-bold text-[#81B29A] mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
@@ -224,51 +224,51 @@ const AdminDonations = () => {
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="p-6 bg-white rounded-2xl border-2 border-[#ddd8eb]">
|
||||
<Card className="p-6 bg-background rounded-2xl border-2 border-chart-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
<p className="text-sm text-muted-foreground" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
Public Donations
|
||||
</p>
|
||||
<p className="text-3xl font-bold text-[#664fa3] mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
<p className="text-3xl font-bold text-muted-foreground mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
{stats.public_donations || 0}
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-3 bg-[#DDD8EB]/20 rounded-full">
|
||||
<Globe className="h-6 w-6 text-[#664fa3]" />
|
||||
<div className="p-3 bg-chart-6/20 rounded-full">
|
||||
<Globe className="h-6 w-6 text-muted-foreground" />
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="p-6 bg-white rounded-2xl border-2 border-[#ddd8eb]">
|
||||
<Card className="p-6 bg-background rounded-2xl border-2 border-chart-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
<p className="text-sm text-muted-foreground" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
Total Amount
|
||||
</p>
|
||||
<p className="text-3xl font-bold text-[#422268] mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
<p className="text-3xl font-bold text-primary mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
{stats.total_amount || '$0.00'}
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-3 bg-[#DDD8EB]/20 rounded-full">
|
||||
<DollarSign className="h-6 w-6 text-[#664fa3]" />
|
||||
<div className="p-3 bg-chart-6/20 rounded-full">
|
||||
<DollarSign className="h-6 w-6 text-muted-foreground" />
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Filters and Actions */}
|
||||
<Card className="p-6 bg-white rounded-2xl border-2 border-[#ddd8eb]">
|
||||
<Card className="p-6 bg-background rounded-2xl border-2 border-chart-6">
|
||||
<div className="space-y-4">
|
||||
{/* Search and Export Row */}
|
||||
<div className="flex flex-col md:flex-row gap-4 justify-between">
|
||||
<div className="flex-1 relative">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-[#664fa3]" />
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Search by donor name or email..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="pl-10 rounded-full border-2 border-[#ddd8eb] focus:border-[#664fa3]"
|
||||
className="pl-10 rounded-full border-2 border-chart-6 focus:border-muted-foreground"
|
||||
/>
|
||||
</div>
|
||||
{hasPermission('donations.export') && (
|
||||
@@ -282,20 +282,20 @@ const AdminDonations = () => {
|
||||
{exporting ? 'Exporting...' : 'Export'}
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-56 bg-white rounded-xl border-2 border-[#ddd8eb] shadow-lg">
|
||||
<DropdownMenuContent align="end" className="w-56 bg-background rounded-xl border-2 border-chart-6 shadow-lg">
|
||||
<DropdownMenuItem
|
||||
onClick={() => handleExport('all')}
|
||||
className="cursor-pointer hover:bg-[#f1eef9] rounded-lg p-3"
|
||||
className="cursor-pointer hover:bg-muted rounded-lg p-3"
|
||||
>
|
||||
<FileDown className="h-4 w-4 mr-2 text-[#664fa3]" />
|
||||
<span className="text-[#422268]">Export All Donations</span>
|
||||
<FileDown className="h-4 w-4 mr-2 text-muted-foreground" />
|
||||
<span className="text-primary">Export All Donations</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={() => handleExport('current')}
|
||||
className="cursor-pointer hover:bg-[#f1eef9] rounded-lg p-3"
|
||||
className="cursor-pointer hover:bg-muted rounded-lg p-3"
|
||||
>
|
||||
<FileDown className="h-4 w-4 mr-2 text-[#664fa3]" />
|
||||
<span className="text-[#422268]">Export Current View</span>
|
||||
<FileDown className="h-4 w-4 mr-2 text-muted-foreground" />
|
||||
<span className="text-primary">Export Current View</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
@@ -306,7 +306,7 @@ const AdminDonations = () => {
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<div>
|
||||
<Select value={typeFilter} onValueChange={setTypeFilter}>
|
||||
<SelectTrigger className="rounded-full border-2 border-[#ddd8eb]">
|
||||
<SelectTrigger className="rounded-full border-2 border-chart-6">
|
||||
<SelectValue placeholder="All Types" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
@@ -319,7 +319,7 @@ const AdminDonations = () => {
|
||||
|
||||
<div>
|
||||
<Select value={statusFilter} onValueChange={setStatusFilter}>
|
||||
<SelectTrigger className="rounded-full border-2 border-[#ddd8eb]">
|
||||
<SelectTrigger className="rounded-full border-2 border-chart-6">
|
||||
<SelectValue placeholder="All Statuses" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
@@ -336,7 +336,7 @@ const AdminDonations = () => {
|
||||
type="date"
|
||||
value={startDate}
|
||||
onChange={(e) => setStartDate(e.target.value)}
|
||||
className="rounded-full border-2 border-[#ddd8eb]"
|
||||
className="rounded-full border-2 border-chart-6"
|
||||
placeholder="Start Date"
|
||||
/>
|
||||
</div>
|
||||
@@ -346,7 +346,7 @@ const AdminDonations = () => {
|
||||
type="date"
|
||||
value={endDate}
|
||||
onChange={(e) => setEndDate(e.target.value)}
|
||||
className="rounded-full border-2 border-[#ddd8eb]"
|
||||
className="rounded-full border-2 border-chart-6"
|
||||
placeholder="End Date"
|
||||
/>
|
||||
</div>
|
||||
@@ -354,7 +354,7 @@ const AdminDonations = () => {
|
||||
|
||||
{/* Active Filters Summary */}
|
||||
{(searchQuery || typeFilter !== 'all' || statusFilter !== 'all' || startDate || endDate) && (
|
||||
<div className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
<div className="text-sm text-muted-foreground" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
Showing {filteredDonations.length} of {donations.length} donations
|
||||
</div>
|
||||
)}
|
||||
@@ -362,38 +362,38 @@ const AdminDonations = () => {
|
||||
</Card>
|
||||
|
||||
{/* Donations Table */}
|
||||
<Card className="bg-white rounded-2xl border-2 border-[#ddd8eb] overflow-hidden">
|
||||
<Card className="bg-background rounded-2xl border-2 border-chart-6 overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead className="bg-[#f1eef9] border-b-2 border-[#ddd8eb]">
|
||||
<thead className="bg-muted border-b-2 border-chart-6">
|
||||
<tr>
|
||||
<th className="px-6 py-4 text-left text-sm font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
<th className="px-6 py-4 text-left text-sm font-semibold text-primary" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
Donor
|
||||
</th>
|
||||
<th className="px-6 py-4 text-left text-sm font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
<th className="px-6 py-4 text-left text-sm font-semibold text-primary" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
Type
|
||||
</th>
|
||||
<th className="px-6 py-4 text-left text-sm font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
<th className="px-6 py-4 text-left text-sm font-semibold text-primary" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
Amount
|
||||
</th>
|
||||
<th className="px-6 py-4 text-left text-sm font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
<th className="px-6 py-4 text-left text-sm font-semibold text-primary" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
Status
|
||||
</th>
|
||||
<th className="px-6 py-4 text-left text-sm font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
<th className="px-6 py-4 text-left text-sm font-semibold text-primary" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
Date
|
||||
</th>
|
||||
<th className="px-6 py-4 text-left text-sm font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
<th className="px-6 py-4 text-left text-sm font-semibold text-primary" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
Payment Method
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-[#ddd8eb]">
|
||||
<tbody className="divide-y divide-chart-6">
|
||||
{filteredDonations.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan="6" className="px-6 py-12 text-center">
|
||||
<div className="flex flex-col items-center gap-3">
|
||||
<Heart className="h-12 w-12 text-[#ddd8eb]" />
|
||||
<p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
<Heart className="h-12 w-12 text-chart-6" />
|
||||
<p className="text-muted-foreground" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
{donations.length === 0 ? 'No donations yet' : 'No donations match your filters'}
|
||||
</p>
|
||||
</div>
|
||||
@@ -404,10 +404,10 @@ const AdminDonations = () => {
|
||||
<tr key={donation.id} className="hover:bg-[#f9f5ff] transition-colors">
|
||||
<td className="px-6 py-4">
|
||||
<div>
|
||||
<p className="font-medium text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
<p className="font-medium text-primary" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
{donation.donor_name || 'Anonymous'}
|
||||
</p>
|
||||
<p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
<p className="text-sm text-muted-foreground" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
{donation.donor_email || 'No email'}
|
||||
</p>
|
||||
</div>
|
||||
@@ -421,7 +421,7 @@ const AdminDonations = () => {
|
||||
</Badge>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<p className="font-semibold text-[#422268] text-lg" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
<p className="font-semibold text-primary text-lg" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
{donation.amount}
|
||||
</p>
|
||||
</td>
|
||||
@@ -431,7 +431,7 @@ const AdminDonations = () => {
|
||||
</Badge>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<div className="flex items-center gap-2 text-[#664fa3]">
|
||||
<div className="flex items-center gap-2 text-muted-foreground">
|
||||
<Calendar className="h-4 w-4" />
|
||||
<span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
{formatDate(donation.created_at)}
|
||||
@@ -439,7 +439,7 @@ const AdminDonations = () => {
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
<p className="text-muted-foreground" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
{donation.payment_method || 'N/A'}
|
||||
</p>
|
||||
</td>
|
||||
@@ -453,18 +453,18 @@ const AdminDonations = () => {
|
||||
|
||||
{/* This Month Summary */}
|
||||
{stats.this_month_count > 0 && (
|
||||
<Card className="p-6 bg-gradient-to-r from-[#f9f5ff] to-[#f1eef9] rounded-2xl border-2 border-[#ddd8eb]">
|
||||
<Card className="p-6 bg-gradient-to-r from-[#f9f5ff] to-muted rounded-2xl border-2 border-chart-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-[#664fa3] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
<p className="text-muted-foreground font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
This Month's Donations
|
||||
</p>
|
||||
<p className="text-2xl font-bold text-[#422268] mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
<p className="text-2xl font-bold text-primary mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
{stats.this_month_count} donations • {stats.this_month_amount}
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-4 bg-white rounded-full shadow-sm">
|
||||
<Heart className="h-8 w-8 text-[#ff9e77]" />
|
||||
<div className="p-4 bg-background rounded-full shadow-sm">
|
||||
<Heart className="h-8 w-8 text-accent" />
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
Reference in New Issue
Block a user