Fix user-list unread badge styles

Conflicts:
	bigbluebutton-html5/app/client/react/components/UserList/UserListItem.jsx

bigbluebutton-html5/app/client/react/components/UserList/UserList.jsx

@@ -3,7 +3,7 @@ UserList = React.createClass({
     return (
       <table className="user-list">
         <tbody>
-          {this.props.users.map((user) => <UserItem key={user.id} user={user} currentUser={this.props.currentUser}/>)}
+          {this.props.users.map((user) => <UserListItem key={user.id} user={user} currentUser={this.props.currentUser}/>)}
         </tbody>
       </table>
     );

bigbluebutton-html5/app/client/react/components/UserList/UserListContainer.jsx

@@ -1,4 +1,4 @@
-/*This should be somewhere else, the question is, where should it be.*/
+/* This should be somewhere else, the question is, where should it be. */
 let shouldUserBeLocked = function(userId) {
   let lockInAction, locked, meeting, settings;
   locked = (locked = BBB.getUser(userId)) != null ? locked.user.locked : null;
@@ -55,11 +55,12 @@ UserListContainer = React.createClass({
     let users = Meteor.Users.find().fetch().map(u => u.user).map(u => {
       let user = {
         id: u.userid,
-        name: u.name,
+        name: u.name + 'asd sadasd asd as dasd asd asd asda sda dasd sa d',
         isCurrent: u.userid === currentUserId,
         isPresenter: u.presenter,
         isModerator: u.role === "MODERATOR",
         emoji: u.emoji_status,
+        unreadMessagesCount: 10,
         sharingStatus: {
           isInAudio: BBB.isUserInAudio(u.userid),
           isLocked: shouldUserBeLocked(u.userid), //TODO: Migrate blaze logic
@@ -82,7 +83,6 @@ UserListContainer = React.createClass({
             muteUser();
           }
         },
-        unreadMessagesCount: 0
       };
 
       chats.forEach(c => {

bigbluebutton-html5/app/client/react/components/UserList/UserListItem.jsx

@@ -1,4 +1,4 @@
-UserItem = React.createClass({
+UserListItem = React.createClass({
 
   handleKick(user) {
     return user.actions.kick(user);
@@ -17,21 +17,18 @@ UserItem = React.createClass({
   },
 
   render() {
+    const user = this.props.user;
+
     return (
-<<<<<<< HEAD
-      <div id="content" className="userItem">
+      <tr className={classNames(
+        'user-list-item',
+        user.isCurrent ? 'is-current' : null,
+        user.unreadMessagesCount ? 'has-messages' : null
+      )}>
         {this.renderStatusIcons()}
         {this.renderUserName()}
-        {this.renderUnreadBadge()}
         {this.renderSharingStatus()}
-      </div>
-=======
-      <tr className={classNames('user-list-item', user.isCurrent ? 'is-current' : null)}>
-        {this.renderStatusIcons(user)}
-        {this.renderUserName(user)}
-        {this.renderSharingStatus(user)}
       </tr>
->>>>>>> 6b4e97a... Change user-list to a tabular markup
     );
   },
 
@@ -59,28 +56,19 @@ UserItem = React.createClass({
   },
 
 
-<<<<<<< HEAD
   renderUserName() {
     const user = this.props.user;
-    let classes = ['usernameEntry'];
-=======
-  renderUserName(user) {
-    let classes = ['user-list-item-name'];
->>>>>>> 6b4e97a... Change user-list to a tabular markup
+
     let userName = user.name;
 
     if (user.isCurrent) {
       userName = userName.concat(' (you)');
     }
 
-    if (user.unreadMessagesCount) {
-      classes.push('has-messages');
-    }
-
     return (
-      <td className={classNames(classes)} onClick={() => this.handleOpenPrivateChat(user)}>
+      <td className="user-list-item-name" onClick={() => this.handleOpenPrivateChat(user)}>
         <Tooltip title={userName}>
-          {userName} {this.renderUnreadBadge(user.unreadMessagesCount)}
+          {userName} {this.renderUnreadBadge()}
         </Tooltip>
       </td>
     );
@@ -88,6 +76,7 @@ UserItem = React.createClass({
 
   renderUnreadBadge() {
     const unreadMessagesCount = this.props.user.unreadMessagesCount;
+
     if (!unreadMessagesCount) {
       return;
     }

bigbluebutton-html5/app/client/stylesheets/users.less

@@ -257,7 +257,7 @@
       width: 1.6em;
       font-size: 1.25em;
       text-align: center;
-      padding: 0.625em 0 0.625em 0.625em;
+      padding: 0;
     }
 
     &-name {
@@ -272,6 +272,24 @@
       .is-current & {
         font-weight: bold;
       }
+
+      .has-messages & {
+        padding-right: 30px;
+        position: relative;
+      }
+    }
+
+    &-messages {
+      position: absolute;
+      width: 28px;
+      height: 18px;
+      border-radius: 41%;
+      font-size: 12px;
+      color: #fff;
+      text-align: center;
+      background: #3896D3;
+      right: 0;
+      top: 9px;
     }
 
     &-sharing {