From 262b9f926063e227d0510d23f7b0013e93fe1d97 Mon Sep 17 00:00:00 2001
From: JC Brand <jc@opkode.com>
Date: Mon, 10 Dec 2018 14:21:28 +0100
Subject: [PATCH] CSS: Give color to the controlbox headings

---
 css/converse.css              | 5 +++++
 dist/converse.js              | 4 ++--
 mockup/controlbox.html        | 4 ++--
 sass/_controlbox.scss         | 8 ++++++++
 sass/_variables.scss          | 1 +
 src/templates/room_panel.html | 2 +-
 src/templates/roster.html     | 2 +-
 7 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/css/converse.css b/css/converse.css
index 8dd78b642..743d2c678 100644
--- a/css/converse.css
+++ b/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;
diff --git a/dist/converse.js b/dist/converse.js
index 9c195beeb..70049dade 100644
--- a/dist/converse.js
+++ b/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) +
diff --git a/mockup/controlbox.html b/mockup/controlbox.html
index 0914ceb52..7a565dff1 100644
--- a/mockup/controlbox.html
+++ b/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>
diff --git a/sass/_controlbox.scss b/sass/_controlbox.scss
index e077ce443..8a92b6c71 100644
--- a/sass/_controlbox.scss
+++ b/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;
diff --git a/sass/_variables.scss b/sass/_variables.scss
index f523b6f3d..4aaf81388 100644
--- a/sass/_variables.scss
+++ b/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);
diff --git a/src/templates/room_panel.html b/src/templates/room_panel.html
index 5ec5455c6..1d22eef11 100644
--- a/src/templates/room_panel.html
+++ b/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>
diff --git a/src/templates/roster.html b/src/templates/roster.html
index ad26e111e..730418848 100644
--- a/src/templates/roster.html
+++ b/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"