https://github.com/NodeBB/nodebb-theme-persona/issues/299

less/chats.less

@@ -9,7 +9,7 @@
 		clear: both;
 		list-style-type: none;
 		padding: 0.5em;
-		height: 70px;
+		height: 90px;
 		.pointer;
 
 		border-left: 1px solid;
@@ -69,14 +69,6 @@
 			height: 20px;
 		}
 
-		.user-img {
-			.user-icon-style(50px, 2.4rem, 50%);
-			float: left;
-			margin-top: 4px;
-			margin-right: 13px;
-			margin-left: 0.5em;
-		}
-
 		.status {
 			position: absolute;
 			left: 50px;
@@ -242,12 +234,12 @@
 }
 
 [component="chat/search/list"] {
-	
+
 	padding: 0;
 	overflow-x: hidden;
 	overflow-y: auto;
 	border-top: 1px solid @gray-lighter;
-	
+
 	li {
 		position: relative;
 		clear: both;

less/header.less

@@ -16,16 +16,9 @@
 			padding: 0.5em;
 			clear: both;
 
-			img, .user-icon {
-				.user-icon-style(@border-radius: 50%);
-				float: left;
-			}
-
 			a {
 				white-space: normal;
-				overflow: hidden;
 				margin: 0;
-				// padding: 3px 5px 3px 20px;
 				text-overflow: ellipsis;
 
 				.text {
@@ -76,17 +69,10 @@
 
 		li {
 			.pointer;
-			width: 200px;
+			width: 300px;
 
 			a {
-				display: block;
-				line-height: 30px;
-
 				position: relative;
-
-				.avatar {
-					margin-right: 1rem;
-				}
 			}
 
 			&.no_active a {

templates/partials/chat_dropdown.tpl

@@ -1,21 +1,24 @@
 <!-- IF rooms.length -->
 <!-- BEGIN rooms -->
-<li class="<!-- IF ../unread -->unread<!-- ENDIF ../unread -->" data-roomId="{../roomId}">
+<li class="<!-- IF ../unread -->unread<!-- ENDIF ../unread -->">
-	<a data-ajaxify="false">
+	<a data-ajaxify="false" data-roomid="{rooms.roomId}">
-		<!-- IF lastUser -->
+		<p>{rooms.roomName}</p>
-		<!-- IF ../lastUser.picture -->
+	</a>
-		<img class="avatar avatar-md avatar-rounded" src="{../lastUser.picture}" title="{../lastUser.username}" />
+
-		<!-- ELSE -->
+	<!-- BEGIN rooms.users -->
-		<div class="avatar avatar-md avatar-rounded" style="background-color: {../lastUser.icon:bgColor}">{../lastUser.icon:text}</div>
+	<a href="{config.relative_path}/user/{rooms.users.userslug}">
-		<!-- ENDIF ../lastUser.picture -->
+		<!-- IF rooms.users.picture -->
-		<!-- ENDIF lastUser -->
+		<img class="user-img avatar avatar-sm avatar-rounded" src="{rooms.users.picture}" title="{rooms.users.username}">
-		
-		<!-- IF lastUser -->
-		{../usernames}
 		<!-- ELSE -->
-		[[modules:chat.no-users-in-room]]
+		<div class="user-img avatar avatar-sm avatar-rounded" title="{rooms.users.username}" style="background-color: {rooms.users.icon:bgColor};">{rooms.users.icon:text}</div>
-		<!-- ENDIF lastUser -->
+		<!-- ENDIF rooms.users.picture -->
 	</a>
+	<!-- END rooms.users -->
+	<!-- IF !rooms.lastUser.uid -->
+	[[modules:chat.no-users-in-room]]
+	<!-- ENDIF !rooms.lastUser.uid -->
+
+
 </li>
 <!-- END rooms -->
 <!-- ELSE -->

templates/partials/chat_recent_room.tpl

@@ -1,18 +1,18 @@
 <li component="chat/recent/room" data-roomid="{rooms.roomId}" class="<!-- IF rooms.unread -->unread<!-- ENDIF rooms.unread -->">
 	<i class="fa fa-times pull-right leave" component="chat/leave"></i>
-	<!-- IF rooms.lastUser.uid -->
+	<div>
-	<div data-username="{rooms.lastUser.username}" data-uid="{rooms.lastUser.uid}">
+		<p>{rooms.roomName}</p>
-		<!-- IF rooms.lastUser.picture -->
+		<!-- BEGIN rooms.users -->
-		<img class="user-img" src="{rooms.lastUser.picture}">
+			<!-- IF rooms.users.picture -->
-		<!-- ELSE -->
+			<img class="user-img avatar avatar-sm avatar-rounded" src="{rooms.users.picture}" title="{rooms.users.username}">
-		<div class="user-icon user-img" style="background-color: {rooms.lastUser.icon:bgColor};">{rooms.lastUser.icon:text}</div>
+			<!-- ELSE -->
-		<!-- ENDIF rooms.lastUser.picture -->
+			<div class="user-img avatar avatar-sm avatar-rounded" title="{rooms.users.username}" style="background-color: {rooms.users.icon:bgColor};">{rooms.users.icon:text}</div>
-		<i component="user/status" title="[[global:{rooms.lastUser.status}]]" class="fa fa-circle status {rooms.lastUser.status}"></i>
+			<!-- ENDIF rooms.users.picture -->
-		<span class="username">{rooms.usernames}</span>
+		<!-- END rooms.users -->
+		<!-- IF !rooms.lastUser.uid -->
+		[[modules:chat.no-users-in-room]]
+		<!-- ENDIF !rooms.lastUser.uid -->
 	</div>
-	<!-- ELSE -->
-	[[modules:chat.no-users-in-room]]
-	<!-- ENDIF rooms.lastUser.uid -->
 
 	<span class="teaser-content">{rooms.teaser.content}</span>
 	<span class="teaser-timestamp timeago pull-right" title="{rooms.teaser.timestampISO}"></span>

templates/partials/notifications_list.tpl

@@ -7,10 +7,10 @@
 <li class="{notifications.readClass}" data-nid="{notifications.nid}">
 	<!-- IF notifications.image -->
 	<!-- IF notifications.from -->
-	<a href="{config.relative_path}/user/{notifications.user.userslug}"><img src="{notifications.image}" /></a>
+	<a href="{config.relative_path}/user/{notifications.user.userslug}"><img class="pull-left user-img avatar avatar-md avatar-rounded"src="{notifications.image}" /></a>
 	<!-- ENDIF notifications.from -->
 	<!-- ELSE -->
-	<a href="{config.relative_path}/user/{notifications.user.userslug}"><div class="user-icon" style="background-color: {notifications.user.icon:bgColor};">{notifications.user.icon:text}</div></a>
+	<a href="{config.relative_path}/user/{notifications.user.userslug}"><div class="pull-left avatar avatar-md avatar-rounded" style="background-color: {notifications.user.icon:bgColor};">{notifications.user.icon:text}</div></a>
 	<!-- ENDIF notifications.image -->
 
 	<div class="pull-right mark-read" aria-label="Mark Read"></div>