Fixes #687

Tidied people list, now displaying joined at date

app/scenes/Settings/People.js

@@ -32,9 +32,8 @@ class People extends React.Component<Props> {
         <PageTitle title="People" />
         <h1>People</h1>
         <HelpText>
-          Everyone that has signed in to your Outline appears here. It's
-          possible that there are other people who have access but haven't
-          signed in yet.
+          Everyone that has signed in to your Outline appear here. It’s possible
+          that there are other people who have access but haven’t signed in yet.
         </HelpText>
 
         <List>
@@ -42,7 +41,7 @@ class People extends React.Component<Props> {
             <UserListItem
               key={user.id}
               user={user}
-              isCurrentUser={currentUser.id === user.id}
+              showMenu={!!currentUser.isAdmin && currentUser.id !== user.id}
             />
           ))}
         </List>

app/scenes/Settings/components/UserListItem.js

@@ -1,5 +1,6 @@
 // @flow
 import * as React from 'react';
+import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
 import styled from 'styled-components';
 
 import UserMenu from 'menus/UserMenu';
@@ -9,10 +10,10 @@ import type { User } from '../../../types';
 
 type Props = {
   user: User,
-  isCurrentUser: boolean,
+  showMenu: boolean,
 };
 
-const UserListItem = ({ user, isCurrentUser }: Props) => {
+const UserListItem = ({ user, showMenu }: Props) => {
   return (
     <ListItem
       key={user.id}
@@ -20,12 +21,13 @@ const UserListItem = ({ user, isCurrentUser }: Props) => {
       image={<Avatar src={user.avatarUrl} size={40} />}
       subtitle={
         <React.Fragment>
-          {user.username ? user.username : user.email}
+          {user.email ? `${user.email} · ` : undefined}
+          {`Joined ${distanceInWordsToNow(user.createdAt)} ago`}
           {user.isAdmin && <Badge admin={user.isAdmin}>Admin</Badge>}
           {user.isSuspended && <Badge>Suspended</Badge>}
         </React.Fragment>
       }
-      actions={isCurrentUser ? undefined : <UserMenu user={user} />}
+      actions={showMenu ? <UserMenu user={user} /> : undefined}
     />
   );
 };

app/types/index.js

@@ -7,6 +7,7 @@ export type User = {
   username: string,
   isAdmin?: boolean,
   isSuspended?: boolean,
+  createdAt: string,
 };
 
 export type Toast = {