Update chat events markup.

css/converse.css

@@ -5293,7 +5293,10 @@ body.reset {
       line-height: 14px;
       color: #3AA569;
       font-size: 12px;
-      margin: 0.3em; }
+      margin: 0.5em; }
+      #converse-embedded-chat .chatbox .chat-body .chat-info.badge,
+      #conversejs .chatbox .chat-body .chat-info.badge {
+        color: white; }
       #converse-embedded-chat .chatbox .chat-body .chat-info.chat-event,
       #conversejs .chatbox .chat-body .chat-info.chat-event {
         clear: left;
@@ -6181,6 +6184,7 @@ body.reset {
     #converse-embedded-chat .chatroom .box-flyout .chatroom-body,
     #conversejs .chatroom .box-flyout .chatroom-body {
       flex-direction: row;
+      flex-flow: nowrap;
       border-bottom-right-radius: 4px;
       border-bottom-left-radius: 4px;
       background-color: white;
@@ -6190,9 +6194,12 @@ body.reset {
       #converse-embedded-chat .chatroom .box-flyout .chatroom-body .row,
       #conversejs .chatroom .box-flyout .chatroom-body .row {
         flex-direction: row; }
+      #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-topic,
+      #conversejs .chatroom .box-flyout .chatroom-body .chat-topic {
+        font-weight: bold;
+        color: #E77051; }
       #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-info,
       #conversejs .chatroom .box-flyout .chatroom-body .chat-info {
-        color: white;
         line-height: normal; }
       #converse-embedded-chat .chatroom .box-flyout .chatroom-body .mentioned,
       #conversejs .chatroom .box-flyout .chatroom-body .mentioned {

css/inverse.css

@@ -5057,7 +5057,10 @@ body {
       line-height: 20px;
       color: #3AA569;
       font-size: 14px;
-      margin: 0.3em; }
+      margin: 0.5em; }
+      #converse-embedded-chat .chatbox .chat-body .chat-info.badge,
+      #conversejs .chatbox .chat-body .chat-info.badge {
+        color: white; }
       #converse-embedded-chat .chatbox .chat-body .chat-info.chat-event,
       #conversejs .chatbox .chat-body .chat-info.chat-event {
         clear: left;
@@ -6013,6 +6016,7 @@ body {
     #converse-embedded-chat .chatroom .box-flyout .chatroom-body,
     #conversejs .chatroom .box-flyout .chatroom-body {
       flex-direction: row;
+      flex-flow: nowrap;
       border-bottom-right-radius: 4px;
       border-bottom-left-radius: 4px;
       background-color: white;
@@ -6022,9 +6026,12 @@ body {
       #converse-embedded-chat .chatroom .box-flyout .chatroom-body .row,
       #conversejs .chatroom .box-flyout .chatroom-body .row {
         flex-direction: row; }
+      #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-topic,
+      #conversejs .chatroom .box-flyout .chatroom-body .chat-topic {
+        font-weight: bold;
+        color: #E77051; }
       #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-info,
       #conversejs .chatroom .box-flyout .chatroom-body .chat-info {
-        color: white;
         line-height: normal; }
       #converse-embedded-chat .chatroom .box-flyout .chatroom-body .mentioned,
       #conversejs .chatroom .box-flyout .chatroom-body .mentioned {

mockup/chatbox.html

@@ -46,10 +46,8 @@
 
                     <div class="chat-body">
                         <div class="chat-content">
-                            <div class="chat-info">
-                                <span class="badge badge-info">This is an info message</span></div>
-                            <div class="chat-info">
-                                <span class="badge badge-danger">This is an error message</span></div>
+                            <div class="message chat-info">This is an info message</div>
+                            <div class="message chat-info chat-error">This is an error message</div>
                             <div class="chat-message">
                                 <span class="chat-msg-author chat-msg-me">09:35&nbsp;
                                     <canvas height="24" width="24" class="avatar"></canvas>
@@ -80,9 +78,7 @@
                                 </span>
                                 <span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
                             </div>
-                            <div class="chat-info chat-event">
-                                <span class="badge badge-success">JC Brand is busy</span>
-                            </div>
+                            <div class="message chat-info chat-event">JC Brand is busy</div>
                             <div class="chat-message">
                                 <span class="chat-msg-author chat-msg-me">19:43&nbsp;
                                     <canvas height="24" width="24" class="avatar"></canvas>

mockup/chatroom.html

@@ -37,7 +37,7 @@
                     </div>
 
                     <div class="chat-body chatroom-body row no-gutters">
-                            <div class="chat-area col">
+                            <div class="chat-area col-md-9 col-8">
                                 <div class="chat-content">
                                     <div class="chat-message">
                                         <span class="chat-msg-author chat-msg-room">18:50&nbsp;
@@ -53,7 +53,7 @@
                                         </span>
                                         <span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span>
                                     </div>
-                                    <time class="chat-info badge badge-info" datetime="2013-06-04T00:00:00.000Z">Tue Jun 04 2013</time>
+                                    <time class="message chat-info badge badge-info" datetime="2013-06-04T00:00:00.000Z">Tue Jun 04 2013</time>
                                     <div class="chat-message">
                                         <span class="chat-msg-author chat-msg-room">19:40&nbsp;
                                             <canvas height="24" width="24" class="avatar"></canvas>
@@ -61,6 +61,13 @@
                                         </span>
                                         <span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span>
                                     </div>
+
+                                    <div class="message chat-info chat-event" data-isodate="2018-03-07T10:21:09+01:00" data-join="&quot;jcbrand&quot;">jcbrand has entered the room.</div>
+                                    <div class="message chat-info chat-event" data-isodate="2018-03-07T10:21:09+01:00" data-join="&quot;jcbrand&quot;">Topic set by jcbrand</div>
+                                    <div class="message chat-info chat-topic" data-isodate="2018-03-07T10:21:09+01:00">Converse.js: The latest release is 3.3.4. Please be
+                                         patient if your questions aren't answered immediately. We're all in different timezones.</div>
+
+
                                     <div class="chat-message">
                                         <span class="chat-msg-author chat-msg-me">19:42&nbsp;
                                             <canvas height="24" width="24" class="avatar"></canvas>

sass/_chatbox.scss

@@ -173,7 +173,10 @@
                 line-height: $line-height-small;
                 color: $chat-head-color;
                 font-size: $font-size-small;
-                margin: 0.3em;
+                margin: 0.5em;
+                &.badge {
+                    color: $chat-head-text-color;
+                }
                 &.chat-event {
                     clear: left;
                     font-style: italic;

sass/_chatrooms.scss

@@ -83,6 +83,7 @@
             }
             .chatroom-body {
                 flex-direction: row;
+                flex-flow: nowrap;
                 @include border-bottom-radius($chatbox-border-radius);
                 background-color: white;
                 border-top: 0;
@@ -92,9 +93,11 @@
                 .row {
                     flex-direction: row;
                 }
-
+                .chat-topic {
+                    font-weight: bold;
+                    color: $chatroom-head-color;
+                }
                 .chat-info {
-                    color: white;
                     line-height: normal;
                 }
                 .mentioned {

src/converse-muc-views.js

@@ -1795,6 +1795,7 @@
                             tpl_info({
                                 'data': '',
                                 'isodate': moment().format(),
+                                'extra_classes': 'chat-event',
                                 'message': message
                             }));
                     });
@@ -1817,6 +1818,7 @@
                             tpl_info({
                                 'data': `data-leavejoin="${nick}"`,
                                 'isodate': moment().format(),
+                                'extra_classes': 'chat-event',
                                 'message': __('%1$s has left and re-entered the room.', nick)
                             });
                     } else {
@@ -1829,6 +1831,7 @@
                         const data = {
                             'data': `data-join="${nick}"`,
                             'isodate': moment().format(),
+                            'extra_classes': 'chat-event',
                             'message': message
                         };
                         if (_.includes(_.get(last_el, 'classList', []), 'chat-info') &&
@@ -1861,6 +1864,7 @@
                             tpl_info({
                                 'data': `data-joinleave="${nick}"`,
                                 'isodate': moment().format(),
+                                'extra_classes': 'chat-event',
                                 'message': message
                             });
                     } else {
@@ -1873,6 +1877,7 @@
                         const data = {
                             'message': message,
                             'isodate': moment().format(),
+                            'extra_classes': 'chat-event',
                             'data': `data-leave="${nick}"`
                         }
                         if (_.includes(_.get(last_el, 'classList', []), 'chat-info') &&
@@ -2074,7 +2079,16 @@
                         tpl_info({
                             'data': '',
                             'isodate': moment().format(),
-                            'message': __('Topic set by %1$s to: %2$s', sender, subject)
+                            'extra_classes': 'chat-event',
+                            'message': __('Topic set by %1$s', sender)
+                        }));
+                    this.content.insertAdjacentHTML(
+                        'beforeend',
+                        tpl_info({
+                            'data': '',
+                            'isodate': moment().format(),
+                            'extra_classes': 'chat-topic',
+                            'message': subject
                         }));
                     this.scrollDown();
                 },

src/templates/chatarea.html

@@ -1,4 +1,4 @@
-<div class="chat-area col">
+<div class="chat-area col-md-9 col-8">
     <div class="chat-content {[ if (o.show_send_button) { ]}chat-content-sendbutton{[ } ]}"></div>
     <div class="new-msgs-indicator hidden">▼ {{{ o.unread_msgs }}} ▼</div>
     <form class="sendXMPPMessage">

src/templates/new_day.html

@@ -1 +1 @@
-<time class="message chat-info chat-date" data-isodate="{{{o.isodate}}}">{{{o.datestring}}}</time>
+<time class="message chat-info chat-date badge badge-info" data-isodate="{{{o.isodate}}}">{{{o.datestring}}}</time>