Merge pull request #216 from Razzeee/align-unread-tabbar

Bold unread tabitem if there are unread messages

CHANGELOG.md

@@ -7,6 +7,7 @@ The "UNDER DEVELOPMENT" section of the Mattermost Desktop changelog appears in t
 Release date: TBD
 
 ### Improvements
+- Changed display of unread messages on the team tabbar, they are now shown as bold text
 
 #### Windows
 - Update Mattermost icon for desktop notifications in Windows 10.

src/browser/index.jsx

@@ -219,30 +219,16 @@ var TabBar = React.createClass({
     var tabs = this.props.teams.map(function(team, index) {
       var unreadCount = 0;
       var badgeStyle = {
-        unread: {
+        background: '#FF1744',
-          background: '#383838',
+        float: 'right',
-          float: 'right',
+        color: 'white',
-          color: 'white',
+        minWidth: '19px',
-          textAlign: 'center',
+        fontSize: '12px',
-          marginTop: '5px',
+        textAlign: 'center',
-          width: '10px',
+        lineHeight: '20px',
-          height: '10px',
+        height: '19px',
-          marginLeft: '5px',
+        marginLeft: '5px',
-          borderRadius: '50%',
+        borderRadius: '50%',
-        },
-
-        mention: {
-          background: '#f1342c',
-          float: 'right',
-          color: 'white',
-          minWidth: '19px',
-          fontSize: '12px',
-          textAlign: 'center',
-          lineHeight: '20px',
-          height: '19px',
-          marginLeft: '5px',
-          borderRadius: '50%',
-        }
       };
 
       if (thisObj.props.unreadCounts[index] > 0) {
@@ -262,18 +248,25 @@ var TabBar = React.createClass({
 
       var badge;
       if (mentionCount != 0) {
-        badge = (<div style={ badgeStyle.mention }>
+        badge = (<div style={ badgeStyle }>
                    { mentionCount }
                  </div>);
-      } else if (unreadCount > 0) {
-        badge = (<div style={ badgeStyle.unread }></div>);
       }
-      var id = 'teamTabItem' + index;
+      if (unreadCount == 0) {
-      return (<NavItem className="teamTabItem" key={ id } id={ id } eventKey={ index }>
+        var id = 'teamTabItem' + index;
-                { team.name }
+        return (<NavItem className="teamTabItem" key={ id } id={ id } eventKey={ index }>
-                { ' ' }
+                  { team.name }
-                { badge }
+                  { ' ' }
-              </NavItem>);
+                  { badge }
+                </NavItem>);
+      } else {
+        var id = 'teamTabItem' + index;
+        return (<NavItem className="teamTabItem" key={ id } id={ id } eventKey={ index }>
+                  <b>{ team.name }</b>
+                  { ' ' }
+                  { badge }
+                </NavItem>);
+      }
     });
     return (
       <Nav id={ this.props.id } bsStyle="tabs" activeKey={ this.props.activeKey } onSelect={ this.props.onSelect }>