1 files changed, 11 insertions, 24 deletions

diff --git a/web/react/components/channel_loader.jsx b/web/react/components/channel_loader.jsx
index ce6f60f87..962ba26ee 100644
--- a/web/react/components/channel_loader.jsx
+++ b/web/react/components/channel_loader.jsx
@@ -12,6 +12,7 @@ var PostStore = require('../stores/post_store.jsx');
 var UserStore = require('../stores/user_store.jsx');
 
 var Utils = require('../utils/utils.jsx');
+var Constants = require('../utils/constants.jsx');
 
 export default class ChannelLoader extends React.Component {
     constructor(props) {
@@ -68,33 +69,19 @@ export default class ChannelLoader extends React.Component {
         /* Update CSS classes to match user theme */
         var user = UserStore.getCurrentUser();
 
-        if (user.props && user.props.theme) {
-            Utils.changeCss('div.theme', 'background-color:' + user.props.theme + ';');
-            Utils.changeCss('.btn.btn-primary', 'background: ' + user.props.theme + ';');
-            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 + ';}');
-            Utils.changeCss('.search-item-container:hover', 'background: ' + Utils.changeOpacity(user.props.theme, 0.05) + ';');
-        }
-
-        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');
+        if ($.isPlainObject(user.theme_props) && !$.isEmptyObject(user.theme_props)) {
+            Utils.applyTheme(user.theme_props);
+        } else {
+            Utils.applyTheme(Constants.THEMES.default);
         }
 
         /* Setup global mouse events */
-        $('body').on('click.userpopover', function popOver(e) {
-            if ($(e.target).attr('data-toggle') !== 'popover' &&
-                $(e.target).parents('.popover.in').length === 0) {
-                $('.user-popover').popover('hide');
-            }
+        $('body').on('click', function hidePopover(e) {
+            $('[data-toggle="popover"]').each(function eachPopover() {
+                if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
+                    $(this).popover('hide');
+                }
+            });
         });
 
         $('body').on('mouseenter mouseleave', '.post', function mouseOver(ev) {