Make the unread count more obvious

Signed-off-by: Joas Schilling <coding@schilljs.com>

css/style.scss

@@ -96,6 +96,13 @@
 	height: 32px;
 }
 
+#app-navigation .app-navigation-entry-utils-counter span {
+	padding: 2px 5px;
+	border-radius: 10px;
+	background-color: $color-primary;
+	color: $color-primary-text;
+}
+
 .public-room {
 	display: block !important;
 }

js/views/roomlistview.js

@@ -37,7 +37,7 @@
 	var ITEM_TEMPLATE = '<a class="app-navigation-entry-link" href="#{{id}}" data-token="{{token}}"><div class="avatar" data-user="{{name}}" data-user-display-name="{{displayName}}"></div> {{displayName}}</a>'+
 						'<div class="app-navigation-entry-utils">'+
 							'<ul>'+
-								'{{#if unreadMessages}}<li class="app-navigation-entry-utils-counter">{{unreadMessages}}</li>{{/if}}'+
+								'{{#if unreadMessages}}<li class="app-navigation-entry-utils-counter"><span>{{unreadMessages}}</span></li>{{/if}}'+
 								'<li class="app-navigation-entry-utils-menu-button"><button></button></li>'+
 							'</ul>'+
 						'</div>'+