Styled the connection panel; tweaked the app-logic to allow UI to decide presentation.

client/public/stylesheets/layout.css

@@ -63,6 +63,7 @@ body.feature-forceShowUnitControlPanel #unit-control-panel {
 }
 
 dl.data-grid {
+	align-items: center;
 	display:flex;
 	flex-direction: row;
 	flex-wrap: wrap;
@@ -71,11 +72,11 @@ dl.data-grid {
 }
 
 dl.data-grid dt {
-	width:40%;
+	width:60%;
 }
 
 dl.data-grid dd {
-	width:60%;
+	width:40%;
 }
 
 
@@ -138,13 +139,35 @@ dl.data-grid dd {
 
 #connection-status-panel {
 	bottom: 20px;
-	height: 30px;
+	font-size:12px;
 	position: absolute;
 	right: 10px;
 	width: 160px;
 	z-index: 1000;
 }
 
+#connection-status-panel dt::before {
+	content: "No connection";
+}
+
+#connection-status-panel dd::after {
+	border-radius: 50%;
+	background: red;
+	content: " ";
+	height:12px;
+	width:12px;
+}
+
+
+#connection-status-panel[data-is-connected] dt::before {
+	content: "Connected";
+}
+
+#connection-status-panel[data-is-connected] dd::after {
+	background:var( --accent-green );
+}
+
+
 #mouse-info-panel {
 	bottom: 60px;
 	height: fit-content;

client/src/panels/connectionstatuspanel.ts

@@ -6,18 +6,6 @@ export class ConnectionStatusPanel extends Panel {
     }
 
     update(connected: boolean) {
-        var div = this.getElement().querySelector("#status-string");
-        if (div != null) {
-            if (connected) {
-                div.innerHTML = "Connected";
-                div.classList.add("ol-status-connected");
-                div.classList.remove("ol-status-disconnected");
-            }
-            else {
-                div.innerHTML = "Disconnected";
-                div.classList.add("ol-status-disconnected");
-                div.classList.remove("ol-status-connected");
-            }
-        }
+        this.getElement().toggleAttribute( "data-is-connected", connected );
     }
 }

client/views/connectionstatuspanel.ejs

@@ -1,3 +1,6 @@
 <div id="connection-status-panel" class="ol-panel">
-    <h4 id="status-string"> Connected </h4>
+    <dl class="data-grid">
+        <dt></dt>
+        <dd></dd>
+    </dl>
 </div>