Mockup: Add "Announcements" section, update markup and styles for user-panel

css/converse.css

@@ -7711,9 +7711,17 @@ body.reset {
       text-overflow: ellipsis; }
     #conversejs #controlbox .controlbox-pane .userinfo .profile {
       margin-bottom: 0.75em; }
+  #conversejs #controlbox .list-container .items-list .list-item {
+    border: none;
+    clear: both;
+    color: #777;
+    display: block;
+    height: 2em;
+    overflow: hidden;
+    text-shadow: 0 1px 0 #FAFAFA;
+    word-wrap: break-word; }
   #conversejs #controlbox #chatrooms {
-    padding: 0;
-    padding-bottom: 0.5em; }
+    padding: 0; }
     #conversejs #controlbox #chatrooms form.add-chatroom {
       margin: 0;
       padding: 0; }
@@ -7730,60 +7738,50 @@ body.reset {
     #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list {
       margin: 0.5em 0;
       text-align: left; }
-      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom,
-      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom {
-        border: none;
-        clear: both;
-        color: #777;
-        display: block;
+      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a:hover,
+      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom a:hover {
+        color: #206485; }
+      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a.fa:hover,
+      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom a.fa:hover {
+        color: #818479; }
+      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom.unread-msgs .available-room,
+      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom.unread-msgs .open-room,
+      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom.unread-msgs .available-room,
+      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom.unread-msgs .open-room {
+        width: 100%;
+        font-weight: bold; }
+      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a.room-info:before,
+      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom a.room-info:before {
+        font-size: 15px; }
+      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a.open-room,
+      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom a.open-room {
+        width: 68%;
+        float: left;
         overflow: hidden;
-        margin-top: 0.5em;
-        text-shadow: 0 1px 0 #FAFAFA;
-        word-wrap: break-word; }
-        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a:hover,
-        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom a:hover {
-          color: #206485; }
-        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a.fa:hover,
-        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom a.fa:hover {
-          color: #818479; }
-        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom.unread-msgs .available-room,
-        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom.unread-msgs .open-room,
-        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom.unread-msgs .available-room,
-        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom.unread-msgs .open-room {
-          width: 100%;
-          font-weight: bold; }
-        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a.room-info:before,
-        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom a.room-info:before {
-          font-size: 15px; }
-        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a.open-room,
-        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom a.open-room {
-          width: 68%;
-          float: left;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          padding-right: 0.5em; }
-        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a.available-room,
-        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom a.available-room {
-          width: 85%; }
-        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .add-bookmark,
-        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .remove-bookmark,
-        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .add-bookmark,
-        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .remove-bookmark {
-          color: #A8ABA1; }
-          #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .add-bookmark.button-on,
-          #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .remove-bookmark.button-on,
-          #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .add-bookmark.button-on,
-          #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .remove-bookmark.button-on {
-            color: #578EA9; }
-            #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .add-bookmark.button-on:hover,
-            #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .remove-bookmark.button-on:hover,
-            #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .add-bookmark.button-on:hover,
-            #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .remove-bookmark.button-on:hover {
-              color: #206485; }
-  #conversejs #controlbox #chatrooms, #conversejs #controlbox #converse-roster {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        padding-right: 0.5em; }
+      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a.available-room,
+      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom a.available-room {
+        width: 85%; }
+      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .add-bookmark,
+      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .remove-bookmark,
+      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .add-bookmark,
+      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .remove-bookmark {
+        color: #A8ABA1; }
+        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .add-bookmark.button-on,
+        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .remove-bookmark.button-on,
+        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .add-bookmark.button-on,
+        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .remove-bookmark.button-on {
+          color: #578EA9; }
+          #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .add-bookmark.button-on:hover,
+          #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .remove-bookmark.button-on:hover,
+          #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .add-bookmark.button-on:hover,
+          #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .remove-bookmark.button-on:hover {
+            color: #206485; }
+  #conversejs #controlbox .controlbox-section {
     margin: 1em 0 0 0; }
-    #conversejs #controlbox #chatrooms div.d-flex span, #conversejs #controlbox #converse-roster div.d-flex span {
+    #conversejs #controlbox .controlbox-section .controlbox-heading {
       margin: 0 0 0.5em 0;
       text-transform: uppercase; }
   #conversejs #controlbox .dropdown a {
@@ -8344,7 +8342,7 @@ body.reset {
 #conversejs .chatbox.headlines .chat-body {
   background-color: #E7A151;
   border-radius: 4px; }
-  #conversejs .chatbox.headlines .chat-body .chat-message span.chat-msg-them {
+  #conversejs .chatbox.headlines .chat-body .chat-message {
     color: #D2842B; }
 #conversejs .chatbox.headlines .chat-content {
   height: 100%;
@@ -8404,14 +8402,10 @@ body.reset {
   #conversejs .message.chat-msg.onload {
     animation: colorchange-chatmessage 1s;
     -webkit-animation: colorchange-chatmessage 1s; }
-  #conversejs .message.chat-msg.delayed .chat-msg-them {
-    color: #41b875; }
-  #conversejs .message.chat-msg.delayed .chat-msg-me {
-    color: #6899b2; }
   #conversejs .message.chat-msg:hover {
     background-color: rgba(0, 0, 0, 0.035); }
   #conversejs .message.chat-msg .spoiler-hint {
-    margin-bottom: 1em; }
+    margin-bottom: 0.5em; }
   #conversejs .message.chat-msg .toggle-spoiler {
     color: white; }
     #conversejs .message.chat-msg .toggle-spoiler i {
@@ -8441,10 +8435,6 @@ body.reset {
       font-weight: bold; }
     #conversejs .message.chat-msg .chat-msg-heading .chat-msg-time {
       padding-left: 0.5em; }
-    #conversejs .message.chat-msg .chat-msg-heading .chat-msg-them {
-      color: #3AA569; }
-    #conversejs .message.chat-msg .chat-msg-heading .chat-msg-me {
-      color: #578EA9; }
   #conversejs .message.chat-msg.chat-msg-followup .chat-msg-heading,
   #conversejs .message.chat-msg.chat-msg-followup .avatar {
     display: none; }
@@ -8453,12 +8443,6 @@ body.reset {
 #conversejs .chatroom-body .message.onload {
   animation: colorchange-chatmessage-muc 1s;
   -webkit-animation: colorchange-chatmessage-muc 1s; }
-#conversejs .chatroom-body .message.delayed .chat-msg-them {
-  color: #41b875; }
-#conversejs .chatroom-body .message.delayed .chat-msg-me {
-  color: #6899b2; }
-#conversejs .chatroom-body .message .chat-msg-them {
-  color: #3AA569; }
 #conversejs .chatroom-body .message .separator {
   border: 0.5px solid #E77051; }
 

css/inverse.css

@@ -7785,9 +7785,17 @@ body {
       text-overflow: ellipsis; }
     #conversejs #controlbox .controlbox-pane .userinfo .profile {
       margin-bottom: 0.75em; }
+  #conversejs #controlbox .list-container .items-list .list-item {
+    border: none;
+    clear: both;
+    color: #777;
+    display: block;
+    height: 2em;
+    overflow: hidden;
+    text-shadow: 0 1px 0 #FAFAFA;
+    word-wrap: break-word; }
   #conversejs #controlbox #chatrooms {
-    padding: 0;
-    padding-bottom: 0.5em; }
+    padding: 0; }
     #conversejs #controlbox #chatrooms form.add-chatroom {
       margin: 0;
       padding: 0; }
@@ -7804,60 +7812,50 @@ body {
     #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list {
       margin: 0.5em 0;
       text-align: left; }
-      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom,
-      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom {
-        border: none;
-        clear: both;
-        color: #777;
-        display: block;
+      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a:hover,
+      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom a:hover {
+        color: #206485; }
+      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a.fa:hover,
+      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom a.fa:hover {
+        color: #818479; }
+      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom.unread-msgs .available-room,
+      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom.unread-msgs .open-room,
+      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom.unread-msgs .available-room,
+      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom.unread-msgs .open-room {
+        width: 100%;
+        font-weight: bold; }
+      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a.room-info:before,
+      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom a.room-info:before {
+        font-size: 15px; }
+      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a.open-room,
+      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom a.open-room {
+        width: 68%;
+        float: left;
         overflow: hidden;
-        margin-top: 0.5em;
-        text-shadow: 0 1px 0 #FAFAFA;
-        word-wrap: break-word; }
-        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a:hover,
-        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom a:hover {
-          color: #206485; }
-        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a.fa:hover,
-        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom a.fa:hover {
-          color: #818479; }
-        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom.unread-msgs .available-room,
-        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom.unread-msgs .open-room,
-        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom.unread-msgs .available-room,
-        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom.unread-msgs .open-room {
-          width: 100%;
-          font-weight: bold; }
-        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a.room-info:before,
-        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom a.room-info:before {
-          font-size: 15px; }
-        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a.open-room,
-        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom a.open-room {
-          width: 68%;
-          float: left;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          padding-right: 0.5em; }
-        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a.available-room,
-        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom a.available-room {
-          width: 85%; }
-        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .add-bookmark,
-        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .remove-bookmark,
-        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .add-bookmark,
-        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .remove-bookmark {
-          color: #A8ABA1; }
-          #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .add-bookmark.button-on,
-          #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .remove-bookmark.button-on,
-          #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .add-bookmark.button-on,
-          #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .remove-bookmark.button-on {
-            color: #578EA9; }
-            #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .add-bookmark.button-on:hover,
-            #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .remove-bookmark.button-on:hover,
-            #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .add-bookmark.button-on:hover,
-            #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .remove-bookmark.button-on:hover {
-              color: #206485; }
-  #conversejs #controlbox #chatrooms, #conversejs #controlbox #converse-roster {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        padding-right: 0.5em; }
+      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a.available-room,
+      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom a.available-room {
+        width: 85%; }
+      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .add-bookmark,
+      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .remove-bookmark,
+      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .add-bookmark,
+      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .remove-bookmark {
+        color: #A8ABA1; }
+        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .add-bookmark.button-on,
+        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .remove-bookmark.button-on,
+        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .add-bookmark.button-on,
+        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .remove-bookmark.button-on {
+          color: #578EA9; }
+          #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .add-bookmark.button-on:hover,
+          #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .remove-bookmark.button-on:hover,
+          #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .add-bookmark.button-on:hover,
+          #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .remove-bookmark.button-on:hover {
+            color: #206485; }
+  #conversejs #controlbox .controlbox-section {
     margin: 1em 0 0 0; }
-    #conversejs #controlbox #chatrooms div.d-flex span, #conversejs #controlbox #converse-roster div.d-flex span {
+    #conversejs #controlbox .controlbox-section .controlbox-heading {
       margin: 0 0 0.5em 0;
       text-transform: uppercase; }
   #conversejs #controlbox .dropdown a {
@@ -8524,7 +8522,7 @@ body {
 #conversejs .chatbox.headlines .chat-body {
   background-color: #E7A151;
   border-radius: 4px; }
-  #conversejs .chatbox.headlines .chat-body .chat-message span.chat-msg-them {
+  #conversejs .chatbox.headlines .chat-body .chat-message {
     color: #D2842B; }
 #conversejs .chatbox.headlines .chat-content {
   height: 100%;
@@ -8592,10 +8590,6 @@ body {
   #conversejs .message.chat-msg.onload {
     animation: colorchange-chatmessage 1s;
     -webkit-animation: colorchange-chatmessage 1s; }
-  #conversejs .message.chat-msg.delayed .chat-msg-them {
-    color: #41b875; }
-  #conversejs .message.chat-msg.delayed .chat-msg-me {
-    color: #6899b2; }
   #conversejs .message.chat-msg:hover {
     background-color: rgba(0, 0, 0, 0.035); }
   #conversejs .message.chat-msg .spoiler-hint {
@@ -8629,10 +8623,6 @@ body {
       font-weight: bold; }
     #conversejs .message.chat-msg .chat-msg-heading .chat-msg-time {
       padding-left: 0.5em; }
-    #conversejs .message.chat-msg .chat-msg-heading .chat-msg-them {
-      color: #3AA569; }
-    #conversejs .message.chat-msg .chat-msg-heading .chat-msg-me {
-      color: #578EA9; }
   #conversejs .message.chat-msg.chat-msg-followup .chat-msg-heading,
   #conversejs .message.chat-msg.chat-msg-followup .avatar {
     display: none; }
@@ -8641,12 +8631,6 @@ body {
 #conversejs .chatroom-body .message.onload {
   animation: colorchange-chatmessage-muc 1s;
   -webkit-animation: colorchange-chatmessage-muc 1s; }
-#conversejs .chatroom-body .message.delayed .chat-msg-them {
-  color: #41b875; }
-#conversejs .chatroom-body .message.delayed .chat-msg-me {
-  color: #6899b2; }
-#conversejs .chatroom-body .message .chat-msg-them {
-  color: #3AA569; }
 #conversejs .chatroom-body .message .separator {
   border: 0.5px solid #E77051; }
 

mockup/chatroom.html

@@ -24,7 +24,7 @@
                 <div class="flyout box-flyout">
                     <div class="chat-head chat-head-chatroom row no-gutters">
                         <div class="col col-9">
-                            <div class="chat-title">ACT II. SCENE II. Capulet's orchard.</div>
+                            <div class="chat-title">Capulet's orchard</div>
                             <p class="chatroom-topic">Two households, both alike in dignity, In fair Verona, where we lay our scene.</p>
                         </div>
                         <div class="chatbox-buttons row no-gutters">
@@ -114,7 +114,7 @@
                                     </div>
 								</div>
 
-                                <div class="message chat-msg {{{o.extra_classes}}}" data-isodate="{{{o.time}}}" data-msgid="{{{o.msgid}}}">
+                                <div class="message chat-msg" data-isodate="2018-04-36T18:07:36+02:00" data-msgid="some-long-id">
                                     <canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas>
                                     <div class="chat-msg-content">
                                         <span class="chat-msg-heading">

mockup/user-panel.html

@@ -14,38 +14,78 @@
     </div>
 </div>
 
-<div id="chatrooms">
+<div id="headlines" class="controlbox-section">
     <div class="d-flex">
-        <span class="w-100">Chatrooms</span>
+        <span class="w-100 controlbox-heading">Announcements</span>
+    </div>
+    <div class="list-container">
+        <div class="items-list">
+            <div class="list-item open-headline d-flex flex-row">
+                <a class="w-100" data-jid="montague.lit" title="Click to show" href="chatroom.html">Montague.lit</a>
+            </div>
+            <div class="list-item open-headline d-flex flex-row">
+                <a class="w-100" data-jid="montague.lit" title="Click to show" href="chatroom.html">Capulet.lit</a>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div id="chatrooms" class="controlbox-section">
+    <div class="d-flex">
+        <span class="w-100 controlbox-heading">Group Chats</span>
         <a class="chatbox-btn fa fa-users" title="Click to add a new room" data-toggle="modal" data-target="#chatroomsModal"></a>
     </div>
     <div class="list-container rooms-list-container">
-        <div class="rooms-list">
-            <div class="available-chatroom d-flex flex-row">
-                <span class="badge badge-info msgs-indicator">1</span>
-                <a class="open-room available-room w-100" data-room-jid="public@conference.test.com" title="Click to open this room" href="chatroom.html">public</a>
-                <a href="#" class="room-info fa fa-info-circle" data-container="body" data-toggle="popover" title="Room info"
-                    data-html="true" data-content="<b>Room Address (JID): </b><br>public@conference.test.com<br><b>Discussions: </b><br>Public discussions<br><b>Participants: </b>1<br><b>Features: </b><br>Non-anonymous">&nbsp;</a>
+        <div class="rooms-list items-list">
+            <div class="list-item available-chatroom d-flex flex-row">
+                <a class="open-room available-room w-100" data-room-jid="public@conference.test.com" title="Click to open this room" href="chatroom.html">Capulet's orchard</a>
+                <!-- <span class="badge badge-info msgs-indicator">1</span> -->
+                <a href="#"
+                   class="room-info fa fa-info-circle" data-container="body" data-toggle="popover" title="Room info"
+                   data-html="true" data-content="<b>Room Address (JID): </b><br>public@conference.test.com<br><b>Discussions: </b><br>Public discussions<br><b>Participants: </b>1<br><b>Features: </b><br>Non-anonymous">
+                   &nbsp;</a>
+                <a href="#" class="fa fa-bookmark" title="Click to bookmark this room">&nbsp;</a>
+            </div>
+            <div class="list-item available-chatroom d-flex flex-row">
+                <a class="open-room available-room w-100" data-room-jid="team@conference.test.com" title="Click to open this room" href="chatroom.html">Juliet's Balcony</a>
+                <a href="#"
+                   class="room-info fa fa-info-circle" data-container="body" data-toggle="popover" title="Room info"
+                    data-html="true" data-content="<b>Room Address (JID): </b><br>public@conference.test.com<br><b>Discussions: </b><br>Public discussions<br><b>Participants: </b>1<br><b>Features: </b><br>Non-anonymous">
+                    &nbsp;</a>
                 <a href="#" class="fa fa-bookmark" title="Click to bookmark this room">&nbsp;</a>
-                <a href="#" class="fa fa-times" title="Click to leave this room">&nbsp;</a>
             </div>
-            <div class="available-chatroom d-flex flex-row">
-                <a class="open-room available-room w-100" data-room-jid="team@conference.test.com" title="Click to open this room" href="chatroom.html">team</a>
-                <a href="#" class="room-info fa fa-info-circle" data-container="body" data-toggle="popover" title="Room info"
-                    data-html="true" data-content="<b>Room Address (JID): </b><br>team@conference.test.com<br><b>Discussions: </b><br>Public discussions<br><b>Participants: </b>1<br><b>Features: </b><br>Non-anonymous">&nbsp;</a>
+        </div>
+    </div>
+</div>
+
+<div id="bookmarks" class="controlbox-section">
+    <div class="d-flex"><span class="w-100 controlbox-heading">Bookmarks</span></div>
+    <div class="list-container rooms-list-container">
+        <div class="rooms-list items-list">
+            <div class="list-item available-chatroom d-flex flex-row">
+                <a class="open-room available-room w-100" data-room-jid="public@conference.test.com" title="Click to open this room" href="chatroom.html">Capulet's orchard</a>
+                <!-- <span class="badge badge-info msgs-indicator">1</span> -->
+                <a href="#"
+                   class="room-info fa fa-info-circle" data-container="body" data-toggle="popover" title="Room info"
+                   data-html="true" data-content="<b>Room Address (JID): </b><br>public@conference.test.com<br><b>Discussions: </b><br>Public discussions<br><b>Participants: </b>1<br><b>Features: </b><br>Non-anonymous">
+                   &nbsp;</a>
+                <a href="#" class="fa fa-bookmark" title="Click to bookmark this room">&nbsp;</a>
             </div>
-            <div class="available-chatroom d-flex flex-row">
-                <a class="open-room available-room w-100" data-room-jid="test@conference.test.com" title="Click to open this room" href="chatroom.html">test</a>
-                <a href="#" class="room-info fa fa-info-circle" data-container="body" data-toggle="popover" title="Room info"
-                    data-html="true" data-content="<b>Room Address (JID): </b><br>test@conference.test.com<br><b>Discussions: </b><br>Public discussions<br><b>Participants: </b>1<br><b>Features: </b><br>Non-anonymous">&nbsp;</a>
+            <div class="list-item available-chatroom d-flex flex-row">
+                <a class="open-room available-room w-100" data-room-jid="team@conference.test.com" title="Click to open this room" href="chatroom.html">Juliet's Balcony</a>
+                <a href="#"
+                   class="room-info fa fa-info-circle" data-container="body" data-toggle="popover" title="Room info"
+                    data-html="true" data-content="<b>Room Address (JID): </b><br>public@conference.test.com<br><b>Discussions: </b><br>Public discussions<br><b>Participants: </b>1<br><b>Features: </b><br>Non-anonymous">
+                    &nbsp;</a>
+                <a href="#" class="fa fa-bookmark" title="Click to bookmark this room">&nbsp;</a>
             </div>
         </div>
     </div>
 </div>
 
-<div id="converse-roster">
+<div id="converse-roster" class="controlbox-section">
     <div class="d-flex">
-        <span class="w-100">Contacts</span>
+        <span class="w-100 controlbox-heading">Contacts</span>
         <a class="chatbox-btn fa fa-user-plus" title="Click to add new chat contacts" data-toggle="modal" data-target="#addContactModal"></a>
     </div>
     <form class="roster-filter-form input-button-group">
@@ -83,7 +123,6 @@
         <div class="roster-group" data-group="Colleagues">
             <a href="#" data-group="Colleagues" class="group-toggle" title="Click to hide these contacts">
                 <span class="fa fa-caret-down"></span> Colleagues</a>
-
             <ul>
                 <li class="away current-xmpp-contact d-flex">
                     <a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">

sass/_controlbox.scss

@@ -226,9 +226,23 @@
             }
         }
 
+        .list-container {
+            .items-list {
+                .list-item {
+                    border: none;
+                    clear: both;
+                    color: $text-color;
+                    display: block;
+                    height: 2em;
+                    overflow: hidden;
+                    text-shadow: 0 1px 0 $text-shadow-color;
+                    word-wrap: break-word;
+                }
+            }
+        }
+
         #chatrooms {
             padding: 0;
-            padding-bottom: 0.5em;
 
             form.add-chatroom {
                 input[type=button],
@@ -256,14 +270,6 @@
 
                     .available-chatroom,
                     .open-chatroom {
-                        border: none;
-                        clear: both;
-                        color: $text-color;
-                        display: block;
-                        overflow: hidden;
-                        margin-top: 0.5em;
-                        text-shadow: 0 1px 0 $text-shadow-color;
-                        word-wrap: break-word;
                         a:hover {
                             color: $dark-link-color;
                         }
@@ -310,9 +316,10 @@
             }
         }
 
-        #chatrooms, #converse-roster {
+        .controlbox-section {
             margin: 1em 0 0 0;
-            div.d-flex span {
+
+            .controlbox-heading {
                 margin: 0 0 0.5em 0;
                 text-transform: uppercase;
             }

sass/_headline.scss

@@ -9,11 +9,7 @@
             background-color: $headline-head-color;
             border-radius: $chatbox-border-radius;
             .chat-message {
-                span {
-                    &.chat-msg-them {
-                        color: $dark-orange;
-                    }
-                }
+                color: $dark-orange;
             }
         }
         .chat-content {

sass/_messages.scss

@@ -74,14 +74,6 @@
                 animation: colorchange-chatmessage 1s;
                 -webkit-animation: colorchange-chatmessage 1s;
             }
-            &.delayed {
-                .chat-msg-them {
-                    color: lighten($message-them-color, 5%);
-                }
-                .chat-msg-me {
-                    color: lighten($link-color, 5%);
-                }
-            }
             &:hover {
                 background-color: rgba(0, 0, 0, 0.035);
             }
@@ -132,12 +124,6 @@
                 .chat-msg-time {
                     padding-left: 0.5em;
                 }
-                .chat-msg-them {
-                    color: $message-them-color;
-                }
-                .chat-msg-me {
-                    color: $link-color;
-                }
             }
             &.chat-msg-followup {
                 .chat-msg-heading,
@@ -157,18 +143,6 @@
             animation: colorchange-chatmessage-muc 1s;
             -webkit-animation: colorchange-chatmessage-muc 1s;
         }
-        &.delayed {
-            .chat-msg-them {
-                color: lighten($chatroom-message-them-color, 5%);
-            }
-            .chat-msg-me {
-                color: lighten($link-color, 5%);
-            }
-        }
-        .chat-msg-them {
-            color: $chatroom-message-them-color;
-        }
-
         .separator {
             border: 0.5px solid $chatroom-head-color;
         }