UI Improvements

web/react/components/channel_header.jsx

@@ -59,7 +59,7 @@ var PopoverListMembers = React.createClass({
 
         return (
             <div id="member_popover" data-toggle="popover" data-content={popoverHtml} data-original-title="Members" >
-                <div id="member_tooltip" data-toggle="tooltip" title="View Channel Members">
+                <div id="member_tooltip" title="View Channel Members">
                     {count} <span className="glyphicon glyphicon-user" aria-hidden="true"></span>
                 </div>
             </div>

web/react/components/mention_list.jsx

@@ -20,6 +20,10 @@ module.exports = React.createClass({
         PostStore.addMentionDataChangeListener(this._onChange);
         var self = this;
 
+        $('.post-right__scroll').scroll(function(){
+            self.forceUpdate();
+        });
+
         $('body').on('keydown.mentionlist', '#'+this.props.id,
             function(e) {
                 if (!self.isEmpty() && self.state.mentionText != '-1' && (e.which === 13 || e.which === 9)) {
@@ -32,7 +36,7 @@ module.exports = React.createClass({
                     e.preventDefault();
 
                     var tempSelectedMention = -1;
-                    if (e.which === 38) {    
+                    if (e.which === 38) {
                         if (self.getSelection(self.state.selectedMention - 1))
                             self.setState({ selectedMention: self.state.selectedMention - 1, selectedUsername: self.refs['mention' + (self.state.selectedMention - 1)].props.username });
                         else {
@@ -106,13 +110,13 @@ module.exports = React.createClass({
         this.setState({ selectedMention: listId, selectedUsername: this.refs['mention' + listId].props.username });
     },
     getSelection: function(listId) {
-        if (!this.refs['mention' + listId]) 
+        if (!this.refs['mention' + listId])
             return false;
         else
             return true;
     },
     addCurrentMention: function() {
-        if (!this.getSelection(this.state.selectedMention)) 
+        if (!this.getSelection(this.state.selectedMention))
             this.addFirstMention();
         else
             this.refs['mention' + this.state.selectedMention].handleClick();
@@ -132,7 +136,7 @@ module.exports = React.createClass({
             scrollAmount = $("#mentionsbox").height() * 100; //Makes sure that it scrolls all the way to the bottom
         else if (direction === "down" && this.state.selectedMention === 0)
             scrollAmount = 0;
-        else if (direction === "up") 
+        else if (direction === "up")
             scrollAmount = "-=" + ($('#'+this.refs['mention' + this.state.selectedMention].props.id +"_mentions").innerHeight() - 5);
         else if (direction === "down")
             scrollAmount = "+=" + ($('#'+this.refs['mention' + this.state.selectedMention].props.id +"_mentions").innerHeight() - 5);

web/react/components/post_list.jsx

@@ -37,15 +37,25 @@ module.exports = React.createClass({
     componentDidMount: function() {
         var user = UserStore.getCurrentUser();
         if (user.props && user.props.theme) {
-            utils.changeCss('a.theme', 'color:'+user.props.theme+'; fill:'+user.props.theme+'!important;');
             utils.changeCss('div.theme', 'background-color:'+user.props.theme+';');
             utils.changeCss('.btn.btn-primary', 'background: ' + user.props.theme+';');
-            utils.changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background: ' + utils.changeColor(user.props.theme, -10)  +';');
             utils.changeCss('.modal .modal-header', 'background: ' + user.props.theme+';');
             utils.changeCss('.mention', 'background: ' + user.props.theme+';');
             utils.changeCss('.mention-link', 'color: ' + user.props.theme+';');
             utils.changeCss('@media(max-width: 768px){.search-bar__container', 'background: ' + user.props.theme+';}');
         }
+        if (user.props.theme != "#000000" && user.props.theme != "#585858"){
+            utils.changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background: ' + utils.changeColor(user.props.theme, -10)  +';');
+            utils.changeCss('a.theme', 'color:'+user.props.theme+'; fill:'+user.props.theme+'!important;');
+        }
+        else if (user.props.theme == "#000000"){
+            utils.changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background: ' + utils.changeColor(user.props.theme, +50)  +';');
+            $('.team__header').addClass('theme--black');
+        }
+        else if (user.props.theme == "#585858"){
+            utils.changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background: ' + utils.changeColor(user.props.theme, +10)  +';');
+            $('.team__header').addClass('theme--gray');
+        }
 
         PostStore.addChangeListener(this._onChange);
         ChannelStore.addChangeListener(this._onChange);

web/react/components/user_profile.jsx

@@ -57,7 +57,7 @@ module.exports = React.createClass({
         if (!config.ShowEmail) {
             data_content += "<div class='text-nowrap'>Email not shared</div>";
         } else {
-            data_content += "<div><a href='mailto:" + this.state.profile.email + "' class='text-nowrap text-lowercase'>" + this.state.profile.email + "</a></div>";
+            data_content += "<div data-toggle='tooltip' title= '" + this.state.profile.email + "'><a href='mailto:" + this.state.profile.email + "' class='text-nowrap text-lowercase user-popover__email'>" + this.state.profile.email + "</a></div>";
         }
 
         return (