diff --git a/public/index.html b/public/index.html
index 74060ce..32a6592 100644
--- a/public/index.html
+++ b/public/index.html
@@ -86,7 +86,7 @@
- You can be discovered by everyone on this network
+ You can be discovered by everyone on this network and by paired devices
diff --git a/public/scripts/ui.js b/public/scripts/ui.js
index 1c48f02..9a0f0b9 100644
--- a/public/scripts/ui.js
+++ b/public/scripts/ui.js
@@ -702,7 +702,7 @@ class PairDeviceDialog extends Dialog {
this.$roomKey = this.$el.querySelector('#roomKey');
this.$qrCode = this.$el.querySelector('#roomKeyQrCode');
this.$clearSecretsBtn = $('clear-pair-devices');
- this.$footerInstructions = $$('footer>.font-body2');
+ this.$footerInstructionsPairedDevices = $('and-by-paired-devices');
let createJoinForm = this.$el.querySelector('form');
createJoinForm.addEventListener('submit', _ => this._onSubmit());
@@ -902,10 +902,10 @@ class PairDeviceDialog extends Dialog {
PersistentStorage.getAllRoomSecrets().then(roomSecrets => {
if (roomSecrets.length > 0) {
this.$clearSecretsBtn.removeAttribute('hidden');
- this.$footerInstructions.innerText = "You can be discovered on this network and by paired devices";
+ this.$footerInstructionsPairedDevices.removeAttribute('hidden');
} else {
this.$clearSecretsBtn.setAttribute('hidden', '');
- this.$footerInstructions.innerText = "You can be discovered by everyone on this network";
+ this.$footerInstructionsPairedDevices.setAttribute('hidden', '');
}
}).catch(_ => PersistentStorage.logBrowserNotCapable());
}
diff --git a/public/styles.css b/public/styles.css
index e322446..98b0cdf 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -3,6 +3,7 @@
:root {
--icon-size: 24px;
--primary-color: #4285f4;
+ --paired-device-color: #00a69c;
--peer-width: 120px;
color-scheme: light dark;
}
@@ -288,7 +289,7 @@ x-peer x-icon {
}
x-peer:not(.type-ip) x-icon {
- background: #00a69c;
+ background: var(--paired-device-color);
}
x-peer:not([status]):hover x-icon,
@@ -379,6 +380,15 @@ footer .logo {
footer .font-body2 {
color: var(--primary-color);
+ text-underline-position: under;
+}
+
+#on-this-network {
+ text-decoration: underline solid var(--primary-color) 4px;
+}
+
+#paired-devices {
+ text-decoration: underline solid var(--paired-device-color) 4px;
}
/* Dialog */