Use `converse-icon` in the `converse-dropdown` component

Instead of using webfonts

src/plugins/chatview/templates/chat-head.js

@@ -35,7 +35,7 @@ export default (o) => {
     const display_name = o.model.getDisplayName();
 
     const tpl_dropdown_btns = () => getDropdownButtons(o.heading_buttons_promise)
-        .then(btns => btns.length ? html`<converse-dropdown class="dropleft" .items=${btns}></converse-dropdown>` : '');
+        .then(btns => btns.length ? html`<converse-dropdown class="dropleft" color="var(--chat-head-text-color)" .items=${btns}></converse-dropdown>` : '');
 
     const tpl_standalone_btns = () => getStandaloneButtons(o.heading_buttons_promise)
         .then(btns => btns.reverse().map(b => until(b, '')));

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

@@ -20,7 +20,7 @@ export default (o) => {
             </div>
             <div class="chatbox-title__buttons row no-gutters">
                 ${ o.standalone_btns.length ? tpl_standalone_btns(o) : '' }
-                ${ o.dropdown_btns.length ? html`<converse-dropdown class="dropleft" .items=${o.dropdown_btns}></converse-dropdown>` : '' }
+                ${ o.dropdown_btns.length ? html`<converse-dropdown class="dropleft" color="var(--chatroom-head-color)" .items=${o.dropdown_btns}></converse-dropdown>` : '' }
             </div>
         </div>
         ${ show_subject ? html`<p class="chat-head__desc" title="${i18n_hide_topic}">

src/plugins/omemo/utils.js

@@ -109,7 +109,7 @@ async function downloadFile(url) {
     try {
         response = await fetch(url)
     } catch(e) {
-        log.error(`Failed to download encrypted media: ${url}`);
+        log.error(`${e.name}: Failed to download encrypted media: ${url}`);
         log.error(e);
         return null;
     }
@@ -124,6 +124,10 @@ async function getAndDecryptFile (uri) {
     const protocol = window.location.hostname === 'localhost' ? 'http' : 'https';
     const http_url = uri.toString().replace(/^aesgcm/, protocol);
     const cipher = await downloadFile(http_url);
+    if (cipher === null) {
+        log.error(`Could not decrypt file ${uri.toString()} since it could not be downloaded`);
+        return null;
+    }
     const iv = hash.slice(0, 24);
     const key = hash.slice(24);
     let content;

src/plugins/rosterview/templates/group.js

@@ -1,3 +1,4 @@
+import 'shared/components/icons.js';
 import { __ } from 'i18n';
 import { _converse, converse } from "@converse/headless/core";
 import { html } from "lit";

src/shared/components/dropdown.js

@@ -1,3 +1,4 @@
+import 'shared/components/icons.js';
 import DOMNavigator from "shared/dom-navigator.js";
 import { converse, api } from "@converse/headless/core";
 import { html } from 'lit';
@@ -10,15 +11,21 @@ export default class Dropdown extends DropdownBase {
     static get properties () {
         return {
             'icon_classes': { type: String },
+            'color': { type: String },
             'items': { type: Array }
         }
     }
 
+    constructor () {
+        super();
+        this.color = 'var(--text-color)';
+        this.icon_classes = 'fa fa-bars';
+    }
+
     render () {
-        const icon_classes = this.icon_classes || "fa fa-bars";
         return html`
             <button type="button" class="btn btn--transparent btn--standalone" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                <i class="${icon_classes} only-icon"></i>
+                <converse-icon color="${this.color}" size="1em" class="${ this.icon_classes }">
             </button>
             <div class="dropdown-menu">
                 ${ this.items.map(b => until(b, '')) }

src/shared/components/icons.js

@@ -44,10 +44,12 @@ class ConverseIcon extends CustomElement {
     }
 
     getStyles () {
+        const cssprop = this.color.match(/var\((--.*)\)/)?.[1];
+        const color = cssprop ? getComputedStyle(this).getPropertyValue(cssprop) : this.color;
         return `
             ${this.size ? `width: ${this.size};` : ''}
             ${this.size ? `height: ${this.size};` : ''}
-            ${this.color ? `fill: ${this.color};` : ''}
+            ${color ? `fill: ${color};` : ''}
             ${this.style}
         `;
     }

src/shared/styles/_variables.scss

@@ -33,8 +33,11 @@ $mobile_portrait_length: 480px !default;
     --text-color-lighten-15-percent: #8c8c8c; // lighten(#666, 15%)
     --message-text-color: #555;
     --message-receipt-color: var(--green);
+
     --save-button-color: var(--green);
 
+    --button-text-color: white;
+
     --message-avatar-width: 36px;
     --message-avatar-height: 36px;
 
@@ -207,7 +210,6 @@ $mobile_portrait_length: 480px !default;
 
     --chat-textarea-background-color: #F6F6F6;
     --chat-correcting-color: #FFFFC0;
-    --chat-head-text-color: #AAA;
 
     --controlbox-text-color: #DDD;
 

src/shared/styles/buttons.scss

@@ -4,15 +4,22 @@
 
     .btn {
         font-weight: normal;
-        color: #fff;
-        .fa, .far, .fas {
-            color: #fff;
-            margin-right: 0.5em;
-
-            &.only-icon {
-              margin-right: 0;
+        color: var(--button-text-color);
+        &.fa {
+            color: var(--button-text-color) !important;
+        }
+        i {
+            &.fa, &.far, &.fas {
+                color: var(--button-text-color);
+                margin-right: 0.5em;
+                &.only-icon {
+                margin-right: 0;
+                }
             }
         }
+        converse-icon {
+            margin-right: 0;
+        }
     }
 
     .btn-primary {
@@ -39,12 +46,6 @@
         border-radius: 50%;
     }
 
-    .btn {
-      &.fa {
-        color: white !important;
-      }
-    }
-
     .btn-info, .badge-info {
         background-color: var(--primary-color);
         border-color: var(--primary-color);
@@ -56,7 +57,7 @@
 
     .button-cancel,
     .btn-secondary, .badge-secondary {
-        color: white;
+        color: var(--button-text-color);
         background-color: var(--secondary-color);
         border-color: var(--secondary-color);
         &:hover {
@@ -66,18 +67,18 @@
     }
 
     .btn-warning {
-        color: white;
+        color: var(--button-text-color);
         background-color: var(--warning-color);
         border-color: var(--warning-color);
         &:hover {
-            color: white;
+            color: var(--button-text-color);
             background-color: var(--warning-color-dark);
             border-color: var(--warning-color-dark)
         }
     }
 
     .btn-danger {
-        color: white;
+        color: var(--button-text-color);
         background-color: var(--danger-color);
         border-color: var(--danger-color) !important;
         &:hover {