From bbef09346ae47e648fdd2510397f6a41ca09dc1e Mon Sep 17 00:00:00 2001
From: JC Brand <jc@opkode.com>
Date: Sat, 19 Feb 2022 22:21:25 +0100
Subject: [PATCH] Various CSS fixes and use `converse-icon` for nav button

---
 src/plugins/chatview/styles/chat-head.scss     |  2 +-
 src/plugins/chatview/styles/index.scss         | 18 ++++++++----------
 src/plugins/controlbox/styles/_controlbox.scss |  8 +++-----
 src/plugins/controlbox/templates/navback.js    |  2 +-
 src/plugins/minimize/styles/minimize.scss      |  2 +-
 src/plugins/muc-views/styles/muc-head.scss     |  9 +++++++++
 src/plugins/muc-views/styles/muc.scss          |  2 +-
 src/plugins/muc-views/templates/muc-head.js    |  8 +++++---
 src/plugins/rosterview/templates/group.js      |  2 +-
 9 files changed, 30 insertions(+), 23 deletions(-)

diff --git a/src/plugins/chatview/styles/chat-head.scss b/src/plugins/chatview/styles/chat-head.scss
index 1aeab6773..3c23db67c 100644
--- a/src/plugins/chatview/styles/chat-head.scss
+++ b/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);
diff --git a/src/plugins/chatview/styles/index.scss b/src/plugins/chatview/styles/index.scss
index 3a68fe8bc..ac784c72f 100644
--- a/src/plugins/chatview/styles/index.scss
+++ b/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);
                         }
                     }
                 }
diff --git a/src/plugins/controlbox/styles/_controlbox.scss b/src/plugins/controlbox/styles/_controlbox.scss
index b65f44d62..38a64b3ed 100644
--- a/src/plugins/controlbox/styles/_controlbox.scss
+++ b/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;
             }
diff --git a/src/plugins/controlbox/templates/navback.js b/src/plugins/controlbox/templates/navback.js
index f70074c40..57819fc36 100644
--- a/src/plugins/controlbox/templates/navback.js
+++ b/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>`
 }
diff --git a/src/plugins/minimize/styles/minimize.scss b/src/plugins/minimize/styles/minimize.scss
index 145a4b203..ba39d12db 100644
--- a/src/plugins/minimize/styles/minimize.scss
+++ b/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;
diff --git a/src/plugins/muc-views/styles/muc-head.scss b/src/plugins/muc-views/styles/muc-head.scss
index f03cc954c..ed65b8bcb 100644
--- a/src/plugins/muc-views/styles/muc-head.scss
+++ b/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);
diff --git a/src/plugins/muc-views/styles/muc.scss b/src/plugins/muc-views/styles/muc.scss
index 82535f403..4dd9a3917 100644
--- a/src/plugins/muc-views/styles/muc.scss
+++ b/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%;
diff --git a/src/plugins/muc-views/templates/muc-head.js b/src/plugins/muc-views/templates/muc-head.js
index 2c30989ed..5a6a40342 100644
--- a/src/plugins/muc-views/templates/muc-head.js
+++ b/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) : '' }
diff --git a/src/plugins/rosterview/templates/group.js b/src/plugins/rosterview/templates/group.js
index 9796336ec..9078120d3 100644
--- a/src/plugins/rosterview/templates/group.js
+++ b/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) }