Style chat pictures

app/lib/components/Chat/Chat.jsx

@@ -46,7 +46,8 @@ Chat.propTypes =
 	onSendMessage     : PropTypes.func,
 	disabledInput     : PropTypes.bool,
 	autofocus         : PropTypes.bool,
-	displayName       : PropTypes.string
+	displayName       : PropTypes.string,
+	picture           : PropTypes.string
 };
 
 Chat.defaultProps =

app/lib/components/Chat/MessageList.jsx

@@ -56,8 +56,9 @@ class MessageList extends Component
 						return (
 							<div className='message' key={i}>
 								<div className={message.sender}>
-									{picture && <img src={picture} />}
+									<img className='message-avatar' src={picture} />
 
+									<div className='message-content'>
 										<div
 											className='message-text'
 											// eslint-disable-next-line react/no-danger
@@ -66,11 +67,13 @@ class MessageList extends Component
 												{ sanitize: true, renderer: linkRenderer }
 											) }}
 										/>
+
 										<span className='message-time'>
 											{message.name} - {this.getTimeString(messageTime)}
 										</span>
 									</div>
 								</div>
+							</div>
 						);
 					})
 				}
@@ -81,7 +84,8 @@ class MessageList extends Component
 
 MessageList.propTypes =
 {
-	chatmessages : PropTypes.arrayOf(PropTypes.object).isRequired
+	chatmessages : PropTypes.arrayOf(PropTypes.object).isRequired,
+	myPicture    : PropTypes.string
 };
 
 const mapStateToProps = (state) =>

app/lib/redux/reducers/peers.js

@@ -31,7 +31,8 @@ const peer = (state = {}, action) =>
 
 		case 'REMOVE_CONSUMER':
 		{
-			const consumers = state.consumers.filter((consumer) => consumer !== action.payload.consumerId);
+			const consumers = state.consumers.filter((consumer) =>
+				consumer !== action.payload.consumerId);
 
 			return { ...state, consumers };
 		}

app/stylus/components/Chat.styl

@@ -74,31 +74,22 @@
 		color: rgba(#000, 1.0)
 
 		> .client {
-			background-color: rgba(#fff, 0.9);
-			border-radius: 5px;
-			padding: 6px;
-			max-width: 215px;
-			text-align: left;
 			margin-left: auto;
-
-			> .message-text {
-				font-size: 1.3vmin;
-				color: rgba(#000, 1.0);
 		}
 
-			> .message-time {
-				font-size: 1vmin;
-				color: rgba(#777, 1.0)
-			}
-		}
-
-		> .response {
+		> .client, > .response {
 			background-color: rgba(#fff, 0.9);
 			border-radius: 5px;
-			padding: 6px;
 			max-width: 215px;
-			text-align: left;
-			font-size: 1.3vmin;
+			display: flex;
+			align-items: center;
+
+			> .message-avatar {
+				height: 2rem;
+			}
+
+			> .message-content {
+				padding: 6px;
 
 				> .message-text {
 					font-size: 1.3vmin;
@@ -112,6 +103,7 @@
 			}
 		}
 	}
+}
 
 [data-component='Sender'] {
 	align-items: center;