Use `converse-icon` in the modtools modal

src/modals/styles/_modal.scss

@@ -7,8 +7,6 @@
 
     #converse-modals {
         .modal {
-            background-color: rgba(0, 0, 0, 0.4);
-
             .modal-body {
                 overflow-y: auto;
                 max-height: 75vh;

src/plugins/muc-views/modtools.js

@@ -135,8 +135,9 @@ export default class ModeratorTools extends CustomElement {
     toggleForm (ev) { // eslint-disable-line class-methods-use-this
         ev.stopPropagation();
         ev.preventDefault();
-        const form_class = ev.target.getAttribute('data-form');
-        const form = u.ancestor(ev.target, '.list-group-item').querySelector(`.${form_class}`);
+        const toggle = u.ancestor(ev.target, '.toggle-form');
+        const form_class = toggle.getAttribute('data-form');
+        const form = u.ancestor(toggle, '.list-group-item').querySelector(`.${form_class}`);
         if (u.hasClass('hidden', form)) {
             u.removeClass('hidden', form);
         } else {

src/plugins/muc-views/templates/moderator-tools.js

@@ -68,6 +68,12 @@ const tpl_set_role_form = (o) => {
 }
 
 
+const role_form_toggle = (o) => html`
+    <a href="#" data-form="role-form" class="toggle-form right" color="var(--subdued-color)" @click=${o.toggleForm}>
+        <converse-icon class="fa fa-wrench" size="1em"></converse-icon>
+    </a>`;
+
+
 const role_list_item = (o) => html`
     <li class="list-group-item" data-nick="${o.item.nick}">
         <ul class="list-group">
@@ -78,7 +84,7 @@ const role_list_item = (o) => html`
                 <div><strong>Nickname:</strong> ${o.item.nick}</div>
             </li>
             <li class="list-group-item">
-                <div><strong>Role:</strong> ${o.item.role} ${o.assignable_roles.length ? html`<a href="#" data-form="role-form" class="toggle-form right fa fa-wrench" @click=${o.toggleForm}></a>` : ''}</div>
+                <div><strong>Role:</strong> ${o.item.role} ${o.assignable_roles.length ? role_form_toggle(o) : ''}</div>
                 ${o.assignable_roles.length ? tpl_set_role_form(o) : ''}
             </li>
         </ul>
@@ -116,6 +122,12 @@ const tpl_set_affiliation_form = (o) => {
 }
 
 
+const affiliation_form_toggle = (o) => html`
+    <a href="#" data-form="affiliation-form" class="toggle-form right" color="var(--subdued-color)" @click=${o.toggleForm}>
+        <converse-icon class="fa fa-wrench" size="1em"></converse-icon>
+    </a>`;
+
+
 const affiliation_list_item = (o) => html`
     <li class="list-group-item" data-nick="${o.item.nick}">
         <ul class="list-group">
@@ -126,7 +138,7 @@ const affiliation_list_item = (o) => html`
                 <div><strong>Nickname:</strong> ${o.item.nick}</div>
             </li>
             <li class="list-group-item">
-                <div><strong>Affiliation:</strong> ${o.item.affiliation} ${o.assignable_affiliations.length ? html`<a href="#" data-form="affiliation-form" class="toggle-form right fa fa-wrench" @click=${o.toggleForm}></a>` : ''}</div>
+                <div><strong>Affiliation:</strong> ${o.item.affiliation} ${o.assignable_affiliations.length ? affiliation_form_toggle(o) : ''}</div>
                 ${o.assignable_affiliations.length ? tpl_set_affiliation_form(o) : ''}
             </li>
         </ul>

src/shared/components/icons.js

@@ -6,9 +6,11 @@
  * @license Mozilla Public License (MPLv2)
  */
 
-import { html, css } from 'lit';
+import { html } from 'lit';
 import { CustomElement } from './element.js';
 
+import './styles/icon.scss';
+
 
 class ConverseIcon extends CustomElement {
 
@@ -21,16 +23,6 @@ class ConverseIcon extends CustomElement {
         };
     }
 
-    static get styles () {
-        return css`
-            :host {
-                display: inline-block;
-                padding: 0;
-                margin: 0;
-            }
-        `;
-    }
-
     constructor () {
         super();
         this.class_name = "";

src/shared/components/styles/icon.scss

@@ -0,0 +1,10 @@
+converse-icon {
+    display: inline-block;
+    padding: 0;
+    margin: 0;
+    fill: var(--subdued-color);
+
+    &:hover {
+	fill: var(--text-color);
+    }
+}