Style fixes and improvements

src/plugins/chatview/styles/chat-bottom-panel.scss

@@ -12,9 +12,10 @@
             }
 
             .chat-message-form {
+                border-top: 0.25em solid var(--chat-color);
+                border-right: 0 !important;
                 border-bottom: 0;
                 border-inline-start: 0;
-                border-top: 0.25em solid var(--chat-color);
                 border-inline-end: 0.25em solid var(--chat-color);
                 border-bottom-radius: var(--chatbox-border-radius);
                 background-clip: padding-box;

src/plugins/chatview/styles/chat-head.scss

@@ -11,7 +11,7 @@
 
             &.chat-head-chatbox {
                 background-color: var(--chat-header-bg-color);
-                border-bottom: 0.15em solid var(--chat-header-bg-color);
+                border-bottom: 0.15em solid var(--chat-color);
             }
 
             .avatar {

src/plugins/controlbox/styles/_controlbox.scss

@@ -150,6 +150,7 @@
             overflow-x: hidden;
             overflow-y: auto;
             padding: 0;
+            padding-top: 1em;
             text-align: start;
 
             .add-converse-contact {

src/plugins/omemo/styles/omemo.scss

@@ -1,6 +1,11 @@
 converse-omemo-fingerprints {
+    .fingerprints {
+        .list-group-item {
+            color: var(--foreground-color);
+        }
+    }
     .fingerprint {
-        margin-top: 0.5em;
+        margin-top: 1em;
         display: block;
     }
 }

src/shared/chat/styles/toolbar.scss

@@ -1,9 +1,16 @@
 .conversejs {
     converse-chat-toolbar {
+        justify-content: space-between !important;
+
         converse-message-limit-indicator {
             padding: 0.75em 0.5em;
         }
 
+        .send-button {
+            color: var(--background-color);
+            border-radius: 0;
+        }
+
         .btn-toolbar {
             background-color: var(--background-color);
             box-sizing: border-box;
@@ -15,11 +22,6 @@
                 padding: 0.25em 0.5em !important;
             }
 
-            .send-button {
-                color: var(--background-color);
-                border-radius: 0;
-            }
-
             .fa, .fa:hover,
             .far, .far:hover,
             .fas, .fas:hover {

src/shared/modals/styles/user-details.scss

@@ -10,7 +10,7 @@
 
         #profile-tabpanel {
             label {
-                color: var(--subdued-color);
+                color: var(--secondary-color);
                 margin-inline-end: 0.5em;
             }
         }

src/shared/styles/_core.scss

@@ -449,10 +449,10 @@
         font-size: 90%;
     }
 
-	.nav {
-		--converse-nav-link-color: var(--primary-color);
+    .nav {
+        --converse-nav-link-color: var(--primary-color);
         --converse-nav-link-hover-color: var(--focus-color);
-	}
+    }
     .nav-pills .nav-link.active,
     .nav-pills .show > .nav-link {
         background-color: var(--primary-color);

src/shared/styles/index.scss

@@ -58,7 +58,7 @@ $prefix: 'converse-';
 @import "mixins";
 
 .conversejs, converse-bg {
-    @import "themes/nord";
+    @import "themes/nordic";
     @import "themes/classic";
     @import "themes/dracula";
     @import "themes/cyberpunk";

src/shared/styles/themes/classic.scss

@@ -28,7 +28,6 @@
     --warning-color: var(--orange);
     --info-color: var(--light-blue);
     --converse-highlight-color: var(--dark-red);
-    --converse-btn-close-color: var(--background-color);
 
     // Online status indicators
     --chat-status-away: var(--orange);
@@ -39,10 +38,10 @@
     --controlbox-color: var(--light-blue);
     --disabled-color: gray;
     --error-color: var(--dark-red);
-    --focus-color: #aaa;
+    --focus-color: var(--light-blue);
     --heading-color: var(--background-color);
     --headlines-color: var(--orange);
-    --link-color: var(--dark-blue);
+    --link-color: #2D3991;
     --subdued-color: gray;
 
     // The background when selecting text with your mouse

src/shared/styles/themes/cyberpunk.scss

@@ -32,7 +32,6 @@
     --warning-color: var(--orange);
     --info-color: var(--yellow);
     --converse-highlight-color: var(--yellow);
-    --converse-btn-close-color: var(--background-color);
 
     // Online status indicators
     --chat-status-away: var(--orange);

src/shared/styles/themes/dracula.scss

@@ -26,7 +26,6 @@
     --danger-color: var(--red);
     --warning-color: var(--orange);
     --info-color: var(--yellow);
-    --converse-btn-close-color: var(--background-color);
 
     --converse-body-bg: var(--background-color);
     --converse-highlight-color: var(--yellow) !important;

src/shared/styles/themes/nord.scss → src/shared/styles/themes/nordic.scss

@@ -1,6 +1,6 @@
-&[data-converse-theme="nord"],
-&[data-bs-theme="nord"] {
-    $theme: 'nord' !default;
+&[data-converse-theme="nordic"],
+&[data-bs-theme="nordic"] {
+    $theme: 'nordic' !default;
 
     // Darker gray theme colors
     --polar-night-1: #2e3440;
@@ -8,23 +8,23 @@
     --polar-night-3: #434c5e;
     --polar-night-4: #4c566a;
 
-    // Lighter gray theme colors
     --snow-storm-1:  #d8dee9;
     --snow-storm-2:  #e5e9f0;
     --snow-storm-3:  #eceff4;
 
-    // Blues
-    --frost-1:       #8fbcbb;
-    --frost-2:       #88c0d0;
-    --frost-3:       #81a1c1;
-    --frost-4:       #5e81ac;
+    --green-1:       #5D9795;
+    --green-2:       #387C79;
+    --green-3:       #8FBCBA;
+    --green-4:       #0B4C4A;
 
-    --green:        #a3be8c;
-    --dark-green:   #5f8341;
-    --orange:       #d08770;
-    --purple:       #b48ead;
-    --red:          #bf616a;
-    --yellow:       #ebcb8b;
+    --blue-1:        #5D9795;
+    --blue-2:        #475D8B;
+
+    --orange:           #D0925F;
+    --orange-darker:    #A76632;
+    --purple:           #b48ead;
+    --red:              #bf616a;
+    --yellow:           #ebcb8b;
 
     // Base variables
     // --------------
@@ -32,20 +32,20 @@
     --foreground-color: var(--polar-night-2);
 
     // Bootstrap variables
-    --primary-color: var(--frost-1) !important;
-    --secondary-color: var(--frost-3) !important;
-    --success-color: var(--green);
+    --primary-color: var(--green-2) !important;
+    --primary-color-hover: var(--green-3) !important;
+    --secondary-color: var(--blue-1) !important;
+    --success-color: var(--green-3);
     --danger-color: var(--red);
     --warning-color: var(--orange);
     --info-color: var(--purple);
     --converse-highlight-color: var(--red);
-    --converse-btn-close-color: var(--background-color);
 
     // Online status indicators
     --chat-status-away: var(--orange);
     --chat-status-busy: var(--red);
     --chat-status-offline: gray;
-    --chat-status-online: var(--dark-green);
+    --chat-status-online: var(--green-4);
 
     --controlbox-color: var(--purple);
     --disabled-color: var(--secondary-color);
@@ -53,20 +53,20 @@
     --focus-color: var(--secondary-color);
     --heading-color: var(--purple);
     --headlines-color: var(--yellow);
-    --link-color: var(--frost-4);
+    --link-color: var(--blue-2);
     --subdued-color: gray;
 
     // The background when selecting text with your mouse
-    --selection-color: var(--frost-1);
+    --selection-color: var(--green-1);
 
     // Used to indicate selected or open items in lists.
     --highlight-color: var(--snow-storm-2);
     --highlight-color-hover: var(--snow-storm-1);
 
     // 1:1 Chat-related colors
-    --chat-color: var(--dark-green);
+    --chat-color: var(--green-1);
     --chat-header-fg-color: var(--background-color);
-    --chat-header-bg-color: var(--green);
+    --chat-header-bg-color: var(--chat-color);
 
     // MUC-related colors
     --muc-color: var(--orange);
@@ -75,7 +75,7 @@
 
     // Derived colors
     // --------------
-    --brand-heading-color: var(--frost-4);
+    --brand-heading-color: var(--green-4);
     --chat-color-hover: var(--chat-color);
     --danger-color-hover: var(--danger-color);
     --global-background-color: var(--background-color);

src/shared/tests/mock.js

@@ -760,7 +760,8 @@ function getMockVcardFetcher (settings) {
     }
 }
 
-const theme = ['dracula', 'classic', 'cyberpunk'][Math.floor(Math.random()*3)];
+//const theme = ['dracula', 'classic', 'cyberpunk', 'nordic'][Math.floor(Math.random()*4)];
+const theme = ['nordic'];
 
 async function _initConverse (settings) {
     clearStores();

src/types/plugins/profile/modals/profile.d.ts

@@ -1,17 +1,19 @@
 export default class ProfileModal extends BaseModal {
+    /**
+     * @typedef {import('@converse/headless/types/plugins/vcard/api').VCardData} VCardData
+     * @typedef {import("@converse/headless").XMPPStatus} XMPPStatus
+     */
     constructor(options: any);
     renderModal(): import("lit").TemplateResult<1>;
     getModalTitle(): any;
     /**
      * @param {VCardData} data
      */
-    setVCard(data: VCardData): Promise<void>;
+    setVCard(data: import("@converse/headless/types/plugins/vcard/api").VCardData): Promise<void>;
     /**
      * @param {SubmitEvent} ev
      */
     onFormSubmitted(ev: SubmitEvent): Promise<void>;
 }
-export type VCardData = import("@converse/headless/types/plugins/vcard/api").VCardData;
-export type XMPPStatus = import("@converse/headless").XMPPStatus;
 import BaseModal from "plugins/modal/modal.js";
 //# sourceMappingURL=profile.d.ts.map

src/types/shared/modals/user-details.d.ts

@@ -1,7 +1,17 @@
 export default class UserDetailsModal extends BaseModal {
+    constructor(options: any);
+    addListeners(): void;
+    /**
+     * @param {Map<string, any>} changed
+     */
+    shouldUpdate(changed: Map<string, any>): boolean;
     renderModal(): import("lit").TemplateResult<1>;
     getModalTitle(): any;
     registerContactEventHandlers(): void;
+    /**
+     * @param {MouseEvent} ev
+     */
+    updateContact(ev: MouseEvent): Promise<void>;
     /**
      * @param {MouseEvent} ev
      */