DM and Modal changes (#2927)

* DM and Modal changes

* Fixing image previews

8 files changed, 69 insertions, 35 deletions

diff --git a/webapp/components/filtered_user_list.jsx b/webapp/components/filtered_user_list.jsx
index 83747c03d..cffafd663 100644
--- a/webapp/components/filtered_user_list.jsx
+++ b/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'
diff --git a/webapp/components/sidebar.jsx b/webapp/components/sidebar.jsx
index 29ad60acc..3bfe47393 100644
--- a/webapp/components/sidebar.jsx
+++ b/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
diff --git a/webapp/components/view_image.jsx b/webapp/components/view_image.jsx
index ccde54c78..c4d7cb4aa 100644
--- a/webapp/components/view_image.jsx
+++ b/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}
diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index 7e060564a..4fb57f1e4 100644
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -1129,6 +1129,7 @@
   "sidebar.createGroup": "Create new group",
   "sidebar.direct": "Direct Messages",
   "sidebar.more": "More",
+  "sidebar.otherMembers": "Other teams",
   "sidebar.moreElips": "More...",
   "sidebar.pg": "Private Groups",
   "sidebar.removeList": "Remove from list",
diff --git a/webapp/sass/components/_modal.scss b/webapp/sass/components/_modal.scss
index 90afe1b11..d53be29dc 100644
--- a/webapp/sass/components/_modal.scss
+++ b/webapp/sass/components/_modal.scss
@@ -217,6 +217,13 @@
                 width: 100%;
             }
 
+            .modal-image__content {
+                max-height: 85vh;
+                max-width: 90vw;
+                overflow-x: hidden;
+                overflow-y: visible;
+            }
+
             .modal-image__wrapper {
                 @include border-radius(3px);
                 display: table-cell;
@@ -365,6 +372,7 @@
                 bottom: -40px;
                 left: 0;
                 line-height: 40px;
+                max-width: 90vw;
                 padding: 0 10px;
                 position: absolute;
                 right: 0;
@@ -439,16 +447,21 @@
         .member-show {
             @include opacity(.8);
             float: right;
-            margin-top: 12px;
             margin-right: 3px;
+            margin-top: 12px;
         }
 
-        .member-select {
-            @include opacity(.8);
-            float: right;
-            width: auto;
-            margin-top: 5px;
-            margin-right: 5px;
+        .member-select__container {
+            .member-count {
+                margin: 12px 0 0 3px;
+            }
+
+            select {
+                @include opacity(.8);
+                float: right;
+                margin: 5px 5px 0 2px;
+                width: auto;
+            }
         }
 
         .more-purpose {
diff --git a/webapp/sass/layout/_sidebar-left.scss b/webapp/sass/layout/_sidebar-left.scss
index 3a5e74570..ad23df6ca 100644
--- a/webapp/sass/layout/_sidebar-left.scss
+++ b/webapp/sass/layout/_sidebar-left.scss
@@ -12,6 +12,32 @@
         padding-top: 44px;
     }
 
+    .sidebar__divider {
+        color: $white;
+        font-size: .9em;
+        height: 20px;
+        margin: 5px 0 6px;
+        line-height: 20px;
+        position: relative;
+
+        &:before {
+            background: $light-gray;
+            content: '';
+            height: 1px;
+            position: absolute;
+            top: 10px;
+            width: 100%;
+        }
+
+        .sidebar__divider__text {
+            background: $primary-color;
+            float: right;
+            padding: 0 10px;
+            position: relative;
+            z-index: 1;
+        }
+    }
+
     .dropdown-menu {
         max-height: 400px;
         max-width: 200px;
diff --git a/webapp/utils/constants.jsx b/webapp/utils/constants.jsx
index 7a900dca5..109291d1f 100644
--- a/webapp/utils/constants.jsx
+++ b/webapp/utils/constants.jsx
@@ -327,7 +327,7 @@ export default {
             sidebarText: '#fff',
             sidebarUnreadText: '#fff',
             sidebarTextHoverBg: '#4A5664',
-            sidebarTextActiveBorder: '#39769C',
+            sidebarTextActiveBorder: '#66B9A7',
             sidebarTextActiveColor: '#FFFFFF',
             sidebarHeaderBg: '#1B2C3E',
             sidebarHeaderTextColor: '#FFFFFF',
diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx
index 9d4ddee53..2f728226c 100644
--- a/webapp/utils/utils.jsx
+++ b/webapp/utils/utils.jsx
@@ -590,7 +590,7 @@ export function toTitleCase(str) {
 
 export function applyTheme(theme) {
     if (theme.sidebarBg) {
-        changeCss('.app__body .sidebar--left, .app__body .modal .settings-modal .settings-table .settings-links, .app__body .sidebar--menu', 'background:' + theme.sidebarBg, 1);
+        changeCss('.app__body .sidebar--left, .app__body .sidebar--left .sidebar__divider .sidebar__divider__text, .app__body .modal .settings-modal .settings-table .settings-links, .app__body .sidebar--menu', 'background:' + theme.sidebarBg, 1);
         changeCss('body.app__body', 'scrollbar-face-color:' + theme.sidebarBg, 3);
     }
 
@@ -614,6 +614,8 @@ export function applyTheme(theme) {
 
     if (theme.sidebarTextActiveBorder) {
         changeCss('.app__body .sidebar--left .nav li.active a:before, .app__body .modal .settings-modal .nav-pills>li.active a:before', 'background:' + theme.sidebarTextActiveBorder, 1);
+        changeCss('.app__body .sidebar--left .sidebar__divider:before', 'background:' + changeOpacity(theme.sidebarTextActiveBorder, 0.5), 1);
+        changeCss('.app__body .sidebar--left .sidebar__divider', 'color:' + theme.sidebarTextActiveBorder, 1);
     }
 
     if (theme.sidebarTextActiveColor) {