Show logo in the 'About' modal

src/plugins/profile/modals/styles/user-settings.scss

@@ -0,0 +1,10 @@
+converse-user-settings-modal {
+    converse-brand-logo {
+        .converse-svg-logo {
+            height: 4em !important;
+        }
+        .brand-name {
+            font-size: 33px;
+        }
+    }
+}

src/plugins/profile/modals/templates/user-settings.js

@@ -4,41 +4,57 @@ import { _converse, api } from '@converse/headless';
 import { html } from 'lit';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 
+/**
+ * @param {import('../user-settings').default} el
+ */
 const tplNavigation = (el) => {
     const i18n_about = __('About');
     const i18n_commands = __('Commands');
+
+    const show_client_info = api.settings.get('show_client_info');
+    const allow_adhoc_commands = api.settings.get('allow_adhoc_commands');
+    const show_tabs = show_client_info && allow_adhoc_commands;
     return html`
-        <ul class="nav nav-pills justify-content-center">
-            <li role="presentation" class="nav-item">
-                <a
-                    class="nav-link ${el.tab === 'about' ? 'active' : ''}"
-                    id="about-tab"
-                    href="#about-tabpanel"
-                    aria-controls="about-tabpanel"
-                    role="tab"
-                    data-toggle="tab"
-                    data-name="about"
-                    @click=${(ev) => el.switchTab(ev)}
-                    >${i18n_about}</a
-                >
-            </li>
-            <li role="presentation" class="nav-item">
-                <a
-                    class="nav-link ${el.tab === 'commands' ? 'active' : ''}"
-                    id="commands-tab"
-                    href="#commands-tabpanel"
-                    aria-controls="commands-tabpanel"
-                    role="tab"
-                    data-toggle="tab"
-                    data-name="commands"
-                    @click=${(ev) => el.switchTab(ev)}
-                    >${i18n_commands}</a
-                >
-            </li>
-        </ul>
+        ${show_tabs
+            ? html`<ul class="nav nav-pills justify-content-center">
+                  ${show_client_info
+                      ? html` <li role="presentation" class="nav-item">
+                            <a
+                                class="nav-link ${el.tab === 'about' ? 'active' : ''}"
+                                id="about-tab"
+                                href="#about-tabpanel"
+                                aria-controls="about-tabpanel"
+                                role="tab"
+                                data-toggle="tab"
+                                data-name="about"
+                                @click=${(ev) => el.switchTab(ev)}
+                                >${i18n_about}</a
+                            >
+                        </li>`
+                      : ''}
+                  ${allow_adhoc_commands
+                      ? html` <li role="presentation" class="nav-item">
+                            <a
+                                class="nav-link ${el.tab === 'commands' ? 'active' : ''}"
+                                id="commands-tab"
+                                href="#commands-tabpanel"
+                                aria-controls="commands-tabpanel"
+                                role="tab"
+                                data-toggle="tab"
+                                data-name="commands"
+                                @click=${(ev) => el.switchTab(ev)}
+                                >${i18n_commands}</a
+                            >
+                        </li>`
+                      : ''}
+              </ul>`
+            : ''}
     `;
 };
 
+/**
+ * @param {import('../user-settings').default} el
+ */
 export default (el) => {
     const first_subtitle = __(
         '%1$s Open Source %2$s XMPP chat client brought to you by %3$s Opkode %2$s',
@@ -61,19 +77,17 @@ export default (el) => {
 
         <div class="tab-content">
             ${show_client_info
-                ? html` <div
+                ? html`<div
                       class="tab-pane tab-pane--columns ${el.tab === 'about' ? 'active' : ''}"
                       id="about-tabpanel"
                       role="tabpanel"
                       aria-labelledby="about-tab"
                   >
-                      <span class="modal-alert"></span>
-                      <br />
                       <div class="container">
-                          <h6 class="brand-heading">Converse</h6>
-                          <p class="brand-subtitle">${_converse.VERSION_NAME}</p>
-                          <p class="brand-subtitle">${unsafeHTML(DOMPurify.sanitize(first_subtitle))}</p>
-                          <p class="brand-subtitle">${unsafeHTML(DOMPurify.sanitize(second_subtitle))}</p>
+                          <converse-brand-logo class="d-flex justify-content-center mt-3" hide_byline></converse-brand-logo>
+                          <p class="text-center brand-subtitle">${_converse.VERSION_NAME}</p>
+                          <p class="text-center brand-subtitle">${unsafeHTML(DOMPurify.sanitize(first_subtitle))}</p>
+                          <p class="text-center brand-subtitle">${unsafeHTML(DOMPurify.sanitize(second_subtitle))}</p>
                       </div>
                   </div>`
                 : ''}

src/plugins/profile/modals/user-settings.js

@@ -3,6 +3,9 @@ import { __ } from 'i18n';
 import BaseModal from "plugins/modal/modal.js";
 import tplUserSettingsModal from "./templates/user-settings.js";
 
+import './styles/user-settings.scss';
+
+
 export default class UserSettingsModal extends BaseModal {
 
     constructor (options) {
@@ -23,7 +26,7 @@ export default class UserSettingsModal extends BaseModal {
         return tplUserSettingsModal(this);
     }
 
-    getModalTitle () { // eslint-disable-line class-methods-use-this
+    getModalTitle () {
         return __('Settings');
     }
 }

src/shared/components/brand-logo.js

@@ -4,6 +4,18 @@ import { html } from 'lit';
 import 'shared/components/logo.js';
 
 export class ConverseBrandLogo extends CustomElement {
+
+    static get properties() {
+        return {
+            hide_byline: { type: Boolean },
+        };
+    }
+
+    constructor() {
+        super();
+        this.hide_byline = false;
+    }
+
     render() {
         const is_fullscreen = api.settings.get('view_mode') === 'fullscreen';
         return html`
@@ -12,7 +24,7 @@ export class ConverseBrandLogo extends CustomElement {
                     <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
+                        ${is_fullscreen && !this.hide_byline
                             ? html`
                                 <p class="byline">messaging freedom</p>
                             `

src/types/plugins/profile/modals/templates/user-settings.d.ts

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

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

@@ -1,4 +1,10 @@
 export class ConverseBrandLogo extends CustomElement {
+    static get properties(): {
+        hide_byline: {
+            type: BooleanConstructor;
+        };
+    };
+    hide_byline: boolean;
     render(): import("lit-html").TemplateResult<1>;
 }
 import { CustomElement } from './element.js';