fix #214, and also added missing lib file for chats

less/account.less

@@ -37,7 +37,7 @@
 		left: auto;
 		right: 0px;
 
-		.avatar {
+		.avatar-wrapper {
 			position: absolute;
 			left: 50%;
 			margin-left: -64px;
@@ -177,7 +177,7 @@
 				line-height: 300px;
 			}
 
-			.avatar {
+			.avatar-wrapper {
 				top: 230px;
 			}
 		}
@@ -277,10 +277,6 @@
 	}
 }
 
-.user-profile-picture {
-	.user-icon-style(128px, 7.5rem, 50%);
-}
-
 .user-picture-label {
 	font-size:20px;
 }

lib/client/chats.js

@@ -0,0 +1,16 @@
+define('persona/chats', ['components', 'forum/chats'], function(components, coreChats) {
+	var Chats = {};
+
+	Chats.init = function() {
+		components.get('chat/recent').off('click').on('click', 'li', function(e) {
+			var env = utils.findBootstrapEnvironment();
+			if (env === 'xs' || env === 'sm') {
+				app.openChat($(this).attr('data-username'), $(this).attr('data-uid'));
+			} else {
+				coreChats.switchChat(parseInt($(this).attr('data-uid'), 10), $(this).attr('data-username'));
+			}
+		});
+	};
+
+	return Chats;
+});

templates/account/edit.tpl

@@ -7,9 +7,9 @@
 					<div class="row">
 						<div class="col-xs-12 hidden-xs">
 							<!-- IF picture -->
-							<img id="user-current-picture" class="user-profile-picture" src="{picture}" />
+							<img id="user-current-picture" class="avatar avatar-lg avatar-rounded" src="{picture}" />
 							<!-- ELSE -->
-							<div class="user-icon user-profile-picture" style="background-color: {icon:bgColor};">{icon:text}</div>
+							<div class="avatar avatar-lg avatar-rounded" style="background-color: {icon:bgColor};">{icon:text}</div>
 							<!-- ENDIF picture -->
 						</div>
 					</div>

templates/partials/account/header.tpl

@@ -1,11 +1,11 @@
 <!-- IMPORT partials/breadcrumbs.tpl -->
 
 <div class="cover" component="account/cover" style="background-image: url({cover:url}); background-position: {cover:position};">
-	<div class="avatar" data-uid="{uid}">
+	<div class="avatar-wrapper" data-uid="{uid}">
 		<!-- IF picture -->
-		<img src="{picture}" class="user-profile-picture" />
+		<img src="{picture}" class="avatar avatar-lg avatar-rounded" />
 		<!-- ELSE -->
-		<div class="user-icon user-profile-picture" style="background-color: {icon:bgColor};" title="{username}">{icon:text}</div>
+		<div class="avatar avatar-lg avatar-rounded" style="background-color: {icon:bgColor};" title="{username}">{icon:text}</div>
 		<!-- ENDIF picture -->
 		<i component="user/status" class="fa fa-circle status {status}" title="[[global:{status}]]"></i>