Change the unread messages notification on the toggle button

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

@@ -7,6 +7,7 @@ import Icon from '/imports/ui/components/icon/component';
 import { showModal } from '/imports/ui/components/app/service';
 import BreakoutJoinConfirmation from '/imports/ui/components/breakout-join-confirmation/component';
 import _ from 'underscore';
+import cx from 'classnames';
 
 import Dropdown from '/imports/ui/components/dropdown/component';
 import DropdownTrigger from '/imports/ui/components/dropdown/trigger/component';
@@ -61,20 +62,23 @@ class NavBar extends Component {
   render() {
     const { hasUnreadMessages, beingRecorded } = this.props;
 
+    let toggleBtnClasses = {};
+    toggleBtnClasses[styles.btn] = true;
+    toggleBtnClasses[styles.btnWithNotificationDot] = hasUnreadMessages;
+
     return (
       <div className={styles.navbar}>
         <div className={styles.left}>
-        <Button
-          onClick={this.handleToggleUserList}
-          ghost={true}
-          circle={true}
-          hideLabel={true}
-          label={'Toggle User-List'}
-          icon={'user'}
-          className={styles.btn}
-        />
+          <Button
+            onClick={this.handleToggleUserList}
+            ghost={true}
+            circle={true}
+            hideLabel={true}
+            label={'Toggle User-List'}
+            icon={'user'}
+            className={cx(toggleBtnClasses)}
+          />
         </div>
-        {hasUnreadMessages ? <span className={styles.withdot}></span> : null}
         <div className={styles.center}>
           {this.renderPresentationTitle()}
           <span className={styles.divideBar}> | </span>

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

@@ -57,15 +57,19 @@
   margin-top: 6px;
 }
 
-.withdot {
-  content: '';
+.btnWithNotificationDot {
   position: relative;
-  left: 20px;
-  top: 20px;
-  border-radius: 50%;
-  width: 10px;
-  height: 10px;
-  background-color: red;
+
+  &:after {
+    content: '';
+    position: absolute;
+    border-radius: 50%;
+    width: 10px;
+    height: 10px;
+    bottom: 0;
+    right: 0;
+    background-color: $color-danger;
+  }
 }
 
 .hidden {