From 89d5ae3a02f8d22b59cfb87108d16bfbff8a9642 Mon Sep 17 00:00:00 2001
From: schlagmichdoch <schlagmichdoch@users.noreply.github.com>
Date: Wed, 8 Feb 2023 04:06:15 +0100
Subject: [PATCH] indicate peer color meaning via underlines

---
 public/index.html    |  2 +-
 public/scripts/ui.js |  6 +++---
 public/styles.css    | 12 +++++++++++-
 3 files changed, 15 insertions(+), 5 deletions(-)

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 @@
             <use xlink:href="#wifi-tethering" />
         </svg>
         <div id="displayName" placeholder="&nbsp;"></div>
-        <div class="font-body2">You can be discovered by everyone on this network</div>
+        <div class="font-body2">You can be discovered by everyone <span id="on-this-network">on this network</span><span id="and-by-paired-devices" hidden> and by <span id="paired-devices">paired devices</span></span></div>
     </footer>
     <!-- Pair Device Dialog -->
     <x-dialog id="pairDeviceDialog">
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 */