diff --git a/app/components/Message.js b/app/components/Message.js index 7e9b4927b..13cc60761 100644 --- a/app/components/Message.js +++ b/app/components/Message.js @@ -23,7 +23,15 @@ const styles = StyleSheet.create({ avatar: { width: 40, height: 40, - borderRadius: 5 + borderRadius: 5, + position: 'absolute' + }, + avatarInitials: { + margin: 2, + textAlign: 'center', + lineHeight: 36, + fontSize: 22, + color: '#ffffff' }, texts: { flex: 1 @@ -37,6 +45,8 @@ const styles = StyleSheet.create({ } }); +const colors = ['#F44336', '#E91E63', '#9C27B0', '#673AB7', '#3F51B5', '#2196F3', '#03A9F4', '#00BCD4', '#009688', '#4CAF50', '#8BC34A', '#CDDC39', '#FFC107', '#FF9800', '#FF5722', '#795548', '#9E9E9E', '#607D8B']; + export default class Message extends React.PureComponent { static propTypes = { item: PropTypes.object.isRequired, @@ -51,9 +61,21 @@ export default class Message extends React.PureComponent { const msg = emojify(this.props.item.msg || 'asd', { output: 'unicode' }); + let username = this.props.item.u.username; + const position = username.length % colors.length; + + const color = colors[position]; + username = username.replace(/[^A-Za-z0-9]/g, '.').replace(/\.+/g, '.').replace(/(^\.)|(\.$)/g, ''); + + const usernameParts = username.split('.'); + + let initials = usernameParts.length > 1 ? usernameParts[0][0] + usernameParts[usernameParts.length - 1][0] : username.replace(/[^A-Za-z0-9]/g, '').substr(0, 2); + initials = initials.toUpperCase(); + return ( - + + {initials}