Refactor the navbar title separator to use CSS instead of text

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

@@ -82,10 +82,8 @@ class NavBar extends Component {
         </div>
         <div className={styles.center}>
           {this.renderPresentationTitle()}
-          <span className={styles.divideBar}> | </span>
-          <div className={styles.record}>
-            <RecordingIndicator beingRecorded={beingRecorded}/>
-          </div>
+          <span className={styles.divider}></span>
+          <RecordingIndicator beingRecorded={beingRecorded}/>
         </div>
         <div className={styles.right}>
           <SettingsDropdown />

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

@@ -7,8 +7,7 @@
 
 .left,
 .right,
-.center,
-.record {
+.center {
   display: flex;
   flex-direction: row;
   justify-content: center;
@@ -16,8 +15,7 @@
 }
 
 .left,
-.right,
-.record {
+.right {
   flex: 0;
 }
 
@@ -41,9 +39,10 @@
   }
 }
 
-.divideBar {
-  color: $color-white;
-  font-size: $font-size-base * 1.2;
+.divider {
+  background: $color-white;
+  height: 70%;
+  width: 1px;
   margin: 0 $line-height-computed / 2;
 }