PLT-5122 - Switching to circular status icons (#5049)

* PLT-5122 - Switching to circular status icons

* Adding profile pic crop for status indicators

* Updating status indicators in LHS

* Updating else statements

3 files changed, 22 insertions, 9 deletions

diff --git a/webapp/components/profile_picture.jsx b/webapp/components/profile_picture.jsx
index 26e9f30d9..7a5f892db 100644
--- a/webapp/components/profile_picture.jsx
+++ b/webapp/components/profile_picture.jsx
@@ -4,6 +4,7 @@ import ProfilePopover from './profile_popover.jsx';
 import * as Utils from 'utils/utils.jsx';
 
 import React from 'react';
+import StatusIcon from './status_icon.jsx';
 import {OverlayTrigger} from 'react-bootstrap';
 
 export default class ProfilePicture extends React.Component {
@@ -45,10 +46,6 @@ export default class ProfilePicture extends React.Component {
     }
 
     render() {
-        let statusClass = '';
-        if (this.props.status) {
-            statusClass = 'status-' + this.props.status;
-        }
         if (this.props.user) {
             return (
                 <OverlayTrigger
@@ -66,25 +63,27 @@ export default class ProfilePicture extends React.Component {
                         />
                 }
                 >
-                    <span className={`status-wrapper ${statusClass}`}>
+                    <span className='status-wrapper'>
                         <img
                             className='more-modal__image'
                             width={this.props.width}
                             height={this.props.width}
                             src={this.props.src}
                         />
+                        <StatusIcon status={this.props.status}/>
                     </span>
                 </OverlayTrigger>
             );
         }
         return (
-            <span className={`status-wrapper ${statusClass}`}>
+            <span className='status-wrapper'>
                 <img
                     className='more-modal__image'
                     width={this.props.width}
                     height={this.props.width}
                     src={this.props.src}
                 />
+                <StatusIcon status={this.props.status}/>
             </span>
         );
     }
diff --git a/webapp/components/sidebar.jsx b/webapp/components/sidebar.jsx
index 1b802b1b0..9adc463be 100644
--- a/webapp/components/sidebar.jsx
+++ b/webapp/components/sidebar.jsx
@@ -507,7 +507,11 @@ export default class Sidebar extends React.Component {
             icon = <div className='status'><i className='fa fa-lock'/></div>;
         } else {
             // set up status icon for direct message channels (status is null for other channel types)
-            icon = <StatusIcon status={channel.status}/>;
+            icon = (
+                <StatusIcon
+                    type='avatar'
+                    status={channel.status}
+                />);
         }
 
         let closeButton = null;
diff --git a/webapp/components/status_icon.jsx b/webapp/components/status_icon.jsx
index 18cfce16c..3e71344d9 100644
--- a/webapp/components/status_icon.jsx
+++ b/webapp/components/status_icon.jsx
@@ -8,13 +8,22 @@ import React from 'react';
 export default class StatusIcon extends React.Component {
     render() {
         const status = this.props.status;
+        const type = this.props.type;
 
         if (!status) {
             return null;
         }
 
         let statusIcon = '';
-        if (status === 'online') {
+        if (type === 'avatar') {
+            if (status === 'online') {
+                statusIcon = Constants.ONLINE_AVATAR_SVG;
+            } else if (status === 'away') {
+                statusIcon = Constants.AWAY_AVATAR_SVG;
+            } else {
+                statusIcon = Constants.OFFLINE_AVATAR_SVG;
+            }
+        } else if (status === 'online') {
             statusIcon = Constants.ONLINE_ICON_SVG;
         } else if (status === 'away') {
             statusIcon = Constants.AWAY_ICON_SVG;
@@ -33,5 +42,6 @@ export default class StatusIcon extends React.Component {
 }
 
 StatusIcon.propTypes = {
-    status: React.PropTypes.string
+    status: React.PropTypes.string,
+    type: React.PropTypes.string
 };