HTML5-clent messages on chat - changed icon for logged out users

bigbluebutton-html5/imports/ui/components/chat/message-list/message-list-item/component.jsx

@@ -41,8 +41,9 @@ export default class MessageListItem extends Component {
         </div>
         <div className={styles.content}>
           <div className={styles.meta}>
-            <div className={styles.name}>
+            <div className={user.isLogin ? styles.name : styles.logout}>
               <span>{user.name}</span>
+              {!user.isLogin ? <span className={styles.offline}> (offline)</span> : null}
             </div>
             <time className={styles.time} dateTime={dateTime}>
               <FormattedTime value={dateTime}/>

bigbluebutton-html5/imports/ui/components/chat/message-list/message-list-item/styles.scss

@@ -57,6 +57,26 @@
   }
 }
 
+.logout {
+  display: flex;
+  min-width: 0;
+  font-weight: 600;
+  color: $color-gray-light;
+  text-transform: capitalize;
+  font-style: italic;
+
+  > span {
+    @extend %text-elipsis;
+  }
+}
+
+.offline {
+  font-weight: 100;
+  color: $color-gray-light;
+  text-transform: capitalize;
+  font-style: italic;
+}
+
 .time {
   flex-shrink: 0;
   flex-grow: 0;

bigbluebutton-html5/imports/ui/components/chat/service.js

@@ -37,18 +37,20 @@ const mapUser = (user) => ({
   isListenOnly: user.listenOnly,
   isSharingWebcam: user.webcam_stream.length,
   isLocked: user.locked,
+  isLogin: true,
 });
 
 const logoutUser = (userID, userName) => ({
   id: userID,
   name: userName,
   emoji: {
-     status: '',
+    status: 'none',
   },
   isPresenter: false,
   isModerator: false,
   isCurrent: false,
   isVoiceUser: false,
+  isLogin: false,
 });
 
 const mapMessage = (messagePayload) => {

bigbluebutton-html5/imports/ui/components/user-avatar/color-generator.js

@@ -25,6 +25,19 @@ const stringToPastelColour = (str) => {
   };
 };
 
+const whiteColour = (str) => {
+
+  let baseRed = 255;
+  let baseGreen = 255;
+  let baseBlue = 255;
+
+  return {
+    r: baseRed,
+    g: baseGreen,
+    b: baseBlue,
+  };
+};
+
 // https://www.w3.org/TR/WCAG20/#relativeluminancedef
 // http://entropymine.com/imageworsener/srgbformula/
 const relativeLuminance = (rgb) => {
@@ -99,10 +112,15 @@ const addShadeIfNoContrast = (rgb) => {
   return addShadeIfNoContrast(shadeColor(rgb, -25));
 };
 
-const getColor = (username) => {
-  let rgb = stringToPastelColour(username);
-  rgb = addShadeIfNoContrast(rgb);
-  return 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ')';
+const getColor = (username, chkLogin) => {
+  if (chkLogin) {
+    let rgb = stringToPastelColour(username);
+    rgb = addShadeIfNoContrast(rgb);
+    return 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ')';
+  } else {
+    let rgb = whiteColour();
+    return 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ')';
+  }
 };
 
 export default getColor;

bigbluebutton-html5/imports/ui/components/user-avatar/component.jsx

@@ -24,11 +24,12 @@ export default class UserAvatar extends Component {
     } = this.props;
 
     let avatarStyles = {
-      backgroundColor: getColor(user.name),
+      backgroundColor: getColor(user.name, user.isLogin),
     };
 
     return (
-      <div className={styles.userAvatar} style={avatarStyles}>
+      <div className={user.isLogin ? styles.userAvatar : styles.userLogout}
+           style={avatarStyles}>
         <span>
           {this.renderAvatarContent()}
         </span>

bigbluebutton-html5/imports/ui/components/user-avatar/styles.scss

@@ -29,6 +29,24 @@ $moderator-bg: $color-primary;
   text-transform: capitalize;
 }
 
+.userLogout {
+  flex-basis: 2.2rem;
+  height: 2.2rem;
+  flex-shrink: 0;
+  line-height: 2.2rem;
+  justify-content: center;
+  position: relative;
+  display: flex;
+  flex-flow: column;
+  font-size: 1.1rem;
+  text-align: center;
+  border-radius: 50%;
+  border: 1px solid $color-gray-lighter;
+  color: $color-gray-light;
+  font-style: italic;
+  text-transform: capitalize;
+}
+
 .userStatus {
   position: absolute;
   background-color: $color-white;

bigbluebutton-html5/imports/ui/components/user-list/service.js

@@ -28,6 +28,7 @@ const mapUser = user => ({
   isListenOnly: user.listenOnly,
   isSharingWebcam: user.webcam_stream.length,
   isPhoneUser: user.phone_user,
+  isLogin: user ? true : false,
 });
 
 const mapOpenChats = chat => {