Fixes #2124 Concord - toolbar icons are invisible in MUC

sass/_toolbar.scss

@@ -20,35 +20,6 @@
 
     .chat-toolbar {
 
-        converse-chat-toolbar {
-            background-color: white;
-            box-sizing: border-box;
-            color: var(--chat-head-color);
-            display: flex;
-            justify-content: space-between;
-            margin: 0;
-            width: 100%;
-
-            .fa, .fa:hover,
-            .far, .far:hover,
-            .fas, .fas:hover {
-                color: var(--chat-head-color);
-                font-size: var(--font-size-large);
-                svg {
-                    fill: var(--chat-head-color);
-                }
-            }
-            .unencrypted a,
-            .unencrypted {
-                color: var(--text-color);
-                .toolbar-menu {
-                    a {
-                        color: var(--link-color);
-                    }
-                }
-            }
-        }
-
         .toolbar-buttons {
             width: 100%;
             display: inline-block;
@@ -59,28 +30,6 @@
             }
         }
 
-        button {
-            margin-top: 0.4em;
-            border: 1px transparent solid;
-            background-color: transparent;
-
-            &:disabled .fa {
-                color: grey;
-                &:hover {
-                    color: grey;
-                }
-                svg, svg:hover {
-                    fill: grey;
-                }
-            }
-            &.send-button {
-                padding-top: 0.2em;
-                padding-bottom: 0.2em;
-                margin: 0;
-                margin-top: -1px;
-            }
-        }
-
         .unverified a,
         .unverified {
             color: #cf5300;
@@ -141,19 +90,69 @@
         }
     }
 
+    converse-chat-toolbar {
+        background-color: white;
+        box-sizing: border-box;
+        display: flex;
+        justify-content: space-between;
+        margin: 0;
+        width: 100%;
+
+        .fa, .fa:hover,
+        .far, .far:hover,
+        .fas, .fas:hover {
+            color: var(--chat-head-color);
+            font-size: var(--font-size-large);
+            svg {
+                fill: var(--chat-head-color);
+            }
+        }
+        .unencrypted a,
+        .unencrypted {
+            color: var(--text-color);
+            .toolbar-menu {
+                a {
+                    color: var(--link-color);
+                }
+            }
+        }
+
+        button {
+            margin-top: 0.4em;
+            border: 1px transparent solid;
+            background-color: transparent;
+
+            &.send-button {
+                padding-top: 0.2em;
+                padding-bottom: 0.2em;
+                margin: 0;
+                margin-top: -1px;
+            }
+        }
+    }
+
     .chatbox {
         converse-chat-toolbar {
             border-top: var(--chatbox-message-input-border-top);
-            color: var(--chat-head-color);
+            color: var(--chat-toolbar-btn-color);
             background-color: white;
             .fas, .fas:hover,
             .far, .far:hover,
             .fa, .fa:hover {
-                color: var(--chat-head-color);
+                color: var(--chat-toolbar-btn-color);
             }
             button {
                 &:focus {
-                    outline-color: var(--chat-head-color) !important;
+                    outline-color: var(--chat-toolbar-btn-color) !important;
+                }
+                &:disabled .fa {
+                    color: var(--chat-toolbar-btn-disabled-color);
+                    &:hover {
+                        color: var(--chat-toolbar-btn-disabled-color);
+                    }
+                    svg, svg:hover {
+                        fill: var(--chat-toolbar-btn-disabled-color);
+                    }
                 }
             }
         }
@@ -162,19 +161,28 @@
     .chatroom {
         converse-chat-toolbar {
             border-top: var(--chatroom-message-input-border-top);
-            color: var(--chatroom-head-bg-color);
+            color: var(--muc-toolbar-btn-color);
             .fas, .fas:hover,
             .far, .far:hover,
             .fa, .fa:hover {
-                color: var(--chatroom-head-bg-color);
+                color: var(--muc-toolbar-btn-color);
                 font-size: var(--font-size-large);
                 svg {
-                    fill: var(--chatroom-head-bg-color);
+                    fill: var(--muc-toolbar-btn-color);
                 }
             }
             button {
                 &:focus {
-                    outline-color: var(--chatroom-head-bg-color) !important;
+                    outline-color: var(--muc-toolbar-btn-color) !important;
+                }
+                &:disabled .fa {
+                    color: var(--muc-toolbar-btn-disabled-color);
+                    &:hover {
+                        color: var(--muc-toolbar-btn-disabled-color);
+                    }
+                    svg, svg:hover {
+                        fill: var(--muc-toolbar-btn-disabled-color);
+                    }
                 }
             }
         }

sass/_variables.scss

@@ -51,12 +51,14 @@ $mobile_portrait_length: 480px !default;
 
     --flyout-padding: 0.5em;
 
-    --chat-head-color: var(--green);
+    --chat-correcting-color: var(--chat-head-color-lighten-50-percent);
     --chat-head-color-dark: #1E9652;
     --chat-head-color-darker: #0E763B;
     --chat-head-color-lighten-50-percent: #e7f7ee; // lighten($green, 50%)
+    --chat-head-color: var(--green);
     --chat-head-text-color: white;
-    --chat-correcting-color: var(--chat-head-color-lighten-50-percent);
+    --chat-toolbar-btn-color: var(--green);
+    --chat-toolbar-btn-disabled-color: gray;
 
     --chat-content-background-color: white;
 
@@ -113,19 +115,21 @@ $mobile_portrait_length: 480px !default;
     --heading-display: block;
     --heading-color: white;
 
-    --chatroom-head-color: white;
-    --chatroom-head-bg-color: var(--redder-orange);
+    --chatroom-badge-color: var(--chatroom-head-bg-color);
+    --chatroom-badge-hover-color: var(--chatroom-head-bg-color-dark);
+    --chatroom-correcting-color: #fadfd7; // lighten($red, 30%)
     --chatroom-head-bg-color-dark: #D24E2B; // $red
+    --chatroom-head-bg-color: var(--redder-orange);
+    --chatroom-head-border-bottom: 0px;
     --chatroom-head-button-color: var(--chatroom-head-bg-color);
+    --chatroom-head-color: white;
+    --chatroom-head-description-display: block;
+    --chatroom-head-description-link-color: white;
     --chatroom-head-title-font-weight: normal;
     --chatroom-head-title-padding-right: 0px;
-    --chatroom-head-description-link-color: white;
-    --chatroom-head-description-display: block;
-    --chatroom-head-border-bottom: 0px;
     --chatroom-width: 500px;
-    --chatroom-correcting-color: #fadfd7; // lighten($red, 30%)
-    --chatroom-badge-color: var(--chatroom-head-bg-color);
-    --chatroom-badge-hover-color: var(--chatroom-head-bg-color-dark);
+    --muc-toolbar-btn-color: var(--redder-orange);
+    --muc-toolbar-btn-disabled-color: gray;
 
     --headline-head-color: var(--orange);
     --headline-message-color: #D2842B;
@@ -216,20 +220,22 @@ $mobile_portrait_length: 480px !default;
 
     --link-hover-color: var(--lighter-blue);
 
-    --chatroom-head-color: #7E7E7E;
+    --chatroom-badge-color: var(--redder-orange);
+    --chatroom-badge-hover-color: #D24E2B; // $red
+    --chatroom-correcting-color: #FFFFC0;
     --chatroom-head-bg-color: white;
+    --chatroom-head-border-bottom: 1px solid #EEE;
     --chatroom-head-button-color: #999;
-    --chatroom-head-title-font-weight: bold;
-    --chatroom-head-title-padding-right: 12px;
+    --chatroom-head-color: #7E7E7E;
+    --chatroom-head-description-border-left: 1px solid #DDD;
     --chatroom-head-description-color: black;
-    --chatroom-head-description-link-color: #00b3f4;
     --chatroom-head-description-display: inline;
-    --chatroom-head-description-border-left: 1px solid #DDD;
+    --chatroom-head-description-link-color: #00b3f4;
     --chatroom-head-description-padding-left: 12px;
-    --chatroom-head-border-bottom: 1px solid #EEE;
-    --chatroom-correcting-color: #FFFFC0;
-    --chatroom-badge-color: var(--redder-orange);
-    --chatroom-badge-hover-color: #D24E2B; // $red
+    --chatroom-head-title-font-weight: bold;
+    --chatroom-head-title-padding-right: 12px;
+    --muc-toolbar-btn-color: #7E7E7E;
+    --muc-toolbar-btn-disabled-color: lightgray;
 
     --occupants-background-color: #F3F3F3;
     --occupants-border-left: 0px;

webpack.html

@@ -20,7 +20,7 @@
         }
     });
     converse.initialize({
-        // root: new DocumentFragment(),
+        theme: 'concord',
         show_send_button: true,
         auto_away: 300,
         auto_register_muc_nickname: true,
@@ -28,12 +28,11 @@
         modtools_disable_assign: ['owner', 'moderator', 'participant', 'visitor'],
         modtools_disable_query: ['moderator', 'participant', 'visitor'],
         enable_smacks: true,
-        i18n: 'af',
         // connection_options: { 'worker': '/dist/shared-connection-worker.js' },
         message_archiving: 'always',
         muc_domain: 'conference.chat.example.org',
         muc_respect_autojoin: true,
-        // view_mode: 'fullscreen',
+        view_mode: 'fullscreen',
         websocket_url: 'ws://chat.example.org:5380/xmpp-websocket',
         // bosh_service_url: 'http://chat.example.org:5280/http-bind',
         muc_show_logs_before_join: true,