From e214aae719c10953c4c3a7949c9bd02d6983b045 Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <asaad@spinpunch.com>
Date: Mon, 14 Mar 2016 22:35:57 +0500
Subject: PLT-963 - Improving scss structure

---
 .../components/admin_console/admin_controller.jsx  |  7 +++-
 web/react/components/admin_console/team_users.jsx  |  2 +-
 web/react/components/admin_console/user_item.jsx   |  8 ++--
 web/react/components/authorize.jsx                 |  2 +-
 web/react/components/center_panel.jsx              |  2 +-
 web/react/components/file_attachment.jsx           |  6 +--
 web/react/components/file_preview.jsx              | 16 ++++----
 web/react/components/filtered_user_list.jsx        |  6 +--
 web/react/components/get_link_modal.jsx            |  2 +-
 web/react/components/more_channels.jsx             | 31 +++++++--------
 web/react/components/navbar.jsx                    |  8 ++--
 web/react/components/not_logged_in.jsx             |  4 +-
 web/react/components/popover_list_members.jsx      | 12 +++---
 web/react/components/search_bar.jsx                |  2 +-
 web/react/components/search_results_item.jsx       |  2 +-
 web/react/components/sidebar_right.jsx             | 14 +++----
 .../components/suggestion/at_mention_provider.jsx  | 12 +++---
 .../components/suggestion/command_provider.jsx     |  2 +-
 .../components/suggestion/suggestion_list.jsx      |  2 +-
 web/react/components/user_list.jsx                 | 22 +++++------
 web/react/components/user_list_row.jsx             | 46 +++++++++++-----------
 web/react/utils/emoticons.jsx                      |  2 +-
 web/react/utils/text_formatting.jsx                |  4 +-
 web/react/utils/utils.jsx                          | 30 +++++++-------
 24 files changed, 119 insertions(+), 125 deletions(-)

(limited to 'web/react')

diff --git a/web/react/components/admin_console/admin_controller.jsx b/web/react/components/admin_console/admin_controller.jsx
index 4c4f21f08..6dca391d0 100644
--- a/web/react/components/admin_console/admin_controller.jsx
+++ b/web/react/components/admin_console/admin_controller.jsx
@@ -172,7 +172,10 @@ export default class AdminController extends React.Component {
         }
 
         return (
-            <div id='admin_controller'>
+            <div
+                id='admin_controller'
+                className='admin-controller'
+            >
                 <div
                     className='sidebar--menu'
                     id='sidebar-menu'
@@ -186,7 +189,7 @@ export default class AdminController extends React.Component {
                     removeSelectedTeam={this.removeSelectedTeam}
                     addSelectedTeam={this.addSelectedTeam}
                 />
-                <div className='inner__wrap channel__wrap'>
+                <div className='inner-wrap channel__wrap'>
                     <div className='row header'>
                     </div>
                     <div className='row main'>
diff --git a/web/react/components/admin_console/team_users.jsx b/web/react/components/admin_console/team_users.jsx
index 256576f9b..708907ddb 100644
--- a/web/react/components/admin_console/team_users.jsx
+++ b/web/react/components/admin_console/team_users.jsx
@@ -163,7 +163,7 @@ export default class UserList extends React.Component {
                     className='form-horizontal'
                     role='form'
                 >
-                    <table className='table more-table member-list-holder'>
+                    <table className='more-modal__list member-list-holder'>
                         <tbody>
                             {memberList}
                         </tbody>
diff --git a/web/react/components/admin_console/user_item.jsx b/web/react/components/admin_console/user_item.jsx
index 7d6cfb5c3..722da922a 100644
--- a/web/react/components/admin_console/user_item.jsx
+++ b/web/react/components/admin_console/user_item.jsx
@@ -363,15 +363,15 @@ export default class UserItem extends React.Component {
 
         return (
             <tr>
-                <td className='row member-div padding--equal'>
+                <td className='more-modal__row'>
                     <img
-                        className='post-profile-img pull-left'
+                        className='more-modal__image pull-left'
                         src={`/api/v1/users/${user.id}/image?time=${user.update_at}`}
                         height='36'
                         width='36'
                     />
-                    <span className='more-name'>{Utils.getDisplayName(user)}</span>
-                    <span className='more-description'>{email}</span>
+                    <span className='more-modal__name'>{Utils.getDisplayName(user)}</span>
+                    <span className='more-modal__description'>{email}</span>
                     <div className='dropdown member-drop'>
                         <a
                             href='#'
diff --git a/web/react/components/authorize.jsx b/web/react/components/authorize.jsx
index 35ad7ac10..4b1cebcf4 100644
--- a/web/react/components/authorize.jsx
+++ b/web/react/components/authorize.jsx
@@ -38,7 +38,7 @@ export default class Authorize extends React.Component {
     render() {
         return (
             <div className='container-fluid'>
-                <div className='oauth-prompt'>
+                <div className='prompt'>
                     <div className='prompt__heading'>
                         <div className='prompt__app-icon'>
                             <img
diff --git a/web/react/components/center_panel.jsx b/web/react/components/center_panel.jsx
index 2ea840c1e..9a5f7a5d1 100644
--- a/web/react/components/center_panel.jsx
+++ b/web/react/components/center_panel.jsx
@@ -103,7 +103,7 @@ export default class CenterPanel extends React.Component {
         }
 
         return (
-            <div className='inner__wrap channel__wrap'>
+            <div className='inner-wrap channel__wrap'>
                 <div className='row header'>
                     <div id='navbar'>
                         <Navbar/>
diff --git a/web/react/components/file_attachment.jsx b/web/react/components/file_attachment.jsx
index 8abcac8c3..383529212 100644
--- a/web/react/components/file_attachment.jsx
+++ b/web/react/components/file_attachment.jsx
@@ -49,8 +49,8 @@ class FileAttachment extends React.Component {
                         if (name in self.refs) {
                             var imgDiv = ReactDOM.findDOMNode(self.refs[name]);
 
-                            $(imgDiv).removeClass('post__load');
-                            $(imgDiv).addClass('post__image');
+                            $(imgDiv).removeClass('post-image__load');
+                            $(imgDiv).addClass('post-image');
 
                             var width = this.width || $(this).width();
                             var height = this.height || $(this).height();
@@ -134,7 +134,7 @@ class FileAttachment extends React.Component {
             thumbnail = (
                 <div
                     ref={filename}
-                    className='post__load'
+                    className='post-image__load'
                     style={{backgroundImage: 'url(/static/images/load.gif)'}}
                 />
             );
diff --git a/web/react/components/file_preview.jsx b/web/react/components/file_preview.jsx
index 265d3f367..97949ca3d 100644
--- a/web/react/components/file_preview.jsx
+++ b/web/react/components/file_preview.jsx
@@ -41,15 +41,15 @@ export default class FilePreview extends React.Component {
                 previews.push(
                     <div
                         key={filename}
-                        className='preview-div'
+                        className='file-preview'
                         data-filename={originalFilename}
                     >
                         <img
-                            className='preview-img'
+                            className='file-preview__image'
                             src={filename}
                         />
                         <a
-                            className='remove-preview'
+                            className='file-preview__remove'
                             onClick={this.handleRemove}
                         >
                             <i className='glyphicon glyphicon-remove'/>
@@ -60,12 +60,12 @@ export default class FilePreview extends React.Component {
                 previews.push(
                     <div
                         key={filename}
-                        className='preview-div custom-file'
+                        className='file-preview custom-file'
                         data-filename={originalFilename}
                     >
                         <div className={'file-icon ' + Utils.getIconClassName(type)}/>
                         <a
-                            className='remove-preview'
+                            className='file-preview__remove'
                             onClick={this.handleRemove}
                         >
                             <i className='glyphicon glyphicon-remove'/>
@@ -80,7 +80,7 @@ export default class FilePreview extends React.Component {
                 <div
                     ref={clientId}
                     key={clientId}
-                    className='preview-div'
+                    className='file-preview'
                     data-client-id={clientId}
                 >
                     <img
@@ -88,7 +88,7 @@ export default class FilePreview extends React.Component {
                         src='/static/images/load.gif'
                     />
                     <a
-                        className='remove-preview'
+                        className='file-preview__remove'
                         onClick={this.handleRemove}
                     >
                         <i className='glyphicon glyphicon-remove'/>
@@ -98,7 +98,7 @@ export default class FilePreview extends React.Component {
         });
 
         return (
-            <div className='preview-container'>
+            <div className='file-preview__container'>
                 {previews}
             </div>
         );
diff --git a/web/react/components/filtered_user_list.jsx b/web/react/components/filtered_user_list.jsx
index ffd6ebf53..77a8c8810 100644
--- a/web/react/components/filtered_user_list.jsx
+++ b/web/react/components/filtered_user_list.jsx
@@ -27,10 +27,6 @@ class FilteredUserList extends React.Component {
         };
     }
 
-    componentDidMount() {
-        $(ReactDOM.findDOMNode(this.refs.userList)).perfectScrollbar();
-    }
-
     componentDidUpdate(prevProps, prevState) {
         if (prevState.filter !== this.state.filter) {
             $(ReactDOM.findDOMNode(this.refs.userList)).scrollTop(0);
@@ -109,7 +105,7 @@ class FilteredUserList extends React.Component {
                 </div>
                 <div
                     ref='userList'
-                    className='user-list'
+                    className='more-modal__list'
                 >
                     <UserList
                         users={users}
diff --git a/web/react/components/get_link_modal.jsx b/web/react/components/get_link_modal.jsx
index 3309d690c..dd21f21e0 100644
--- a/web/react/components/get_link_modal.jsx
+++ b/web/react/components/get_link_modal.jsx
@@ -81,7 +81,7 @@ export default class GetLinkModal extends React.Component {
         var copyLinkConfirm = null;
         if (this.state.copiedLink) {
             copyLinkConfirm = (
-                <p className='alert alert-success copy-link-confirm'>
+                <p className='alert alert-success alert--confirm'>
                     <i className='fa fa-check'></i>
                     <FormattedMessage
                         id='get_link.clipboard'
diff --git a/web/react/components/more_channels.jsx b/web/react/components/more_channels.jsx
index 3309ef52e..2ba435449 100644
--- a/web/react/components/more_channels.jsx
+++ b/web/react/components/more_channels.jsx
@@ -95,17 +95,18 @@ export default class MoreChannels extends React.Component {
         }
 
         return (
-            <tr key={channel.id}>
-                <td className='more-row'>
-                    <div className='more-details'>
-                        <p className='more-name'>{channel.display_name}</p>
-                        <p className='more-description'>{channel.purpose}</p>
-                    </div>
-                    <div className='more-actions'>
-                        {joinButton}
-                    </div>
-                </td>
-            </tr>
+            <div
+                className='more-modal__row'
+                key={channel.id}
+            >
+                <div className='more-modal__details'>
+                    <p className='more-modal__name'>{channel.display_name}</p>
+                    <p className='more-modal__description'>{channel.purpose}</p>
+                </div>
+                <div className='more-modal__actions'>
+                    {joinButton}
+                </div>
+            </div>
         );
     }
     render() {
@@ -127,11 +128,9 @@ export default class MoreChannels extends React.Component {
                 moreChannels = <LoadingScreen/>;
             } else if (channels.length) {
                 moreChannels = (
-                    <table className='more-table table'>
-                        <tbody>
-                            {channels.map(this.createChannelRow)}
-                        </tbody>
-                    </table>
+                    <div className='more-modal__list'>
+                        {channels.map(this.createChannelRow)}
+                    </div>
                 );
             } else {
                 moreChannels = (
diff --git a/web/react/components/navbar.jsx b/web/react/components/navbar.jsx
index 974f026d0..8382cb47a 100644
--- a/web/react/components/navbar.jsx
+++ b/web/react/components/navbar.jsx
@@ -66,7 +66,7 @@ export default class Navbar extends React.Component {
     componentDidMount() {
         ChannelStore.addChangeListener(this.onChange);
         ChannelStore.addExtraInfoChangeListener(this.onChange);
-        $('.inner__wrap').click(this.hideSidebars);
+        $('.inner-wrap').click(this.hideSidebars);
         attachFastClick(document.body);
     }
     componentWillUnmount() {
@@ -101,7 +101,7 @@ export default class Navbar extends React.Component {
             });
 
             if (e.target.className !== 'navbar-toggle' && e.target.className !== 'icon-bar') {
-                $('.inner__wrap').removeClass('move--right move--left move--left-small');
+                $('.inner-wrap').removeClass('move--right move--left move--left-small');
                 $('.sidebar--left').removeClass('move--right');
                 $('.sidebar--right').removeClass('move--left');
                 $('.sidebar--menu').removeClass('move--left');
@@ -109,11 +109,11 @@ export default class Navbar extends React.Component {
         }
     }
     toggleLeftSidebar() {
-        $('.inner__wrap').toggleClass('move--right');
+        $('.inner-wrap').toggleClass('move--right');
         $('.sidebar--left').toggleClass('move--right');
     }
     toggleRightSidebar() {
-        $('.inner__wrap').toggleClass('move--left-small');
+        $('.inner-wrap').toggleClass('move--left-small');
         $('.sidebar--menu').toggleClass('move--left');
     }
     showSearch() {
diff --git a/web/react/components/not_logged_in.jsx b/web/react/components/not_logged_in.jsx
index 7af293e77..cf3effcd5 100644
--- a/web/react/components/not_logged_in.jsx
+++ b/web/react/components/not_logged_in.jsx
@@ -5,7 +5,7 @@ import {FormattedMessage} from 'mm-intl';
 
 export default class NotLoggedIn extends React.Component {
     componentDidMount() {
-        $('body').attr('class', 'white');
+        $('body').attr('class', 'sticky');
         $('#root').attr('class', 'container-fluid');
     }
     componentWillUnmount() {
@@ -14,7 +14,7 @@ export default class NotLoggedIn extends React.Component {
     }
     render() {
         return (
-            <div className='inner__wrap'>
+            <div className='inner-wrap'>
                 <div className='row content'>
                     {this.props.children}
                     <div className='footer-push'></div>
diff --git a/web/react/components/popover_list_members.jsx b/web/react/components/popover_list_members.jsx
index 1943fb409..8f6948ee4 100644
--- a/web/react/components/popover_list_members.jsx
+++ b/web/react/components/popover_list_members.jsx
@@ -110,25 +110,25 @@ export default class PopoverListMembers extends React.Component {
                 if (name) {
                     popoverHtml.push(
                         <div
-                            className='text-nowrap'
+                            className='more-modal__row'
                             key={'popover-member-' + i}
                         >
 
                             <img
-                                className='profile-img rounded pull-left'
+                                className='more-modal__image'
                                 width='26px'
                                 height='26px'
                                 src={`/api/v1/users/${m.id}/image?time=${m.update_at}`}
                             />
-                            <div className='pull-left'>
+                            <div className='more-modal__details'>
                                 <div
-                                    className='more-name'
+                                    className='more-modal__name'
                                 >
                                     {name}
                                 </div>
                             </div>
                             <div
-                                className='pull-right'
+                                className='more-modal__actions'
                             >
                                 {button}
                             </div>
@@ -185,7 +185,7 @@ export default class PopoverListMembers extends React.Component {
                         title={title}
                         id='member-list-popover'
                     >
-                        {popoverHtml}
+                        <div className='more-modal__list'>{popoverHtml}</div>
                     </Popover>
                 </Overlay>
             </div>
diff --git a/web/react/components/search_bar.jsx b/web/react/components/search_bar.jsx
index eaf8b5069..3afd0e840 100644
--- a/web/react/components/search_bar.jsx
+++ b/web/react/components/search_bar.jsx
@@ -164,7 +164,7 @@ class SearchBar extends React.Component {
                 </span>
                 <form
                     role='form'
-                    className='search__form relative-div'
+                    className='search__form'
                     onSubmit={this.handleSubmit}
                     style={{overflow: 'visible'}}
                     autoComplete='off'
diff --git a/web/react/components/search_results_item.jsx b/web/react/components/search_results_item.jsx
index 3a091bdd1..9c3b0336b 100644
--- a/web/react/components/search_results_item.jsx
+++ b/web/react/components/search_results_item.jsx
@@ -25,7 +25,7 @@ export default class SearchResultsItem extends React.Component {
 
         if ($(window).width() < 768) {
             $('.sidebar--right').removeClass('move--left');
-            $('.inner__wrap').removeClass('move--left');
+            $('.inner-wrap').removeClass('move--left');
         }
     }
 
diff --git a/web/react/components/sidebar_right.jsx b/web/react/components/sidebar_right.jsx
index 14853d3a3..fc9888626 100644
--- a/web/react/components/sidebar_right.jsx
+++ b/web/react/components/sidebar_right.jsx
@@ -55,27 +55,27 @@ export default class SidebarRight extends React.Component {
         var windowWidth = $(window).outerWidth();
         var sidebarRightWidth = $('.sidebar--right').outerWidth();
 
-        $('.inner__wrap').removeClass('.move--right');
-        $('.inner__wrap').addClass('move--left');
+        $('.inner-wrap').removeClass('.move--right');
+        $('.inner-wrap').addClass('move--left');
         $('.sidebar--left').removeClass('move--right');
         $('.sidebar--right').addClass('move--left');
 
         //$('.sidebar--right').prepend('<div class="sidebar__overlay"></div>');
         if (this.state.search_visible || this.state.post_right_visible) {
             if (windowWidth > 960) {
-                $('.inner__wrap').velocity({marginRight: sidebarRightWidth}, {duration: 500, easing: 'easeOutSine'});
+                $('.inner-wrap').velocity({marginRight: sidebarRightWidth}, {duration: 500, easing: 'easeOutSine'});
                 $('.sidebar--right').velocity({translateX: 0}, {duration: 500, easing: 'easeOutSine'});
             } else {
-                $('.inner__wrap, .sidebar--right').attr('style', '');
+                $('.inner-wrap, .sidebar--right').attr('style', '');
             }
         } else {
             if (windowWidth > 960) {
-                $('.inner__wrap').velocity({marginRight: 0}, {duration: 500, easing: 'easeOutSine'});
+                $('.inner-wrap').velocity({marginRight: 0}, {duration: 500, easing: 'easeOutSine'});
                 $('.sidebar--right').velocity({translateX: sidebarRightWidth}, {duration: 500, easing: 'easeOutSine'});
             } else {
-                $('.inner__wrap, .sidebar--right').attr('style', '');
+                $('.inner-wrap, .sidebar--right').attr('style', '');
             }
-            $('.inner__wrap').removeClass('move--left').removeClass('move--right');
+            $('.inner-wrap').removeClass('move--left').removeClass('move--right');
             $('.sidebar--right').removeClass('move--left');
             return (
                 <div></div>
diff --git a/web/react/components/suggestion/at_mention_provider.jsx b/web/react/components/suggestion/at_mention_provider.jsx
index c5bd13c26..b53b351d9 100644
--- a/web/react/components/suggestion/at_mention_provider.jsx
+++ b/web/react/components/suggestion/at_mention_provider.jsx
@@ -24,7 +24,7 @@ class AtMentionSuggestion extends React.Component {
                     defaultMessage='Notifies everyone in the team'
                 />
             );
-            icon = <i className='mention-img fa fa-users fa-2x'/>;
+            icon = <i className='mention__image fa fa-users fa-2x'/>;
         } else if (item.username === 'channel') {
             username = 'channel';
             description = (
@@ -33,19 +33,19 @@ class AtMentionSuggestion extends React.Component {
                     defaultMessage='Notifies everyone in the channel'
                 />
             );
-            icon = <i className='mention-img fa fa-users fa-2x'/>;
+            icon = <i className='mention__image fa fa-users fa-2x'/>;
         } else {
             username = item.username;
             description = Utils.getFullName(item);
             icon = (
                 <img
-                    className='mention-img'
+                    className='mention__image'
                     src={'/api/v1/users/' + item.id + '/image?time=' + item.update_at}
                 />
             );
         }
 
-        let className = 'mentions-name';
+        let className = 'mentions__name';
         if (isSelection) {
             className += ' suggestion--selected';
         }
@@ -58,11 +58,11 @@ class AtMentionSuggestion extends React.Component {
                 <div className='pull-left'>
                     {icon}
                 </div>
-                <div className='pull-left mention-align'>
+                <div className='pull-left mention--align'>
                     <span>
                         {'@' + username}
                     </span>
-                    <span className='mention-fullname'>
+                    <span className='mention__fullname'>
                         {description}
                     </span>
                 </div>
diff --git a/web/react/components/suggestion/command_provider.jsx b/web/react/components/suggestion/command_provider.jsx
index 21d6d0e0e..fffb2df07 100644
--- a/web/react/components/suggestion/command_provider.jsx
+++ b/web/react/components/suggestion/command_provider.jsx
@@ -7,7 +7,7 @@ class CommandSuggestion extends React.Component {
     render() {
         const {item, isSelection, onClick} = this.props;
 
-        let className = 'command-name';
+        let className = 'command';
         if (isSelection) {
             className += ' suggestion--selected';
         }
diff --git a/web/react/components/suggestion/suggestion_list.jsx b/web/react/components/suggestion/suggestion_list.jsx
index ccebeb990..0f5907179 100644
--- a/web/react/components/suggestion/suggestion_list.jsx
+++ b/web/react/components/suggestion/suggestion_list.jsx
@@ -111,7 +111,7 @@ export default class SuggestionList extends React.Component {
             <div className='suggestion-list suggestion-list--top'>
                 <div
                     ref='content'
-                    className='suggestion-content suggestion-content--top'
+                    className='suggestion-list__content suggestion-list__content--top'
                 >
                     {items}
                 </div>
diff --git a/web/react/components/user_list.jsx b/web/react/components/user_list.jsx
index 39453a827..783d552dc 100644
--- a/web/react/components/user_list.jsx
+++ b/web/react/components/user_list.jsx
@@ -21,23 +21,19 @@ export default class UserList extends React.Component {
             });
         } else {
             content = (
-                <tr key='no-users-found'>
-                    <td>
-                        <FormattedMessage
-                            id='user_list.notFound'
-                            defaultMessage='No users found :('
-                        />
-                    </td>
-                </tr>
+                <div key='no-users-found'>
+                    <FormattedMessage
+                        id='user_list.notFound'
+                        defaultMessage='No users found :('
+                    />
+                </div>
             );
         }
 
         return (
-            <table className='more-table table'>
-                <tbody>
-                    {content}
-                </tbody>
-            </table>
+            <div>
+                {content}
+            </div>
         );
     }
 }
diff --git a/web/react/components/user_list_row.jsx b/web/react/components/user_list_row.jsx
index 1ca40687f..8c664ba82 100644
--- a/web/react/components/user_list_row.jsx
+++ b/web/react/components/user_list_row.jsx
@@ -25,32 +25,32 @@ export default function UserListRow({user, actions}) {
     });
 
     return (
-        <tr>
-            <td
-                key={user.id}
-                style={{display: 'flex'}}
+        <div
+            key={user.id}
+            className='more-modal__row'
+        >
+            <img
+                className='more-modal__image'
+                width='38'
+                height='38'
+                src={`/api/v1/users/${user.id}/image?time=${user.update_at}`}
+            />
+            <div
+                className='more-modal__details'
             >
-                <img
-                    className='profile-img'
-                    src={`/api/v1/users/${user.id}/image?time=${user.update_at}`}
-                />
-                <div
-                    className='user-list-item__details'
-                >
-                    <div className='more-name'>
-                        {name}
-                    </div>
-                    <div className='more-description'>
-                        {user.email}
-                    </div>
+                <div className='more-modal__name'>
+                    {name}
                 </div>
-                <div
-                    className='user-list-item__actions'
-                >
-                    {buttons}
+                <div className='more-modal__description'>
+                    {user.email}
                 </div>
-            </td>
-        </tr>
+            </div>
+            <div
+                className='more-modal__actions'
+            >
+                {buttons}
+            </div>
+        </div>
     );
 }
 
diff --git a/web/react/utils/emoticons.jsx b/web/react/utils/emoticons.jsx
index 18cce3bde..bed798b3e 100644
--- a/web/react/utils/emoticons.jsx
+++ b/web/react/utils/emoticons.jsx
@@ -132,7 +132,7 @@ export function handleEmoticons(text, tokens) {
             const alias = `MM_EMOTICON${index}`;
 
             tokens.set(alias, {
-                value: `<img align="absmiddle" alt="${matchText}" class="emoji" src="${getImagePathForEmoticon(name)}" title="${matchText}" />`,
+                value: `<img align="absmiddle" alt="${matchText}" class="emoticon" src="${getImagePathForEmoticon(name)}" title="${matchText}" />`,
                 originalText: fullMatch
             });
 
diff --git a/web/react/utils/text_formatting.jsx b/web/react/utils/text_formatting.jsx
index a930e9ece..552d93fac 100644
--- a/web/react/utils/text_formatting.jsx
+++ b/web/react/utils/text_formatting.jsx
@@ -187,7 +187,7 @@ function highlightCurrentMentions(text, tokens) {
             const newAlias = `MM_SELFMENTION${index}`;
 
             newTokens.set(newAlias, {
-                value: `<span class='mention-highlight'>${alias}</span>`,
+                value: `<span class='mention--highlight'>${alias}</span>`,
                 originalText: token.originalText
             });
             output = output.replace(alias, newAlias);
@@ -205,7 +205,7 @@ function highlightCurrentMentions(text, tokens) {
         const alias = `MM_SELFMENTION${index}`;
 
         tokens.set(alias, {
-            value: `<span class='mention-highlight'>${mention}</span>`,
+            value: `<span class='mention--highlight'>${mention}</span>`,
             originalText: mention
         });
 
diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx
index 88777164b..360d1f4a5 100644
--- a/web/react/utils/utils.jsx
+++ b/web/react/utils/utils.jsx
@@ -676,11 +676,11 @@ export function applyTheme(theme) {
     }
 
     if (theme.centerChannelBg) {
-        changeCss('.app__content, .markdown__table, .markdown__table tbody tr, .suggestion-content, .modal .modal-content', 'background:' + theme.centerChannelBg, 1);
+        changeCss('.app__content, .markdown__table, .markdown__table tbody tr, .suggestion-list__content, .modal .modal-content', 'background:' + theme.centerChannelBg, 1);
         changeCss('#post-list .post-list-holder-by-time', 'background:' + theme.centerChannelBg, 1);
         changeCss('#post-create', 'background:' + theme.centerChannelBg, 1);
         changeCss('.date-separator .separator__text, .new-separator .separator__text', 'background:' + theme.centerChannelBg, 1);
-        changeCss('.post-image__column .post-image__details, .search-help-popover .search-autocomplete__divider span', 'background:' + theme.centerChannelBg, 1);
+        changeCss('.post-image__details, .search-help-popover .search-autocomplete__divider span', 'background:' + theme.centerChannelBg, 1);
         changeCss('.sidebar--right, .dropdown-menu, .popover, .tip-overlay', 'background:' + theme.centerChannelBg, 1);
         changeCss('.popover.bottom>.arrow:after', 'border-bottom-color:' + theme.centerChannelBg, 1);
         changeCss('.popover.right>.arrow:after, .tip-overlay.tip-overlay--sidebar .arrow, .tip-overlay.tip-overlay--header .arrow', 'border-right-color:' + theme.centerChannelBg, 1);
@@ -694,8 +694,8 @@ export function applyTheme(theme) {
 
     if (theme.centerChannelColor) {
         changeCss('.post-list__arrows', 'fill:' + changeOpacity(theme.centerChannelColor, 0.3), 1);
-        changeCss('.sidebar--left, .sidebar--right .sidebar--right__header', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
-        changeCss('.app__content, .post-create__container .post-create-body .btn-file, .post-create__container .post-create-footer .msg-typing, .command-name, .modal .modal-content, .dropdown-menu, .popover, .mentions-name, .tip-overlay', 'color:' + theme.centerChannelColor, 1);
+        changeCss('.sidebar--left, .sidebar--right .sidebar--right__header, .suggestion-list__content .command', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
+        changeCss('.app__content, .post-create__container .post-create-body .btn-file, .post-create__container .post-create-footer .msg-typing, .suggestion-list__content .command, .modal .modal-content, .dropdown-menu, .popover, .mentions__name, .tip-overlay', 'color:' + theme.centerChannelColor, 1);
         changeCss('#archive-link-home', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1);
         changeCss('#post-create', 'color:' + theme.centerChannelColor, 2);
         changeCss('.mentions--top, .suggestion-list', 'box-shadow:' + changeOpacity(theme.centerChannelColor, 0.2) + ' 1px -3px 12px', 3);
@@ -709,17 +709,17 @@ export function applyTheme(theme) {
         changeCss('.markdown__table tbody tr:nth-child(2n)', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1);
         changeCss('.channel-header__info>div.dropdown .header-dropdown__icon', 'color:' + changeOpacity(theme.centerChannelColor, 0.8), 1);
         changeCss('.channel-header #member_popover', 'color:' + changeOpacity(theme.centerChannelColor, 0.8), 1);
-        changeCss('.custom-textarea, .custom-textarea:focus, .preview-container .preview-div, .post-image__column .post-image__details, .sidebar--right .sidebar-right__body, .markdown__table th, .markdown__table td, .suggestion-content, .modal .modal-content, .modal .settings-modal .settings-table .settings-content .divider-light, .webhooks__container, .dropdown-menu, .modal .modal-header, .popover', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
+        changeCss('.custom-textarea, .custom-textarea:focus, .file-preview, .post-image__details, .sidebar--right .sidebar-right__body, .markdown__table th, .markdown__table td, .suggestion-list__content, .modal .modal-content, .modal .settings-modal .settings-table .settings-content .divider-light, .webhooks__container, .dropdown-menu, .modal .modal-header, .popover', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
         changeCss('.popover.bottom>.arrow', 'border-bottom-color:' + changeOpacity(theme.centerChannelColor, 0.25), 1);
         changeCss('.search-help-popover .search-autocomplete__divider span', 'color:' + changeOpacity(theme.centerChannelColor, 0.7), 1);
         changeCss('.popover.right>.arrow', 'border-right-color:' + changeOpacity(theme.centerChannelColor, 0.25), 1);
         changeCss('.popover.left>.arrow', 'border-left-color:' + changeOpacity(theme.centerChannelColor, 0.25), 1);
         changeCss('.popover.top>.arrow', 'border-top-color:' + changeOpacity(theme.centerChannelColor, 0.25), 1);
-        changeCss('.command-name, .popover .popover-title', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
+        changeCss('.suggestion-list__content .command, .popover .popover-title', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
         changeCss('.dropdown-menu .divider, .search-help-popover .search-autocomplete__divider:before', 'background:' + theme.centerChannelColor, 1);
         changeCss('.custom-textarea', 'color:' + theme.centerChannelColor, 1);
         changeCss('.post-image__column', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 2);
-        changeCss('.post-image__column .post-image__details', 'color:' + theme.centerChannelColor, 2);
+        changeCss('.post-image__details', 'color:' + theme.centerChannelColor, 2);
         changeCss('.post-image__column a, .post-image__column a:hover, .post-image__column a:focus', 'color:' + theme.centerChannelColor, 1);
         changeCss('@media(min-width: 768px){.search-bar__container .search__form .search-bar, .form-control', 'color:' + theme.centerChannelColor, 2);
         changeCss('.input-group-addon, .search-bar__container .search__form, .form-control', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
@@ -732,11 +732,11 @@ export function applyTheme(theme) {
         changeCss('.modal .custom-textarea:focus', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.3), 1);
         changeCss('.channel-intro, .modal .settings-modal .settings-table .settings-content .divider-dark, hr, .modal .settings-modal .settings-table .settings-links, .modal .settings-modal .settings-table .settings-content .appearance-section .theme-elements__header', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
         changeCss('.post.current--user .post__body, .post.post--comment.other--root.current--user .post-comment, pre, .post-right__container .post.post--root', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1);
-        changeCss('.post.current--user .post__body, .post.post--comment.other--root.current--user .post-comment, .post.same--root.post--comment .post__body, .modal .more-table tbody>tr td, .member-div:first-child, .member-div, .access-history__table .access__report, .activity-log__table', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.1), 2);
-        changeCss('@media(max-width: 1800px){.inner__wrap.move--left .post.post--comment.same--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.07), 2);
-        changeCss('.post:hover, .modal .more-table tbody>tr:hover td, .modal .settings-modal .settings-table .settings-content .section-min:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1);
+        changeCss('.post.current--user .post__body, .post.post--comment.other--root.current--user .post-comment, .post.same--root.post--comment .post__body, .more-modal__list .more-modal__row, .member-div:first-child, .member-div, .access-history__table .access__report, .activity-log__table', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.1), 2);
+        changeCss('@media(max-width: 1800px){.inner-wrap.move--left .post.post--comment.same--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.07), 2);
+        changeCss('.post:hover, .more-modal__list .more-modal__row:hover, .modal .settings-modal .settings-table .settings-content .section-min:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1);
         changeCss('.date-separator.hovered--before:after, .date-separator.hovered--after:before, .new-separator.hovered--after:before, .new-separator.hovered--before:after', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1);
-        changeCss('.command-name:hover, .mentions-name:hover, .suggestion--selected, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .bot-indicator', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1);
+        changeCss('.suggestion-list__content .command:hover, .mentions__name:hover, .suggestion--selected, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .bot-indicator', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1);
         changeCss('code, .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control', 'background:' + changeOpacity(theme.centerChannelColor, 0.1), 1);
         changeCss('@media(min-width: 960px){.post.current--user:hover .post__body ', 'background: none;', 1);
         changeCss('.sidebar--right', 'color:' + theme.centerChannelColor, 2);
@@ -759,7 +759,7 @@ export function applyTheme(theme) {
     if (theme.buttonBg) {
         changeCss('.btn.btn-primary, .tutorial__circles .circle.active', 'background:' + theme.buttonBg, 1);
         changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background:' + changeColor(theme.buttonBg, -0.25), 1);
-        changeCss('.file-playback-controls', 'color:' + changeColor(theme.buttonBg, -0.25), 1);
+        changeCss('.file-playback__controls', 'color:' + changeColor(theme.buttonBg, -0.25), 1);
     }
 
     if (theme.buttonColor) {
@@ -767,7 +767,7 @@ export function applyTheme(theme) {
     }
 
     if (theme.mentionHighlightBg) {
-        changeCss('.mention-highlight, .search-highlight', 'background:' + theme.mentionHighlightBg, 1);
+        changeCss('.mention--highlight, .search-highlight', 'background:' + theme.mentionHighlightBg, 1);
     }
 
     if (theme.mentionHighlightBg) {
@@ -775,7 +775,7 @@ export function applyTheme(theme) {
     }
 
     if (theme.mentionHighlightLink) {
-        changeCss('.mention-highlight .mention-link', 'color:' + theme.mentionHighlightLink, 1);
+        changeCss('.mention--highlight .mention-link', 'color:' + theme.mentionHighlightLink, 1);
     }
 
     if (!theme.codeTheme) {
@@ -946,7 +946,7 @@ export function switchChannel(channel) {
 
     updateAddressBar(channel.name);
 
-    $('.inner__wrap').removeClass('move--right');
+    $('.inner-wrap').removeClass('move--right');
     $('.sidebar--left').removeClass('move--right');
 
     client.trackPage();
-- 
cgit v1.2.3-1-g7c22