Online status in all modals (#3617)

* add wrapper to modal avatar image which show small round indicator of online/away status of member in all modals

* add offline indicator

* the color of the status indicators follow the theme

webapp/components/popover_list_members.jsx

@@ -88,18 +88,24 @@ export default class PopoverListMembers extends React.Component {
                 }
 
                 if (name) {
+                    if (!m.status) {
+                        var status = UserStore.getStatus(m.id);
+                        m.status = status ? 'status-' + status : '';
+                    }
                     popoverHtml.push(
                         <div
                             className='more-modal__row'
                             key={'popover-member-' + i}
                         >
 
-                            <img
-                                className='more-modal__image'
-                                width='26px'
-                                height='26px'
-                                src={`${Client.getUsersRoute()}/${m.id}/image?time=${m.update_at}`}
-                            />
+                            <span className={`more-modal__image-wrapper ${m.status}`}>
+                                <img
+                                    className='more-modal__image'
+                                    width='26px'
+                                    height='26px'
+                                    src={`${Client.getUsersRoute()}/${m.id}/image?time=${m.update_at}`}
+                                />
+                            </span>
                             <div className='more-modal__details'>
                                 <div
                                     className='more-modal__name'

webapp/components/user_list_row.jsx

@@ -1,6 +1,7 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
+import UserStore from 'stores/user_store.jsx';
 import Constants from 'utils/constants.jsx';
 import PreferenceStore from 'stores/preference_store.jsx';
 import * as Utils from 'utils/utils.jsx';
@@ -31,17 +32,23 @@ export default function UserListRow({user, teamMember, actions, actionProps}) {
         });
     }
 
+    if (!user.status) {
+        var status = UserStore.getStatus(user.id);
+        user.status = status ? 'status-' + status : '';
+    }
     return (
         <div
             key={user.id}
             className='more-modal__row'
         >
-            <img
-                className='more-modal__image'
-                width='38'
-                height='38'
-                src={`${Client.getUsersRoute()}/${user.id}/image?time=${user.update_at}`}
-            />
+            <span className={`more-modal__image-wrapper ${user.status}`}>
+                <img
+                    className='more-modal__image'
+                    width='38'
+                    height='38'
+                    src={`${Client.getUsersRoute()}/${user.id}/image?time=${user.update_at}`}
+                />
+            </span>
             <div
                 className='more-modal__details'
             >