diff --git a/src/modals/styles/_modal.scss b/src/modals/styles/_modal.scss
index 48d500086..f469d4eaf 100644
--- a/src/modals/styles/_modal.scss
+++ b/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;
diff --git a/src/plugins/muc-views/modtools.js b/src/plugins/muc-views/modtools.js
index 24276cff3..c900ed098 100644
--- a/src/plugins/muc-views/modtools.js
+++ b/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 {
diff --git a/src/plugins/muc-views/templates/moderator-tools.js b/src/plugins/muc-views/templates/moderator-tools.js
index 86b86db2e..65b2125ed 100644
--- a/src/plugins/muc-views/templates/moderator-tools.js
+++ b/src/plugins/muc-views/templates/moderator-tools.js
@@ -68,6 +68,12 @@ const tpl_set_role_form = (o) => {
}
+const role_form_toggle = (o) => html`
+
+
+ `;
+
+
const role_list_item = (o) => html`
@@ -78,7 +84,7 @@ const role_list_item = (o) => html`
Nickname: ${o.item.nick}
- Role: ${o.item.role} ${o.assignable_roles.length ? html`
` : ''}
+ Role: ${o.item.role} ${o.assignable_roles.length ? role_form_toggle(o) : ''}
${o.assignable_roles.length ? tpl_set_role_form(o) : ''}
@@ -116,6 +122,12 @@ const tpl_set_affiliation_form = (o) => {
}
+const affiliation_form_toggle = (o) => html`
+
+
+ `;
+
+
const affiliation_list_item = (o) => html`
@@ -126,7 +138,7 @@ const affiliation_list_item = (o) => html`
Nickname: ${o.item.nick}
- Affiliation: ${o.item.affiliation} ${o.assignable_affiliations.length ? html`
` : ''}
+ Affiliation: ${o.item.affiliation} ${o.assignable_affiliations.length ? affiliation_form_toggle(o) : ''}
${o.assignable_affiliations.length ? tpl_set_affiliation_form(o) : ''}
diff --git a/src/shared/components/icons.js b/src/shared/components/icons.js
index 54562d2e9..f2cdeb402 100644
--- a/src/shared/components/icons.js
+++ b/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 = "";
diff --git a/src/shared/components/styles/icon.scss b/src/shared/components/styles/icon.scss
new file mode 100644
index 000000000..113111cde
--- /dev/null
+++ b/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);
+ }
+}