From 04991fd1e839c181ef50430c9d220f9048f811b9 Mon Sep 17 00:00:00 2001
From: msukkari <michael.sukkarieh@mail.mcgill.ca>
Date: Mon, 10 Feb 2025 18:14:13 -0800
Subject: [PATCH] improve styling of members page

---
 .../app/settings/components/inviteTable.tsx    |  3 ++-
 .../settings/components/memberInviteForm.tsx   |  4 +++-
 .../app/settings/components/memberTable.tsx    |  3 ++-
 packages/web/src/app/settings/layout.tsx       |  3 +--
 packages/web/src/app/settings/page.tsx         | 18 ++++++++++++++----
 5 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/packages/web/src/app/settings/components/inviteTable.tsx b/packages/web/src/app/settings/components/inviteTable.tsx
index 86b4ae42..b270322f 100644
--- a/packages/web/src/app/settings/components/inviteTable.tsx
+++ b/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}
diff --git a/packages/web/src/app/settings/components/memberInviteForm.tsx b/packages/web/src/app/settings/components/memberInviteForm.tsx
index e4cd7807..4219d693 100644
--- a/packages/web/src/app/settings/components/memberInviteForm.tsx
+++ b/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
diff --git a/packages/web/src/app/settings/components/memberTable.tsx b/packages/web/src/app/settings/components/memberTable.tsx
index 03df71db..91da0f05 100644
--- a/packages/web/src/app/settings/components/memberTable.tsx
+++ b/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}
diff --git a/packages/web/src/app/settings/layout.tsx b/packages/web/src/app/settings/layout.tsx
index 7195fdc2..13d5109d 100644
--- a/packages/web/src/app/settings/layout.tsx
+++ b/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 = [
diff --git a/packages/web/src/app/settings/page.tsx b/packages/web/src/app/settings/page.tsx
index 7af9a642..acd808b7 100644
--- a/packages/web/src/app/settings/page.tsx
+++ b/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>
     )
 }
\ No newline at end of file