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

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>