Various CSS fixes and use `converse-icon` for nav button

src/plugins/chatview/styles/chat-head.scss

@@ -68,7 +68,7 @@
                     &.fa,
                     &.fas,
                     &.far {
-                        color: white;
+                        color: var(--chat-head-text-color);;
                         &.button-on:before {
                             padding: 0.2em;
                             background-color: var(--chat-head-text-color);

src/plugins/chatview/styles/index.scss

@@ -223,16 +223,14 @@
         converse-chats.converse-mobile,
         converse-chats.converse-overlayed,
         converse-chats.converse-fullscreen {
-            .chatbox {
-                .box-flyout {
-                    converse-controlbox-navback {
-                        margin: auto 0;
-                        margin-right: 1em;
-                        display: flex;
-                        .fa-arrow-left {
-                            &:before {
-                                color: var(--chat-head-text-color);
-                            }
+            .chat-head {
+                converse-controlbox-navback {
+                    margin: auto 0;
+                    margin-right: 1em;
+                    display: flex;
+                    .fa-arrow-left {
+                        svg {
+                            fill: var(--chat-head-text-color);
                         }
                     }
                 }

src/plugins/controlbox/styles/_controlbox.scss

@@ -326,7 +326,6 @@
 
         .controlbox-panes {
             background-color: var(--controlbox-pane-background-color);
-            border-right: 0.2rem solid var(--panel-divider-color);
             height: 100%;
             overflow-y: auto;
         }
@@ -471,10 +470,6 @@
                         font-size: 90%;
                     }
                 }
-
-                .controlbox-panes {
-                    border-radius: var(--chatbox-border-radius);
-                }
             }
 
             .brand-heading {
@@ -497,6 +492,9 @@
 
         &.converse-embedded,
         &.converse-fullscreen{
+            .controlbox-panes {
+                border-right: 0.2rem solid var(--panel-divider-color);
+            }
             .toggle-controlbox {
                 display: none;
             }

src/plugins/controlbox/templates/navback.js

@@ -2,5 +2,5 @@ import { html } from "lit";
 import { navigateToControlBox } from '../utils.js';
 
 export default  (jid) => {
-    return html`<i class="fa fa-arrow-left" @click=${() => navigateToControlBox(jid)}></i>`
+    return html`<converse-icon size="1em" class="fa fa-arrow-left" @click=${() => navigateToControlBox(jid)}></converse-icon>`
 }

src/plugins/minimize/styles/minimize.scss

@@ -23,7 +23,7 @@
                 #toggle-minimized-chats {
                     border-top-left-radius: var(--chatbox-border-radius);
                     border-top-right-radius: var(--chatbox-border-radius);
-                    background-color: var(--link-color);
+                    background-color: var(--subdued-color);
                     padding: 1em 0 0 0;
                     text-align: center;
                     color: white;

src/plugins/muc-views/styles/muc-head.scss

@@ -1,6 +1,15 @@
 .conversejs {
     converse-muc.chatroom {
         .chat-head-chatroom {
+
+            converse-controlbox-navback {
+                .fa-arrow-left {
+                    svg {
+                        fill: var(--chatroom-head-color);
+                    }
+                }
+            }
+
             color: var(--chatroom-head-color);
             background-color: var(--chatroom-head-bg-color);
             border-bottom: var(--chatroom-head-border-bottom);

src/plugins/muc-views/styles/muc.scss

@@ -43,7 +43,7 @@
             .chatroom-body {
                 flex-direction: row;
                 flex-flow: nowrap;
-                background-color: white;
+                background-color: var(--background);
                 border-top: 0;
                 height: 100%;
                 width: 100%;

src/plugins/muc-views/templates/muc-head.js

@@ -14,9 +14,11 @@ export default (o) => {
     const show_subject = (subject && !o.subject_hidden);
     return html`
         <div class="chatbox-title ${ show_subject ? '' :  "chatbox-title--no-desc"}">
-            ${ (!_converse.api.settings.get("singleton")) ?  html`<converse-controlbox-navback jid="${o.jid}"></converse-controlbox-navback>` : '' }
-            <div class="chatbox-title__text" title="${ (api.settings.get('locked_muc_domain') !== 'hidden') ? o.jid : '' }">${ o.title }
-                ${ (o.bookmarked) ? html`<i class="fa fa-bookmark chatbox-title__text--bookmarked" title="${i18n_bookmarked}"></i>` : '' }
+            <div class="chatbox-title--row">
+                ${ (!_converse.api.settings.get("singleton")) ?  html`<converse-controlbox-navback jid="${o.jid}"></converse-controlbox-navback>` : '' }
+                <div class="chatbox-title__text" title="${ (api.settings.get('locked_muc_domain') !== 'hidden') ? o.jid : '' }">${ o.title }
+                    ${ (o.bookmarked) ? html`<i class="fa fa-bookmark chatbox-title__text--bookmarked" title="${i18n_bookmarked}"></i>` : '' }
+                </div>
             </div>
             <div class="chatbox-title__buttons row no-gutters">
                 ${ o.standalone_btns.length ? tpl_standalone_btns(o) : '' }

src/plugins/rosterview/templates/group.js

@@ -53,7 +53,7 @@ export default  (o) => {
     return html`
         <div class="roster-group" data-group="${o.name}">
             <a href="#" class="list-toggle group-toggle controlbox-padded" title="${i18n_title}" @click=${ev => toggleGroup(ev, o.name)}>
-                <converse-icon color="var(--chat-head-color)" size="1em" class="fa ${ (collapsed.includes(o.name)) ? 'fa-caret-right' : 'fa-caret-down' }"></converse-icon> ${o.name}
+                <converse-icon color="var(--chat-head-color-dark)" size="1em" class="fa ${ (collapsed.includes(o.name)) ? 'fa-caret-right' : 'fa-caret-down' }"></converse-icon> ${o.name}
             </a>
             <ul class="items-list roster-group-contacts ${ (collapsed.includes(o.name)) ? 'collapsed' : '' }" data-group="${o.name}">
                 ${ o.contacts.map(renderContact) }