added css for red dot and fixed code

bigbluebutton-html5/imports/ui/components/nav-bar/component.jsx

@@ -3,7 +3,6 @@ import styles from './styles.scss';
 import Button from '../button/component';
 import RecordButton from './recordbutton/component';
 import SettingsDropdown from './settings-dropdown/component';
-import DisplayUnreadMessage from './display-unreadmessage/component';
 
 const propTypes = {
   presentationTitle: PropTypes.string.isRequired,
@@ -45,7 +44,7 @@ class NavBar extends Component {
           className={styles.btn}
         />
         </div>
-        <DisplayUnreadMessage hasUnreadMessages={hasUnreadMessages}/>
+        {hasUnreadMessages ? <span className={styles.withdot}></span> : null}
         <div className={styles.center}>
           <h1 className={styles.presentationTitle}>{presentationTitle}</h1>
           <span className={styles.divideBar}> | </span>

bigbluebutton-html5/imports/ui/components/nav-bar/container.jsx

@@ -41,22 +41,23 @@ export default withRouter(createContainer(({ location, router }) => {
     meetingRecorded = meetingObject.currentlyBeingRecorded;
   }
 
-  const users = Service.getUsers();
-  let unreadMessagesFromUsers;
-  let unreadMessagesFromPublic = ChatService.hasUnreadMessages(PUBLIC_CHAT_KEY);
-  let hasUnreadMessages;
+  const checkUnreadMessages = () => {
+    let users = Service.getUsers();
 
-  for (let i = 0; i < users.length; i++) {
-    if (users[i].id !== Auth.userID) {
-      unreadMessagesFromUsers = ChatService.hasUnreadMessages(users[i].id);
-    }
-  }
-
-  hasUnreadMessages = unreadMessagesFromPublic || unreadMessagesFromUsers;
+    // 1.map every user id
+    // 2.filter the user except the current user from the user array
+    // 3.add the public chat to the array
+    // 4.check current user has unread messages or not.
+    return users
+      .map(user => user.id)
+      .filter(userID => userID !== Auth.userID)
+      .concat(PUBLIC_CHAT_KEY)
+      .some(receiverID => ChatService.hasUnreadMessages(receiverID));
+  };
 
   return {
     presentationTitle: meetingTitle,
-    hasUnreadMessages: hasUnreadMessages,
+    hasUnreadMessages: checkUnreadMessages(),
     beingRecorded: meetingRecorded,
     toggleUserList: () => {
       if (location.pathname.indexOf('/users') !== -1) {

bigbluebutton-html5/imports/ui/components/nav-bar/display-unreadmessage/component.jsx

@@ -1,19 +0,0 @@
-import React, { Component, PropTypes } from 'react';
-import styles from '../styles.scss';
-
-export default class DisplayUnreadMessage extends Component{
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    const { hasUnreadMessages } = this.props;
-    let fillColor = hasUnreadMessages ? '#F0615F' : '#ffffff';
-
-    return (
-      <svg width="30" height="30" className={styles.msgFlag}>
-        <circle cx="13" cy="17.5" r="5" stroke="#2A2D36" strokeWidth="1" fill= {fillColor} />
-      </svg>
-    );
-  }
-};

bigbluebutton-html5/imports/ui/components/nav-bar/styles.scss

@@ -57,6 +57,17 @@
   margin-top: 6px;
 }
 
+.withdot {
+  content: '';
+  position: relative;
+  left: 20px;
+  top: 20px;
+  border-radius: 50%;
+  width: 10px;
+  height: 10px;
+  background-color: red;
+}
+
 .hidden {
   position:absolute;
   left:-10000px;
@@ -67,6 +78,7 @@
 }
 
 .btn{
+  position: absolute;
   span {
     border: none;
     box-shadow: none;