Improve message layout

app/components/Message.js

@@ -7,13 +7,14 @@ import { emojify } from 'react-emojione';
 
 const styles = StyleSheet.create({
 	message: {
-		borderColor: '#aaa',
-		padding: 14,
+		padding: 12,
+		paddingTop: 6,
+		paddingBottom: 6,
 		flexDirection: 'row',
 		transform: [{ scaleY: -1 }]
 	},
 	avatarContainer: {
-		backgroundColor: '#ccc',
+		backgroundColor: '#eee',
 		width: 40,
 		height: 40,
 		marginRight: 10,

app/views/room.js

@@ -77,10 +77,6 @@ export default class RoomView extends React.Component {
 
 	sendMessage = message => RocketChat.sendMessage(this.rid, message);
 
-	renderSeparator = () => (
-		<View style={styles.separator} />
-	);
-
 	renderItem = ({ item }) => (
 		<Message
 			id={item._id}
@@ -110,7 +106,6 @@ export default class RoomView extends React.Component {
 					extraData={this.state}
 					renderItem={this.renderItem}
 					keyExtractor={item => item._id}
-					ItemSeparatorComponent={this.renderSeparator}
 				/>
 				<MessageBox
 					onSubmit={this.sendMessage}