Cleanup user list

app/scenes/Settings/components/UserListItem.js

@@ -0,0 +1,45 @@
+// @flow
+import * as React from 'react';
+import styled from 'styled-components';
+import { color } from 'shared/styles/constants';
+
+import UserMenu from 'menus/UserMenu';
+import Avatar from 'components/Avatar';
+import ListItem from 'components/List/Item';
+import type { User } from '../../../types';
+
+type Props = {
+  user: User,
+  isCurrentUser: boolean,
+};
+
+const UserListItem = ({ user, isCurrentUser }: Props) => {
+  return (
+    <ListItem
+      key={user.id}
+      title={user.name}
+      image={<Avatar src={user.avatarUrl} size={40} />}
+      subtitle={
+        <React.Fragment>
+          {user.username ? user.username : user.email}
+          {user.isAdmin && <Badge admin={user.isAdmin}>Admin</Badge>}
+          {user.isSuspended && <Badge>Suspended</Badge>}
+        </React.Fragment>
+      }
+      actions={isCurrentUser ? undefined : <UserMenu user={user} />}
+    />
+  );
+};
+
+const Badge = styled.span`
+  margin-left: 10px;
+  padding: 2px 6px 3px;
+  background-color: ${({ admin }) => (admin ? color.primary : color.smokeDark)};
+  color: ${({ admin }) => (admin ? color.white : color.text)};
+  border-radius: 2px;
+  font-size: 11px;
+  text-transform: uppercase;
+  font-weight: normal;
+`;
+
+export default UserListItem;