improve styling of members page

packages/web/src/app/settings/components/inviteTable.tsx

@@ -25,7 +25,8 @@ export const InviteTable = ({ initialInvites }: InviteTableProps) => {
     }, [initialInvites]);
 
     return (
-        <div>
+        <div className="space-y-2">
+            <h4 className="text-lg font-normal">Invites</h4>
             <DataTable
                 columns={inviteTableColumns()}
                 data={inviteRows}

packages/web/src/app/settings/components/memberInviteForm.tsx

@@ -8,6 +8,7 @@ import { Input } from "@/components/ui/input";
 import { useToast } from "@/components/hooks/use-toast";
 import { createInvite } from "../../../actions"
 import { isServiceError } from "@/lib/utils";
+import { Separator } from "@/components/ui/separator"
 
 const formSchema = z.object({
     email: z.string().min(2).max(40),
@@ -38,7 +39,8 @@ export const MemberInviteForm = ({ orgId, userId }: { orgId: number, userId: str
     }
 
     return (
-        <div>
+        <div className="space-y-2">
+            <h4 className="text-lg font-normal">Invite a member</h4>
             <Form {...form}>
                 <form onSubmit={form.handleSubmit(handleCreateInvite)}>
                     <FormField

packages/web/src/app/settings/components/memberTable.tsx

@@ -23,7 +23,8 @@ export const MemberTable = ({ initialMembers }: MemberTableProps) => {
     }, [initialMembers]);
 
     return (
-        <div>
+        <div className="space-y-2">
+            <h4 className="text-lg font-normal">Members</h4>
             <DataTable
                 columns={memberTableColumns()}
                 data={memberRows}

packages/web/src/app/settings/layout.tsx

@@ -6,8 +6,7 @@ import { SidebarNav } from "./components/sidebar-nav"
 import { NavigationMenu } from "../components/navigationMenu"
 
 export const metadata: Metadata = {
-  title: "Forms",
-  description: "Advanced form example using react-hook-form and Zod.",
+  title: "Settings",
 }
 
 const sidebarNavItems = [

packages/web/src/app/settings/page.tsx

@@ -5,6 +5,7 @@ import { prisma } from "@/prisma";
 import { MemberTable } from "./components/memberTable";
 import { MemberInviteForm } from "./components/memberInviteForm";
 import { InviteTable } from "./components/inviteTable";
+import { Separator } from "@/components/ui/separator"
 
 export default async function MembersPage() {
     const fetchData = async () => {
@@ -66,10 +67,19 @@ export default async function MembersPage() {
 
 
     return (
-        <div>
-            <MemberInviteForm orgId={user.activeOrgId!} userId={user.id} />
-            <InviteTable initialInvites={inviteInfo} />
-            <MemberTable initialMembers={memberInfo} />
+        <div className="space-y-6">
+            <div>
+                <h3 className="text-lg font-medium">Members</h3>
+                <p className="text-sm text-muted-foreground">
+                    Invite and manage members of your organization.
+                </p>
+            </div>
+            <Separator />
+            <div className="space-y-6">
+                <MemberTable initialMembers={memberInfo} />
+                <MemberInviteForm orgId={user.activeOrgId!} userId={user.id} />
+                <InviteTable initialInvites={inviteInfo} />
+            </div>
         </div>
     )
 }