refactor: update styles in MembersDirectory and NewsletterArchive for consistency and improved theming
- 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:
@@ -131,17 +131,17 @@ const AdminPlans = () => {
|
||||
<div className="mb-8">
|
||||
<div className="flex justify-between items-start mb-4">
|
||||
<div>
|
||||
<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" }}>
|
||||
Subscription Plans
|
||||
</h1>
|
||||
<p className="text-lg text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
<p className="text-lg text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
Manage membership plans and pricing.
|
||||
</p>
|
||||
</div>
|
||||
{hasPermission('subscriptions.plans') && (
|
||||
<Button
|
||||
onClick={handleCreatePlan}
|
||||
className="bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full px-6"
|
||||
className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full px-6"
|
||||
>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Create Plan
|
||||
@@ -152,27 +152,27 @@ const AdminPlans = () => {
|
||||
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 mb-8">
|
||||
<Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb]">
|
||||
<p className="text-sm text-[#664fa3] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Plans</p>
|
||||
<p className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
<Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800)">
|
||||
<p className="text-sm text-var(--purple-lavender) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Plans</p>
|
||||
<p className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
{plans.length}
|
||||
</p>
|
||||
</Card>
|
||||
<Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb]">
|
||||
<p className="text-sm text-[#664fa3] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Active Plans</p>
|
||||
<p className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
<Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800)">
|
||||
<p className="text-sm text-var(--purple-lavender) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Active Plans</p>
|
||||
<p className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
{plans.filter(p => p.active).length}
|
||||
</p>
|
||||
</Card>
|
||||
<Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb]">
|
||||
<p className="text-sm text-[#664fa3] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Subscribers</p>
|
||||
<p className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
<Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800)">
|
||||
<p className="text-sm text-var(--purple-lavender) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Subscribers</p>
|
||||
<p className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
{plans.reduce((sum, p) => sum + (p.subscriber_count || 0), 0)}
|
||||
</p>
|
||||
</Card>
|
||||
<Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb]">
|
||||
<p className="text-sm text-[#664fa3] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Revenue (Annual Est.)</p>
|
||||
<p className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
<Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800)">
|
||||
<p className="text-sm text-var(--purple-lavender) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Revenue (Annual Est.)</p>
|
||||
<p className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
{formatPrice(
|
||||
plans.reduce((sum, p) => {
|
||||
const annualPrice = p.billing_cycle === 'yearly'
|
||||
@@ -186,19 +186,19 @@ const AdminPlans = () => {
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
<Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb] mb-8">
|
||||
<Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800) mb-8">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-[#664fa3]" />
|
||||
<Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-var(--purple-lavender)" />
|
||||
<Input
|
||||
placeholder="Search plans..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="pl-12 h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
|
||||
className="pl-12 h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
|
||||
/>
|
||||
</div>
|
||||
<Select value={activeFilter} onValueChange={setActiveFilter}>
|
||||
<SelectTrigger className="h-14 rounded-xl border-2 border-[#ddd8eb]">
|
||||
<SelectTrigger className="h-14 rounded-xl border-2 border-var(--neutral-800)">
|
||||
<SelectValue placeholder="Filter by status" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
@@ -213,56 +213,54 @@ const AdminPlans = () => {
|
||||
{/* Plans Grid */}
|
||||
{loading ? (
|
||||
<div className="text-center py-20">
|
||||
<p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading plans...</p>
|
||||
<p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading plans...</p>
|
||||
</div>
|
||||
) : filteredPlans.length > 0 ? (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{filteredPlans.map((plan) => (
|
||||
<Card
|
||||
key={plan.id}
|
||||
className={`p-6 bg-white rounded-2xl border-2 transition-all hover:shadow-lg ${
|
||||
plan.active
|
||||
? 'border-[#ddd8eb] hover:border-[#664fa3]'
|
||||
: 'border-gray-400 opacity-60'
|
||||
}`}
|
||||
className={`p-6 bg-background rounded-2xl border-2 transition-all hover:shadow-lg ${plan.active
|
||||
? 'border-var(--neutral-800) hover:border-var(--purple-lavender)'
|
||||
: 'border-gray-400 opacity-60'
|
||||
}`}
|
||||
>
|
||||
{/* Header with badges */}
|
||||
<div className="flex flex-wrap gap-2 mb-4">
|
||||
<Badge
|
||||
className={`${
|
||||
plan.active
|
||||
? 'bg-[#81B29A] text-white'
|
||||
: 'bg-gray-400 text-white'
|
||||
}`}
|
||||
className={`${plan.active
|
||||
? 'bg-var(--green-light) text-white'
|
||||
: 'bg-gray-400 text-white'
|
||||
}`}
|
||||
>
|
||||
{plan.active ? 'Active' : 'Inactive'}
|
||||
</Badge>
|
||||
{plan.subscriber_count > 0 && (
|
||||
<Badge className="bg-[#DDD8EB] text-[#422268]">
|
||||
<Badge className="bg-var(--neutral-800) text-var(--purple-ink)">
|
||||
<Users className="h-3 w-3 mr-1" />
|
||||
{plan.subscriber_count}
|
||||
</Badge>
|
||||
)}
|
||||
{plan.custom_cycle_enabled && (
|
||||
<Badge className="bg-[#664fa3] text-white">
|
||||
<Badge className="bg-var(--purple-lavender) text-white">
|
||||
Custom Dates
|
||||
</Badge>
|
||||
)}
|
||||
{plan.allow_donation && (
|
||||
<Badge className="bg-[#ff9e77] text-white">
|
||||
<Badge className="bg-var(--orange-light) text-white">
|
||||
Donations Enabled
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Plan Name */}
|
||||
<h3 className="text-2xl font-semibold text-[#422268] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
<h3 className="text-2xl font-semibold text-var(--purple-ink) mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
{plan.name}
|
||||
</h3>
|
||||
|
||||
{/* Description */}
|
||||
{plan.description && (
|
||||
<p className="text-sm text-[#664fa3] mb-4 line-clamp-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
<p className="text-sm text-var(--purple-lavender) mb-4 line-clamp-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
{plan.description}
|
||||
</p>
|
||||
)}
|
||||
@@ -270,20 +268,20 @@ const AdminPlans = () => {
|
||||
{/* Price */}
|
||||
<div className="mb-4">
|
||||
<div className="flex items-baseline gap-2">
|
||||
<div className="text-3xl font-bold text-[#ff9e77]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
<div className="text-3xl font-bold text-var(--orange-light)" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
{formatPrice(plan.minimum_price_cents || plan.price_cents)}
|
||||
</div>
|
||||
{plan.suggested_price_cents && plan.suggested_price_cents > plan.minimum_price_cents && (
|
||||
<div className="text-lg text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
<div className="text-lg text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
(Suggested: {formatPrice(plan.suggested_price_cents)})
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
<p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
{getBillingCycleLabel(plan.billing_cycle)}
|
||||
</p>
|
||||
{plan.custom_cycle_enabled && (
|
||||
<p className="text-xs text-[#664fa3] font-mono mt-1">
|
||||
<p className="text-xs text-var(--purple-lavender) font-mono mt-1">
|
||||
{formatCustomCycleDates(plan)}
|
||||
</p>
|
||||
)}
|
||||
@@ -291,12 +289,12 @@ const AdminPlans = () => {
|
||||
|
||||
{/* Actions */}
|
||||
{hasPermission('subscriptions.plans') && (
|
||||
<div className="flex flex-col sm:flex-row gap-2 pt-4 border-t border-[#ddd8eb]">
|
||||
<div className="flex flex-col sm:flex-row gap-2 pt-4 border-t border-var(--neutral-800)">
|
||||
<Button
|
||||
onClick={() => handleEditPlan(plan)}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="flex-1 border-[#664fa3] text-[#664fa3] hover:bg-[#664fa3] hover:text-white rounded-full"
|
||||
className="flex-1 border-var(--purple-lavender) text-var(--purple-lavender) hover:bg-var(--purple-lavender) hover:text-white rounded-full"
|
||||
>
|
||||
<Edit className="h-4 w-4 mr-1" />
|
||||
Edit
|
||||
@@ -316,7 +314,7 @@ const AdminPlans = () => {
|
||||
|
||||
{/* Warning for plans with subscribers */}
|
||||
{plan.subscriber_count > 0 && (
|
||||
<p className="text-xs text-[#664fa3] mt-2 text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
<p className="text-xs text-var(--purple-lavender) mt-2 text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
Cannot delete plan with active subscribers
|
||||
</p>
|
||||
)}
|
||||
@@ -325,11 +323,11 @@ const AdminPlans = () => {
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-20">
|
||||
<CreditCard className="h-20 w-20 text-[#ddd8eb] mx-auto mb-6" />
|
||||
<h3 className="text-2xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
<CreditCard className="h-20 w-20 text-var(--neutral-800) mx-auto mb-6" />
|
||||
<h3 className="text-2xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
No Plans Found
|
||||
</h3>
|
||||
<p className="text-[#664fa3] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
<p className="text-var(--purple-lavender) mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
{searchQuery || activeFilter !== 'all'
|
||||
? 'Try adjusting your filters'
|
||||
: 'Create your first subscription plan to get started'}
|
||||
@@ -337,7 +335,7 @@ const AdminPlans = () => {
|
||||
{!searchQuery && activeFilter === 'all' && hasPermission('subscriptions.plans') && (
|
||||
<Button
|
||||
onClick={handleCreatePlan}
|
||||
className="bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full px-8"
|
||||
className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full px-8"
|
||||
>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Create First Plan
|
||||
@@ -357,11 +355,11 @@ const AdminPlans = () => {
|
||||
{/* Delete Confirmation Dialog */}
|
||||
{deleteDialogOpen && (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
|
||||
<Card className="p-6 sm:p-8 bg-white rounded-2xl max-w-md w-full">
|
||||
<h2 className="text-xl sm:text-2xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
<Card className="p-6 sm:p-8 bg-background rounded-2xl max-w-md w-full">
|
||||
<h2 className="text-xl sm:text-2xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
Delete Plan
|
||||
</h2>
|
||||
<p className="text-sm sm:text-base text-[#664fa3] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
<p className="text-sm sm:text-base text-var(--purple-lavender) mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
Are you sure you want to delete "{planToDelete?.name}"? This action
|
||||
will deactivate the plan and it won't be available for new subscriptions.
|
||||
</p>
|
||||
|
||||
Reference in New Issue
Block a user