Fix rendering of the popover

Author: jcbrand

src/plugins/controlbox/loginform.js

@@ -33,10 +33,6 @@ class LoginForm extends CustomElement {
         return tplLoginPanel(this);
     }
 
-    firstUpdated () {
-        this.initPopovers();
-    }
-
     /**
      * @param {SubmitEvent} ev
      */
@@ -85,10 +81,6 @@ class LoginForm extends CustomElement {
         return api.connection.get().discoverConnectionMethods(domain);
     }
 
-    initPopovers () {
-        Array.from(this.querySelectorAll('[data-toggle="popover"]')).forEach(el => new Popover(el));
-    }
-
     /**
      * @param {string} [jid]
      */

src/shared/styles/themes/classic.scss

@@ -28,8 +28,13 @@
     --warning-color: var(--orange);
     --info-color: var(--light-blue);
 
-    --converse-highlight-color: var(--dark-red);
+    --converse-body-bg: var(--background-color);
     --converse-body-color: var(--foreground-color) !important;
+    --converse-highlight-color: var(--dark-red);
+    .popover {
+        --converse-popover-header-color: var(--background-color) !important;
+        --converse-popover-header-bg: var(--info-color) !important;
+    }
     .modal {
         --converse-modal-color: var(--foreground-color) !important;
     }

src/shared/styles/themes/cyberpunk.scss

@@ -32,9 +32,13 @@
     --warning-color: var(--orange);
     --info-color: var(--yellow);
 
-    --converse-highlight-color: var(--yellow);
+    --converse-body-bg: var(--background-color);
     --converse-body-color: var(--foreground-color) !important;
-
+    --converse-highlight-color: var(--yellow);
+    .popover {
+        --converse-popover-header-color: var(--background-color) !important;
+        --converse-popover-header-bg: var(--info-color) !important;
+    }
     .modal {
         --converse-modal-color: var(--foreground-color) !important;
     }

src/shared/styles/themes/dracula.scss

@@ -30,6 +30,10 @@
     --converse-body-bg: var(--background-color);
     --converse-body-color: var(--foreground-color) !important;
     --converse-highlight-color: var(--yellow) !important;
+    .popover {
+        --converse-popover-header-color: var(--background-color) !important;
+        --converse-popover-header-bg: var(--info-color) !important;
+    }
     .modal {
         --converse-modal-color: var(--foreground-color) !important;
     }

src/shared/styles/themes/nordic.scss

@@ -38,10 +38,15 @@
     --success-color: var(--green-3);
     --danger-color: var(--red);
     --warning-color: var(--orange);
-
     --info-color: var(--purple);
-    --converse-highlight-color: var(--red);
+
+    --converse-body-bg: var(--background-color);
     --converse-body-color: var(--foreground-color) !important;
+    --converse-highlight-color: var(--red);
+    .popover {
+        --converse-popover-header-color: var(--background-color) !important;
+        --converse-popover-header-bg: var(--info-color) !important;
+    }
     .modal {
         --converse-modal-color: var(--foreground-color) !important;
     }