Replace more elements that use font icons with svg icons

package-lock.json

@@ -23038,6 +23038,7 @@
 			"version": "7.4.5",
 			"resolved": "https://registry.npmjs.org/ws/-/ws-7.4.5.tgz",
 			"integrity": "sha512-xzyu3hFvomRfXKH8vOFMU3OguG6oOvhXMo3xsGy3xWExqaM2dxBbVxuD99O7m3ZUFMvvscsZDqxfgMaRr/Nr1g==",
+			"devOptional": true,
 			"engines": {
 				"node": ">=8.3.0"
 			},
@@ -40953,6 +40954,7 @@
 			"version": "7.4.5",
 			"resolved": "https://registry.npmjs.org/ws/-/ws-7.4.5.tgz",
 			"integrity": "sha512-xzyu3hFvomRfXKH8vOFMU3OguG6oOvhXMo3xsGy3xWExqaM2dxBbVxuD99O7m3ZUFMvvscsZDqxfgMaRr/Nr1g==",
+			"devOptional": true,
 			"requires": {}
 		},
 		"xmlcreate": {

src/plugins/roomslist/templates/roomslist.js

@@ -67,12 +67,16 @@ export default (o) => {
     return html`
         <div class="d-flex controlbox-padded">
             <span class="w-100 controlbox-heading controlbox-heading--groupchats">${i18n_heading_chatrooms}</span>
-            <a class="controlbox-heading__btn show-list-muc-modal fa fa-list-ul"
+            <a class="controlbox-heading__btn show-list-muc-modal"
                 @click=${(ev) => api.modal.show(MUCListModal, { 'model': o.model }, ev)}
-                title="${i18n_title_list_rooms}" data-toggle="modal" data-target="#muc-list-modal"></a>
-            <a class="controlbox-heading__btn show-add-muc-modal fa fa-plus"
+                title="${i18n_title_list_rooms}" data-toggle="modal" data-target="#muc-list-modal">
+                    <converse-icon class="fa fa-list-ul right" color="var(--subdued-color)" path-prefix="/dist" size="1em"></converse-icon>
+            </a>
+            <a class="controlbox-heading__btn show-add-muc-modal"
                 @click=${(ev) => api.modal.show(AddMUCModal, { 'model': o.model }, ev)}
-                title="${i18n_title_new_room}" data-toggle="modal" data-target="#add-chatrooms-modal"></a>
+                title="${i18n_title_new_room}" data-toggle="modal" data-target="#add-chatrooms-modal">
+                    <converse-icon class="fa fa-plus right" color="var(--subdued-color)" path-prefix="/dist" size="1em"></converse-icon>
+            </a>
         </div>
 
         <div class="list-container list-container--openrooms ${ o.rooms.length ? '' : 'hidden' }">

src/plugins/roomslist/view.js

@@ -1,5 +1,5 @@
 import RoomDetailsModal from 'modals/muc-details.js';
-import tpl_rooms_list from "./templates/roomslist.js";
+import tpl_roomslist from "./templates/roomslist.js";
 import { ElementView } from '@converse/skeletor/src/element.js';
 import { Model } from '@converse/skeletor/src/model.js';
 import { __ } from 'i18n';
@@ -57,7 +57,7 @@ export class RoomsList extends ElementView {
     }
 
     render () {
-        render(tpl_rooms_list({
+        render(tpl_roomslist({
             'addBookmark': ev => this.addBookmark(ev),
             'allow_bookmarks': _converse.allow_bookmarks && _converse.bookmarks,
             'closeRoom': ev => this.closeRoom(ev),

src/plugins/rosterview/rosterview.js

@@ -2,11 +2,9 @@ import debounce from 'lodash-es/debounce';
 import tpl_roster from "./templates/roster.js";
 import { ElementView } from "@converse/skeletor/src/element";
 import { Model } from '@converse/skeletor/src/model.js';
-import { _converse, api, converse } from "@converse/headless/core";
+import { _converse, api } from "@converse/headless/core";
 import { render } from 'lit';
 
-const u = converse.env.utils;
-
 
 /**
  * @class
@@ -14,10 +12,6 @@ const u = converse.env.utils;
  * @memberOf _converse
  */
 export default class RosterView extends ElementView {
-    events = {
-        'click a.controlbox-heading__btn.add-contact': 'showAddContactModal',
-        'click a.controlbox-heading__btn.sync-contacts': 'syncContacts'
-    }
 
     async initialize () {
         await api.waitUntil('rosterInitialized')
@@ -41,7 +35,7 @@ export default class RosterView extends ElementView {
     }
 
     render () {
-        render(tpl_roster(), this);
+        render(tpl_roster(this), this);
     }
 
     renderIfRelevantChange (model) {
@@ -63,11 +57,15 @@ export default class RosterView extends ElementView {
 
     async syncContacts (ev) { // eslint-disable-line class-methods-use-this
         ev.preventDefault();
-        u.addClass('fa-spin', ev.target);
+        this.syncing_contacts = true;
+        this.render();
+
         _converse.roster.data.save('version', null);
         await _converse.roster.fetchFromServer();
         api.user.presence.send();
-        u.removeClass('fa-spin', ev.target);
+
+        this.syncing_contacts = false;
+        this.render();
     }
 }
 

src/plugins/rosterview/templates/group.js

@@ -51,7 +51,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)}>
-                <span class="fa ${ (collapsed.includes(o.name)) ? 'fa-caret-right' : 'fa-caret-down' }"></span> ${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}
             </a>
             <ul class="items-list roster-group-contacts ${ (collapsed.includes(o.name)) ? 'collapsed' : '' }" data-group="${o.name}">
                 ${ o.contacts.map(renderContact) }

src/plugins/rosterview/templates/roster.js

@@ -34,7 +34,7 @@ function populateContactsMap (contacts_map, contact) {
 }
 
 
-export default () => {
+export default (el) => {
     const i18n_heading_contacts = __('Contacts');
     const i18n_title_add_contact = __('Add a contact');
     const i18n_title_sync_contacts = __('Re-sync your contacts');
@@ -46,12 +46,17 @@ export default () => {
     return html`
         <div class="d-flex controlbox-padded">
             <span class="w-100 controlbox-heading controlbox-heading--contacts">${i18n_heading_contacts}</span>
-            <a class="controlbox-heading__btn sync-contacts fa fa-sync" title="${i18n_title_sync_contacts}"></a>
+            <a class="controlbox-heading__btn sync-contacts" @click=${ev => el.syncContacts(ev)} title="${i18n_title_sync_contacts}">
+                <converse-icon class="fa fa-sync right ${el.syncing_contacts ? 'fa-spin' : ''}" color="var(--subdued-color)" path-prefix="/dist" size="1em"></converse-icon>
+            </a>
             ${ api.settings.get('allow_contact_requests') ? html`
-                <a class="controlbox-heading__btn add-contact fa fa-user-plus"
+                <a class="controlbox-heading__btn add-contact"
+                    @click=${ev => el.showAddContactModal(ev)}
                     title="${i18n_title_add_contact}"
                     data-toggle="modal"
-                    data-target="#add-contact-modal"></a>` : '' }
+                    data-target="#add-contact-modal">
+                    <converse-icon class="fa fa-user-plus right" color="var(--subdued-color)" path-prefix="/dist" size="1.25em"></converse-icon>
+                </a>` : '' }
         </div>
         <converse-roster-filter></converse-roster-filter>
         <div class="list-container roster-contacts">