add account overview, cleanup
Change-Id: I176af7a7688f38cb30eb7d65fa3e00e55f10da6f
diff --git a/client/src/components/MessageList.js b/client/src/components/MessageList.js
index 4841ea1..1673a38 100644
--- a/client/src/components/MessageList.js
+++ b/client/src/components/MessageList.js
@@ -1,26 +1,26 @@
import Message from './Message'
import React from 'react'
-import { Avatar, Box, Divider, Typography } from '@material-ui/core'
-import { PersonRounded } from '@material-ui/icons'
+import { Box, Divider, Typography } from '@material-ui/core'
+import ConversationAvatar from './ConversationAvatar'
export default function MessageList(props) {
- const displayName = props.conversation.getDisplayName()
+ const displayName = props.conversation.getDisplayName()
- return (
- <div className="message-list">
- <Box>
- <Box style={{ display: 'inline-block', margin: 16, verticalAlign: 'middle' }}>
- <Avatar>{displayName ? displayName[0].toUpperCase() : <PersonRounded />}</Avatar>
- </Box>
- <Box style={{ display: 'inline-block', verticalAlign: 'middle' }}>
- <Typography variant="h5">{displayName}</Typography>
- <Typography variant="subtitle1">{props.conversation.getId()}</Typography>
- </Box>
- </Box>
- <Divider orientation="horizontal" />
- {props.messages.map((message, index) =>
- <Message key={index} username={message.senderId} text={message.text} />
- )}
- </div>
- )
+ return (
+ <div className="message-list">
+ <Box>
+ <Box style={{ display: 'inline-block', margin: 16, verticalAlign: 'middle' }}>
+ <ConversationAvatar displayName={props.conversation.getDisplayNameNoFallback()} />
+ </Box>
+ <Box style={{ display: 'inline-block', verticalAlign: 'middle' }}>
+ <Typography variant="h6">{displayName}</Typography>
+ <Typography variant="subtitle1">{props.conversation.getId()}</Typography>
+ </Box>
+ </Box>
+ <Divider orientation="horizontal" />
+ {props.messages.map((message, index) =>
+ <Message key={index} username={message.senderId} text={message.text} />
+ )}
+ </div>
+ )
}
\ No newline at end of file