feat: chat tweaks, fix colors in skins

make buttons same order as modal
better search placeholder text
prevent negative offsets

less/chats.less

@@ -27,27 +27,16 @@
 	[component="chat/nav-wrapper"] {
 		flex: 1;
 		flex-direction: column;
-		box-shadow: 0 3px 9px rgba(0,0,0,.5);
-
+		padding: 0px 15px;
 		.chats-list {
 			flex: 1;
 			overflow-y: auto;
 			margin-bottom: 0;
-			height: ~"calc(100% - 3em)";
+			height: ~"calc(100% - 5em)";
 		}
 
 		.chat-search {
-			background-color: @panel-default-heading-bg;
-			border-bottom: 1px solid @gray-dark;
-
-			input {
-				background-color: @gray-dark;
-				color: @gray-lighter;
-				border-radius: 0;
-				border: none;
-				height: ~"calc(3em - 2px)";
-			}
-
+			padding-bottom: 15px;
 			ul {
 				width: 100%;
 			}
@@ -57,7 +46,6 @@
 			padding: 0;
 			overflow-x: hidden;
 			overflow-y: auto;
-			border-top: 1px solid @gray-lighter;
 
 			li {
 				position: relative;
@@ -69,8 +57,7 @@
 				border-left: 1px solid;
 				border-right: 1px solid;
 				border-bottom: 1px solid;
-				border-color: #eee;
-				background: #fff;
+				border-color: @gray-lighter;
 
 				i {
 					position: relative;
@@ -91,7 +78,7 @@
 
 	[component="chat/main-wrapper"] {
 		flex: 3;
-
+		padding-bottom: 15px;
 		.alert {
 			margin: 1em;
 		}
@@ -109,9 +96,7 @@
 
 	[component="chat/header"] {
 		padding: @panel-heading-padding;
-		background-color: @gray-dark;
-		border-bottom: none;
-		color: @gray-lighter;
+		border-bottom: 1px solid @modal-header-border-color;
 
 		span {
 			font-weight: 500;
@@ -119,13 +104,11 @@
 
 		.close {
 			margin-left: 0.5em;
-			color: @gray-lighter;
 		}
 
 		.members {
 			a {
 				font-weight: 600;
-				color: @gray-lighter;
 			}
 		}
 

public/persona.js

@@ -36,6 +36,7 @@ $(document).ready(function () {
 			offset -= 70;
 		}
 
+		offset = Math.max(0, offset);
 		document.documentElement.style.setProperty('--panel-offset', `${offset}px`);
 	}
 

templates/chats.tpl

@@ -1,7 +1,7 @@
 <div class="chats-full">
 	<div component="chat/nav-wrapper" data-loaded="<!-- IF roomId -->1<!-- ELSE -->0<!-- END -->">
 		<div class="chat-search dropdown">
-			<input class="form-control" type="text" component="chat/search" placeholder="[[users:enter_username]]" data-toggle="dropdown" />
+			<input class="form-control" type="text" component="chat/search" placeholder="[[users:search-user-for-chat]]" data-toggle="dropdown" />
 			<ul component="chat/search/list" class="dropdown-menu"></ul>
 		</div>
 		<ul component="chat/recent" class="chats-list" data-nextstart="{nextStart}">

templates/partials/chats/message-window.tpl

@@ -1,8 +1,8 @@
 <!-- IF roomId -->
 <div component="chat/messages" class="expanded-chat" data-roomid="{roomId}">
 	<div component="chat/header">
-		<button type="button" class="close" data-action="pop-out"><span aria-hidden="true"><i class="fa fa-compress"></i></span><span class="sr-only">[[modules:chat.pop-out]]</span></button>
 		<button type="button" class="close" aria-label="Close" data-action="close"><span aria-hidden="true">&times;</span></button>
+		<button type="button" class="close" data-action="pop-out"><span aria-hidden="true"><i class="fa fa-compress"></i></span><span class="sr-only">[[modules:chat.pop-out]]</span></button>
 
 		<!-- IMPORT partials/chats/options.tpl -->
 		<span class="members">