[SDP-1235] Display the user email on the "Team Members" section (#131)

### What

Display the user email on the "Team Members" section.

<img width="754" alt="Screenshot 2024-08-06 at 4 07 02 PM" src="https://github.com/user-attachments/assets/c6972560-7994-4ead-b316-5c675f777aee">


### Why

This is a piece of important user-related information when managing the organization's users.

src/components/SettingsTeamMembers.tsx

@@ -194,23 +194,23 @@ export const SettingsTeamMembers = () => {
       <div className="UsersTable">
         <Table>
           <Table.Header>
-            <Table.HeaderCell width="12rem">Member</Table.HeaderCell>
-            <Table.HeaderCell width="9rem">Role</Table.HeaderCell>
+            <Table.HeaderCell>Member</Table.HeaderCell>
+            <Table.HeaderCell width="12rem">Email</Table.HeaderCell>
+            <Table.HeaderCell>Role</Table.HeaderCell>
             <Table.HeaderCell>Status</Table.HeaderCell>
             <Table.HeaderCell> </Table.HeaderCell>
           </Table.Header>
 
           <Table.Body>
             {usersData.map((u) => (
               <Table.BodyRow key={u.id}>
-                <Table.BodyCell width="12rem">
+                <Table.BodyCell>
                   {u.first_name || u.last_name
                     ? `${u.first_name} ${u.last_name}`
                     : u.email}
                 </Table.BodyCell>
-                <Table.BodyCell width="9rem">
-                  {userRoleText(u.roles?.[0])}
-                </Table.BodyCell>
+                <Table.BodyCell width="12rem">{u.email}</Table.BodyCell>
+                <Table.BodyCell>{userRoleText(u.roles?.[0])}</Table.BodyCell>
                 <Table.BodyCell>
                   {u.is_active ? "Active" : "Inactive"}
                 </Table.BodyCell>