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

refactor: update button and badge styles for improved theming and consistency

Browse Source
This commit is contained in:
kayela
2026-01-13 23:51:13 -06:00
parent 21a269998d
commit 4cdccc0323
16 changed files with 92 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/pages/admin/AdminBylaws.js
View File

@@ -189,7 +189,7 @@ const AdminBylaws = () => {
{hasPermission('bylaws.create') && (
<Button
onClick={handleCreate}
className="bg-brand-purple text-white hover:bg-[var(--purple-muted)] rounded-full flex items-center gap-2"
className="btn-lavender flex items-center gap-2"
>
<Plus className="h-4 w-4" />
Add Version
@@ -202,8 +202,8 @@ const AdminBylaws = () => {
<Card className="p-6 border-2 border-brand-purple ">
<div className="flex items-center justify-between mb-4">
<div className="flex items-center gap-3">
<div className="bg-gradient-to-br from-brand-purple to-[var(--purple-ink)] p-3 rounded-xl">
<Scale className="h-6 w-6 text-white" />
<div className="bg-light-lavender p-3 rounded-xl">
<Scale className="h-6 w-6 " />
</div>
<div>
<h3 className="text-xl font-semibold text-[var(--purple-ink)]">
@@ -315,7 +315,7 @@ const AdminBylaws = () => {
variant="outline"
size="sm"
onClick={() => handleDelete(bylawsDoc)}
className="border-red-500 text-red-500 hover:bg-red-50"
className="btn-outline-destructive"
>
<Trash2 className="h-4 w-4" />
</Button>
@@ -482,9 +482,9 @@ const AdminBylaws = () => {
Cancel
</Button>
<Button
variant="destructive"
variant="outline"
onClick={confirmDelete}
className="bg-red-500 hover:bg-red-600"
className="btn-outline-destructive"
>
Delete
</Button>

26
src/pages/admin/AdminDashboard.js
View File

@@ -61,7 +61,7 @@ const AdminDashboard = () => {
<h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Admin Dashboard
</h1>
<p className="text-lg text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-lg text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Manage users, events, and membership applications.
</p>
</div>
@@ -80,13 +80,13 @@ const AdminDashboard = () => {
<Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]" data-testid="stat-total-users">
<div className="flex items-center justify-between mb-4">
<div className="bg-[var(--neutral-800)]/20 p-3 rounded-lg">
<Users className="h-6 w-6 text-[var(--purple-lavender)]" />
<Users className="h-6 w-6 text-brand-purple" />
</div>
</div>
<p className="text-3xl font-semibold text-[var(--purple-ink)] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
{loading ? '-' : stats.totalMembers}
</p>
<p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Members</p>
<p className="text-sm text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Members</p>
</Card>
<Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]" data-testid="stat-pending-validations">
@@ -98,7 +98,7 @@ const AdminDashboard = () => {
<p className="text-3xl font-semibold text-[var(--purple-ink)] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
{loading ? '-' : stats.pendingValidations}
</p>
<p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Pending Validations</p>
<p className="text-sm text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Pending Validations</p>
</Card>
<Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]" data-testid="stat-active-members">
@@ -110,7 +110,7 @@ const AdminDashboard = () => {
<p className="text-3xl font-semibold text-[var(--purple-ink)] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
{loading ? '-' : stats.activeMembers}
</p>
<p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Active Members</p>
<p className="text-sm text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Active Members</p>
</Card>
</div>
@@ -118,15 +118,15 @@ const AdminDashboard = () => {
<div className="grid md:grid-cols-2 gap-8">
<Link to="/admin/members">
<Card className="p-8 bg-background rounded-2xl border border-[var(--neutral-800)] hover:shadow-lg hover:-translate-y-1 transition-all cursor-pointer" data-testid="quick-action-users">
<Users className="h-12 w-12 text-[var(--purple-lavender)] mb-4" />
<Users className="h-12 w-12 text-brand-purple mb-4" />
<h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
Manage Members
</h3>
<p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
View and manage paying members and their subscription status.
</p>
<Button
className="mt-4 bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full"
className="btn-lavender mt-4"
data-testid="manage-users-button"
>
Go to Members
@@ -140,11 +140,11 @@ const AdminDashboard = () => {
<h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
Validation Queue
</h3>
<p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Review and validate pending membership applications.
</p>
<Button
className="mt-4 bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full"
className="mt-4 btn-lavender"
data-testid="manage-validations-button"
>
View Validations
@@ -165,7 +165,7 @@ const AdminDashboard = () => {
<h3 className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
Members Needing Personal Outreach
</h3>
<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" }}>
These members have received multiple reminder emails. Consider calling them directly.
</p>
</div>
@@ -185,7 +185,7 @@ const AdminDashboard = () => {
{user.totalReminders} reminder{user.totalReminders !== 1 ? 's' : ''}
</Badge>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-2 text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<div className="grid grid-cols-1 md:grid-cols-2 gap-2 text-sm text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p>Email: {user.email}</p>
<p>Phone: {user.phone || 'N/A'}</p>
<p className="capitalize">Status: {user.status.replace('_', ' ')}</p>
@@ -225,7 +225,7 @@ const AdminDashboard = () => {
</div>
<div className="mt-6 p-4 bg-[var(--neutral-800)]/20 rounded-lg border border-[var(--neutral-800)]">
<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" }}>
<strong>💡 Tip for helping older members:</strong> Many of our members are older ladies who may struggle with email.
A friendly phone call can help them complete the registration process and feel more welcomed to the community.
</p>

2
src/pages/admin/AdminEvents.js
View File

@@ -150,7 +150,7 @@ const AdminEvents = () => {
resetForm();
setEditingEvent(null);
}}
className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full px-6"
className="btn-lavender "
data-testid="create-event-button"
>
<Plus className="mr-2 h-5 w-5" />

4
src/pages/admin/AdminFinancials.js
View File

@@ -167,7 +167,7 @@ const AdminFinancials = () => {
{hasPermission('financials.create') && (
<Button
onClick={handleCreate}
className="bg-brand-purple text-white hover:bg-[var(--purple-muted)] rounded-full flex items-center gap-2"
className="btn-lavender flex items-center gap-2"
>
<Plus className="h-4 w-4" />
Add Report
@@ -192,7 +192,7 @@ const AdminFinancials = () => {
{reports.map(report => (
<Card key={report.id} className="p-6">
<div className="flex items-center gap-6">
<div className="bg-gradient-to-br from-brand-purple to-[var(--purple-ink)] p-4 rounded-xl text-white min-w-[100px] text-center">
<div className="bg-light-lavender p-4 rounded-xl min-w-[100px] text-center">
<DollarSign className="h-6 w-6 mx-auto mb-1" />
<div className="text-2xl font-bold">{report.year}</div>
</div>

6
src/pages/admin/AdminGallery.js
View File

@@ -196,7 +196,7 @@ const AdminGallery = () => {
</p>
<Link to="/admin/events">
<Button
className="bg-brand-purple hover:bg-[var(--purple-ink)] text-white rounded-xl text-sm"
className="btn-lavender text-sm"
style={{ fontFamily: "'Inter', sans-serif" }}
>
<Calendar className="h-4 w-4 mr-2" />
@@ -221,7 +221,7 @@ const AdminGallery = () => {
<Button
onClick={() => fileInputRef.current?.click()}
disabled={uploading}
className="bg-brand-purple hover:bg-[var(--purple-ink)] text-white rounded-xl"
className="btn-lavender "
style={{ fontFamily: "'Inter', sans-serif" }}
>
{uploading ? (
@@ -251,7 +251,7 @@ const AdminGallery = () => {
<h2 className="text-xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
Gallery Images
</h2>
<Badge className="bg-brand-purple text-white px-3 py-1">
<Badge variant="purple" className=" px-3 py-1">
{galleryImages.length} {galleryImages.length === 1 ? 'image' : 'images'}
</Badge>
</div>

2
src/pages/admin/AdminNewsletters.js
View File

@@ -195,7 +195,7 @@ const AdminNewsletters = () => {
{hasPermission('newsletters.create') && (
<Button
onClick={handleCreate}
className="bg-brand-purple text-white hover:bg-[var(--purple-muted)] rounded-full flex items-center gap-2"
className="btn-light-lavender flex items-center gap-2"
>
<Plus className="h-4 w-4" />
Add Newsletter

2
src/pages/admin/AdminPlans.js
View File

@@ -141,7 +141,7 @@ const AdminPlans = () => {
{hasPermission('subscriptions.plans') && (
<Button
onClick={handleCreatePlan}
className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full px-6"
className="btn-lavender "
>
<Plus className="h-4 w-4 mr-2" />
Create Plan

2
src/pages/admin/AdminRoles.js
View File

@@ -193,7 +193,7 @@ const AdminRoles = () => {
Create and manage custom roles with specific permissions
</p>
</div>
<Button onClick={() => setShowCreateModal(true)}>
<Button className="btn-lavender " onClick={() => setShowCreateModal(true)}>
<Plus className="w-4 h-4 mr-2" />
Create Role
</Button>

24
src/pages/admin/AdminStaff.js
View File

@@ -99,16 +99,16 @@ const AdminStaff = () => {
const getRoleBadge = (role) => {
const config = {
superadmin: { label: 'Superadmin', className: 'bg-brand-purple text-white' },
admin: { label: 'Admin', className: 'bg-[var(--green-light)] text-white' },
moderator: { label: 'Moderator', className: 'bg-[var(--neutral-800)] text-[var(--purple-ink)]' },
staff: { label: 'Staff', className: 'bg-gray-200 text-gray-700' },
media: { label: 'Media', className: 'bg-gray-400 text-white' }
superadmin: { label: 'Superadmin', variant: 'purple' },
admin: { label: 'Admin', variant: 'green' },
moderator: { label: 'Moderator', variant: 'bg-[var(--neutral-800)] text-[var(--purple-ink)]' },
staff: { label: 'Staff', variant: 'gray' },
media: { label: 'Media', variant: 'gray2' }
};
const roleConfig = config[role] || { label: role, className: 'bg-gray-500 text-white' };
return (
<Badge className={`${roleConfig.className} px-3 py-1 rounded-full text-sm`}>
<Badge variant={roleConfig.variant} className={`${roleConfig.className} px-3 py-1 rounded-full text-sm`}>
<Shield className="h-3 w-3 mr-1 inline" />
{roleConfig.label}
</Badge>
@@ -117,13 +117,13 @@ const AdminStaff = () => {
const getStatusBadge = (status) => {
const config = {
active: { label: 'Active', className: 'bg-[var(--green-light)] text-white' },
active: { label: 'Active', variant: 'green' },
inactive: { label: 'Inactive', className: 'bg-gray-400 text-white ' }
};
const statusConfig = config[status] || config.inactive;
return (
<Badge className={`${statusConfig.className} px-3 py-1 rounded-full text-sm`}>
<Badge variant={statusConfig.variant} className={` px-3 py-1 rounded-full text-sm`}>
{statusConfig.label}
</Badge>
);
@@ -145,7 +145,7 @@ const AdminStaff = () => {
{hasPermission('users.create') && (
<Button
onClick={() => setInviteDialogOpen(true)}
className="bg-brand-purple hover:bg-[var(--purple-ink)] dark:hover:bg-brand-dark-lavender text-white rounded-xl h-12 px-6"
className="btn-util-purple h-12 px-6"
>
<Mail className="h-5 w-5 mr-2" />
Invite Staff
@@ -154,7 +154,7 @@ const AdminStaff = () => {
{hasPermission('users.create') && (
<Button
onClick={() => setCreateDialogOpen(true)}
className="bg-[var(--green-light)] hover:bg-[var(--green-sage)] text-white rounded-xl h-12 px-6"
className="btn-util-green h-12 px-6"
>
<UserPlus className="h-5 w-5 mr-2" />
Create Staff
@@ -195,11 +195,11 @@ const AdminStaff = () => {
{/* Tabs */}
<Tabs value={activeTab} onValueChange={setActiveTab} className="mb-8">
<TabsList className="grid w-full grid-cols-2 mb-8">
<TabsTrigger value="staff-list" className="text-lg py-3">
<TabsTrigger value="staff-list" className="text-lg py-3">
<UserCog className="h-5 w-5 mr-2" />
Staff Members
</TabsTrigger>
<TabsTrigger value="pending-invitations" className="text-lg py-3">
<TabsTrigger value="pending-invitations" className="text-lg py-3 ">
<Mail className="h-5 w-5 mr-2" />
Pending Invitations
</TabsTrigger>

2
src/pages/admin/AdminValidations.js
View File

@@ -450,7 +450,7 @@ const AdminValidations = () => {
<Button
onClick={() => handleActivatePayment(user)}
size="sm"
className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background"
className="btn-light-lavender"
>
<CheckCircle className="h-4 w-4 mr-1" />
Activate Payment