improve visibility of network status

adding text 'NETWORK OFFLINE' in red when the network is offline

Author: FreekBes

client/uis/infobars.ts

@@ -46,9 +46,9 @@ export class InfoBarsUI {
 		setInterval(() => this._updateClock(), 1000);
 
 		// Populate network icon
-		this._infoElements.networkIcon.innerHTML = (navigator.onLine ? '🖧' : ''); // Either "three-networked-computers" unicode symbol or nothing
-		window.addEventListener('online', () => this._infoElements.networkIcon.innerHTML = '🖧');
-		window.addEventListener('offline', () => this._infoElements.networkIcon.innerHTML = '');
+		this._infoElements.networkIcon.classList.toggle("offline", !navigator.onLine);
+		window.addEventListener("online", () => this._infoElements.networkIcon.classList.remove("offline"));
+		window.addEventListener("offline", () => this._infoElements.networkIcon.classList.add("offline"));
 	}
 
 	private _updateClock(): void {

static/css/styles.css

@@ -117,6 +117,20 @@ footer span {
 	margin: 0 var(--padding);
 }
 
+/*
+header span.info-network-icon::after {
+	content: ' ONLINE';
+}
+*/
+
+header span.info-network-icon.offline {
+	color: var(--color-text-error);
+}
+
+header span.info-network-icon.offline::after {
+	content: ' COMPUTER OFFLINE';
+}
+
 #info-debug {
 	color: var(--color-text-error);
 }