user icons for modal and page

less/chats.less

@@ -76,6 +76,8 @@
 		.user-img {
 			width: 50px;
 			height: 50px;
+			line-height: 50px;
+			font-size: 2.4rem;
 			float: left;
 			margin-top: 4px;
 			margin-right: 13px;
@@ -148,7 +150,9 @@
 			.chat-user-image {
 				width: 32px;
 				height: 32px;
+				border-radius: 50%;
 				float: left;
+				font-size: 1.6rem;
 			}
 
 			.chat-user {

templates/partials/chat_contact.tpl

@@ -1,5 +1,9 @@
 			<li data-username="{../username}" data-uid="{../uid}" class="<!-- IF ../unread -->unread<!-- ENDIF ../unread -->">
+				<!-- IF ../picture -->
 				<img class="user-img" src="{../picture}">
+				<!-- ELSE -->
+				<div class="user-icon user-img" style="background-color: {../icon:bgColor};">{../icon:text}</div>
+				<!-- ENDIF ../picture -->
 				<i component="user/status" title="[[global:{../status}]]" class="fa fa-circle status {../status}"></i>
 				<span class="username">{../username}</span>
 				<span class="teaser-content">{../teaser.content}</span>

templates/partials/chat_message.tpl

@@ -1,6 +1,12 @@
 				<li class="chat-message clear" data-uid="{messages.fromuid}" data-self="{messages.self}" data-break="{messages.newSet}">
 					<div class="message-header">
-						<a href="{config.relative_path}/user/{messages.fromUser.userslug}"><img class="chat-user-image img-circle not-responsive" src="{messages.fromUser.picture}"></a>
+						<a href="{config.relative_path}/user/{messages.fromUser.userslug}">
+							<!-- IF messages.fromUser.picture -->
+							<img class="chat-user-image not-responsive" src="{messages.fromUser.picture}">
+							<!-- ELSE -->
+							<div class="user-icon chat-user-image" style="background-color: {messages.fromUser.icon:bgColor};">{messages.fromUser.icon:text}</div>
+							<!-- ENDIF messages.fromUser.picture -->
+						</a>
 						<strong><span class="chat-user">{messages.fromUser.username}</span></strong>
 						<span class="chat-timestamp timeago" title="{messages.timestampISO}"></span>
 					</div>