Various smaller fixes.

- Set `--converse-modal-color`
- Set `--converse-body-color`
- Fix line-height
- Call `save` instead of `set` to persist.

dev.html

@@ -27,7 +27,8 @@
 
     converse.initialize({
         i18n: 'af',
-        theme: 'cyberpunk',
+        theme: 'nordic',
+        dark_theme: 'dracula',
         auto_away: 300,
         enable_smacks: true,
         loglevel: 'debug',

src/plugins/chatview/message-form.js

@@ -218,7 +218,7 @@ export default class MessageForm extends CustomElement {
             hint_el.value = "";
             textarea.value = "";
             textarea.style.height = "auto";
-            this.model.set({ "draft": "" });
+            this.model.save({ "draft": "" });
         }
         if (api.settings.get("view_mode") === "overlayed") {
             // XXX: Chrome flexbug workaround. The .chat-content area

src/plugins/muc-views/modals/occupant.js

@@ -1,8 +1,8 @@
-import BaseModal from "plugins/modal/modal.js";
-import tplOccupantModal from "./templates/occupant.js";
 import { Model } from '@converse/skeletor';
-import { __ } from 'i18n';
 import { _converse, api, converse } from "@converse/headless";
+import { __ } from 'i18n';
+import BaseModal from "plugins/modal/modal.js";
+import tplOccupantModal from "./templates/occupant.js";
 
 const { u } = converse.env;
 

src/plugins/muc-views/modals/templates/occupant.js

@@ -18,11 +18,10 @@ export default (el) => {
     const hats = el.model?.get('hats')?.length ? el.model.get('hats') : null;
     const muc = el.model.collection.chatroom;
 
-    const allowed_commands = muc.getAllowedCommands();
-    const may_moderate = allowed_commands.includes('modtools');
-
     const i18n_add_to_contacts = __('Add to Contacts');
 
+    const allowed_commands = muc.getAllowedCommands();
+    const may_moderate = allowed_commands.includes('modtools');
     const can_see_real_jids = muc.features.get('nonanonymous') || muc.getOwnRole() === 'moderator';
 
     const bare_jid = _converse.session.get('bare_jid');
@@ -31,8 +30,8 @@ export default (el) => {
     const add_to_contacts = api.settings.get('singleton')
         ? '' // in singleton mode, there is no roster, so adding to contact makes no sense.
         : api.contacts.get(jid)
-            .then(contact => !contact && not_me && can_see_real_jids)
-            .then(add => add ? html`<li><button class="btn btn-primary" type="button" @click=${() => el.addToContacts()}>${i18n_add_to_contacts}</button></li>` : '');
+            .then((contact) => !contact && not_me && can_see_real_jids)
+            .then((add) => add ? html`<li><button class="btn btn-primary" type="button" @click=${() => el.addToContacts()}>${i18n_add_to_contacts}</button></li>` : '');
 
     return html`
         <div class="row">

src/shared/styles/messages.scss

@@ -210,6 +210,7 @@
             }
 
             .chat-msg__text--larger {
+                line-height: 1.6em;
                 font-size: 1.6em;
                 padding-top: 0.25em;
                 padding-bottom: 0.25em;

src/shared/styles/themes/classic.scss

@@ -27,7 +27,12 @@
     --danger-color: var(--dark-red);
     --warning-color: var(--orange);
     --info-color: var(--light-blue);
+
     --converse-highlight-color: var(--dark-red);
+    --converse-body-color: var(--foreground-color) !important;
+    .modal {
+        --converse-modal-color: var(--foreground-color) !important;
+    }
 
     // Online status indicators
     --chat-status-away: var(--orange);

src/shared/styles/themes/cyberpunk.scss

@@ -31,7 +31,13 @@
     --danger-color: var(--red);
     --warning-color: var(--orange);
     --info-color: var(--yellow);
+
     --converse-highlight-color: var(--yellow);
+    --converse-body-color: var(--foreground-color) !important;
+
+    .modal {
+        --converse-modal-color: var(--foreground-color) !important;
+    }
     .list-group-item {
         --converse-list-group-color: var(--foreground-color);
         &.active {

src/shared/styles/themes/dracula.scss

@@ -28,7 +28,11 @@
     --info-color: var(--yellow);
 
     --converse-body-bg: var(--background-color);
+    --converse-body-color: var(--foreground-color) !important;
     --converse-highlight-color: var(--yellow) !important;
+    .modal {
+        --converse-modal-color: var(--foreground-color) !important;
+    }
     .list-group-item {
         --converse-list-group-color: var(--foreground-color);
         &.active {

src/shared/styles/themes/nordic.scss

@@ -38,8 +38,13 @@
     --success-color: var(--green-3);
     --danger-color: var(--red);
     --warning-color: var(--orange);
+
     --info-color: var(--purple);
     --converse-highlight-color: var(--red);
+    --converse-body-color: var(--foreground-color) !important;
+    .modal {
+        --converse-modal-color: var(--foreground-color) !important;
+    }
 
     // Online status indicators
     --chat-status-away: var(--orange);