feat: add @tailwindcss/line-clamp dependency and integrate responsive layout adjustments in Admin components for improved UI
This commit is contained in:
@@ -60,7 +60,7 @@ const AdminDashboard = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className='flex justify-between items-center'>
|
||||
<div className='flex flex-col md:flex-row md:justify-between md:items-center'>
|
||||
<div className="mb-8">
|
||||
<h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
Admin Dashboard
|
||||
@@ -69,9 +69,9 @@ const AdminDashboard = () => {
|
||||
Manage users, events, and membership applications.
|
||||
</p>
|
||||
</div>
|
||||
<Link to={'/'}>
|
||||
<Link to={'/'} className=''>
|
||||
<Button
|
||||
className="btn-lavender"
|
||||
className="btn-lavender mb-8 md:mb-0 "
|
||||
>
|
||||
<Globe />
|
||||
View Public Site
|
||||
|
||||
@@ -244,7 +244,7 @@ const AdminMembers = () => {
|
||||
return (
|
||||
<>
|
||||
<div className="mb-8">
|
||||
<div className="flex justify-between items-start mb-4">
|
||||
<div className="flex flex-col md:flex-row justify-between items-start mb-4">
|
||||
<div>
|
||||
<h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
Members Management
|
||||
@@ -253,7 +253,7 @@ const AdminMembers = () => {
|
||||
Manage paying members and their subscriptions.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-3 flex-wrap">
|
||||
<div className="flex gap-3 flex-wrap ">
|
||||
{hasPermission('users.export') && (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
|
||||
@@ -132,7 +132,7 @@ const AdminStaff = () => {
|
||||
return (
|
||||
<>
|
||||
<div className="mb-8">
|
||||
<div className="flex justify-between items-start mb-4">
|
||||
<div className="flex flex-col md:flex-row justify-between items-start mb-4">
|
||||
<div>
|
||||
<h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
Staff Management
|
||||
@@ -141,7 +141,7 @@ const AdminStaff = () => {
|
||||
Manage internal team members and their roles.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-3">
|
||||
<div className="flex gap-3 ">
|
||||
{hasPermission('users.create') && (
|
||||
<Button
|
||||
onClick={() => setInviteDialogOpen(true)}
|
||||
@@ -194,13 +194,13 @@ 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">
|
||||
<UserCog className="h-5 w-5 mr-2" />
|
||||
<TabsList className="grid w-full grid-cols-2 mb-8 ">
|
||||
<TabsTrigger value="staff-list" className="text-sm sm:text-md md:text-lg py-3">
|
||||
<UserCog className="h-5 w-5 mr-2 hidden md:inline" />
|
||||
Staff Members
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="pending-invitations" className="text-lg py-3 ">
|
||||
<Mail className="h-5 w-5 mr-2" />
|
||||
<TabsTrigger value="pending-invitations" className="text-sm sm:text-md md:text-lg py-3 ">
|
||||
<Mail className="h-5 w-5 mr-2 hidden md:inline" />
|
||||
Pending Invitations
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
Reference in New Issue
Block a user