Improve toast colors. Add support for different info types.

scripts/hex2rgb.sh

@@ -0,0 +1,24 @@
+#!/bin/bash
+
+# Check if input is provided
+if [ -z "$1" ]; then
+    echo "Usage: $0 <hex_color>"
+    echo "Example: $0 #FF00FF or $0 FF00FF"
+    exit 1
+fi
+
+# Remove # if present
+hex=${1#"#"}
+
+# Validate hex length
+if [ ${#hex} -ne 6 ]; then
+    echo "Error: Hex color must be 6 characters long (RRGGBB)"
+    exit 1
+fi
+
+# Convert hex to RGB
+r=$((16#${hex:0:2}))
+g=$((16#${hex:2:2}))
+b=$((16#${hex:4:2}))
+
+echo "RGB: $r, $g, $b"

src/plugins/modal/styles/toast.scss

@@ -5,9 +5,20 @@
         right: 1em;
 
         converse-toast {
+            --converse-toast-border-width: 0;
+
             .toast {
-                color: var(--toast-color);
-                background-color: var(--toast-bg-color);
+                color: var(--converse-toast-color) !important;
+                background-color: var(--converse-toast-bg) !important;
+                &.text-bg-success {
+                    background-color: rgba(var(--converse-success-rgb), 0.85) !important;
+                }
+                &.text-bg-danger {
+                    background-color: rgba(var(--converse-danger-rgb), 0.85) !important;
+                }
+                &.text-bg-info{
+                    background-color: rgba(var(--converse-info-rgb), 0.85) !important;
+                }
                 position: relative;
                 margin-block-start: 1em;
                 margin-inline-end: 1em;
@@ -19,7 +30,7 @@
                 .toast-body__container {
                     .fa-times {
                         svg {
-                            fill: var(--toast-color);
+                            fill: var(--converse-toast-color);
                         }
                     }
                 }

src/plugins/modal/toast.js

@@ -34,7 +34,7 @@ export default class Toast extends CustomElement {
     }
 
     render() {
-        return html`<div class="toast show text-bg-${this.type}" role="alert" aria-live="assertive" aria-atomic="true">
+        return html`<div class="toast show text-bg-${this.type ?? 'info'}" role="alert" aria-live="assertive" aria-atomic="true">
             ${this.title
                 ? html`<div class="toast-header">
                       <img src="/logo/conversejs-filled.svg" class="rounded me-2" alt="${__('Converse logo')}" />

src/plugins/profile/modals/profile.js

@@ -106,7 +106,7 @@ export default class ProfileModal extends BaseModal {
             });
             if (await this.setVCard(data)) {
                 this.modal.hide();
-                api.toast.show('vcard-updated', { body: __('Profile updated successfully') });
+                api.toast.show('vcard-updated', { type: 'success', body: __('Profile updated successfully') });
             }
             this._submitting = false;
         }

src/plugins/rosterview/modals/accept-contact-request.js

@@ -66,7 +66,8 @@ export default class AcceptContactRequest extends BaseModal {
             groups,
         });
         api.toast.show('accept-request-success', {
-            body: __('Succesfully accepted the contact request'),
+            type: 'success',
+            body: __('Successfully accepted the contact request'),
         });
         this.modal.hide();
     }

src/plugins/rosterview/modals/add-contact.js

@@ -63,7 +63,7 @@ export default class AddContactModal extends BaseModal {
         });
         api.chats.open(jid, {}, true);
         this.model.clear();
-        api.toast.show('contact-added', { body: __('Contact added successfully') });
+        api.toast.show('contact-added', { type: 'success', body: __('Contact added successfully') });
         this.modal.hide();
     }
 

src/plugins/rosterview/utils.js

@@ -61,9 +61,15 @@ export async function declineContactRequest(contact) {
 
         if (blocking_supported && Array.isArray(result) && result.find((i) => i.name === 'block')?.value === 'on') {
             api.blocklist.add(contact.get('jid'));
-            api.toast.show('', { body: __('Contact request declined and user blocked') });
+            api.toast.show('declined-and-blocked', {
+                type: 'success',
+                body: __('Contact request declined and user blocked')
+            });
         } else {
-            api.toast.show('', { body: __('Contact request declined') });
+            api.toast.show('request-declined', {
+                type: 'success',
+                body: __('Contact request declined')
+            });
         }
         contact.destroy();
     }

src/shared/styles/themes/classic.scss

@@ -5,28 +5,49 @@
     // Hex color values
     // ----------------
     --blue: #387592;
+    --blue-rgb: 56, 117, 146;
     --dark-blue: #397491;
     --dark-green: #1e9652;
     --dark-red: #d24e2b;
+    --dark-red-rgb: 210, 78, 43;
     --gray: #818479;
     --green: #3aa569;
+    --green-rgb: 58, 165, 105;
     --light-blue: #578ea9;
+    --light-blue-rgb: 87, 142, 169;
     --lighter-blue: #eff4f7;
     --orange: #e7a151;
+    --orange-rgb: 231, 161, 81;
     --redder-orange: #e77051;
 
     // Base variables
     // --------------
     --foreground-color: #666;
     --background-color: #efefef;
+    --background-color-rgb: 102, 102, 102;
+
+    --chat-rgb: var(--green-rgb);
+    --muc-rgb: var(--orange-rgb);
 
     // Bootstrap variables
     --primary-color: var(--blue) !important;
+    --primary-rgb: var(--blue-rgb);
     --secondary-color: var(--light-blue) !important;
+    --secondary-rgb: var(--light-blue-rgb);
     --success-color: var(--green);
+    --success-color-rgb: var(--green-rgb);
     --danger-color: var(--dark-red);
+    --danger-color-rgb: var(--dark-red-rgb);
     --warning-color: var(--orange);
     --info-color: var(--light-blue);
+    --info-color-rgb: var(--light-blue-rgb);
+
+    --converse-info: var(--info-color);
+    --converse-info-rgb: var(--info-color-rgb);
+    --converse-success: var(--success-color);
+    --converse-success-rgb: var(--success-color-rgb);
+    --converse-danger: var(--danger-color);
+    --converse-danger-rgb: var(--danger-color-rgb);
 
     --converse-body-bg: var(--background-color);
     --converse-body-color: var(--foreground-color) !important;
@@ -41,6 +62,10 @@
     .modal {
         --converse-modal-color: var(--foreground-color) !important;
     }
+    .toast {
+        --converse-toast-color: var(--background-color);
+        --converse-toast-bg: var(--secondary-color) !important;
+    }
 
     // Online status indicators
     --chat-status-away: var(--orange);
@@ -57,10 +82,6 @@
     --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

@@ -9,45 +9,56 @@
     --blue: #1ba2f6;
     --cyan: #32fbe2;
     --green: #3cf281;
+    --green-rgb: 60, 242, 129;
     --indigo: #6610f2;
     --orange: #f1b633;
+    --orange-rgb: 255, 193, 7;
     --pink: #ea39b8;
+    --pink-rgb: 234, 57, 185;
     --purple: #6f42c1;
+    --purple-rgb: 111, 66, 193;
     --red: #e44c55;
+    --red-rgb: 228, 76, 84;
     --teal: #3f81a2;
     --white: #efefef;
     --yellow: #ffc107;
+    --yellow-rgb: 255, 193, 7;
 
     // Base variables
     // --------------
     --background-color: #1a0933;
+    --background-color-rgb: 26, 9, 51;
     --background-color-lighter: #2c174c;
     --foreground-color: var(--white);
 
-    // RGB values to be used with rgba()
-    // ---------------------------------
-    --background-color-rgb: 26, 9, 51;
-    --green-rgb: 60, 242, 129;
-    --orange-rgb: 255, 193, 7;
-    --pink-rgb: 234, 57, 185;
-    --purple-rgb: 111, 66, 193;
-
     --chat-rgb: var(--green-rgb);
     --muc-rgb: var(--orange-rgb);
-    --primary-rgb: var(--pink-rgb);
-    --secondary-rgb: var(--purple-rgb);
 
     // Bootstrap variables
     --primary-color: var(--pink) !important;
+    --primary-rgb: var(--pink-rgb);
     --secondary-color: var(--purple) !important;
+    --secondary-rgb: var(--purple-rgb);
     --success-color: var(--green);
+    --success-color-rgb: var(--green-rgb);
     --danger-color: var(--red);
+    --danger-color-rgb: var(--red-rgb);
     --warning-color: var(--orange);
     --info-color: var(--yellow);
+    --info-color-rgb: var(--yellow-rgb);
+
+    --converse-info: var(--info-color);
+    --converse-info-rgb: var(--info-color-rgb);
+    --converse-success: var(--success-color);
+    --converse-success-rgb: var(--success-color-rgb);
+    --converse-danger: var(--danger-color);
+    --converse-danger-rgb: var(--danger-color-rgb);
 
+    --converse-body-bg-rgb: var(--background-color-rgb);
     --converse-body-bg: var(--background-color);
     --converse-body-color: var(--foreground-color) !important;
     --converse-highlight-color: var(--yellow);
+    --converse-secondary-color: var(--secondary-color);
 
     .shadow-lg {
         --converse-box-shadow-lg: 0 1rem 3rem var(--background-color);
@@ -69,6 +80,10 @@
             --converse-list-group-active-color: var(--background-color) !important;
         }
     }
+    .toast {
+        --converse-toast-color: var(--background-color);
+        --converse-toast-bg: var(--secondary-color) !important;
+    }
 
     // Online status indicators
     --chat-status-away: var(--orange);
@@ -85,10 +100,6 @@
     --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;
 

src/shared/styles/themes/dracula.scss

@@ -1,35 +1,59 @@
-&[data-converse-theme="dracula"],
-&[data-bs-theme="dracula"] {
+&[data-converse-theme='dracula'],
+&[data-bs-theme='dracula'] {
     $theme: 'dracula' !default;
 
     // Hex color values
     // ----------------
     --cyan: #8be9fd;
     --green: #50fa7b;
+    --green-rgb: 80, 250, 123;
     --orange: #ffb86c;
+    --orange-rgb: 255, 184, 108;
     --pink: #ff79c6;
+    --pink-rgb: 255, 121, 198;
     --purple: #bd93f9;
+    --purple-rgb: 189, 147, 249;
     --red: #ff5555;
+    --red-rgb: 255, 85, 85;
     --yellow: #f1fa8c;
+    --yellow-rgb: 241, 250, 140;
     --gray: #6272a4;
     --darkgray: #212529;
 
     // Base variables
     // --------------
     --background-color: #282a36;
+    --background-color-rgb: 40, 42, 54;
     --foreground-color: #f8f8f2;
 
+    --chat-rgb: var(--green-rgb);
+    --muc-rgb: var(--orange-rgb);
+
     // Bootstrap variables
     --primary-color: var(--pink) !important;
+    --primary-rgb: var(--pink-rgb);
     --secondary-color: var(--purple) !important;
+    --secondary-rgb: var(--purple-rgb);
     --success-color: var(--green);
+    --success-color-rgb: var(--green-rgb);
     --danger-color: var(--red);
+    --danger-color-rgb: var(--red-rgb);
     --warning-color: var(--orange);
     --info-color: var(--yellow);
+    --info-color-rgb: var(--yellow-rgb);
+
+    --converse-info: var(--info-color);
+    --converse-info-rgb: var(--info-color-rgb);
+    --converse-success: var(--success-color);
+    --converse-success-rgb: var(--success-color-rgb);
+    --converse-danger: var(--danger-color);
+    --converse-danger-rgb: var(--danger-color-rgb);
 
+    --converse-body-bg-rgb: var(--background-color-rgb);
     --converse-body-bg: var(--background-color);
     --converse-body-color: var(--foreground-color) !important;
     --converse-highlight-color: var(--yellow) !important;
+    --converse-secondary-color: var(--secondary-color);
     .navbar-nav {
         --converse-nav-link-color: var(--link-color) !important;
         --converse-nav-link-hover-color: var(--link-color-hover) !important;
@@ -47,6 +71,10 @@
             --converse-list-group-active-color: var(--background-color) !important;
         }
     }
+    .toast {
+        --converse-toast-color: var(--background-color);
+        --converse-toast-bg: var(--secondary-color) !important;
+    }
 
     // Online status indicators
     --chat-status-away: var(--orange);
@@ -63,10 +91,6 @@
     --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

@@ -1,5 +1,5 @@
-&[data-converse-theme="nordic"],
-&[data-bs-theme="nordic"] {
+&[data-converse-theme='nordic'],
+&[data-bs-theme='nordic'] {
     $theme: 'nordic' !default;
 
     // Darker gray theme colors
@@ -8,38 +8,61 @@
     --polar-night-3: #434c5e;
     --polar-night-4: #4c566a;
 
-    --snow-storm-1:  #d8dee9;
-    --snow-storm-2:  #e5e9f0;
-    --snow-storm-3:  #eceff4;
-
-    --green-1:       #5D9795;
-    --green-2:       #387C79;
-    --green-3:       #8FBCBA;
-    --green-4:       #0B4C4A;
-
-    --blue-1:        #5D9795;
-    --blue-2:        #475D8B;
-
-    --orange:           #D0925F;
-    --orange-darker:    #A76632;
-    --purple:           #b48ead;
-    --red:              #bf616a;
-    --yellow:           #ebcb8b;
+    --snow-storm-1: #d8dee9;
+    --snow-storm-2: #e5e9f0;
+    --snow-storm-3: #eceff4;
+
+    --green-1: #5d9795;
+    --green1-rgb: 93, 151, 149;
+    --green-2: #387c79;
+    --green2-rgb: 56, 124, 121;
+    --green-3: #8fbcba;
+    --green3-rgb: 143, 188, 186;
+    --green-4: #0b4c4a;
+
+    --blue-1: #5d9795;
+    --blue-2: #475d8b;
+    --blue2-rgb: 71, 93, 139;
+
+    --orange: #d0925f;
+    --orange-rgb: 208, 146, 95;
+    --orange-darker: #a76632;
+    --purple: #b48ead;
+    --purple-rgb: 180, 142, 173;
+    --red: #bf616a;
+    --red-rgb: 191, 97, 106;
+    --yellow: #ebcb8b;
+    --yellow-rgb: 235, 203, 139;
 
     // Base variables
     // --------------
     --background-color: var(--snow-storm-2);
+    --background-color-rgb: 229, 233, 240;
     --foreground-color: var(--polar-night-2);
 
+    --chat-rgb: var(--green1-rgb);
+    --muc-rgb: var(--orange-rgb);
+
     // Bootstrap variables
     --primary-color: var(--green-2) !important;
+    --primary-rgb: var(--green2-rgb);
     --primary-color-hover: var(--green-3) !important;
     --secondary-color: var(--blue-2) !important;
+    --secondary-rgb: var(--blue2-rgb);
     --success-color: var(--green-3);
+    --success-color-rgb: var(--green3-rgb);
     --danger-color: var(--red);
+    --danger-color-rgb: var(--red-rgb);
     --warning-color: var(--orange);
     --info-color: var(--purple);
-
+    --info-color-rgb: var(--purple-rgb);
+
+    --converse-info: var(--info-color);
+    --converse-info-rgb: var(--info-color-rgb);
+    --converse-success: var(--success-color);
+    --converse-success-rgb: var(--success-color-rgb);
+    --converse-danger: var(--danger-color);
+    --converse-danger-rgb: var(--danger-color-rgb);
     --converse-body-bg: var(--background-color);
     --converse-body-color: var(--foreground-color) !important;
     --converse-highlight-color: var(--red);
@@ -53,6 +76,10 @@
     .modal {
         --converse-modal-color: var(--foreground-color) !important;
     }
+    .toast {
+        --converse-toast-color: var(--background-color);
+        --converse-toast-bg: var(--secondary-color) !important;
+    }
 
     // Online status indicators
     --chat-status-away: var(--orange);