DM and Modal changes (#2927)

* DM and Modal changes

* Fixing image previews

webapp/components/filtered_user_list.jsx

@@ -104,26 +104,9 @@ class FilteredUserList extends React.Component {
 
         let count;
         if (users.length === this.state.users.length) {
-            count = (
-                <FormattedMessage
-                    id='filtered_user_list.count'
-                    defaultMessage='{count} {count, plural, =0 {0 members} one {member} other {members}}'
-                    values={{
-                        count: users.length
-                    }}
-                />
-            );
+            count = '(' + users.length + ')';
         } else {
-            count = (
-                <FormattedMessage
-                    id='filtered_user_list.countTotal'
-                    defaultMessage='{count} {count, plural, =0 {0 members} one {member} other {members}} of {total} Total'
-                    values={{
-                        count: users.length,
-                        total: this.state.users.length
-                    }}
-                />
-            );
+            count = '(' + this.state.users.length + ')';
         }
 
         let teamToggle;
@@ -133,9 +116,10 @@ class FilteredUserList extends React.Component {
             teamMembers = [];
 
             teamToggle = (
-                <div className='col-sm-6'>
+                <div className='member-select__container'>
+                    <span className='member-count'>{count}</span>
                     <select
-                        className='form-control member-select'
+                        className='form-control'
                         id='restrictList'
                         ref='restrictList'
                         defaultValue='team'
@@ -171,9 +155,8 @@ class FilteredUserList extends React.Component {
                         />
                     </div>
                     <div className='col-sm-6'>
-                        <span className='member-count'>{count}</span>
+                        {teamToggle}
                     </div>
-                    {teamToggle}
                 </div>
                 <div
                     ref='userList'

webapp/components/sidebar.jsx

@@ -509,7 +509,15 @@ export default class Sidebar extends React.Component {
 
         let directDivider;
         if (directMessageNonTeamItems.length !== 0) {
-            directDivider = <hr/>;
+            directDivider =
+            (<div className='sidebar__divider'>
+                <div className='sidebar__divider__text'>
+                    <FormattedMessage
+                        id='sidebar.otherMembers'
+                        defaultMessage='Other teams'
+                    />
+                </div>
+            </div>);
         }
 
         // update the favicon to show if there are any notifications

webapp/components/view_image.jsx

@@ -319,7 +319,6 @@ class ViewImageModal extends React.Component {
                         onClick={this.props.onModalDismissed}
                     >
                         <div
-                            className='modal-back'
                             onMouseEnter={this.onMouseEnterImage}
                             onMouseLeave={this.onMouseLeaveImage}
                             onClick={(e) => e.stopPropagation()}
@@ -328,7 +327,9 @@ class ViewImageModal extends React.Component {
                                 className={closeButtonClass}
                                 onClick={this.props.onModalDismissed}
                             />
-                            {content}
+                            <div className='modal-image__content'>
+                                {content}
+                            </div>
                             <ViewImagePopoverBar
                                 show={this.state.showFooter}
                                 fileId={this.state.imgId}