Fix toast styling

src/plugins/modal/styles/toast.scss

@@ -1,19 +1,26 @@
 .conversejs {
     converse-toasts {
+        position: fixed;
+        top: 1em;
+        right: 1em;
+
         converse-toast {
             .toast {
+                color: var(--toast-color);
+                background-color: var(--toast-bg-color);
                 position: relative;
                 margin-block-start: 1em;
                 margin-inline-end: 1em;
-                float: right;
                 .toast-header {
                     img {
                         height: 1.5em;
                     }
                 }
                 .toast-body__container {
-                    .btn-close {
-                        margin-inline-end: 1em;
+                    .fa-times {
+                        svg {
+                            fill: var(--toast-color);
+                        }
                     }
                 }
             }

src/plugins/modal/templates/buttons.js

@@ -1,13 +1,15 @@
 import { __ } from 'i18n';
-import { html } from "lit";
+import { html } from 'lit';
 
+export const modal_close_button = html`<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
+    ${__('Close')}
+</button>`;
 
-export const modal_close_button =
-    html`<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">${__('Close')}</button>`;
-
-export const modal_header_close_button =
-    html`<button type="button" class="btn btn-close d-flex align-items-center justify-content-center" data-bs-dismiss="modal" aria-label="${__('Close')}">
-        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 16 16">
-            <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
-        </svg>
-    </button>`;
+export const modal_header_close_button = html`<button
+    type="button"
+    class="btn d-flex align-items-center justify-content-center"
+    data-bs-dismiss="modal"
+    aria-label="${__('Close')}"
+>
+    <converse-icon size="1.25em" class="fa fa-times"></converse-icon>
+</button>`;

src/plugins/modal/toast.js

@@ -46,9 +46,11 @@ export default class Toast extends CustomElement {
                           ? html`<button
                                 @click="${this.hide}"
                                 type="button"
-                                class="btn-close centered"
+                                class="btn centered"
                                 aria-label="${__('Close')}"
-                            ></button>`
+                            >
+                                <converse-icon size="1em" class="fa fa-times"></converse-icon>
+                            </button>`
                           : ''}
                   </div>`
                 : ''}

src/plugins/muc-views/tests/muc.js

@@ -1852,7 +1852,7 @@ describe("Groupchats", function () {
             expect(view.model.features.get('unsecured')).toBe(false);
             await u.waitUntil(() => view.querySelector('.chatbox-title__text').textContent.trim() === 'Room');
 
-            modal.querySelector('.btn-close').click();
+            modal.querySelector('.btn[aria-label="Close"]').click();
             view.querySelector('.configure-chatroom-button').click();
 
             const IQs = _converse.api.connection.get().IQ_stanzas;

src/shared/components/icons.js

@@ -5,9 +5,9 @@
  *  https://github.com/obsidiansoft-io/fa-icons/blob/master/LICENSE
  * @license Mozilla Public License (MPLv2)
  */
-import { CustomElement } from './element.js';
-import { api } from '@converse/headless';
 import { html } from 'lit';
+import { api } from '@converse/headless';
+import { CustomElement } from './element.js';
 
 import './styles/icon.scss';
 

src/shared/styles/themes/classic.scss

@@ -57,6 +57,10 @@
     --link-color: #2D3991;
     --subdued-color: gray;
 
+    // toast colors
+    --toast-color: var(--background-color);
+    --toast-bg-color: var(--secondary-color);
+
     // The background when selecting text with your mouse
     --selection-color: black;
 

src/shared/styles/themes/cyberpunk.scss

@@ -86,6 +86,10 @@
     --link-color: var(--cyan);
     --subdued-color: gray;
 
+    // toast colors
+    --toast-color: var(--foreground-color);
+    --toast-bg-color: var(--secondary-color);
+
     // The background when selecting text with your mouse
     --selection-color: black;
 
@@ -197,7 +201,7 @@
             0 0 2rem 1rem rgba(var(--background-color-rgb), 0.1) !important;
 
         .modal-header {
-            .btn-close {
+            .fa-times {
                 svg {
                     fill: var(--primary-color);
                 }

src/shared/styles/themes/dracula.scss

@@ -63,6 +63,10 @@
     --link-color: var(--cyan);
     --subdued-color: var(--gray);
 
+    // toast colors
+    --toast-color: var(--background-color);
+    --toast-bg-color: var(--secondary-color);
+
     // The background when selecting text with your mouse
     --selection-color: black;
 

src/shared/styles/themes/nordic.scss

@@ -34,7 +34,7 @@
     // Bootstrap variables
     --primary-color: var(--green-2) !important;
     --primary-color-hover: var(--green-3) !important;
-    --secondary-color: var(--blue-1) !important;
+    --secondary-color: var(--blue-2) !important;
     --success-color: var(--green-3);
     --danger-color: var(--red);
     --warning-color: var(--orange);
@@ -69,6 +69,10 @@
     --link-color: var(--blue-2);
     --subdued-color: gray;
 
+    // toast colors
+    --toast-color: var(--background-color);
+    --toast-bg-color: var(--secondary-color);
+
     // The background when selecting text with your mouse
     --selection-color: var(--green-1);