From 1275e6fef4debeaee870b062c48aef6959013d28 Mon Sep 17 00:00:00 2001
From: Torjus <torjusti@gmail.com>
Date: Wed, 18 Jul 2018 14:15:06 +0200
Subject: [PATCH] Style chat pictures

---
 app/lib/components/Chat/Chat.jsx        |  3 +-
 app/lib/components/Chat/MessageList.jsx | 30 ++++++++++--------
 app/lib/redux/reducers/peers.js         |  3 +-
 app/stylus/components/Chat.styl         | 42 ++++++++++---------------
 4 files changed, 38 insertions(+), 40 deletions(-)

diff --git a/app/lib/components/Chat/Chat.jsx b/app/lib/components/Chat/Chat.jsx
index 7b31245..898bf75 100644
--- a/app/lib/components/Chat/Chat.jsx
+++ b/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 =
diff --git a/app/lib/components/Chat/MessageList.jsx b/app/lib/components/Chat/MessageList.jsx
index b8b5099..3f59d1a 100644
--- a/app/lib/components/Chat/MessageList.jsx
+++ b/app/lib/components/Chat/MessageList.jsx
@@ -56,19 +56,22 @@ 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-text'
-										// eslint-disable-next-line react/no-danger
-										dangerouslySetInnerHTML={{ __html : marked.parse(
-											message.text,
-											{ sanitize: true, renderer: linkRenderer }
-										) }}
-									/>
-									<span className='message-time'>
-										{message.name} - {this.getTimeString(messageTime)}
-									</span>
+									<div className='message-content'>
+										<div
+											className='message-text'
+											// eslint-disable-next-line react/no-danger
+											dangerouslySetInnerHTML={{ __html : marked.parse(
+												message.text,
+												{ 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) =>
diff --git a/app/lib/redux/reducers/peers.js b/app/lib/redux/reducers/peers.js
index e477c48..ea9cb44 100644
--- a/app/lib/redux/reducers/peers.js
+++ b/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 };
 		}
diff --git a/app/stylus/components/Chat.styl b/app/stylus/components/Chat.styl
index 6cfe785..28d69bc 100644
--- a/app/stylus/components/Chat.styl
+++ b/app/stylus/components/Chat.styl
@@ -74,40 +74,32 @@
 		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-text {
-				font-size: 1.3vmin;
-				color: rgba(#000, 1.0);
+			> .message-avatar {
+				height: 2rem;
 			}
 
-			> .message-time {
-				font-size: 1vmin;
-				color: rgba(#777, 1.0);
+			> .message-content {
+				padding: 6px;
+
+				> .message-text {
+					font-size: 1.3vmin;
+					color: rgba(#000, 1.0);
+				}
+
+				> .message-time {
+					font-size: 1vmin;
+					color: rgba(#777, 1.0);
+				}
 			}
 		}
 	}