CSS: Give color to the controlbox headings

css/converse.css

@@ -9319,6 +9319,7 @@ readers do not read off random characters that represent icons */
   --roster-height: 194px;
   --flyout-padding: 1.2em;
   --chat-head-color: #3AA569;
+  --chat-head-color-dark: #1E9652;
   --chat-head-color-lighten-50-percent: #e7f7ee;
   --chat-head-text-color: white;
   --chat-correcting-color: var(--chat-head-color-lighten-50-percent);
@@ -10790,6 +10791,10 @@ body.reset {
     margin: var(--controlbox-heading-top-margin) 0 0.5em 0;
     font-size: 1.1em;
     text-transform: uppercase; }
+  #conversejs #controlbox .controlbox-section .controlbox-heading--groupchats {
+    color: var(--chatroom-head-color); }
+  #conversejs #controlbox .controlbox-section .controlbox-heading--contacts {
+    color: var(--chat-head-color-dark); }
   #conversejs #controlbox .controlbox-section .controlbox-heading__btn {
     cursor: pointer;
     align-self: flex-start;

dist/converse.js

@@ -94116,7 +94116,7 @@ return __p
 var _ = {escape:__webpack_require__(/*! ./node_modules/lodash/escape.js */ "./node_modules/lodash/escape.js")};
 module.exports = function(o) {
 var __t, __p = '', __e = _.escape;
-__p += '<!-- src/templates/room_panel.html -->\n<!-- <div id="chatrooms"> -->\n<div class="d-flex controlbox-padded">\n    <span class="w-100 controlbox-heading">' +
+__p += '<!-- src/templates/room_panel.html -->\n<!-- <div id="chatrooms"> -->\n<div class="d-flex controlbox-padded">\n    <span class="w-100 controlbox-heading controlbox-heading--groupchats">' +
 __e(o.heading_chatrooms) +
 '</span>\n    <a class="controlbox-heading__btn show-list-muc-modal fa fa-list-ul" title="' +
 __e(o.title_list_rooms) +
@@ -94257,7 +94257,7 @@ var _ = {escape:__webpack_require__(/*! ./node_modules/lodash/escape.js */ "./no
 module.exports = function(o) {
 var __t, __p = '', __e = _.escape, __j = Array.prototype.join;
 function print() { __p += __j.call(arguments, '') }
-__p += '<!-- src/templates/roster.html -->\n<div class="d-flex controlbox-padded">\n    <span class="w-100 controlbox-heading">' +
+__p += '<!-- src/templates/roster.html -->\n<div class="d-flex controlbox-padded">\n    <span class="w-100 controlbox-heading controlbox-heading--contacts">' +
 __e(o.heading_contacts) +
 '</span>\n    <a class="controlbox-heading__btn sync-contacts fa fa-sync" title="' +
 __e(o.title_sync_contacts) +

mockup/controlbox.html

@@ -32,7 +32,7 @@
 
 <div id="chatrooms" class="controlbox-section">
     <div class="d-flex controlbox-padded">
-        <span class="w-100 controlbox-heading">Groupchats</span>
+        <span class="w-100 controlbox-heading controlbox-heading--groupchats">Groupchats</span>
 
         <a class="controlbox-heading__btn show-list-muc-modal fa fa-list-ul" title="Query for groupchats" data-toggle="modal" data-target="#list-chatrooms-modal"></a> 
         <a class="controlbox-heading__btn fa fa-plus" title="Click to add a new room" data-toggle="modal" data-target="#chatroomsModal"></a>
@@ -94,7 +94,7 @@
 
 <div id="converse-roster" class="controlbox-section">
     <div class="d-flex controlbox-padded">
-        <span class="w-100 controlbox-heading">Contacts</span>
+        <span class="w-100 controlbox-heading controlbox-heading--contacts">Contacts</span>
         <a class="fa-spin controlbox-heading__btn fa fa-sync" title="Re-sync your contacts"></a>
         <a class="controlbox-heading__btn fa fa-user-plus" title="Click to add new chat contacts" data-toggle="modal" data-target="#addContactModal"></a>
     </div>

sass/_controlbox.scss

@@ -223,6 +223,14 @@
                 text-transform: uppercase;
             }
 
+            .controlbox-heading--groupchats {
+                color: var(--chatroom-head-color);
+            }
+
+            .controlbox-heading--contacts {
+                color: var(--chat-head-color-dark);
+            }
+
             .controlbox-heading__btn {
                 cursor: pointer;
                 align-self: flex-start;

sass/_variables.scss

@@ -46,6 +46,7 @@ $font-path: "webfonts/icomoon/fonts/" !default;
     --flyout-padding: 1.2em;
 
     --chat-head-color: #3AA569; // $green
+    --chat-head-color-dark: #1E9652; // $green
     --chat-head-color-lighten-50-percent: #e7f7ee; // lighten($green, 50%)
     --chat-head-text-color: white;
     --chat-correcting-color: var(--chat-head-color-lighten-50-percent);

src/templates/room_panel.html

@@ -1,6 +1,6 @@
 <!-- <div id="chatrooms"> -->
 <div class="d-flex controlbox-padded">
-    <span class="w-100 controlbox-heading">{{{o.heading_chatrooms}}}</span>
+    <span class="w-100 controlbox-heading controlbox-heading--groupchats">{{{o.heading_chatrooms}}}</span>
     <a class="controlbox-heading__btn show-list-muc-modal fa fa-list-ul" title="{{{o.title_list_rooms}}}" data-toggle="modal" data-target="#list-chatrooms-modal"></a>
     <a class="controlbox-heading__btn show-add-muc-modal fa fa-plus" title="{{{o.title_new_room}}}" data-toggle="modal" data-target="#add-chatrooms-modal"></a>
 </div>

src/templates/roster.html

@@ -1,5 +1,5 @@
 <div class="d-flex controlbox-padded">
-    <span class="w-100 controlbox-heading">{{{o.heading_contacts}}}</span>
+    <span class="w-100 controlbox-heading controlbox-heading--contacts">{{{o.heading_contacts}}}</span>
     <a class="controlbox-heading__btn sync-contacts fa fa-sync" title="{{{o.title_sync_contacts}}}"></a>
     {[ if (o.allow_contact_requests) { ]}
         <a class="controlbox-heading__btn add-contact fa fa-user-plus"