finishes initial ui for the compact userlist

bigbluebutton-html5/imports/ui/components/app/component.jsx

@@ -51,7 +51,7 @@ export default class App extends Component {
     const { userList } = this.props;
 
     const userListStyle = {};
-    userListStyle[styles.minview] = true;
+    userListStyle[styles.minview] = false;
 
     if (userList) {
       return (

bigbluebutton-html5/imports/ui/components/app/styles.scss

@@ -118,7 +118,7 @@ $actionsbar-height: 50px; // TODO: Change to ActionsBar real height
 }
 
 .minview {
-  flex-basis: 5vw;
+  flex-basis: 4.6rem;
 }
 
 .chat {

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

@@ -30,7 +30,7 @@ class UserList extends Component {
     super(props);
 
     this.state = {
-      compact: true,
+      compact: false,
     };
   }
 
@@ -83,7 +83,7 @@ class UserList extends Component {
               description="Title for the messages list"
               defaultMessage="Messages"
             />
-          </h3> : <hr></hr>
+          </h3> : <hr className={styles.separator}></hr>
         }
         <div className={styles.scrollableList}>
           <ReactCSSTransitionGroup
@@ -126,7 +126,7 @@ class UserList extends Component {
               defaultMessage="Participants"
             />
             &nbsp;({this.props.users.length})
-          </h3> : <hr></hr>
+          </h3> : <hr className={styles.separator}></hr>
         }
         <ReactCSSTransitionGroup
           transitionName={listTransition}

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

@@ -130,6 +130,13 @@ $user-icons-color-hover: $color-gray;
   flex-shrink: 1;
 }
 
+.separator {
+  margin: 1rem auto;
+  width: 2.2rem;
+  border: 0;
+  border-top: 1px solid $color-gray-lighter;
+}
+
 .enter, .appear {
   opacity: 0.01;
 }

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

@@ -20,8 +20,6 @@
 }
 
 .userItemContentsCompact {
-  background-color: red;
-  margin-right: 0.7rem;
 }
 
 .userName {