PLT-963 - Improving scss structure

3 files changed, 8 insertions, 8 deletions

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>