Nicer rendering of fingerprint toggles

src/plugins/omemo/index.js

@@ -32,6 +32,8 @@ import {
     setEncryptedFileURL,
 } from './utils.js';
 
+import  './styles/omemo.scss';
+
 const { Strophe } = converse.env;
 const { shouldClearCache } = u;
 

src/plugins/omemo/styles/omemo.scss

@@ -0,0 +1,6 @@
+converse-omemo-fingerprints {
+    .fingerprint {
+        margin-top: 0.5em;
+        display: block;
+    }
+}

src/plugins/omemo/templates/fingerprints.js

@@ -1,25 +1,37 @@
 import { __ } from 'i18n';
 import { html } from 'lit';
 import { formatFingerprint } from '../utils.js';
+import { converse } from '@converse/headless';
 
+const { u } = converse.env;
+
+/**
+ * @param {import('../fingerprints').Fingerprints} el
+ * @param {import('../device').default} device
+ */
 const device_fingerprint = (el, device) => {
     const i18n_trusted = __('Trusted');
     const i18n_untrusted = __('Untrusted');
+    const i18n_toggle_trusted_devices = __('Choose which devices you trust for OMEMO encrypted communication');
+
+    const id1 = u.getUniqueId();
+    const id2 = u.getUniqueId();
+    const is_trusted = device.get('trusted') !== -1;
+
     if (device.get('bundle') && device.get('bundle').fingerprint) {
         return html`
             <li class="list-group-item">
                 <form class="fingerprint-trust">
-                    <div class="btn-group btn-group-toggle">
-                        <label class="btn btn--small ${(device.get('trusted') === 1) ? 'btn-primary active' : 'btn-secondary'}"
-                                @click=${el.toggleDeviceTrust}>
-                            <input type="radio" name="${device.get('id')}" value="1"
-                                ?checked=${device.get('trusted') !== -1}>${i18n_trusted}
-                        </label>
-                        <label class="btn btn--small ${(device.get('trusted') === -1) ? 'btn-primary active' : 'btn-secondary'}"
-                                @click=${el.toggleDeviceTrust}>
-                            <input type="radio" name="${device.get('id')}" value="-1"
-                                ?checked=${device.get('trusted') === -1}>${i18n_untrusted}
-                        </label>
+                    <div class="btn-group btn-group-toggle" role="group" aria-label="${i18n_toggle_trusted_devices}">
+                        <input type="radio" class="btn-check" name="${device.get('id')}" id="${id1}" autocomplete="off" value="1"
+                                @click=${el.toggleDeviceTrust}
+                                ?checked=${is_trusted}>
+                        <label class="btn ${is_trusted ? 'btn-primary active' : 'btn-outline-secondary'}" for="${id1}">${i18n_trusted}</label>
+
+                        <input type="radio" class="btn-check" name="${device.get('id')}" id="${id2}" autocomplete="off" value="-1"
+                                @click=${el.toggleDeviceTrust}
+                                ?checked=${!is_trusted}>
+                        <label class="btn ${!is_trusted ? 'btn-primary active' : 'btn-outline-secondary'}" for="${id2}">${i18n_untrusted}</label>
                     </div>
                     <code class="fingerprint">${formatFingerprint(device.get('bundle').fingerprint)}</code>
                 </form>
@@ -30,6 +42,9 @@ const device_fingerprint = (el, device) => {
     }
 }
 
+/**
+ * @param {import('../fingerprints').Fingerprints} el
+ */
 export default (el) => {
     const i18n_fingerprints = __('OMEMO Fingerprints');
     const i18n_no_devices = __("No OMEMO-enabled devices found");

src/shared/modals/templates/user-details.js

@@ -4,6 +4,9 @@ import { api } from "@converse/headless";
 import { html } from 'lit';
 import { modal_close_button } from "plugins/modal/templates/buttons.js";
 
+/**
+ * @param {import('../user-details').default} el
+ */
 const remove_button = (el) => {
     const i18n_remove_contact = __('Remove as contact');
     return html`
@@ -17,6 +20,9 @@ const remove_button = (el) => {
     `;
 }
 
+/**
+ * @param {import('../user-details').default} el
+ */
 export const tplFooter = (el) => {
     const is_roster_contact = el.model.contact !== undefined;
     const i18n_refresh = __('Refresh');
@@ -36,6 +42,9 @@ export const tplFooter = (el) => {
 }
 
 
+/**
+ * @param {import('../user-details').default} el
+ */
 export const tplUserDetailsModal = (el) => {
     const vcard = el.model?.vcard;
     const vcard_json = vcard ? vcard.toJSON() : {};

src/shared/modals/user-details.js

@@ -1,11 +1,11 @@
 /**
  * @typedef {import('@converse/headless').ChatBox} ChatBox
  */
-import BaseModal from "plugins/modal/modal.js";
-import { tplUserDetailsModal, tplFooter } from "./templates/user-details.js";
-import { __ } from 'i18n';
 import { api, converse, log } from "@converse/headless";
 import { removeContact } from 'plugins/rosterview/utils.js';
+import BaseModal from "plugins/modal/modal.js";
+import { __ } from 'i18n';
+import { tplUserDetailsModal, tplFooter } from "./templates/user-details.js";
 
 const u = converse.env.utils;
 

src/shared/styles/buttons.scss

@@ -2,6 +2,8 @@
     --button-text-color: var(--background-color);
 
     .btn {
+        --converse-btn-active-color: var(--background-color) !important;
+
         &.fa {
             color: var(--button-text-color) !important;
         }
@@ -25,86 +27,122 @@
 
     .btn-primary,
     .btn-outline-primary {
-        --converse-btn-color: var(--button-text-color);
-        --converse-btn-bg: var(--primary-color);
-        --converse-btn-disabled-bg: var(--disabled-color);
-        --converse-btn-border-color: var(--primary-color);
-        --converse-btn-hover-bg: var(--primary-color);
-        --converse-btn-hover-border-color: var(--primary-color-hover);
         --converse-btn-active-bg: var(--primary-color);
         --converse-btn-active-border-color: var(--primary-color);
-        --converse-btn-disabled-color: var(--primary-color);
+        --converse-btn-border-color: var(--primary-color);
+        --converse-btn-disabled-bg: var(--disabled-color);
         --converse-btn-disabled-border-color: var(--primary-color);
+        --converse-btn-disabled-color: var(--primary-color);
+        --converse-btn-hover-bg: var(--primary-color);
+        --converse-btn-hover-border-color: var(--primary-color-hover);
+    }
+    .btn-primary {
+        --converse-btn-color: var(--button-text-color);
+        --converse-btn-bg: var(--primary-color);
+    }
+    .btn-outline-primary {
+        --converse-btn-color: var(--primary-color);
+        --converse-btn-bg: var(--background);
     }
 
     .btn-secondary,
     .btn-outline-secondary {
-        --converse-btn-color: var(--button-text-color);
-        --converse-btn-bg: var(--secondary-color);
-        --converse-btn-disabled-bg: var(--disabled-color);
-        --converse-btn-border-color: var(--secondary-color);
-        --converse-btn-hover-bg: var(--secondary-color);
-        --converse-btn-hover-border-color: var(--secondary-color-hover);
         --converse-btn-active-bg: var(--secondary-color);
         --converse-btn-active-border-color: var(--secondary-color);
-        --converse-btn-disabled-color: var(--secondary-color);
+        --converse-btn-border-color: var(--secondary-color);
+        --converse-btn-disabled-bg: var(--disabled-color);
         --converse-btn-disabled-border-color: var(--secondary-color);
+        --converse-btn-disabled-color: var(--secondary-color);
+        --converse-btn-hover-bg: var(--secondary-color);
+        --converse-btn-hover-border-color: var(--secondary-color-hover);
+    }
+    .btn-secondary {
+        --converse-btn-color: var(--button-text-color);
+        --converse-btn-bg: var(--secondary-color);
+    }
+    .btn-outline-secondary {
+        --converse-btn-color: var(--secondary-color);
+        --converse-btn-bg: var(--background);
     }
 
     .btn-success,
     .btn-outline-success {
-        --converse-btn-color: var(--button-text-color);
-        --converse-btn-bg: var(--success-color);
-        --converse-btn-disabled-bg: var(--disabled-color);
-        --converse-btn-border-color: var(--success-color);
-        --converse-btn-hover-bg: var(--success-color-hover);
-        --converse-btn-hover-border-color: var(--success-color-hover);
         --converse-btn-active-bg: var(--success-color);
         --converse-btn-active-border-color: var(--success-color);
-        --converse-btn-disabled-color: var(--success-color);
+        --converse-btn-border-color: var(--success-color);
+        --converse-btn-disabled-bg: var(--disabled-color);
         --converse-btn-disabled-border-color: var(--success-color);
+        --converse-btn-disabled-color: var(--success-color);
+        --converse-btn-hover-bg: var(--success-color-hover);
+        --converse-btn-hover-border-color: var(--success-color-hover);
+    }
+    .btn-success {
+        --converse-btn-color: var(--button-text-color);
+        --converse-btn-bg: var(--success-color);
+    }
+    .btn-outline-success {
+        --converse-btn-color: var(--success-color);
+        --converse-btn-bg: var(--background);
     }
 
     .btn-warning,
     .btn-outline-warning {
-        --converse-btn-color: var(--button-text-color);
-        --converse-btn-bg: var(--warning-color);
-        --converse-btn-disabled-bg: var(--disabled-color);
-        --converse-btn-border-color: var(--warning-color);
-        --converse-btn-hover-bg: var(--warning-color-hover);
-        --converse-btn-hover-border-color: var(--warning-color-hover);
         --converse-btn-active-bg: var(--warning-color);
         --converse-btn-active-border-color: var(--warning-color);
-        --converse-btn-disabled-color: var(--warning-color);
+        --converse-btn-border-color: var(--warning-color);
+        --converse-btn-disabled-bg: var(--disabled-color);
         --converse-btn-disabled-border-color: var(--warning-color);
+        --converse-btn-disabled-color: var(--warning-color);
+        --converse-btn-hover-bg: var(--warning-color-hover);
+        --converse-btn-hover-border-color: var(--warning-color-hover);
+    }
+    .btn-warning {
+        --converse-btn-color: var(--button-text-color);
+        --converse-btn-bg: var(--warning-color);
+    }
+    .btn-outline-warning {
+        --converse-btn-color: var(--warning-color);
+        --converse-btn-bg: var(--background);
     }
 
     .btn-danger,
     .btn-outline-danger {
-        --converse-btn-color: var(--button-text-color);
-        --converse-btn-bg: var(--danger-color);
-        --converse-btn-disabled-bg: var(--disabled-color);
-        --converse-btn-border-color: var(--danger-color);
-        --converse-btn-hover-bg: var(--danger-color-hover);
-        --converse-btn-hover-border-color: var(--danger-color-hover);
         --converse-btn-active-bg: var(--danger-color);
         --converse-btn-active-border-color: var(--danger-color);
-        --converse-btn-disabled-color: var(--danger-color);
+        --converse-btn-border-color: var(--danger-color);
+        --converse-btn-disabled-bg: var(--disabled-color);
         --converse-btn-disabled-border-color: var(--danger-color);
+        --converse-btn-disabled-color: var(--danger-color);
+        --converse-btn-hover-bg: var(--danger-color-hover);
+        --converse-btn-hover-border-color: var(--danger-color-hover);
+    }
+    .btn-danger {
+        --converse-btn-color: var(--button-text-color);
+        --converse-btn-bg: var(--danger-color);
+    }
+    .btn-outline-danger {
+        --converse-btn-color: var(--danger-color);
+        --converse-btn-bg: var(--background);
     }
 
     .btn-info,
     .btn-outline-info {
-        --converse-btn-color: var(--button-text-color);
-        --converse-btn-bg: var(--info-color);
-        --converse-btn-disabled-bg: var(--disabled-color);
-        --converse-btn-border-color: var(--info-color);
-        --converse-btn-hover-bg: var(--info-color-dark);
-        --converse-btn-hover-border-color: var(--info-color-dark);
         --converse-btn-active-bg: var(--info-color);
         --converse-btn-active-border-color: var(--info-color);
-        --converse-btn-disabled-color: var(--info-color);
+        --converse-btn-border-color: var(--info-color);
+        --converse-btn-disabled-bg: var(--disabled-color);
         --converse-btn-disabled-border-color: var(--info-color);
+        --converse-btn-disabled-color: var(--info-color);
+        --converse-btn-hover-bg: var(--info-color-dark);
+        --converse-btn-hover-border-color: var(--info-color-dark);
+    }
+    .btn-info {
+        --converse-btn-color: var(--button-text-color);
+        --converse-btn-bg: var(--info-color);
+    }
+    .btn-outline-info {
+        --converse-btn-color: var(--info-color);
+        --converse-btn-bg: var(--background);
     }
 
     .btn--transparent {

src/shared/styles/themes/dracula.scss

@@ -26,7 +26,13 @@
     --danger-color: var(--pink);
     --warning-color: var(--orange);
     --info-color: var(--yellow);
-    --converse-highlight-color: var(--yellow);
+    --converse-highlight-color: var(--yellow) !important;
+    .list-group-item {
+        --converse-list-group-color: var(--foreground-color);
+        &.active {
+            --converse-list-group-active-color: var(--background-color) !important;
+        }
+    }
 
     // Online status indicators
     --chat-status-away: var(--orange);

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

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

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

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