Show background animation in login form

dev.html

@@ -27,7 +27,7 @@
 
     converse.initialize({
         i18n: 'en',
-        theme: 'cyberpunk',
+        theme: 'nordic',
         dark_theme: 'dracula',
         auto_away: 300,
         loglevel: 'debug',
@@ -39,6 +39,7 @@
         whitelisted_plugins: ['converse-debug'],
         bosh_service_url: 'https://conversejs.org/http-bind/', // Please use this connection manager only for testing purposes
         // view_mode: 'overlayed',
+        show_controlbox_by_default: true,
         // websocket_url: 'wss://conversejs.org/xmpp-websocket',
         // websocket_url: 'ws://chat.example.org:5380/xmpp-websocket',
         // connection_options: { worker: '/dist/shared-connection-worker.js' }

src/headless/shared/api/user.js

@@ -121,7 +121,6 @@ const api = {
             };
 
             const connection = connection_api.get();
-
             if (connection) {
                 connection.setDisconnectionCause(LOGOUT, undefined, true);
                 api.listen.once('disconnected', () => complete());

src/headless/shared/connection/index.js

@@ -281,6 +281,7 @@ export class Connection extends Strophe.Connection {
     }
 
     async finishDisconnection () {
+        this.setConnectionStatus(Strophe.Status.DISCONNECTED);
         const { api } = _converse;
         // Properly tear down the session so that it's possible to manually connect again.
         log.debug('DISCONNECTED');
@@ -413,11 +414,11 @@ export class Connection extends Strophe.Connection {
             } else if (condition !== undefined && condition === Strophe?.ErrorCondition?.NO_AUTH_MECH) {
                 feedback = __("The XMPP server did not offer a supported authentication mechanism");
             }
-
             this.setConnectionStatus(status, feedback);
             this.setDisconnectionCause(status, condition);
 
         } else if (status === Strophe.Status.DISCONNECTING) {
+            this.setConnectionStatus(status);
             this.setDisconnectionCause(status, condition);
         }
     }

src/plugins/controlbox/styles/_controlbox.scss

@@ -63,6 +63,7 @@
             .box-flyout {
                 .controlbox-pane {
                     overflow-y: auto;
+                    padding-top: 0;
                 }
             }
         }
@@ -172,6 +173,9 @@
         &.converse-overlayed {
             display: flex;
             flex-direction: row-reverse;
+            .flyout {
+                border: 0;
+            }
 
             .toggle-controlbox {
                 background-color: var(--controlbox-color);
@@ -199,30 +203,17 @@
             }
 
             .converse-svg-logo {
+                margin-right: 0.1em;
                 height: 1em;
             }
         }
 
         &.converse-embedded,
         &.converse-fullscreen {
-            #controlbox {
-                .flyout {
-                    border-inline-end: 0.2rem solid var(--controlbox-color);
-                }
-            }
             .toggle-controlbox {
                 display: none;
             }
-        }
-
-        &.converse-overlayed {
-            .flyout {
-                border: 0;
-            }
-        }
 
-        &.converse-embedded,
-        &.converse-fullscreen {
             #controlbox {
                 margin: 0;
 
@@ -248,11 +239,17 @@
                 }
 
                 .flyout {
+                    border-inline-end: 0.2rem solid var(--controlbox-color);
                     border-radius: 0;
                     width: 100%;
                     z-index: 1;
                 }
 
+                .converse-svg-logo {
+                    margin-top: 0.1em;
+                    height: 1.8em;
+                }
+
                 converse-brand-logo {
                     margin-top: 2em;
                     margin-bottom: 0;

src/plugins/controlbox/styles/loginform.scss

@@ -94,11 +94,12 @@
                     display: none;
                     @include media-breakpoint-up(sm) {
                         display: block;
-                        margin-bottom: 2em;
                     }
+                    z-index: 100;
                     font-size: 100%;
                     text-align: center;
                     font-size: 90%;
+                    background-color: rgba(var(--background-color-rgb), 0.9);
                 }
 
                 converse-login-form {

src/plugins/controlbox/templates/controlbox.js

@@ -11,7 +11,11 @@ function whenNotConnected(el) {
     const is_fullscreen = api.settings.get('view_mode') === 'fullscreen';
     const connection_status = _converse.state.connfeedback.get('connection_status');
     const connecting = [Strophe.Status.RECONNECTING, Strophe.Status.CONNECTING].includes(connection_status);
+    const view_mode = api.settings.get('view_mode');
+    const show_bg = api.settings.get('show_background');
+
     return html`
+        ${show_bg && view_mode === 'fullscreen' ? html`<converse-bg></converse-bg>` : ''}
         <converse-controlbox-buttons class="controlbox-padded"></converse-controlbox-buttons>
         <div class="controlbox-pane d-flex flex-column justify-content-between">
             ${is_fullscreen ? html`<converse-controlbox-navbar></converse-controlbox-navbar>` : ''}
@@ -33,15 +37,14 @@ export default (el) => {
     return html`<div class="flyout box-flyout">
         <converse-dragresize></converse-dragresize>
         ${el.model.get('connected')
-            ? html`
-                <converse-user-profile />
-                <div class="controlbox-pane">
-                  <converse-headlines-feeds-list class="controlbox-section"></converse-headlines-feeds-list>
-                  <div id="chatrooms" class="controlbox-section"><converse-rooms-list></converse-rooms-list></div>
-                  ${api.settings.get('authentication') === ANONYMOUS
-                      ? ''
-                      : html`<div id="converse-roster" class="controlbox-section"><converse-roster /></div>`}
-              </div>`
+            ? html`<converse-user-profile></converse-user-profile>
+                  <div class="controlbox-pane">
+                      <converse-headlines-feeds-list class="controlbox-section"></converse-headlines-feeds-list>
+                      <div id="chatrooms" class="controlbox-section"><converse-rooms-list></converse-rooms-list></div>
+                      ${api.settings.get('authentication') === ANONYMOUS
+                          ? ''
+                          : html`<div id="converse-roster" class="controlbox-section"><converse-roster /></div>`}
+                  </div>`
             : whenNotConnected(el)}
     </div>`;
 };

src/plugins/controlbox/templates/loginform.js

@@ -147,7 +147,7 @@ export default (el) => {
     const connection_status = connfeedback.get('connection_status');
     const feedback_class = CONNECTION_STATUS_CSS_CLASS?.[connection_status] ?? 'none';
     const conn_feedback_message = connfeedback.get('message');
-    return html`<form id="converse-login" class="converse-form" method="post" @submit=${el.onLoginFormSubmitted}>
+    return html`<form id="converse-login" class="converse-form rounded" method="post" @submit=${el.onLoginFormSubmitted}>
         <div
             class="alert ${`alert-${feedback_class}`} conn-feedback mb-3 ${!conn_feedback_message ? 'd-none' : ''}"
             role="alert"

src/plugins/controlbox/templates/navbar.js

@@ -7,7 +7,7 @@ export default (el) => {
     return html`
         <nav class="navbar navbar-expand-lg">
             <div class="container-fluid">
-                <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                <div class="collapse navbar-collapse">
                     <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                         <li class="nav-item">
                             <a class="nav-link" href="#" @click=${el.openAboutDialog}>About</a>

src/plugins/modal/styles/_modal.scss

@@ -42,7 +42,13 @@ $prefix: 'converse-';
             }
         }
         .btn-close {
+            --converse-btn-close-bg: none;
             margin: 0;
+            padding: 0;
+            font-size: 2.5em;
+            svg {
+                fill: var(--background-color);
+            }
         }
         .close {
             color: var(--background-color);

src/plugins/modal/templates/buttons.js

@@ -6,4 +6,8 @@ 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" data-bs-dismiss="modal" aria-label="${__('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>`;

src/plugins/register/templates/registration_form.js

@@ -13,7 +13,7 @@ export default (el) => {
     const registration_domain = api.settings.get('registration_domain');
 
     return html`
-        <form id="converse-register" class="converse-form" @submit=${(ev) => el.onFormSubmission(ev)}>
+        <form id="converse-register" class="converse-form rounded" @submit=${(ev) => el.onFormSubmission(ev)}>
             <legend class="col-form-label">${i18n_legend} ${el.domain}</legend>
             <p class="title">${el.title}</p>
             <p class="form-help instructions">${el.instructions}</p>

src/plugins/rootview/background.js

@@ -8,6 +8,12 @@ import './styles/background.scss';
 
 class ConverseBackground extends CustomElement {
 
+    static get properties() {
+        return {
+            logo: { type: Boolean },
+        };
+    }
+
     initialize() {
         this.setThemeAttributes();
 
@@ -19,7 +25,7 @@ class ConverseBackground extends CustomElement {
     }
 
     render() {
-        return tplBackground();
+        return tplBackground(this);
     }
 
     setThemeAttributes () {

src/plugins/rootview/templates/background_logo.js

@@ -2,78 +2,40 @@
 import { html } from 'lit';
 import { api } from '@converse/headless';
 
-export default () => html`
-    ${api.settings.get('theme') === 'cyberpunk'
-        ? html` <section class="moving-grid">
-              <div class="container">
-                  <div class="static-lines">${[...Array(20).keys()].map(() => html`<div class="vert"></div> `)}</div>
-                  <div class="moving-lines">${[...Array(60).keys()].map(() => html`<div class="horz"></div> `)}</div>
-              </div>
-          </section>`
-        : ''}
-
-    <div class="inner-content converse-brand row">
-        <div class="converse-brand__heading">
-            <svg
-                height="160px"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlns:xlink="http://www.w3.org/1999/xlink"
-                viewBox="0 0 364 364"
-                version="1.1"
-            >
-                <title>Logo Converse</title>
-                <defs>
-                    <linearGradient
-                        id="gradient"
-                        x1="92.14"
-                        y1="27.64"
-                        x2="267.65"
-                        y2="331.62"
-                        gradientUnits="userSpaceOnUse"
-                    >
-                        <stop offset="0" stop-color="#fff1d1" />
-                        <stop offset="0.05" stop-color="#fae8c1" />
-                        <stop offset="0.15" stop-color="#f0d5a1" />
-                        <stop offset="0.27" stop-color="#e7c687" />
-                        <stop offset="0.4" stop-color="#e1bb72" />
-                        <stop offset="0.54" stop-color="#dcb264" />
-                        <stop offset="0.71" stop-color="#daad5c" />
-                        <stop offset="1" stop-color="#d9ac59" />
-                    </linearGradient>
-                    <filter id="shadow">
-                        <feGaussianBlur in="SourceAlpha" stdDeviation="2.3" result="blur1" />
-                        <feOffset in="blur1" dx="3" dy="3" result="blur2" />
-                        <feColorMatrix
-                            in="blur2"
-                            type="matrix"
-                            result="blur3"
-                            values="1 0 0 0 0.1
-                                    0 1 0 0 0.1
-                                    0 0 1 0 0.1
-                                    0 0 0 1 0"
-                        />
-                        <feMerge>
-                            <feMergeNode in="blur3" />
-                            <feMergeNode in="SourceGraphic" />
-                        </feMerge>
-                    </filter>
-                </defs>
-                <g filter="url(#shadow)">
-                    <path
-                        d="M221.46,103.71c0,18.83-29.36,18.83-29.12,0C192.1,84.88,221.46,84.88,221.46,103.71Z"
-                        fill="#d9ac59"
-                    />
-                    <path
-                        d="M179.9,4.15A175.48,175.48,0,1,0,355.38,179.63,175.48,175.48,0,0,0,179.9,4.15Zm-40.79,264.5c-.23-17.82,27.58-17.82,27.58,0S138.88,286.48,139.11,268.65ZM218.6,168.24A79.65,79.65,0,0,1,205.15,174a12.76,12.76,0,0,0-6.29,4.65L167.54,222a1.36,1.36,0,0,1-2.46-.8v-35.8a2.58,2.58,0,0,0-3.06-2.53c-15.43,3-30.23,7.7-42.73,19.94-38.8,38-29.42,105.69,16.09,133.16a162.25,162.25,0,0,1-91.47-67.27C-3.86,182.26,34.5,47.25,138.37,25.66c46.89-9.75,118.25,5.16,123.73,62.83C265.15,120.64,246.56,152.89,218.6,168.24Z"
-                        fill="url(#gradient)"
-                    />
-                </g>
-            </svg>
-            <span class="converse-brand__text">
-                <span>converse<span class="subdued">.js</span></span>
-                <p class="byline">messaging freedom</p>
-            </span>
-        </div>
-        ${api.settings.get('view_mode') === 'overlayed' ? html`<div class="converse-brand__padding"></div>` : ''}
+/**
+ * @param {import('../background').default} el
+ */
+export default (el) => html`
+    ${
+        api.settings.get('theme') === 'cyberpunk'
+            ? html`<section class="moving-grid">
+                  <div class="container">
+                      <div class="static-lines">
+                          ${[...Array(20).keys()].map(() => html`<div class="vert"></div> `)}
+                      </div>
+                      <div class="moving-lines">
+                          ${[...Array(60).keys()].map(() => html`<div class="horz"></div> `)}
+                      </div>
+                  </div>
+              </section>`
+            : ''
+    } ${
+        el.getAttribute('logo')
+            ? html`
+                  <div class="inner-content converse-brand row">
+                      <div class="converse-brand__heading">
+                          <converse-logo></converse-logo>
+                          <span class="converse-brand__text">
+                              <span>converse<span class="subdued">.js</span></span>
+                              <p class="byline">messaging freedom</p>
+                          </span>
+                      </div>
+                      ${api.settings.get('view_mode') === 'overlayed'
+                          ? html`<div class="converse-brand__padding"></div>`
+                          : ''}
+                  </div>
+              `
+            : ''
+    }
     </div>
 `;

src/plugins/rootview/templates/root.js

@@ -6,7 +6,7 @@ export default () => {
     const extra_classes = api.settings.get('singleton') ? ['converse-singleton'] : [];
     extra_classes.push(`converse-${api.settings.get('view_mode')}`);
     return html`
-        ${api.settings.get('show_background') ? html`<converse-bg></converse-bg>` : ''}
+        ${api.settings.get('show_background') ? html`<converse-bg logo></converse-bg>` : ''}
         <converse-chats class="converse-chatboxes row justify-content-start g-0 ${extra_classes.join(' ')}"></converse-chats>
         <converse-modals id="converse-modals" class="modals"></converse-modals>
         <converse-fontawesome></converse-fontawesome>

src/shared/components/brand-logo.js

@@ -1,38 +1,15 @@
 import { api } from '@converse/headless';
 import { CustomElement } from './element.js';
 import { html } from 'lit';
-
+import 'shared/components/logo.js';
 
 export class ConverseBrandLogo extends CustomElement {
-
-    render () { // eslint-disable-line class-methods-use-this
+    render() {
         const is_fullscreen = api.settings.get('view_mode') === 'fullscreen';
         return html`
             <a class="brand-heading" href="https://conversejs.org" target="_blank" rel="noopener">
                 <span class="brand-name-wrapper ${is_fullscreen ? 'brand-name-wrapper--fullscreen' : ''}">
-                    <svg
-                        class="converse-svg-logo"
-                        xmlns:svg="http://www.w3.org/2000/svg"
-                        xmlns="http://www.w3.org/2000/svg"
-                        xmlns:xlink="http://www.w3.org/1999/xlink"
-                        viewBox="0 0 364 364">
-
-                        <title>Converse</title>
-                        <g class="cls-1" id="g904">
-                            <g data-name="Layer 2">
-                                <g data-name="Layer 7">
-                                    <path
-                                        class="cls-3"
-                                        d="M221.46,103.71c0,18.83-29.36,18.83-29.12,0C192.1,84.88,221.46,84.88,221.46,103.71Z"
-                                    />
-                                    <path
-                                        class="cls-4"
-                                        d="M179.9,4.15A175.48,175.48,0,1,0,355.38,179.63,175.48,175.48,0,0,0,179.9,4.15Zm-40.79,264.5c-.23-17.82,27.58-17.82,27.58,0S138.88,286.48,139.11,268.65ZM218.6,168.24A79.65,79.65,0,0,1,205.15,174a12.76,12.76,0,0,0-6.29,4.65L167.54,222a1.36,1.36,0,0,1-2.46-.8v-35.8a2.58,2.58,0,0,0-3.06-2.53c-15.43,3-30.23,7.7-42.73,19.94-38.8,38-29.42,105.69,16.09,133.16a162.25,162.25,0,0,1-91.47-67.27C-3.86,182.26,34.5,47.25,138.37,25.66c46.89-9.75,118.25,5.16,123.73,62.83C265.15,120.64,246.56,152.89,218.6,168.24Z"
-                                    />
-                                </g>
-                            </g>
-                        </g>
-                    </svg>
+                    <converse-logo class="converse-svg-logo"></converse-logo>
                     <span class="brand-name">
                         <span class="brand-name__text">converse<span class="subdued">.js</span></span>
                         ${is_fullscreen

src/shared/components/footer.js

@@ -12,12 +12,12 @@ export class ConverseFooter extends CustomElement {
         return html`
             ${is_fullscreen
                 ? html`
-                      <footer class="footer mt-auto py-3 mb-2">
+                      <footer class="footer mt-auto py-3 pb-3">
                           <div class="container">
                               <div class="row">
                                   <div class="col-12 text-center">
                                       <p class="brand-subtitle mb-2 subdued">Version: ${_converse.VERSION_NAME}</p>
-                                      <p class="brand-subtitle mb-2">
+                                      <p class="brand-subtitle mb-4">
                                           <a
                                               target="_blank"
                                               rel="nofollow"
@@ -25,14 +25,7 @@ export class ConverseFooter extends CustomElement {
                                               >Open Source</a
                                           >
                                           XMPP chat client brought to you by
-                                          <a target="_blank" rel="nofollow" href="https://opkode.com">Opkode</a>.
-                                      </p>
-                                      <p class="brand-subtitle mb-4">
-                                          You can
-                                          <a target="_blank" rel="nofollow" href="https://opkode.com/contact.html"
-                                              >hire me</a
-                                          >
-                                          for customizations, support or to build your next project.
+                                          <a target="_blank" rel="nofollow" href="https://opkode.com/about">Opkode</a>.
                                       </p>
                                       <div class="sponsors text-center">
                                           <p class="byline mb-1">${i18n_sponsors}</p>

src/shared/components/logo.js

@@ -0,0 +1,90 @@
+import { html } from 'lit';
+import { api } from '@converse/headless';
+import { CustomElement } from 'shared/components/element.js';
+
+class ConverseLogo extends CustomElement {
+    render() {
+        const view_mode = api.settings.get('view_mode');
+        return view_mode === 'overlayed'
+            ? html`<svg
+                    class="converse-svg-logo"
+                    version="1.1"
+                    viewBox="0 0 364 364"
+                    xmlns:svg="http://www.w3.org/2000/svg"
+                    xmlns:xlink="http://www.w3.org/1999/xlink"
+                    xmlns="http://www.w3.org/2000/svg">
+                    <title>Converse Logo</title>
+                    <g class="cls-1" id="g904">
+                        <g data-name="Layer 2">
+                            <g data-name="Layer 7">
+                                <path
+                                    class="cls-3"
+                                    d="M221.46,103.71c0,18.83-29.36,18.83-29.12,0C192.1,84.88,221.46,84.88,221.46,103.71Z"
+                                />
+                                <path
+                                    class="cls-4"
+                                    d="M179.9,4.15A175.48,175.48,0,1,0,355.38,179.63,175.48,175.48,0,0,0,179.9,4.15Zm-40.79,264.5c-.23-17.82,27.58-17.82,27.58,0S138.88,286.48,139.11,268.65ZM218.6,168.24A79.65,79.65,0,0,1,205.15,174a12.76,12.76,0,0,0-6.29,4.65L167.54,222a1.36,1.36,0,0,1-2.46-.8v-35.8a2.58,2.58,0,0,0-3.06-2.53c-15.43,3-30.23,7.7-42.73,19.94-38.8,38-29.42,105.69,16.09,133.16a162.25,162.25,0,0,1-91.47-67.27C-3.86,182.26,34.5,47.25,138.37,25.66c46.89-9.75,118.25,5.16,123.73,62.83C265.15,120.64,246.56,152.89,218.6,168.24Z"
+                                />
+                            </g>
+                        </g>
+                    </g>
+                </svg>`
+            : html`<svg
+                    class="converse-svg-logo"
+                    version="1.1"
+                    viewBox="0 0 364 364"
+                    xmlns:svg="http://www.w3.org/2000/svg"
+                    xmlns:xlink="http://www.w3.org/1999/xlink"
+                    xmlns="http://www.w3.org/2000/svg">
+                <title>Converse Logo</title>
+                <defs>
+                    <linearGradient
+                        id="gradient"
+                        x1="92.14"
+                        y1="27.64"
+                        x2="267.65"
+                        y2="331.62"
+                        gradientUnits="userSpaceOnUse"
+                    >
+                        <stop offset="0" stop-color="#fff1d1" />
+                        <stop offset="0.05" stop-color="#fae8c1" />
+                        <stop offset="0.15" stop-color="#f0d5a1" />
+                        <stop offset="0.27" stop-color="#e7c687" />
+                        <stop offset="0.4" stop-color="#e1bb72" />
+                        <stop offset="0.54" stop-color="#dcb264" />
+                        <stop offset="0.71" stop-color="#daad5c" />
+                        <stop offset="1" stop-color="#d9ac59" />
+                    </linearGradient>
+                    <filter id="shadow">
+                        <feGaussianBlur in="SourceAlpha" stdDeviation="2.3" result="blur1" />
+                        <feOffset in="blur1" dx="3" dy="3" result="blur2" />
+                        <feColorMatrix
+                            in="blur2"
+                            type="matrix"
+                            result="blur3"
+                            values="1 0 0 0 0.1
+                            0 1 0 0 0.1
+                            0 0 1 0 0.1
+                            0 0 0 1 0"
+                        />
+                        <feMerge>
+                            <feMergeNode in="blur3" />
+                            <feMergeNode in="SourceGraphic" />
+                        </feMerge>
+                    </filter>
+                </defs>
+                <g filter="url(#shadow)">
+                    <path
+                        d="M221.46,103.71c0,18.83-29.36,18.83-29.12,0C192.1,84.88,221.46,84.88,221.46,103.71Z"
+                        fill="#d9ac59"
+                    />
+                    <path
+                        d="M179.9,4.15A175.48,175.48,0,1,0,355.38,179.63,175.48,175.48,0,0,0,179.9,4.15Zm-40.79,264.5c-.23-17.82,27.58-17.82,27.58,0S138.88,286.48,139.11,268.65ZM218.6,168.24A79.65,79.65,0,0,1,205.15,174a12.76,12.76,0,0,0-6.29,4.65L167.54,222a1.36,1.36,0,0,1-2.46-.8v-35.8a2.58,2.58,0,0,0-3.06-2.53c-15.43,3-30.23,7.7-42.73,19.94-38.8,38-29.42,105.69,16.09,133.16a162.25,162.25,0,0,1-91.47-67.27C-3.86,182.26,34.5,47.25,138.37,25.66c46.89-9.75,118.25,5.16,123.73,62.83C265.15,120.64,246.56,152.89,218.6,168.24Z"
+                        fill="url(#gradient)"
+                    />
+                </g>
+            </svg>`;
+    }
+}
+
+api.elements.define('converse-logo', ConverseLogo);

src/shared/styles/_core.scss

@@ -73,7 +73,7 @@
         }
 
         .brand-name__text {
-            font-size: 120%;
+            font-size: 140%;
             vertical-align: text-bottom;
         }
 

src/shared/styles/forms.scss

@@ -62,7 +62,9 @@
 
         &#converse-register,
         &#converse-login {
-            background: var(--background-color);
+            .converse-fullscreen & {
+                background-color: rgba(var(--background-color-rgb), 0.9);
+            }
             legend {
                 width: 100%;
                 text-align: center;
@@ -75,15 +77,11 @@
                 height: auto;
                 white-space: normal;
             }
-            .save-submit {
-                color: var(--success-color);
-            }
             .form-url {
                 display: block;
                 font-weight: normal;
                 margin: 1em 0;
             }
-
         }
 
         &.converse-form {

src/shared/styles/themes/classic.scss

@@ -79,7 +79,7 @@
     --brand-heading-color: var(--blue);
     --chat-color-hover: var(--chat-color);
     --danger-color-hover: var(--danger-color);
-    --global-background-color: var(--dark-blue);
+    --global-background-color: var(--background-color);
     --link-color-hover: var(--link-color);
     --muc-color-hover: var(--muc-color);
     --primary-color-hover: var(--dark-blue);

src/shared/styles/themes/cyberpunk.scss

@@ -1,7 +1,7 @@
 // https://bootswatch.com/vapor
 
-&[data-converse-theme="cyberpunk"],
-&[data-bs-theme="cyberpunk"] {
+&[data-converse-theme='cyberpunk'],
+&[data-bs-theme='cyberpunk'] {
     $theme: 'vapor' !default;
 
     // Hex color values
@@ -21,9 +21,22 @@
     // Base variables
     // --------------
     --background-color: #1a0933;
-    --background-color-lighter: #2C174C;
+    --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;
     --secondary-color: var(--purple) !important;
@@ -35,6 +48,11 @@
     --converse-body-bg: var(--background-color);
     --converse-body-color: var(--foreground-color) !important;
     --converse-highlight-color: var(--yellow);
+
+    .shadow-lg {
+        --converse-box-shadow-lg: 0 1rem 3rem var(--background-color);
+    }
+
     .navbar-nav {
         --converse-nav-link-color: var(--link-color) !important;
         --converse-nav-link-hover-color: var(--link-color-hover) !important;
@@ -102,18 +120,95 @@
         color: var(--foreground-color) !important;
     }
 
-    #controlbox {
-        .flyout {
+    input {
+        background-color: rgba(var(--background-color-rgb), 0.7);
+        border: 1px solid rgba(var(--pink-rgb), 0.6);
+        color: var(--foreground-color);
+        box-shadow:
+            0 0 0.25rem 0 rgba(var(--pink-rgb), 0.4),
+            0 0 1rem 0 rgba(var(--pink-rgb), 0.2) !important;
+
+        &:focus {
+            background-color: rgba(var(--background-color-rgb), 0.9);
+            border-color: var(--purple);
             box-shadow:
-                0 0 1rem 0rem rgba(234, 57, 184, 0.5) inset,
-                0 0 2rem 0rem rgba(234, 57, 184, 0.2) inset,
-                0 0 4rem 2rem rgba(234, 57, 184, 0.1) inset !important;
+                0 0 0.5rem 0 rgba(var(--pink-rgb), 0.8),
+                0 0 1.5rem 0 rgba(var(--pink-rgb), 0.4) !important;
+            outline: none;
+        }
+
+        /* Handle browser autofill */
+        &:-webkit-autofill,
+        &:-webkit-autofill:hover,
+        &:-webkit-autofill:focus {
+            -webkit-text-fill-color: var(--foreground-color);
+            -webkit-box-shadow:
+                0 0 0px 1000px rgba(var(--background-color-rgb), 0.9) inset,
+                0 0 0.5rem 0 rgba(var(--pink-rgb), 0.8),
+                0 0 1.5rem 0 rgba(var(--pink-rgb), 0.4) !important;
+            transition: red 5000s ease-in-out 0s;
+            caret-color: var(--foreground-color);
+            background-color: rgba(var(--background-color-rgb), 0.1);
+        }
+    }
+
+    #controlbox {
+        .converse-fullscreen & {
+            #converse-login {
+                box-shadow:
+                    0 0 0.5rem 0 rgba(var(--pink-rgb), 0.6) inset,
+                    0 0 2rem 0 rgba(var(--pink-rgb), 0.3) inset,
+                    0 0 3rem 2rem rgba(var(--purple-rgb), 0.1) inset,
+                    0 0 1rem 0.5rem rgba(var(--background-color-rgb), 0.5),
+                    0 0 2rem 1rem rgba(var(--background-color-rgb), 0.4) !important;
+            }
+            .footer {
+                box-shadow:
+                    0 0 0.5rem 0 rgba(var(--pink-rgb), 0.6) inset,
+                    0 0 2rem 0 rgba(var(--pink-rgb), 0.3) inset,
+                    0 0 3rem 2rem rgba(var(--pink-rgb), 0.1) inset,
+                    0 0 1rem 0.5rem rgba(var(--background-color-rgb), 0.6),
+                    0 0 2rem 1rem rgba(var(--background-color-rgb), 0.4) !important;
+            }
+            .navbar {
+                box-shadow:
+                    0 0 0.5rem 0 rgba(var(--pink-rgb), 0.6) inset,
+                    0 0 2rem 0 rgba(var(--pink-rgb), 0.3) inset,
+                    0 0 3rem 2rem rgba(var(--purple-rgb), 0.1) inset,
+                    0 0 1rem 0.5rem rgba(var(--background-color-rgb), 0.7),
+                    0 0 2rem 1rem rgba(var(--background-color-rgb), 0.2) !important;
+            }
+            .flyout {
+                box-shadow:
+                    0 0 1rem 0rem rgba(var(--purple-rgb), 0.5) inset,
+                    0 0 2rem 0rem rgba(var(--purple-rgb), 0.2) inset,
+                    0 0 4rem 2rem rgba(var(--purple-rgb), 0.1) inset !important;
+            }
         }
     }
 
-    .modal-header {
-        .btn-close {
-            background-color: var(--header-color);
+    .modal-content {
+        box-shadow:
+            0 0 0.5rem 0 rgba(var(--secondary-rgb), 0.6) inset,
+            0 0 2rem 0 rgba(var(--secondary-rgb), 0.3) inset,
+            0 0 3rem 2rem rgba(var(--secondary-rgb), 0.1) inset !important;
+
+        .modal-header {
+            .btn-close {
+                svg {
+                    fill: var(--primary-color);
+                }
+            }
+            .modal-title {
+                color: var(--primary-color);
+            }
+            background-color: var(--background-color);
+            box-shadow:
+                0 0 0.5rem 0 rgba(var(--primary-rgb), 0.6) inset,
+                0 0 2rem 0 rgba(var(--primary-rgb), 0.3) inset,
+                0 0 3rem 2rem rgba(var(--secondary-rgb), 0.1) inset,
+                0 0 1rem 0.5rem rgba(var(--background-color-rgb), 0.5),
+                0 0 2rem 1rem rgba(var(--background-color-rgb), 0.4) !important;
         }
     }
 
@@ -122,65 +217,65 @@
         .separator-text {
             border-radius: 50px;
             box-shadow:
-                0 0 0.25rem rgba(60, 242, 129, 0.8),
-                0 0 1rem rgba(60, 242, 129, 0.2),
-                0 0 4rem rgba(60, 242, 129, 0.1) !important;
+                0 0 0.25rem rgba(var(--chat-rgb), 0.8),
+                0 0 1rem rgba(var(--chat-rgb), 0.2),
+                0 0 4rem rgba(var(--chat-rgb), 0.1) !important;
         }
     }
 
     .card {
         box-shadow:
-            inset 0 0 0.5rem rgba(234, 57, 184, 0.8),
-            inset 0 0 1rem rgba(234, 57, 184, 0.4),
-            inset 0 0 2rem rgba(234, 57, 184, 0.3),
-            inset 0 0 4rem rgba(234, 57, 184, 0.1) !important;
+            inset 0 0 0.5rem rgba(var(--purple-rgb), 0.8),
+            inset 0 0 1rem rgba(var(--purple-rgb), 0.4),
+            inset 0 0 2rem rgba(var(--purple-rgb), 0.3),
+            inset 0 0 4rem rgba(var(--purple-rgb), 0.1) !important;
     }
 
     .chat-toolbar {
         box-shadow:
-            0 0 0.5rem rgba(60, 242, 129, 0.4),
-            0 0 2rem rgba(60, 242, 129, 0.2),
-            0 0 4rem rgba(60, 242, 129, 0.1) !important;
+            0 0 0.5rem rgba(var(--chat-rgb), 0.4),
+            0 0 2rem rgba(var(--chat-rgb), 0.2),
+            0 0 4rem rgba(var(--chat-rgb), 0.1) !important;
     }
 
     .chat-head-chatbox {
         box-shadow:
-            0 0 1rem 0rem rgba(60, 242, 129, 0.5) inset,
-            0 0 2rem 0rem rgba(60, 242, 129, 0.4) inset,
-            0 0 4rem 2rem rgba(60, 242, 129, 0.2) inset,
-            0 0 1rem 0rem rgba(60, 242, 129, 0.4),
-            0 0 2rem 0rem rgba(60, 242, 129, 0.2),
-            0 0 4rem 0rem rgba(60, 242, 129, 0.1) !important;
+            0 0 1rem 0rem rgba(var(--chat-rgb), 0.5) inset,
+            0 0 2rem 0rem rgba(var(--chat-rgb), 0.4) inset,
+            0 0 4rem 2rem rgba(var(--chat-rgb), 0.2) inset,
+            0 0 1rem 0rem rgba(var(--chat-rgb), 0.4),
+            0 0 2rem 0rem rgba(var(--chat-rgb), 0.2),
+            0 0 4rem 0rem rgba(var(--chat-rgb), 0.1) !important;
     }
 
     .chatroom {
         .message .separator-text {
             border-radius: 50px;
             box-shadow:
-                0 0 0.25rem rgba(255, 193, 7, 0.8),
-                0 0 1rem rgba(255, 193, 7, 0.2),
-                0 0 4rem rgba(255, 193, 7, 0.1) !important;
+                0 0 0.25rem rgba(var(--muc-rgb), 0.8),
+                0 0 1rem rgba(var(--muc-rgb), 0.2),
+                0 0 4rem rgba(var(--muc-rgb), 0.1) !important;
         }
 
         .chat-head-chatroom {
             box-shadow:
-                0 0 1rem 0rem rgba(255, 193, 7, 0.5) inset,
-                0 0 2rem 0rem rgba(255, 193, 7, 0.4) inset,
-                0 0 4rem 2rem rgba(255, 193, 7, 0.2) inset,
-                0 0 1rem 0rem rgba(255, 193, 7, 0.4),
-                0 0 2rem 0rem rgba(255, 193, 7, 0.2),
-                0 0 4rem 0rem rgba(255, 193, 7, 0.1) !important;
+                0 0 1rem 0rem rgba(var(--muc-rgb), 0.5) inset,
+                0 0 2rem 0rem rgba(var(--muc-rgb), 0.4) inset,
+                0 0 4rem 2rem rgba(var(--muc-rgb), 0.2) inset,
+                0 0 1rem 0rem rgba(var(--muc-rgb), 0.4),
+                0 0 2rem 0rem rgba(var(--muc-rgb), 0.2),
+                0 0 4rem 0rem rgba(var(--muc-rgb), 0.1) !important;
         }
 
         converse-muc-sidebar {
-            box-shadow: 0 0 1rem 1rem rgba(255, 193, 7, 0.1) inset !important;
+            box-shadow: 0 0 1rem 1rem rgba(var(--muc-rgb), 0.1) inset !important;
         }
 
         .chat-toolbar {
             box-shadow:
-                0 0 0.5rem rgba(255, 193, 7, 0.4),
-                0 0 2rem rgba(255, 193, 7, 0.2),
-                0 0 4rem rgba(255, 193, 7, 0.1) !important;
+                0 0 0.5rem rgba(var(--muc-rgb), 0.4),
+                0 0 2rem rgba(var(--muc-rgb), 0.2),
+                0 0 4rem rgba(var(--muc-rgb), 0.1) !important;
         }
     }
 
@@ -194,13 +289,13 @@
         &:before {
             content: '';
             position: absolute;
-            top: 4rem;
+            top: 3rem;
             width: 100%;
             height: 0;
             box-shadow:
                 0 0 1rem 0.5rem rgba(255, 255, 255, 0.5),
-                0 0 2rem 0rem rgba(234, 57, 184, 0.3),
-                0 0 4rem 2rem rgba(234, 57, 184, 0.1) !important;
+                0 0 2rem 0rem rgba(var(--purple-rgb), 0.3),
+                0 0 4rem 2rem rgba(var(--purple-rgb), 0.1) !important;
         }
         .container {
             position: relative;

src/types/plugins/chatview/bottom-panel.d.ts

@@ -7,7 +7,7 @@ export default class ChatBottomPanel extends CustomElement {
     model: any;
     connectedCallback(): Promise<void>;
     initialize(): Promise<void>;
-    render(): "" | import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1> | "";
     sendButtonClicked(ev: any): void;
     viewUnreadMessages(ev: any): void;
     onDragOver(ev: any): void;

src/types/plugins/controlbox/controlbox.d.ts

@@ -10,7 +10,7 @@ declare class ControlBoxView extends CustomElement {
     initialize(): void;
     setModel(): void;
     model: any;
-    render(): "" | import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1> | "";
     close(ev: any): this;
     afterShown(): this;
 }

src/types/plugins/muc-views/chatarea.d.ts

@@ -16,7 +16,7 @@ export default class MUCChatArea extends CustomElement {
     initialize(): Promise<void>;
     model: any;
     hideSidebarIfSmallViewport: (...args: any[]) => void;
-    render(): "" | import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1> | "";
     connectedCallback(): void;
     shouldShowSidebar(): boolean;
     getHelpMessages(): string[];

src/types/plugins/muc-views/heading.d.ts

@@ -5,7 +5,7 @@ export default class MUCHeading extends CustomElement {
     initialize(): Promise<void>;
     model: any;
     user_settings: any;
-    render(): "" | import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1> | "";
     /**
      * @param {MUCOccupant} occupant
      */

src/types/plugins/muc-views/modtools.d.ts

@@ -56,7 +56,7 @@ export default class ModeratorTools extends CustomElement {
         reject: (reason?: any) => void;
     };
     muc: any;
-    render(): "" | import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1> | "";
     switchTab(ev: any): void;
     onSearchAffiliationChange(): Promise<void>;
     loading_users_with_affiliation: boolean;

src/types/plugins/muc-views/occupant.d.ts

@@ -12,7 +12,7 @@ export default class MUCOccupant extends CustomElement {
     initialize(): Promise<void>;
     muc: any;
     model: any;
-    render(): "" | import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1> | "";
     /**
      * @param {string} jid
      */

src/types/plugins/muc-views/sidebar-occupant.d.ts

@@ -15,7 +15,7 @@ export default class MUCOccupantListItem extends ObservableElement {
     };
     muc: any;
     initialize(): Promise<void>;
-    render(): "" | import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1> | "";
     /**
      * @param {MouseEvent} ev
      * @param {import('@converse/headless/types/plugins/muc/occupant.js').default} occupant

src/types/plugins/muc-views/templates/muc-bottom-panel.d.ts

@@ -1,3 +1,3 @@
-declare function _default(el: import("../bottom-panel").default): "" | import("lit-html").TemplateResult<1>;
+declare function _default(el: import("../bottom-panel").default): import("lit-html").TemplateResult<1> | "";
 export default _default;
 //# sourceMappingURL=muc-bottom-panel.d.ts.map

src/types/plugins/muc-views/templates/occupant-bottom-panel.d.ts

@@ -1,3 +1,3 @@
-declare function _default(el: import("../occupant-bottom-panel").default): "" | import("lit-html").TemplateResult<1>;
+declare function _default(el: import("../occupant-bottom-panel").default): import("lit-html").TemplateResult<1> | "";
 export default _default;
 //# sourceMappingURL=occupant-bottom-panel.d.ts.map

src/types/plugins/omemo/fingerprints.d.ts

@@ -7,7 +7,7 @@ export class Fingerprints extends CustomElement {
     jid: any;
     initialize(): Promise<void>;
     devicelist: any;
-    render(): "" | import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1> | "";
     toggleDeviceTrust(ev: any): void;
 }
 import { CustomElement } from "shared/components/element.js";

src/types/plugins/rootview/background.d.ts

@@ -1,5 +1,10 @@
 export default ConverseBackground;
 declare class ConverseBackground extends CustomElement {
+    static get properties(): {
+        logo: {
+            type: BooleanConstructor;
+        };
+    };
     initialize(): void;
     render(): import("lit-html").TemplateResult<1>;
     setThemeAttributes(): void;

src/types/plugins/rootview/templates/background_logo.d.ts

@@ -1,3 +1,3 @@
-declare function _default(): import("lit-html").TemplateResult<1>;
+declare function _default(el: import("../background").default): import("lit-html").TemplateResult<1>;
 export default _default;
 //# sourceMappingURL=background_logo.d.ts.map

src/types/shared/avatar/avatar.d.ts

@@ -24,7 +24,7 @@ export default class Avatar extends CustomElement {
     width: number;
     height: number;
     name: string;
-    render(): "" | import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1> | "";
     /**
      * @param {string} name
      * @returns {string}

src/types/shared/avatar/templates/avatar.d.ts

@@ -1,3 +1,3 @@
-declare function _default(o: any): "" | import("lit-html").TemplateResult<1>;
+declare function _default(o: any): import("lit-html").TemplateResult<1> | "";
 export default _default;
 //# sourceMappingURL=avatar.d.ts.map

src/types/shared/chat/chat-content.d.ts

@@ -22,7 +22,7 @@ export default class ChatContent extends CustomElement {
     scrollHandler: (ev: Event) => void;
     mark_scrolled_debounce: NodeJS.Timeout;
     initialize(): Promise<void>;
-    render(): "" | import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1> | "";
     scrollDown(): void;
     #private;
 }

src/types/shared/chat/message-limit.d.ts

@@ -10,7 +10,7 @@ export default class MessageLimitIndicator extends CustomElement {
     model: any;
     _draft_length: number;
     connectedCallback(): void;
-    render(): "" | import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1> | "";
 }
 import { CustomElement } from 'shared/components/element.js';
 //# sourceMappingURL=message-limit.d.ts.map

src/types/shared/chat/message.d.ts

@@ -15,12 +15,12 @@ export default class Message extends ObservableElement {
     };
     model_with_messages: any;
     initialize(): Promise<void>;
-    render(): "" | import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1> | "";
     renderRetraction(): import("lit-html").TemplateResult<1>;
     renderMessageText(): import("lit-html").TemplateResult<1>;
     renderMEPMessage(): import("lit-html").TemplateResult<1>;
     renderInfoMessage(): import("lit-html").TemplateResult<1>;
-    renderFileProgress(): "" | import("lit-html").TemplateResult<1>;
+    renderFileProgress(): import("lit-html").TemplateResult<1> | "";
     renderChatMessage(): import("lit-html").TemplateResult<1>;
     shouldShowAvatar(): boolean;
     onImgClick(ev: any): void;

src/types/shared/chat/templates/unfurl.d.ts

@@ -1,3 +1,3 @@
-declare function _default(el: import("../unfurl").default): "" | import("lit-html").TemplateResult<1>;
+declare function _default(el: import("../unfurl").default): import("lit-html").TemplateResult<1> | "";
 export default _default;
 //# sourceMappingURL=unfurl.d.ts.map

src/types/shared/chat/toolbar.d.ts

@@ -39,7 +39,7 @@ export class ChatToolbar extends CustomElement {
     /**
      * @param {boolean} is_supported
      */
-    getHTTPUploadButton(is_supported: boolean): "" | import("lit-html").TemplateResult<1>;
+    getHTTPUploadButton(is_supported: boolean): import("lit-html").TemplateResult<1> | "";
     getSpoilerButton(): import("lit-html").TemplateResult<1>;
     /** @param {MouseEvent} ev */
     toggleFileUpload(ev: MouseEvent): void;

src/types/shared/chat/unfurl.d.ts

@@ -26,7 +26,7 @@ export default class MessageUnfurl extends CustomElement {
     description: any;
     site_name: any;
     initialize(): void;
-    render(): "" | import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1> | "";
     onImageLoad(): void;
 }
 import { CustomElement } from 'shared/components/element.js';

src/types/shared/chat/utils.d.ts

@@ -19,7 +19,7 @@ export function getStandaloneButtons(promise: Promise<Array<HeadingButtonAttribu
 /**
  * @param {Promise<Array<object>>} promise
  */
-export function getDropdownButtons(promise: Promise<Array<object>>): Promise<"" | import("lit-html").TemplateResult<1>>;
+export function getDropdownButtons(promise: Promise<Array<object>>): Promise<import("lit-html").TemplateResult<1> | "">;
 export function onScrolledDown(model: any): void;
 /**
  * Given a message object, returns a TemplateResult indicating a new day if

src/types/shared/components/logo.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=logo.d.ts.map

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

@@ -1,5 +1,5 @@
 /**
  * @param {import('../user-details').default} el
  */
-export function tplUserDetailsModal(el: import("../user-details").default): "" | import("lit-html").TemplateResult<1>;
+export function tplUserDetailsModal(el: import("../user-details").default): import("lit-html").TemplateResult<1> | "";
 //# sourceMappingURL=user-details.d.ts.map

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

@@ -5,7 +5,7 @@ export default class UserDetailsModal extends BaseModal {
      * @param {Map<string, any>} changed
      */
     shouldUpdate(changed: Map<string, any>): boolean;
-    renderModal(): "" | import("lit-html").TemplateResult<1>;
+    renderModal(): import("lit-html").TemplateResult<1> | "";
     getModalTitle(): any;
     registerContactEventHandlers(): void;
     /**