feat(ui): adjust team page layout (#1007)

* feat(ui): display green check button after copy success

* feat(ui): set max width for getting started page

* feat(ui): adjust team management layout

* adjust team table layout

ee/tabby-ui/app/(dashboard)/team/components/create-invitation-form.tsx

@@ -47,7 +47,7 @@ export default function CreateInvitationForm({
 
   return (
     <Form {...form}>
-      <div className="flex flex-col items-end gap-2">
+      <div className="flex flex-col items-start gap-2">
         <form
           className="flex w-full items-center gap-2"
           onSubmit={form.handleSubmit(onSubmit)}

ee/tabby-ui/app/(dashboard)/team/components/invitation-table.tsx

@@ -54,23 +54,23 @@ export default function InvitationTable() {
   return (
     invitations && (
       <Table>
-        <TableHeader>
-          <TableRow>
-            <TableHead>Invitee</TableHead>
-            <TableHead>Created</TableHead>
-            <TableHead></TableHead>
-          </TableRow>
-        </TableHeader>
+        {invitations.length > 0 && (
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-[25%]">Invitee</TableHead>
+              <TableHead className="w-[45%]">Created</TableHead>
+              <TableHead>Actions</TableHead>
+            </TableRow>
+          </TableHeader>
+        )}
         <TableBody>
           {invitations.map((x, i) => {
             const link = `${origin}/auth/signup?invitationCode=${x.code}`
             return (
               <TableRow key={i}>
-                <TableCell className="w-[300px] font-medium">
-                  {x.email}
-                </TableCell>
+                <TableCell>{x.email}</TableCell>
                 <TableCell>{moment.utc(x.createdAt).fromNow()}</TableCell>
-                <TableCell className="flex items-center">
+                <TableCell>
                   <CopyButton value={link} />
                   <Button
                     size="icon"

ee/tabby-ui/app/(dashboard)/team/components/team.tsx

@@ -7,18 +7,19 @@ import UsersTable from './user-table'
 
 export default function Team() {
   return (
-    <div className="xl:max-w-[750px]">
+    <div>
       <div>
         <CardHeader>
-          <CardTitle>Invites</CardTitle>
+          <CardTitle>Pending Invites</CardTitle>
         </CardHeader>
         <CardContent className="p-4">
           <InvitationTable />
         </CardContent>
       </div>
+      <div className="h-16" />
       <div>
         <CardHeader>
-          <CardTitle>Users</CardTitle>
+          <CardTitle>Members</CardTitle>
         </CardHeader>
         <CardContent className="p-4">
           <UsersTable />

ee/tabby-ui/app/(dashboard)/team/components/user-table.tsx

@@ -5,6 +5,7 @@ import moment from 'moment'
 
 import { graphql } from '@/lib/gql/generates'
 import { useAuthenticatedGraphQLQuery } from '@/lib/tabby/gql'
+import { Badge } from '@/components/ui/badge'
 import {
   Table,
   TableBody,
@@ -25,7 +26,7 @@ const listUsers = graphql(/* GraphQL */ `
 `)
 
 export default function UsersTable() {
-  const { data, mutate } = useAuthenticatedGraphQLQuery(listUsers)
+  const { data } = useAuthenticatedGraphQLQuery(listUsers)
   const users = data?.users
 
   return (
@@ -33,17 +34,23 @@ export default function UsersTable() {
       <Table>
         <TableHeader>
           <TableRow>
-            <TableHead>Email</TableHead>
-            <TableHead>Joined</TableHead>
+            <TableHead className="w-[25%]">Email</TableHead>
+            <TableHead className="w-[45%]">Joined</TableHead>
             <TableHead>Role</TableHead>
           </TableRow>
         </TableHeader>
         <TableBody>
           {users.map((x, i) => (
             <TableRow key={i}>
-              <TableCell className="w-[300px] font-medium">{x.email}</TableCell>
+              <TableCell>{x.email}</TableCell>
               <TableCell>{moment.utc(x.createdAt).fromNow()}</TableCell>
-              <TableCell>{x.isAdmin ? 'Admin' : 'Member'}</TableCell>
+              <TableCell>
+                {x.isAdmin ? (
+                  <Badge>OWNER</Badge>
+                ) : (
+                  <Badge variant="secondary">MEMBER</Badge>
+                )}
+              </TableCell>
             </TableRow>
           ))}
         </TableBody>

ee/tabby-ui/components/copy-button.tsx

@@ -29,7 +29,7 @@ export function CopyButton({ className, value, ...props }: CopyButtonProps) {
       onClick={onCopy}
       {...props}
     >
-      {isCopied ? <IconCheck /> : <IconCopy />}
+      {isCopied ? <IconCheck className="text-green-600" /> : <IconCopy />}
       <span className="sr-only">Copy</span>
     </Button>
   )