From 9df0fb94259ac19d57de0baaa2b22a8e01282d6a Mon Sep 17 00:00:00 2001
From: Dogma <103559271+ArtificialDogma@users.noreply.github.com>
Date: Wed, 17 Apr 2024 23:39:00 +1000
Subject: [PATCH] Updated background colours for menu

- Updated colours to include blur effect
- Looks cool, fight me
---
 frontend/react/src/ui/components/olunitsummary.tsx | 2 +-
 frontend/react/src/ui/panels/components/menu.tsx   | 2 +-
 frontend/react/src/ui/panels/sidebar.tsx           | 2 +-
 frontend/react/src/ui/panels/unitcontrolmenu.tsx   | 2 +-
 frontend/react/src/ui/panels/unitspawnmenu.tsx     | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/react/src/ui/components/olunitsummary.tsx b/frontend/react/src/ui/components/olunitsummary.tsx
index 8f791eb9..7e93e8a4 100644
--- a/frontend/react/src/ui/components/olunitsummary.tsx
+++ b/frontend/react/src/ui/components/olunitsummary.tsx
@@ -6,7 +6,7 @@ export function OlUnitSummary(props: {
     blueprint: UnitBlueprint,
     coalition: Coalition
 }) {
-    return <div data-coalition={props.coalition} className="relative border-l-4 flex flex-col gap-2 p-2 pt-4 pb-4 items-start shadow-lg bg-white dark:bg-olympus-600 data-[coalition='blue']:border-blue-600 data-[coalition='neutral']:border-gray-400 data-[coalition='red']:border-red-500">
+    return <div data-coalition={props.coalition} className="relative border-l-4 flex flex-col gap-2 p-2 pt-4 pb-4 items-start shadow-lg bg-white dark:bg-olympus-200/30 data-[coalition='blue']:border-blue-600 data-[coalition='neutral']:border-gray-400 data-[coalition='red']:border-red-500">
             <div className="flex flex-row gap-2 content-center">
             <img className="object-cover h-7 ml-2 rounded-tl-md invert" src={"images/units/"+props.blueprint.filename} alt="" />  
             <div className="my-auto w-full font-semibold tracking-tight text-gray-900 dark:text-white">{props.blueprint.label}</div>
diff --git a/frontend/react/src/ui/panels/components/menu.tsx b/frontend/react/src/ui/panels/components/menu.tsx
index 3284742e..6d64c7b9 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-olympus-700" 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/95 backdrop-blur-lg" tabIndex={-1}>
 		<h5 className="w-full inline-flex items-center py-3 pb-2 px-5 shadow-lg font-semibold text-gray-800 dark:text-gray-400">
 			{props.showBackButton && <FontAwesomeIcon onClick={props.onBack ?? (() => { })} icon={faArrowLeft} className="mr-1 cursor-pointer p-2 rounded-md dark:hover:bg-gray-700  dark:text-gray-500 dark:hover:text-white"/>} {props.title}
 			<FontAwesomeIcon onClick={props.onClose} icon={faClose} className="flex text-lg items-center cursor-pointer justify-center ml-auto p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-white dark:text-gray-500 "/>
diff --git a/frontend/react/src/ui/panels/sidebar.tsx b/frontend/react/src/ui/panels/sidebar.tsx
index df277211..2639c2c0 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-olympus-800 dark:border-gray-700">
+					<nav className="z-ui-1 h-full bg-gray-300 dark:bg-olympus-800">
 						<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={faEllipsisV}></OlStateButton>
diff --git a/frontend/react/src/ui/panels/unitcontrolmenu.tsx b/frontend/react/src/ui/panels/unitcontrolmenu.tsx
index e24b1194..5ce2e20a 100644
--- a/frontend/react/src/ui/panels/unitcontrolmenu.tsx
+++ b/frontend/react/src/ui/panels/unitcontrolmenu.tsx
@@ -109,7 +109,7 @@ export function UnitControlMenu() {
 		onClose={() => { }}
 	>
 		{/* Units list */}
-		<div className="dark:bg-[#243141] h-fit p-0 flex flex-col gap-0">
+		<div className="dark:bg-olympus-200/30 h-fit p-0 flex flex-col gap-0">
 			<div>
 				{
 					<>
diff --git a/frontend/react/src/ui/panels/unitspawnmenu.tsx b/frontend/react/src/ui/panels/unitspawnmenu.tsx
index d107fe4a..4fcab002 100644
--- a/frontend/react/src/ui/panels/unitspawnmenu.tsx
+++ b/frontend/react/src/ui/panels/unitspawnmenu.tsx
@@ -109,7 +109,7 @@ export function UnitSpawnMenu(props: {
                 </OlDropdown>
             </div>
         </div>
-        <div className="dark:bg-[#243141] h-fit p-4 flex flex-col gap-1">
+        <div className="dark:bg-olympus-200/30 h-fit p-4 flex flex-col gap-1">
             {spawnLoadout && spawnLoadout.items.map((item) => {
                 return <div className="flex gap-2 content-center">
                     <div className="my-auto font-bold text-sm rounded-full text-gray-500 dark:bg-[#17212D] w-6 py-0.5 text-center">{item.quantity}</div>