updating styling for chat dropdown

less/header.less

@@ -9,9 +9,6 @@
 		li {
 			width: 300px;
 			text-align: left;
-			margin-bottom: 5px;
-			margin-right: 5px;
-			margin-left: 5px;
 			list-style-type: none;
 			padding: 0.5em;
 			clear: both;
@@ -67,18 +64,39 @@
 	.chat-list {
 		.notification-list;
 
-		li {
+		> li {
 			.pointer;
 			width: 300px;
+			padding-bottom: 1rem;
+			margin: 0;
 
-			a {
-				position: relative;
+			&:hover {
+				background: @gray-lighter;
+			}
+
+			&:not(:last-child) {
+				border-bottom: 1px solid @gray-lighter;
 			}
 
 			&.no_active a {
 				text-align: center;
 				white-space: normal;
 			}
+
+			a {
+				line-height: 24px;
+			}
+
+			.members {
+				padding-left: 1rem;
+
+				li {
+					display: inline-block;
+					width: 16px;
+					padding: 0;
+					margin: 0;
+				}
+			}
 		}
 	}
 }

templates/partials/chat_dropdown.tpl

@@ -1,22 +1,24 @@
 <!-- IF rooms.length -->
 <!-- BEGIN rooms -->
 <li class="<!-- IF ../unread -->unread<!-- ENDIF ../unread -->">
-	<a data-ajaxify="false" data-roomid="{rooms.roomId}">
-		<p>{rooms.roomName}</p>
-	</a>
+	<a data-ajaxify="false" data-roomid="{rooms.roomId}">{rooms.roomName}</a>
 
-	<!-- BEGIN rooms.users -->
-	<a href="{config.relative_path}/user/{rooms.users.userslug}" class="user-link">
-		<!-- IF rooms.users.picture -->
-		<img class="user-img avatar avatar-sm avatar-rounded" src="{rooms.users.picture}" title="{rooms.users.username}">
-		<!-- ELSE -->
-		<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 rooms.users.picture -->
-	</a>
-	<!-- END rooms.users -->
-	<!-- IF !rooms.lastUser.uid -->
-	[[modules:chat.no-users-in-room]]
-	<!-- ENDIF !rooms.lastUser.uid -->
+	<ul class="members">
+		<!-- BEGIN rooms.users -->
+		<li>
+			<a href="{config.relative_path}/user/{rooms.users.userslug}" class="user-link">
+				<!-- IF rooms.users.picture -->
+				<img class="user-img avatar avatar-sm avatar-rounded" src="{rooms.users.picture}" title="{rooms.users.username}">
+				<!-- ELSE -->
+				<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 rooms.users.picture -->
+			</a>
+		</li>
+		<!-- END rooms.users -->
+		<!-- IF !rooms.lastUser.uid -->
+		<li>[[modules:chat.no-users-in-room]]</li>
+		<!-- ENDIF !rooms.lastUser.uid -->
+	</ul>
 
 
 </li>