From 627c19e550380fd9797d6e76968f2e22a9931ac9 Mon Sep 17 00:00:00 2001
From: Dogma <103559271+ArtificialDogma@users.noreply.github.com>
Date: Tue, 16 Apr 2024 22:13:27 +1000
Subject: [PATCH] Updates to header

- Add Connected message to header
- Updated control panel heading
---
 frontend/react/src/ui/panels/header.tsx          | 9 +++++++--
 frontend/react/src/ui/panels/unitcontrolmenu.tsx | 2 +-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/frontend/react/src/ui/panels/header.tsx b/frontend/react/src/ui/panels/header.tsx
index 43879c54..3ce10562 100644
--- a/frontend/react/src/ui/panels/header.tsx
+++ b/frontend/react/src/ui/panels/header.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import { OlRoundStateButton, OlStateButton, OlLockStateButton } from '../components/olstatebutton';
-import { faLock, faSkull, faCamera, faFlag } from '@fortawesome/free-solid-svg-icons';
+import { faLock, faSkull, faCamera, faFlag, faCircle, faLink } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { EventsConsumer } from '../../eventscontext';
 import { StateConsumer } from '../../statecontext';
 import { OlDropdownItem, OlDropdown } from '../components/oldropdown';
@@ -16,7 +17,11 @@ export function Header() {
 					<nav className="flex w-screen h-[66px] bg-gray-300 border-gray-200 dark:bg-olympus-900 dark:border-gray-700 px-3 z-ui-1">
 						<div className="w-full max-w-full flex flex-nowrap items-center justify-between gap-3 my-auto">
 							<div className="flex flex-row items-center justify-center gap-1 flex-none">
-								<img src="images/icon.png" className='h-10 w-10 p-0 rounded-md mr-2 cursor-pointer'></img>
+								<img src="images/icon.png" className='h-10 w-10 p-0 rounded-md mr-2'></img>
+								<div className="flex flex-col items-start pl-3">
+									<div className="pt-1 text-gray-800 dark:text-gray-200 font-light text-xs">Connected to</div>
+									<div className="flex text-gray-800 dark:text-gray-200 font-bold items-center justify-center">123.45.202.51:4001 <FontAwesomeIcon icon={faLink} className="py-auto px-2 text-green-400 dark:text-green-400" /></div>
+								</div>
 							</div>
 							<div className="ml-auto">
 								<OlLockStateButton checked={false} onClick={() => {}}/>
diff --git a/frontend/react/src/ui/panels/unitcontrolmenu.tsx b/frontend/react/src/ui/panels/unitcontrolmenu.tsx
index 8549334a..e24b1194 100644
--- a/frontend/react/src/ui/panels/unitcontrolmenu.tsx
+++ b/frontend/react/src/ui/panels/unitcontrolmenu.tsx
@@ -105,7 +105,7 @@ export function UnitControlMenu() {
 
 	return <Menu
 		open={open}
-		title="Unit control menu"
+		title="Units selected (x)"
 		onClose={() => { }}
 	>
 		{/* Units list */}