andika/membership-fe
3
1
Fork 1
Code Issues 17 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: update styles in MembersDirectory and NewsletterArchive for consistency and improved theming

Browse Source 
- 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:
kayela
2026-01-12 20:10:33 -06:00
parent a93e2aa863
commit 7694532d53
77 changed files with 2519 additions and 2338 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/components/PendingInvitationsTable.js
View File

@@ -73,9 +73,9 @@ const PendingInvitationsTable = () => {
const getRoleBadge = (role) => {
const config = {
superadmin: { label: 'Superadmin', className: 'bg-[#664fa3] text-white' },
admin: { label: 'Admin', className: 'bg-[#81B29A] text-white' },
member: { label: 'Member', className: 'bg-[#DDD8EB] text-[#422268]' }
superadmin: { label: 'Superadmin', className: 'bg-var(--purple-lavender) text-white' },
admin: { label: 'Admin', className: 'bg-var(--green-light) text-white' },
member: { label: 'Member', className: 'bg-var(--neutral-800) text-var(--purple-ink)' }
};
const roleConfig = config[role] || { label: role, className: 'bg-gray-500 text-white' };
@@ -111,7 +111,7 @@ const PendingInvitationsTable = () => {
if (loading) {
return (
<div className="text-center py-8">
<p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Loading invitations...
</p>
</div>
@@ -120,12 +120,12 @@ const PendingInvitationsTable = () => {
if (invitations.length === 0) {
return (
<Card className="p-12 bg-white rounded-2xl border border-[#ddd8eb] text-center">
<Mail className="h-16 w-16 text-[#ddd8eb] mx-auto mb-4" />
<h3 className="text-xl font-semibold text-[#422268] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
<Card className="p-12 bg-background rounded-2xl border border-var(--neutral-800) text-center">
<Mail className="h-16 w-16 text-var(--neutral-800) mx-auto mb-4" />
<h3 className="text-xl font-semibold text-var(--purple-ink) mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
No Pending Invitations
</h3>
<p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
All invitations have been accepted or expired
</p>
</Card>
@@ -134,37 +134,37 @@ const PendingInvitationsTable = () => {
return (
<>
<Card className="bg-white rounded-2xl border border-[#ddd8eb] overflow-hidden">
<Card className="bg-background rounded-2xl border border-var(--neutral-800) overflow-hidden">
<Table>
<TableHeader>
<TableRow className="bg-[#DDD8EB] hover:bg-[#DDD8EB]">
<TableHead className="text-[#422268] font-semibold">Email</TableHead>
<TableHead className="text-[#422268] font-semibold">Name</TableHead>
<TableHead className="text-[#422268] font-semibold">Role</TableHead>
<TableHead className="text-[#422268] font-semibold">Invited</TableHead>
<TableHead className="text-[#422268] font-semibold">Expires</TableHead>
<TableHead className="text-[#422268] font-semibold text-right">Actions</TableHead>
<TableRow className="bg-var(--neutral-800) hover:bg-var(--neutral-800)">
<TableHead className="text-var(--purple-ink) font-semibold">Email</TableHead>
<TableHead className="text-var(--purple-ink) font-semibold">Name</TableHead>
<TableHead className="text-var(--purple-ink) font-semibold">Role</TableHead>
<TableHead className="text-var(--purple-ink) font-semibold">Invited</TableHead>
<TableHead className="text-var(--purple-ink) font-semibold">Expires</TableHead>
<TableHead className="text-var(--purple-ink) font-semibold text-right">Actions</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{invitations.map((invitation) => (
<TableRow key={invitation.id} className="hover:bg-[#F9F8FB]">
<TableCell className="font-medium text-[#422268]">
<TableRow key={invitation.id} className="hover:bg-var(--lavender-700)">
<TableCell className="font-medium text-var(--purple-ink)">
{invitation.email}
</TableCell>
<TableCell className="text-[#664fa3]">
<TableCell className="text-var(--purple-lavender)">
{invitation.first_name && invitation.last_name
? `${invitation.first_name} ${invitation.last_name}`
: '-'}
</TableCell>
<TableCell>{getRoleBadge(invitation.role)}</TableCell>
<TableCell className="text-[#664fa3]">
<TableCell className="text-var(--purple-lavender)">
{new Date(invitation.invited_at).toLocaleDateString()}
</TableCell>
<TableCell>
<div className="flex items-center gap-2">
<Clock className={`h-4 w-4 ${isExpiringSoon(invitation.expires_at) ? 'text-orange-500' : 'text-[#664fa3]'}`} />
<span className={`text-sm ${isExpiringSoon(invitation.expires_at) ? 'text-orange-500 font-semibold' : 'text-[#664fa3]'}`}>
<Clock className={`h-4 w-4 ${isExpiringSoon(invitation.expires_at) ? 'text-orange-500' : 'text-var(--purple-lavender)'}`} />
<span className={`text-sm ${isExpiringSoon(invitation.expires_at) ? 'text-orange-500 font-semibold' : 'text-var(--purple-lavender)'}`}>
{formatDate(invitation.expires_at)}
</span>
</div>
@@ -176,7 +176,7 @@ const PendingInvitationsTable = () => {
size="sm"
onClick={() => handleResend(invitation.id)}
disabled={resending === invitation.id}
className="rounded-xl border-[#81B29A] text-[#81B29A] hover:bg-[#81B29A] hover:text-white"
className="rounded-xl border-var(--green-light) text-var(--green-light) hover:bg-var(--green-light) hover:text-white"
>
{resending === invitation.id ? (
'Resending...'
@@ -208,10 +208,10 @@ const PendingInvitationsTable = () => {
<AlertDialog open={revokeDialog.open} onOpenChange={(open) => setRevokeDialog({ open, invitation: null })}>
<AlertDialogContent className="rounded-2xl">
<AlertDialogHeader>
<AlertDialogTitle className="text-2xl text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
<AlertDialogTitle className="text-2xl text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
Revoke Invitation
</AlertDialogTitle>
<AlertDialogDescription className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<AlertDialogDescription className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Are you sure you want to revoke the invitation for{' '}
<span className="font-semibold">{revokeDialog.invitation?.email}</span>?
This action cannot be undone.