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-14 11:07:43 -06:00
parent 4cdccc0323
commit 4ccaca192d
14 changed files with 85 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -210,7 +210,7 @@ const AdminBylaws = () => {
{currentBylaws.title}
</h3>
<div className="flex items-center gap-2 mt-1">
<Badge className="bg-[var(--green-light)] text-white">
<Badge variant={'green'} className="">
<Check className="h-3 w-3 mr-1" />
Current Version
</Badge>
@@ -222,7 +222,7 @@ const AdminBylaws = () => {
</div>
<div className="flex gap-2">
<Button
variant="outline"
variant="ghost"
size="sm"
onClick={() => window.open(currentBylaws.document_url, '_blank')}
className="border-brand-purple text-brand-purple "
@@ -242,10 +242,10 @@ const AdminBylaws = () => {
)}
{hasPermission('bylaws.delete') && (
<Button
variant="outline"
variant="outline-destructive"
size="sm"
onClick={() => handleDelete(currentBylaws)}
className="border-red-500 text-red-500 hover:bg-red-50"
className="border-red-500 text-red-500"
>
<Trash2 className="h-4 w-4" />
</Button>

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

@@ -78,38 +78,48 @@ const AdminDashboard = () => {
{/* Stats Grid */}
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
<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-brand-purple" />
<div className='flex items-start justify-between'>
<p className="text-3xl font-semibold text-[var(--purple-ink)] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
{loading ? '-' : stats.totalMembers}
</p>
<div className="flex items-start justify-between mb-4">
<div className="bg-[var(--neutral-800)]/20 p-3 rounded-lg">
<Users className="h-6 w-6 text-brand-purple" />
</div>
</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-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">
<div className="flex items-center justify-between mb-4">
<div className=" p-3 rounded-lg">
<Clock className="h-6 w-6 text-orange-600" />
<div className='flex items-start justify-between'>
<p className="text-3xl font-semibold text-[var(--purple-ink)] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
{loading ? '-' : stats.pendingValidations}
</p>
<div className="flex items-start justify-between mb-4">
<div className=" p-3 rounded-lg">
<Clock className="h-6 w-6 text-orange-600" />
</div>
</div>
</div>
<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-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">
<div className="flex items-center justify-between mb-4">
<div className="bg-[var(--green-light)]/20 p-3 rounded-lg">
<CheckCircle className="h-6 w-6 text-[var(--green-light)]" />
<div className='flex items-start justify-between'>
<p className="text-3xl font-semibold text-[var(--purple-ink)] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
{loading ? '-' : stats.activeMembers}
</p>
<div className="flex items-start justify-between mb-4">
<div className="bg-[var(--green-light)]/20 p-3 rounded-lg">
<CheckCircle className="h-6 w-6 text-[var(--green-light)]" />
</div>
</div>
</div>
<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-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Active Members</p>
</Card>
</div>

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

@@ -297,8 +297,9 @@ const AdminEvents = () => {
<Calendar className="h-6 w-6 text-brand-purple " />
</div>
<Badge
className={`${event.published
? 'bg-[var(--green-light)] text-white'
? 'border-transparent bg-[var(--green-light)] text-white hover:bg-[var(--green-forest)]'
: 'bg-gray-400 text-white'
} px-3 py-1 rounded-full`}
>
@@ -345,7 +346,7 @@ const AdminEvents = () => {
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"
className="w-full border-[var(--green-light)] text-[var(--green-light)] hover:bg-[var(--green-light)] hover:text-white dark:hover:text-background"
data-testid={`mark-attendance-${event.id}`}
>
<Users className="h-4 w-4 mr-2" />
@@ -358,7 +359,7 @@ const AdminEvents = () => {
onClick={() => togglePublish(event)}
variant="outline"
size="sm"
className="flex-1 border-brand-purple text-brand-purple hover:bg-brand-purple hover:text-white"
className="flex-1 border-brand-purple text-brand-purple hover:bg-brand-purple hover:text-white dark:hover:bg-brand-lavender dark:hover:text-background"
data-testid={`toggle-publish-${event.id}`}
>
{event.published ? (
@@ -377,7 +378,7 @@ const AdminEvents = () => {
onClick={() => handleEdit(event)}
variant="outline"
size="sm"
className="border-gray-400 text-gray-600 hover:bg-gray-400 hover:text-white"
className="border-gray-400 text-gray-600 dark:text-gray-400 hover:bg-gray-400 dark:hover:text-background hover:text-white"
data-testid={`edit-event-${event.id}`}
>
<Edit className="h-4 w-4" />

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

@@ -229,10 +229,10 @@ const AdminFinancials = () => {
)}
{hasPermission('financials.delete') && (
<Button
variant="outline"
variant="outline-destructive"
size="sm"
onClick={() => handleDelete(report)}
className="border-red-500 text-red-500 hover:bg-red-50"
className=""
>
<Trash2 className="h-4 w-4" />
</Button>

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

@@ -478,7 +478,7 @@ const AdminMembers = () => {
<Button
variant="outline"
size="sm"
className="border-brand-purple text-brand-purple dark:bg-background dark:border-brand-lavender dark:text-brand-light-lavender hover:bg-brand-light-lavender "
className=""
>
<Eye className="h-4 w-4 mr-1" />
View Profile

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

@@ -266,10 +266,10 @@ const AdminNewsletters = () => {
)}
{hasPermission('newsletters.delete') && (
<Button
variant="outline"
variant="outline-destructive"
size="sm"
onClick={() => handleDelete(newsletter)}
className="border-red-500 text-red-500 hover:bg-red-50"
className=""
>
<Trash2 className="h-4 w-4" />
</Button>

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

@@ -294,7 +294,7 @@ const AdminPlans = () => {
onClick={() => handleEditPlan(plan)}
variant="outline"
size="sm"
className="flex-1 border-brand-purple text-brand-purple hover:bg-brand-purple hover:text-white rounded-full"
className="flex-1 border-brand-purple text-brand-purple hover:bg-brand-purple hover:text-white rounded-full dark:hover:text-background"
>
<Edit className="h-4 w-4 mr-1" />
Edit
@@ -303,7 +303,7 @@ const AdminPlans = () => {
onClick={() => handleDeleteClick(plan)}
variant="outline"
size="sm"
className="flex-1 border-red-500 text-red-500 hover:bg-red-500 hover:text-white rounded-full"
className="flex-1 border-red-500 text-red-500 hover:bg-red-500 dark:hover:bg-red-500/10 hover:text-white rounded-full"
disabled={plan.subscriber_count > 0}
>
<Trash2 className="h-4 w-4 mr-1" />

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

@@ -291,8 +291,8 @@ const AdminStaff = () => {
onClick={() => handleToggleStatus(user.id, user.status)}
variant="outline"
className={`border-2 rounded-full px-4 py-2 ${user.status === 'active'
? 'border-orange-500 text-orange-600 hover:bg-orange-50'
: 'border-green-500 text-green-600 hover:bg-green-50'
? 'border-orange-500 text-orange-600 hover:bg-orange-50 dark:hover:bg-orange-600/10'
: 'border-green-500 text-green-600 hover:bg-green-50 hover:dark:bg-green-600/10'
}`}
>
{user.status === 'active' ? (
@@ -313,7 +313,7 @@ const AdminStaff = () => {
<Button
onClick={() => handleDeleteUser(user.id, `${user.first_name} ${user.last_name}`)}
variant="outline"
className="border-2 border-red-500 text-red-600 hover:bg-red-50 rounded-full px-4 py-2"
className="border-2 border-red-500 text-red-600 hover:bg-red-50 dark:hover:bg-red-600/10 rounded-full px-4 py-2"
>
<Trash2 className="h-4 w-4 mr-2" />
Delete

10
src/pages/admin/AdminSubscriptions.js
View File

@@ -419,7 +419,7 @@ Proceed with activation?`;
<DropdownMenuTrigger asChild>
<Button
disabled={exporting}
className="bg-[var(--green-light)] text-white hover:bg-[var(--green-soft)] rounded-full px-6 py-2 flex items-center gap-2"
className="btn-green py-2 flex items-center gap-2"
>
<Download className="h-4 w-4" />
{exporting ? 'Exporting...' : 'Export'}
@@ -521,9 +521,9 @@ Proceed with activation?`;
{sub.status === 'active' && hasPermission('subscriptions.cancel') && (
<Button
size="sm"
variant="outline"
variant="outline-destructive"
onClick={() => handleCancelSubscription(sub.id)}
className="flex-1 text-red-600 hover:bg-red-50"
className="flex-1 "
>
<XCircle className="h-4 w-4 mr-2" />
Cancel
@@ -626,9 +626,9 @@ Proceed with activation?`;
{sub.status === 'active' && hasPermission('subscriptions.cancel') && (
<Button
size="sm"
variant="outline"
variant="outline-destructive"
onClick={() => handleCancelSubscription(sub.id)}
className="text-red-600 hover:bg-red-50"
className=""
>
<XCircle className="h-4 w-4" />
</Button>

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

@@ -437,7 +437,7 @@ const AdminValidations = () => {
disabled={actionLoading === user.id}
size="sm"
variant="outline"
className="border-2 border-red-500 text-red-500 hover:bg-red-50"
className="border-2 border-red-500 text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10"
>
<X className="h-4 w-4 mr-1" />
Reject
@@ -462,7 +462,7 @@ const AdminValidations = () => {
disabled={actionLoading === user.id}
size="sm"
variant="outline"
className="border-2 border-red-500 text-red-500 hover:bg-red-50"
className="border-2 border-red-500 text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10"
>
<X className="h-4 w-4 mr-1" />
Reject
@@ -487,7 +487,7 @@ const AdminValidations = () => {
disabled={actionLoading === user.id}
size="sm"
variant="outline"
className="border-2 border-red-500 text-red-500 hover:bg-red-50"
className="border-2 border-red-500 text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10"
>
<X className="h-4 w-4 mr-1" />
Reject