From 73bf1da061cf2067edd3ec485d31f3f5c6214c23 Mon Sep 17 00:00:00 2001
From: Dogma <103559271+ArtificialDogma@users.noreply.github.com>
Date: Sun, 14 Apr 2024 23:08:06 +1000
Subject: [PATCH] Updated Panel Colours, Main Menu

- Updated the colours of all panels to match new Olympus values
- Updated button colours and included hover state
- Updated Main Menu
---
 .../react/src/ui/components/olstatebutton.tsx |  2 +-
 .../react/src/ui/panels/components/menu.tsx   |  2 +-
 frontend/react/src/ui/panels/header.tsx       |  2 +-
 frontend/react/src/ui/panels/mainmenu.tsx     | 19 ++++++++++---------
 frontend/react/src/ui/panels/sidebar.tsx      |  2 +-
 5 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/frontend/react/src/ui/components/olstatebutton.tsx b/frontend/react/src/ui/components/olstatebutton.tsx
index d4006778..be89d9c3 100644
--- a/frontend/react/src/ui/components/olstatebutton.tsx
+++ b/frontend/react/src/ui/components/olstatebutton.tsx
@@ -8,7 +8,7 @@ export function OlStateButton(props: {
     icon: IconProp,
     onClick: () => void
 }) {
-    const className = (props.className ?? '') + ` h-[40px] w-[40px] flex-none font-medium rounded-md text-sm dark:bg-[#2A3949] dark:data-[checked='true']:bg-blue-500 dark:text-white dark:border-gray-600 `;
+    const className = (props.className ?? '') + ` h-[40px] w-[40px] flex-none font-medium rounded-md text-md dark:bg-gray-700 dark:hover:bg-gray-600 dark:data-[checked='true']:bg-blue-500 dark:text-white dark:border-gray-600 `;
 
     return <button onClick={props.onClick} data-checked={props.checked} type="button" className={className}>
         <FontAwesomeIcon icon={props.icon} />
diff --git a/frontend/react/src/ui/panels/components/menu.tsx b/frontend/react/src/ui/panels/components/menu.tsx
index 253b6ebb..4daed6c7 100644
--- a/frontend/react/src/ui/panels/components/menu.tsx
+++ b/frontend/react/src/ui/panels/components/menu.tsx
@@ -10,7 +10,7 @@ export function Menu(props: {
 	showBackButton?: boolean,
 	children?: JSX.Element | JSX.Element[],
 }) {
-	return <div data-open={props.open} className="w-[430px] absolute top-[62px] left-16 z-ui-0 h-screen overflow-y-auto transition-transform data-[open='false']:-translate-x-full bg-gray-200 dark:bg-gray-800" tabIndex={-1}>
+	return <div data-open={props.open} className="w-[430px] absolute top-[62px] left-16 z-ui-0 h-screen overflow-y-auto transition-transform data-[open='false']:-translate-x-full bg-gray-200 dark:bg-olympus-700" tabIndex={-1}>
 		<h5 className="w-full inline-flex items-center pb-3 p-4 shadow-lg dark:border-gray-700 text-base font-semibold text-gray-900 dark:text-gray-400">
 			{props.showBackButton && <FontAwesomeIcon onClick={props.onBack ?? (() => { })} icon={faArrowLeft} className="mr-4 cursor-pointer dark:hover:bg-gray-600 p-2 rounded-md" />} {props.title}
 			<button type="button" onClick={props.onClose} className="text-gray-900 dark:text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 flex items-center justify-center dark:hover:bg-gray-600 dark:hover:text-white ml-auto" >
diff --git a/frontend/react/src/ui/panels/header.tsx b/frontend/react/src/ui/panels/header.tsx
index 21c331c5..32f61e44 100644
--- a/frontend/react/src/ui/panels/header.tsx
+++ b/frontend/react/src/ui/panels/header.tsx
@@ -13,7 +13,7 @@ export function Header() {
 		{(appState) =>
 			<EventsConsumer>
 				{(events) =>
-					<nav className="flex w-screen h-[66px] bg-gray-300 border-gray-200 dark:bg-[#171C26] dark:border-gray-700 px-3 z-ui-1">
+					<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>
diff --git a/frontend/react/src/ui/panels/mainmenu.tsx b/frontend/react/src/ui/panels/mainmenu.tsx
index a8c17bc3..63a1b462 100644
--- a/frontend/react/src/ui/panels/mainmenu.tsx
+++ b/frontend/react/src/ui/panels/mainmenu.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { Menu } from "./components/menu";
-import { faCheckCircle, faDatabase, faFileAlt, faFileExport, faFileImport } from '@fortawesome/free-solid-svg-icons';
+import { faArrowRightLong, faCheckCircle, faDatabase, faFileAlt, faFileExport, faFileImport } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { VERSION } from "../../olympusapp";
 import { faGithub } from "@fortawesome/free-brands-svg-icons";
@@ -11,18 +11,19 @@ export function MainMenu(props: {
     children?: JSX.Element | JSX.Element[],
 }) {
     return <Menu
-        title="DCS Olympus"
+        title="DCS Olympus Menu"
         open={props.open}
         showBackButton={false}
         onClose={props.onClose}
     >
-        <div className="flex flex-col p-5 gap-2 text-md font-normal font text-gray-900 dark:text-white">
-            <div className="flex gap-3 p-1 cursor-pointer select-none hover:bg-gray-900/10 dark:hover:bg-white/10 rounded-sm content-center text-green-700 dark:text-[#8BFF63]"><FontAwesomeIcon icon={faCheckCircle} className="my-auto" />Version {VERSION}</div>
-            <div className="flex gap-3 p-1 cursor-pointer select-none hover:bg-gray-900/10 dark:hover:bg-white/10 rounded-sm content-center"><FontAwesomeIcon icon={faGithub} className="my-auto w-4 text-gray-800 dark:text-[#435367]" />Overview</div>
-            <div className="flex gap-3 p-1 cursor-pointer select-none hover:bg-gray-900/10 dark:hover:bg-white/10 rounded-sm content-center"><FontAwesomeIcon icon={faFileAlt} className="my-auto w-4  text-gray-800 dark:text-[#435367]" />User guide</div>
-            <div className="flex gap-3 p-1 cursor-pointer select-none hover:bg-gray-900/10 dark:hover:bg-white/10 rounded-sm content-center"><FontAwesomeIcon icon={faDatabase} className="my-auto w-4 text-gray-800 dark:text-[#435367]" />Database Manager</div>
-            <div className="flex gap-3 p-1 cursor-pointer select-none hover:bg-gray-900/10 dark:hover:bg-white/10 rounded-sm content-center"><FontAwesomeIcon icon={faFileExport} className="my-auto w-4 text-gray-800 dark:text-[#435367]" />Export to file</div>
-            <div className="flex gap-3 p-1 cursor-pointer select-none hover:bg-gray-900/10 dark:hover:bg-white/10 rounded-sm content-center"><FontAwesomeIcon icon={faFileImport} className="my-auto w-4 text-gray-800 dark:text-[#435367]" />Import from file</div>
+        <div className="flex flex-col p-5 gap-1 text-md font-normal font text-gray-900 dark:text-white">
+            <div className="flex gap-3 p-2 select-none rounded-sm content-center text-green-700 dark:text-green-400 font-bold"><FontAwesomeIcon icon={faCheckCircle} className="my-auto" />Version {VERSION}</div>
+            <div className="flex gap-3 p-2 cursor-pointer select-none hover:bg-gray-900/10 dark:hover:bg-gray-700 rounded-sm content-center">{/*<FontAwesomeIcon icon={faGithub} className="my-auto w-4 text-gray-800 dark:text-[#435367]" />*/}View on GitHub<div className="flex items-center ml-auto"><FontAwesomeIcon icon={faArrowRightLong} className="my-auto w-4 text-gray-800 dark:text-olympus-50 text-right" /></div></div>
+            <div className="flex gap-3 p-2 cursor-pointer select-none hover:bg-gray-900/10 dark:hover:bg-white/10 rounded-sm content-center">{/*<FontAwesomeIcon icon={faFileAlt} className="my-auto w-4  text-gray-800 dark:text-[#435367]" />*/}View User Guide<div className="flex items-center ml-auto"><FontAwesomeIcon icon={faArrowRightLong} className="my-auto w-4 text-gray-800 dark:text-olympus-50 text-right" /></div></div>
+            <div className="flex gap-3 p-2 cursor-pointer select-none hover:bg-gray-900/10 dark:hover:bg-white/10 rounded-sm content-center">{/*<FontAwesomeIcon icon={faDatabase} className="my-auto w-4 text-gray-800 dark:text-[#435367]" />*/}Database Manager<div className="flex items-center ml-auto"><FontAwesomeIcon icon={faArrowRightLong} className="my-auto w-4 text-gray-800 dark:text-olympus-50 text-right" /></div></div>
+            <div className="flex gap-3 p-2 cursor-pointer select-none hover:bg-gray-900/10 dark:hover:bg-white/10 rounded-sm content-center">{/*<FontAwesomeIcon icon={faFileExport} className="my-auto w-4 text-gray-800 dark:text-[#435367]" />*/}Export to file<div className="flex items-center ml-auto"><FontAwesomeIcon icon={faArrowRightLong} className="my-auto w-4 text-gray-800 dark:text-olympus-50 text-right" /></div></div>
+            <div className="flex gap-3 p-2 cursor-pointer select-none hover:bg-gray-900/10 dark:hover:bg-white/10 rounded-sm content-center">{/*<FontAwesomeIcon icon={faFileImport} className="my-auto w-4 text-gray-800 dark:text-[#435367]" />*/}Import from file<div className="flex items-center ml-auto"><FontAwesomeIcon icon={faArrowRightLong} className="my-auto w-4 text-gray-800 dark:text-olympus-50 text-right" /></div></div>
+            <div className="flex gap-3 p-2 cursor-pointer select-none hover:bg-gray-900/10 dark:hover:bg-white/10 rounded-sm content-center">{/*<FontAwesomeIcon icon={faFileImport} className="my-auto w-4 text-gray-800 dark:text-[#435367]" />*/}Close Olympus<div className="flex items-center ml-auto"><FontAwesomeIcon icon={faArrowRightLong} className="my-auto w-4 text-gray-800 dark:text-olympus-50 text-right" /></div></div>
         </div>
     </Menu>
 }
\ No newline at end of file
diff --git a/frontend/react/src/ui/panels/sidebar.tsx b/frontend/react/src/ui/panels/sidebar.tsx
index b5d04dad..48b1e5ba 100644
--- a/frontend/react/src/ui/panels/sidebar.tsx
+++ b/frontend/react/src/ui/panels/sidebar.tsx
@@ -9,7 +9,7 @@ export function SideBar() {
 		{(appState) =>
 			<EventsConsumer>
 				{(events) =>
-					<nav className="z-ui-1 h-full bg-gray-300 border-gray-200 dark:bg-[#171C26] dark:border-gray-700">
+					<nav className="z-ui-1 h-full bg-gray-300 border-gray-200 dark:bg-olympus-800 dark:border-gray-700">
 						<div className="flex flex-wrap items-center justify-center p-4 w-16">
 							<div className="flex flex-col items-center justify-center gap-2.5">
 								<OlStateButton onClick={events.toggleMainMenuVisible} checked={appState.mainMenuVisible} icon={faListDots}></OlStateButton>