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:
@@ -134,15 +134,15 @@ const AdminEvents = () => {
|
||||
{/* Header */}
|
||||
<div className="mb-8 flex flex-col sm:flex-row gap-4 justify-between items-start sm:items-center">
|
||||
<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" }}>
|
||||
Event Management
|
||||
</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" }}>
|
||||
Create and manage community events.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{(hasPermission('events.create') || hasPermission('events.edit')) && (
|
||||
{(hasPermission('events.create') || hasPermission('events.edit')) && (
|
||||
<Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button
|
||||
@@ -150,7 +150,7 @@ const AdminEvents = () => {
|
||||
resetForm();
|
||||
setEditingEvent(null);
|
||||
}}
|
||||
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"
|
||||
data-testid="create-event-button"
|
||||
>
|
||||
<Plus className="mr-2 h-5 w-5" />
|
||||
@@ -160,39 +160,39 @@ const AdminEvents = () => {
|
||||
|
||||
<DialogContent className="max-w-[calc(100vw-2rem)] sm:max-w-2xl max-h-[90vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-2xl text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
<DialogTitle className="text-2xl text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
{editingEvent ? 'Edit Event' : 'Create New Event'}
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4 mt-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-[#422268] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
<label className="block text-sm font-medium text-var(--purple-ink) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
Title *
|
||||
</label>
|
||||
<Input
|
||||
value={formData.title}
|
||||
onChange={(e) => setFormData({ ...formData, title: e.target.value })}
|
||||
required
|
||||
className="border-2 border-[#ddd8eb] focus:border-[#664fa3]"
|
||||
className="border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-[#422268] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
<label className="block text-sm font-medium text-var(--purple-ink) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
Description
|
||||
</label>
|
||||
<textarea
|
||||
value={formData.description}
|
||||
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
|
||||
rows={4}
|
||||
className="w-full border-2 border-[#ddd8eb] focus:border-[#664fa3] rounded-lg p-3"
|
||||
className="w-full border-2 border-var(--neutral-800) focus:border-var(--purple-lavender) rounded-lg p-3"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-[#422268] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
<label className="block text-sm font-medium text-var(--purple-ink) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
Start Date & Time *
|
||||
</label>
|
||||
<Input
|
||||
@@ -200,12 +200,12 @@ const AdminEvents = () => {
|
||||
value={formData.start_at}
|
||||
onChange={(e) => setFormData({ ...formData, start_at: e.target.value })}
|
||||
required
|
||||
className="border-2 border-[#ddd8eb] focus:border-[#664fa3]"
|
||||
className="border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-[#422268] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
<label className="block text-sm font-medium text-var(--purple-ink) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
End Date & Time *
|
||||
</label>
|
||||
<Input
|
||||
@@ -213,25 +213,25 @@ const AdminEvents = () => {
|
||||
value={formData.end_at}
|
||||
onChange={(e) => setFormData({ ...formData, end_at: e.target.value })}
|
||||
required
|
||||
className="border-2 border-[#ddd8eb] focus:border-[#664fa3]"
|
||||
className="border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-[#422268] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
<label className="block text-sm font-medium text-var(--purple-ink) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
Location *
|
||||
</label>
|
||||
<Input
|
||||
value={formData.location}
|
||||
onChange={(e) => setFormData({ ...formData, location: e.target.value })}
|
||||
required
|
||||
className="border-2 border-[#ddd8eb] focus:border-[#664fa3]"
|
||||
className="border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-[#422268] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
<label className="block text-sm font-medium text-var(--purple-ink) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
Capacity (optional)
|
||||
</label>
|
||||
<Input
|
||||
@@ -239,7 +239,7 @@ const AdminEvents = () => {
|
||||
value={formData.capacity}
|
||||
onChange={(e) => setFormData({ ...formData, capacity: e.target.value })}
|
||||
placeholder="Leave empty for unlimited"
|
||||
className="border-2 border-[#ddd8eb] focus:border-[#664fa3]"
|
||||
className="border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -249,9 +249,9 @@ const AdminEvents = () => {
|
||||
id="published"
|
||||
checked={formData.published}
|
||||
onChange={(e) => setFormData({ ...formData, published: e.target.checked })}
|
||||
className="w-4 h-4 text-[#664fa3] border-[#ddd8eb] rounded focus:ring-[#664fa3]"
|
||||
className="w-4 h-4 text-var(--purple-lavender) border-var(--neutral-800) rounded focus:ring-var(--purple-lavender)"
|
||||
/>
|
||||
<label htmlFor="published" className="text-sm font-medium text-[#422268]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
<label htmlFor="published" className="text-sm font-medium text-var(--purple-ink)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
Publish event (make visible to members)
|
||||
</label>
|
||||
</div>
|
||||
@@ -267,7 +267,7 @@ const AdminEvents = () => {
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
className="flex-1 bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full"
|
||||
className="flex-1 bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full"
|
||||
>
|
||||
{editingEvent ? 'Update Event' : 'Create Event'}
|
||||
</Button>
|
||||
@@ -275,146 +275,145 @@ const AdminEvents = () => {
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)}
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Events List */}
|
||||
{loading ? (
|
||||
<div className="text-center py-20">
|
||||
<p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading events...</p>
|
||||
</div>
|
||||
|
||||
{/* Events List */}
|
||||
{loading ? (
|
||||
<div className="text-center py-20">
|
||||
<p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading events...</p>
|
||||
</div>
|
||||
) : events.length > 0 ? (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{events.map((event) => (
|
||||
<Card
|
||||
key={event.id}
|
||||
className="p-6 bg-white rounded-2xl border border-[#ddd8eb] hover:shadow-lg transition-all"
|
||||
data-testid={`event-card-${event.id}`}
|
||||
>
|
||||
{/* Event Header */}
|
||||
<div className="flex justify-between items-start mb-4">
|
||||
<div className="bg-[#DDD8EB]/20 p-3 rounded-lg">
|
||||
<Calendar className="h-6 w-6 text-[#664fa3]" />
|
||||
</div>
|
||||
<Badge
|
||||
className={`${
|
||||
event.published
|
||||
? 'bg-[#81B29A] text-white'
|
||||
: 'bg-gray-400 text-white'
|
||||
) : events.length > 0 ? (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{events.map((event) => (
|
||||
<Card
|
||||
key={event.id}
|
||||
className="p-6 bg-background rounded-2xl border border-var(--neutral-800) hover:shadow-lg transition-all"
|
||||
data-testid={`event-card-${event.id}`}
|
||||
>
|
||||
{/* Event Header */}
|
||||
<div className="flex justify-between items-start mb-4">
|
||||
<div className="bg-var(--neutral-800)/20 p-3 rounded-lg">
|
||||
<Calendar className="h-6 w-6 text-var(--purple-lavender)" />
|
||||
</div>
|
||||
<Badge
|
||||
className={`${event.published
|
||||
? 'bg-var(--green-light) text-white'
|
||||
: 'bg-gray-400 text-white'
|
||||
} px-3 py-1 rounded-full`}
|
||||
>
|
||||
{event.published ? 'Published' : 'Draft'}
|
||||
</Badge>
|
||||
>
|
||||
{event.published ? 'Published' : 'Draft'}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{/* Event Details */}
|
||||
<h3 className="text-xl font-semibold text-var(--purple-ink) mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
{event.title}
|
||||
</h3>
|
||||
|
||||
{event.description && (
|
||||
<p className="text-var(--purple-lavender) mb-4 line-clamp-2 text-sm" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
{event.description}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="space-y-2 mb-4">
|
||||
<div className="flex items-center gap-2 text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
<Calendar className="h-4 w-4" />
|
||||
<span>
|
||||
{new Date(event.start_at).toLocaleDateString()} at{' '}
|
||||
{new Date(event.start_at).toLocaleTimeString([], {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Event Details */}
|
||||
<h3 className="text-xl font-semibold text-[#422268] mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
{event.title}
|
||||
</h3>
|
||||
|
||||
{event.description && (
|
||||
<p className="text-[#664fa3] mb-4 line-clamp-2 text-sm" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
{event.description}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="space-y-2 mb-4">
|
||||
<div className="flex items-center gap-2 text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
<Calendar className="h-4 w-4" />
|
||||
<span>
|
||||
{new Date(event.start_at).toLocaleDateString()} at{' '}
|
||||
{new Date(event.start_at).toLocaleTimeString([], {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
<MapPin className="h-4 w-4" />
|
||||
<span className="truncate">{event.location}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
<Users className="h-4 w-4" />
|
||||
<span>{event.rsvp_count || 0} attending</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
<MapPin className="h-4 w-4" />
|
||||
<span className="truncate">{event.location}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
<Users className="h-4 w-4" />
|
||||
<span>{event.rsvp_count || 0} attending</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="space-y-2 pt-4 border-t border-[#ddd8eb]">
|
||||
{/* Manage Attendance Button */}
|
||||
{/* Actions */}
|
||||
<div className="space-y-2 pt-4 border-t border-var(--neutral-800)">
|
||||
{/* Manage Attendance Button */}
|
||||
<Button
|
||||
onClick={() => navigate(`/admin/events/${event.id}/attendance`)}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="w-full border-var(--green-light) text-var(--green-light) hover:bg-var(--green-light) hover:text-white"
|
||||
data-testid={`mark-attendance-${event.id}`}
|
||||
>
|
||||
<Users className="h-4 w-4 mr-2" />
|
||||
Manage Attendance ({event.rsvp_count || 0} RSVPs)
|
||||
</Button>
|
||||
|
||||
{/* Other Actions */}
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
onClick={() => navigate(`/admin/events/${event.id}/attendance`)}
|
||||
onClick={() => togglePublish(event)}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="w-full border-[#81B29A] text-[#81B29A] hover:bg-[#81B29A] hover:text-white"
|
||||
data-testid={`mark-attendance-${event.id}`}
|
||||
className="flex-1 border-var(--purple-lavender) text-var(--purple-lavender) hover:bg-var(--purple-lavender) hover:text-white"
|
||||
data-testid={`toggle-publish-${event.id}`}
|
||||
>
|
||||
<Users className="h-4 w-4 mr-2" />
|
||||
Manage Attendance ({event.rsvp_count || 0} RSVPs)
|
||||
{event.published ? (
|
||||
<>
|
||||
<EyeOff className="h-4 w-4 mr-1" />
|
||||
Unpublish
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Eye className="h-4 w-4 mr-1" />
|
||||
Publish
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => handleEdit(event)}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="border-gray-400 text-gray-600 hover:bg-gray-400 hover:text-white"
|
||||
data-testid={`edit-event-${event.id}`}
|
||||
>
|
||||
<Edit className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => handleDelete(event.id)}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="border-red-500 text-red-500 hover:bg-red-500 hover:text-white"
|
||||
data-testid={`delete-event-${event.id}`}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
|
||||
{/* Other Actions */}
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
onClick={() => togglePublish(event)}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="flex-1 border-[#664fa3] text-[#664fa3] hover:bg-[#664fa3] hover:text-white"
|
||||
data-testid={`toggle-publish-${event.id}`}
|
||||
>
|
||||
{event.published ? (
|
||||
<>
|
||||
<EyeOff className="h-4 w-4 mr-1" />
|
||||
Unpublish
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Eye className="h-4 w-4 mr-1" />
|
||||
Publish
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => handleEdit(event)}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="border-gray-400 text-gray-600 hover:bg-gray-400 hover:text-white"
|
||||
data-testid={`edit-event-${event.id}`}
|
||||
>
|
||||
<Edit className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => handleDelete(event.id)}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="border-red-500 text-red-500 hover:bg-red-500 hover:text-white"
|
||||
data-testid={`delete-event-${event.id}`}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-20">
|
||||
<Calendar 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" }}>
|
||||
No Events Yet
|
||||
</h3>
|
||||
<p className="text-[#664fa3] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
Create your first event to get started!
|
||||
</p>
|
||||
<Button
|
||||
onClick={() => setIsCreateDialogOpen(true)}
|
||||
className="bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full px-8"
|
||||
>
|
||||
<Plus className="mr-2 h-5 w-5" />
|
||||
Create Event
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-20">
|
||||
<Calendar 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 Events Yet
|
||||
</h3>
|
||||
<p className="text-var(--purple-lavender) mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
Create your first event to get started!
|
||||
</p>
|
||||
<Button
|
||||
onClick={() => setIsCreateDialogOpen(true)}
|
||||
className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full px-8"
|
||||
>
|
||||
<Plus className="mr-2 h-5 w-5" />
|
||||
Create Event
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user