Add own class and style for controlbox heading buttons

css/converse.css

@@ -9594,23 +9594,6 @@ body.reset {
     color: var(--link-color) !important; }
   #conversejs .circle {
     border-radius: 50%; }
-  #conversejs .sidebar {
-    display: none;
-    width: 50px;
-    height: 100vh;
-    padding: 1rem 0;
-    background-color: var(--controlbox-head-color);
-    color: white;
-    text-align: center; }
-    #conversejs .sidebar .chatbox-btn {
-      float: none;
-      margin: 0;
-      font-size: 1.35em; }
-      #conversejs .sidebar .chatbox-btn.fa-vcard {
-        margin-top: 1em; }
-    #conversejs .sidebar .bottom {
-      position: absolute;
-      bottom: 1em; }
   #conversejs .badge {
     line-height: 1;
     font-weight: normal;
@@ -10658,12 +10641,20 @@ body.reset {
       #conversejs #controlbox #chatrooms .add-chatroom input[type=submit],
       #conversejs #controlbox #chatrooms .add-chatroom input[type=text] {
         width: 100%; }
-  #conversejs #controlbox .controlbox-section {
-    margin: 1em 0 0 0; }
-    #conversejs #controlbox .controlbox-section .controlbox-heading {
-      font-family: var(--heading-font);
-      margin: 0 0 0.5em 0;
-      text-transform: uppercase; }
+  #conversejs #controlbox .controlbox-section .controlbox-heading {
+    font-family: var(--heading-font);
+    padding: 0;
+    margin: 0.75em 0;
+    font-size: 1.1em;
+    text-transform: uppercase; }
+  #conversejs #controlbox .controlbox-section .controlbox-heading__btn {
+    cursor: pointer;
+    align-self: flex-start;
+    font-size: 1.1em;
+    padding: 0;
+    margin: 0.75em 0 0.75em 0.75em; }
+    #conversejs #controlbox .controlbox-section .controlbox-heading__btn.fa-vcard {
+      margin-top: 1em; }
   #conversejs #controlbox .dropdown a {
     width: 143px;
     display: inline-block; }

mockup/user-panel.html

@@ -5,12 +5,12 @@
         <span class="username w-100 align-self-center">Romeo Montague</span>
         <!-- <a class="chatbox-btn fa fa-vcard align-self-center" title="Your profile" data-toggle="modal" data-target="#userProfileModal"></a> -->
         <!-- <a class="chatbox-btn fa fa-cog align-self-center" title="Change settings" data-toggle="modal" data-target="#settingsModal"></a> -->
-        <a class="chatbox-btn logout fa fa-sign-out align-self-center" title="Log out"></a>
+        <a class="chatbox-btn logout fa fa-sign-out-alt align-self-center" title="Log out"></a>
     </div>
     <div class="d-flex xmpp-status">
         <span class="online w-100 align-self-center" data-value="online">
             <span class="fa fa-circle"></span> Online</span>
-        <a class="chatbox-btn fa fa-pencil" title="Click to change your chat status" data-toggle="modal" data-target="#changeStatusModal"></a>
+        <a class="chatbox-btn fa fa-pencil-alt" title="Click to change your chat status" data-toggle="modal" data-target="#changeStatusModal"></a>
     </div>
 </div>
 
@@ -33,7 +33,9 @@
 <div id="chatrooms" class="controlbox-section">
     <div class="d-flex controlbox-padded">
         <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>
+
+        <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>
     </div>
     <div class="list-container items-list-container">
         <div class="items-list">
@@ -88,7 +90,8 @@
 <div id="converse-roster" class="controlbox-section">
     <div class="d-flex controlbox-padded">
         <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>
+        <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>
     <form class="controlbox-padded roster-filter-form input-button-group">
         <div class="form-inline flex-nowrap">

sass/_controlbox.scss

@@ -212,13 +212,25 @@
         }
 
         .controlbox-section {
-            margin: 1em 0 0 0;
 
             .controlbox-heading {
                 font-family: var(--heading-font);
-                margin: 0 0 0.5em 0;
+                padding: 0;
+                margin: 0.75em 0;
+                font-size: 1.1em;
                 text-transform: uppercase;
             }
+
+            .controlbox-heading__btn {
+                cursor: pointer;
+                align-self: flex-start;
+                font-size: 1.1em;
+                padding: 0;
+                margin: 0.75em 0 0.75em 0.75em;
+                &.fa-vcard {
+                    margin-top: 1em;
+                }
+            }
         }
 
         .dropdown {

src/converse-muc-views.js

@@ -1756,8 +1756,8 @@ converse.plugins.add('converse-muc-views', {
             className: 'controlbox-section',
             id: 'chatrooms',
             events: {
-                'click a.chatbox-btn.show-add-muc-modal': 'showAddRoomModal',
-                'click a.chatbox-btn.show-list-muc-modal': 'showListRoomsModal'
+                'click a.controlbox-heading__btn.show-add-muc-modal': 'showAddRoomModal',
+                'click a.controlbox-heading__btn.show-list-muc-modal': 'showListRoomsModal'
             },
 
             render () {

src/converse-rosterview.js

@@ -750,7 +750,7 @@ converse.plugins.add('converse-rosterview', {
             subviewIndex: 'name',
 
             events: {
-                'click a.chatbox-btn.add-contact': 'showAddContactModal',
+                'click a.controlbox-heading__btn.add-contact': 'showAddContactModal',
             },
 
             initialize () {

src/templates/room_panel.html

@@ -1,8 +1,8 @@
 <!-- <div id="chatrooms"> -->
 <div class="d-flex controlbox-padded">
     <span class="w-100 controlbox-heading">{{{o.heading_chatrooms}}}</span>
-    <a class="chatbox-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="chatbox-btn show-add-muc-modal fa fa-plus" title="{{{o.title_new_room}}}" data-toggle="modal" data-target="#add-chatrooms-modal"></a>
+    <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>
 <div class="list-container open-rooms-list rooms-list-container"></div>
 <div class="list-container bookmarks-list rooms-list-container"></div>

src/templates/roster.html

@@ -1,7 +1,7 @@
 <div class="d-flex controlbox-padded">
     <span class="w-100 controlbox-heading">{{{o.heading_contacts}}}</span>
     {[ if (o.allow_contact_requests) { ]}
-        <a class="chatbox-btn add-contact fa fa-user-plus"
+        <a class="controlbox-heading__btn add-contact fa fa-user-plus"
            title="{{{o.title_add_contact}}}"
            data-toggle="modal"
            data-target="#add-contact-modal"></a>