Styled units in info control panel.

client/public/stylesheets/layout.css

@@ -58,6 +58,36 @@ body.feature-forceShowUnitControlPanel #unit-control-panel {
 	display:block !important;
 }
 
+#unit-control-panel #selected-units-container {
+	align-items: center;
+	border-radius: var( --border-radius-md );
+	display:flex;
+	flex-direction: column;
+	row-gap: 4px;
+}
+
+#unit-control-panel #selected-units-container button {
+	font-size: 12px;
+	padding:8px 0;
+	position: relative;
+	width:90%;
+}
+
+#unit-control-panel #selected-units-container button::before {
+	background-color: var( --accent-light-blue );
+	border-radius: var( --border-radius-sm );
+	content: attr( data-short-label );
+	padding:4px;
+	position: absolute;
+	translate:-40px -4px;
+}
+
+#unit-control-panel #selected-units-container button::after {
+	content: attr( data-callsign );
+}
+
+
+
 dl.data-grid {
 	align-items: center;
 	display:flex;

client/public/stylesheets/olympus.css

@@ -392,6 +392,7 @@ nav.ol-panel> :last-child {
 
 .highlight-coalition[data-coalition="red"], .highlight-redfor {
     background-color: var(--primary-red);
+    color: white;
 }
 
 

client/src/panels/unitcontrolpanel.ts

@@ -69,6 +69,12 @@ export class UnitControlPanel extends Panel {
             {
                 var button = document.createElement("button");
                 button.innerText = unit.getBaseData().unitName;
+                button.setAttribute( "data-short-label", unit.getBaseData().name );
+                button.classList.add( "pill", "highlight-coalition" )
+                
+                //  TODO: make this dynamic, Mr. Weltro.
+                button.setAttribute( "data-coalition", "blue" );
+
                 button.addEventListener("click", () => getUnitsManager().selectUnit(unit.ID, true));
                 return (button);
             }));

client/views/unitcontrolpanel.ejs

@@ -15,6 +15,7 @@
 
         <div id="selected-units-container" class="ol-scroll">
             <!-- This is where all the unit selection buttons will be shown-->
+            <button class="pill highlight-coalition" data-coalition="blue" data-short-label="18">Olympus 1-1</button>
         </div>
 
         <div id="flight-data">