From 4b431a7f90e30e04727b75716a8f81a1ab85c4a4 Mon Sep 17 00:00:00 2001
From: Dogma <103559271+ArtificialDogma@users.noreply.github.com>
Date: Mon, 15 Apr 2024 22:50:18 +1000
Subject: [PATCH] Various UI Tweaks

- Various UI Tweaks
- Added hover states to many components
---
 frontend/react/src/ui/components/olaccordion.tsx     | 6 +++---
 frontend/react/src/ui/components/ollabeltoggle.tsx   | 2 +-
 frontend/react/src/ui/components/olnumberinput.tsx   | 2 +-
 frontend/react/src/ui/components/olsearchbar.tsx     | 4 ++--
 frontend/react/src/ui/components/olstatebutton.tsx   | 4 ++--
 frontend/react/src/ui/components/olunitlistentry.tsx | 4 ++--
 frontend/react/src/ui/panels/spawnmenu.tsx           | 2 +-
 frontend/react/src/ui/panels/unitcontrolmenu.tsx     | 4 ++--
 frontend/react/src/ui/panels/unitspawnmenu.tsx       | 2 +-
 9 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/frontend/react/src/ui/components/olaccordion.tsx b/frontend/react/src/ui/components/olaccordion.tsx
index 95d6d154..e58a1826 100644
--- a/frontend/react/src/ui/components/olaccordion.tsx
+++ b/frontend/react/src/ui/components/olaccordion.tsx
@@ -24,9 +24,9 @@ export function OlAccordion(props: {
 
 	return <div className="bg-white dark:bg-transparent text-gray-900 dark:text-white">
 		<h3>
-			<button type="button" onClick={() => setOpen(!open)} className="flex items-center justify-between w-full py-2 font-medium rtl:text-right text-gray-700 border-gray-200 dark:border-gray-700 dark:text-gray-300 gap-3">
-				<span>{props.title}</span>
-				<svg data-open={open} className="w-3 h-3 -rotate-180 data-[open='false']:-rotate-90 shrink-0 transition-transform" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
+			<button type="button" onClick={() => setOpen(!open)} className="flex items-center justify-between w-full py-2 rtl:text-right text-gray-700 border-gray-200 dark:border-gray-700 dark:text-white gap-3 hover:dark:underline hover:dark:underline-offset-4 hover:dark:underline-gray-700">
+				<span className="font-normal">{props.title}</span>
+				<svg data-open={open} className="w-3 h-3 dark:text-olympus-50 -rotate-180 data-[open='false']:-rotate-90 shrink-0 transition-transform" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
 					<path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5 5 1 1 5" />
 				</svg>
 			</button>
diff --git a/frontend/react/src/ui/components/ollabeltoggle.tsx b/frontend/react/src/ui/components/ollabeltoggle.tsx
index 7a314634..fef9317e 100644
--- a/frontend/react/src/ui/components/ollabeltoggle.tsx
+++ b/frontend/react/src/ui/components/ollabeltoggle.tsx
@@ -6,7 +6,7 @@ export function OlLabelToggle(props: {
     rightLabel: string,
     onClick: () => void
 }) {
-    return <button onClick={props.onClick} className="border dark:border-gray-600 relative text-sm flex flex-row flex-none my-auto contents-center justify-between w-[120px] h-10 border dark:border-transparent dark:bg-gray-700 rounded-md py-[5px] px-1 select-none cursor-pointer focus:ring-2 focus:outline-none focus:ring-blue-300 dark:hover:bg-gray-600 dark:focus:ring-blue-800">
+    return <button onClick={props.onClick} className="border dark:border-gray-600 relative text-sm flex flex-row flex-none  contents-center justify-between w-[120px] h-10 border dark:border-transparent dark:bg-gray-700 rounded-md py-[5px] px-1 select-none cursor-pointer focus:ring-2 focus:outline-none focus:ring-blue-300 dark:hover:bg-gray-600 dark:focus:ring-blue-800">
         <span data-flash={props.toggled === undefined} data-toggled={props.toggled ?? false} className="data-[flash='true']:animate-pulse absolute my-auto h-[28px] w-[54px] bg-blue-500 rounded-md data-[toggled='true']:translate-x-14 transition-transform"></span>
         <span data-active={!(props.toggled ?? false)} className="my-auto dark:data-[active='true']:text-white font-normal dark:data-[active='false']:text-gray-400 dark:data-[active='false']:text-gray-400 pl-3 z-ui-2 transition-colors">{props.leftLabel}</span>
         <span data-active={props.toggled ?? false} className="my-auto dark:data-[active='true']:text-white font-normal dark:data-[active='false']:text-gray-400 pr-3.5 z-ui-2 transition-colors">{props.rightLabel}</span>
diff --git a/frontend/react/src/ui/components/olnumberinput.tsx b/frontend/react/src/ui/components/olnumberinput.tsx
index 25089d44..e71f4fcf 100644
--- a/frontend/react/src/ui/components/olnumberinput.tsx
+++ b/frontend/react/src/ui/components/olnumberinput.tsx
@@ -15,7 +15,7 @@ export function OlNumberInput(props: {
                     <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M1 1h16"/>
                 </svg>
             </button>
-            <input type="text" onChange={props.onChange} min={props.min} max={props.max} className="bg-gray-50 h-10 text-center text-gray-900 text-sm focus:ring-blue-500 focus:border-blue-700 block w-full py-2.5 border dark:border-gray-700 dark:bg-olympus-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-700 dark:focus:border-blue-700" value={"x" + props.value} />
+            <input type="text" onChange={props.onChange} min={props.min} max={props.max} className="bg-gray-50 h-10 text-center text-gray-900 text-sm focus:ring-blue-500 focus:border-blue-700 block w-full py-2.5 border-[2px] dark:border-gray-700 dark:bg-olympus-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-700 dark:focus:border-blue-700" value={"x" + props.value} />
             <button type="button" onClick={props.onIncrease}  className="bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 hover:bg-gray-200 rounded-e-lg p-3 h-10 focus:ring-gray-100 dark:focus:ring-blue-500 focus:ring-2 focus:outline-none">
                 <svg className="w-3 h-3 text-gray-900 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
                     <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 1v16M1 9h16"/>
diff --git a/frontend/react/src/ui/components/olsearchbar.tsx b/frontend/react/src/ui/components/olsearchbar.tsx
index b264a776..852bb36e 100644
--- a/frontend/react/src/ui/components/olsearchbar.tsx
+++ b/frontend/react/src/ui/components/olsearchbar.tsx
@@ -15,10 +15,10 @@ export function OlSearchBar(props: {
     return <div>
         <label htmlFor={searchId} className="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">Search</label>
         <div className="relative">
-            <div className="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
+            <div className="absolute inset-y-0 start-0 flex items-center ps-4 pointer-events-none">
                 <FontAwesomeIcon icon={faSearch} className="dark:text-gray-400" />
             </div>
-            <input type="search" ref={inputRef} id={searchId} onChange= {props.onChange} className="block w-full p-3 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Search" required />
+            <input type="search" ref={inputRef} id={searchId} onChange= {props.onChange} className="block w-full p-3 mb-2 ps-10 text-sm text-gray-900 border border-gray-300 rounded-full bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Search" required />
             <FontAwesomeIcon icon={faMultiply} className="absolute cursor-pointer end-4 bottom-4 my-auto dark:text-gray-400 text-sm" onClick={resetSearch}/>
         </div>
     </div>
diff --git a/frontend/react/src/ui/components/olstatebutton.tsx b/frontend/react/src/ui/components/olstatebutton.tsx
index b870eaa7..6437b6e1 100644
--- a/frontend/react/src/ui/components/olstatebutton.tsx
+++ b/frontend/react/src/ui/components/olstatebutton.tsx
@@ -22,7 +22,7 @@ export function OlRoundStateButton(props: {
     icon: IconProp,
     onClick: () => void
 }) {
-    const className = (props.className ?? '') + ` h-8 w-8 flex-none m-auto border-2 border-gray-900 font-medium rounded-full text-sm dark:bg-[transparent] dark:data-[checked='true']:bg-white dark:text-gray-400 dark:data-[checked='true']:text-gray-900 dark:data-[checked='true']:border-white dark:border-gray-400 `;
+    const className = (props.className ?? '') + ` h-8 w-8 flex-none m-auto border-2 border-gray-900 font-medium rounded-full text-sm dark:bg-[transparent] dark:data-[checked='true']:bg-white dark:text-gray-400 dark:data-[checked='true']:text-gray-900 dark:data-[checked='true']:border-white dark:border-gray-400 dark:data-[checked='true']:hover:bg-gray-200 dark:data-[checked='true']:hover:border-gray-200 dark:hover:bg-gray-800`;
 
     return <button onClick={props.onClick} data-checked={props.checked} type="button" className={className}>
         <FontAwesomeIcon className="pt-[3px]" icon={props.icon} />
@@ -34,7 +34,7 @@ export function OlLockStateButton(props: {
     checked: boolean,
     onClick: () => void
 }) {
-    const className = (props.className ?? '') + ` h-8 w-8 flex-none m-auto border-gray-900 font-medium rounded-full text-sm dark:bg-red-500 dark:data-[checked='true']:bg-green-500 dark:text-olympus-900 dark:data-[checked='true']:text-green-900`;
+    const className = (props.className ?? '') + ` h-8 w-8 flex-none m-auto border-gray-900 font-medium rounded-full text-sm dark:bg-red-500 dark:data-[checked='true']:bg-green-500 dark:text-olympus-900 dark:data-[checked='true']:text-green-900 dark:data-[checked='true']:hover:bg-green-400 dark:hover:bg-red-400`;
 
     return <button onClick={props.onClick} data-checked={props.checked} type="button" className={className}>
         <FontAwesomeIcon className="pt-[3px]" icon={props.checked==true ? faUnlockAlt:faLock} />
diff --git a/frontend/react/src/ui/components/olunitlistentry.tsx b/frontend/react/src/ui/components/olunitlistentry.tsx
index aecf148d..b4b3f209 100644
--- a/frontend/react/src/ui/components/olunitlistentry.tsx
+++ b/frontend/react/src/ui/components/olunitlistentry.tsx
@@ -8,10 +8,10 @@ export function OlUnitEntryList(props: {
     blueprint: UnitBlueprint,
     onClick: () => void
 }) {
-    return <div onClick={props.onClick} className="relative text-sm cursor-pointer select-none flex justify-between items-center dark:text-gray-300 dark:hover:bg-white dark:hover:bg-opacity-10 px-2 py-1 rounded-sm mr-2">
+    return <div onClick={props.onClick} className="relative text-sm cursor-pointer select-none flex justify-between items-center dark:text-gray-300 dark:hover:bg-white dark:hover:bg-opacity-10 px-2 py-1 rounded-md mr-2">
         <FontAwesomeIcon icon={props.icon} className="text-sm"></FontAwesomeIcon>
         <div className="font-normal text-left flex-1 px-2">{props.blueprint.label}</div>
-        <div className="bg-black bg-opacity-20 dark:text-gray-400 rounded-full px-2 py-0.5 text-xs">{props.blueprint.era === "WW2" ? "WW2" : props.blueprint.era.split(" ").map((word) => {
+        <div className="font-bold bg-olympus-800 dark:text-olympus-50 rounded-full px-2 py-0.5 text-xs">{props.blueprint.era === "WW2" ? "WW2" : props.blueprint.era.split(" ").map((word) => {
             return word.charAt(0).toLocaleUpperCase();
         })}</div>
     </div>
diff --git a/frontend/react/src/ui/panels/spawnmenu.tsx b/frontend/react/src/ui/panels/spawnmenu.tsx
index e5441c56..e9e67586 100644
--- a/frontend/react/src/ui/panels/spawnmenu.tsx
+++ b/frontend/react/src/ui/panels/spawnmenu.tsx
@@ -66,7 +66,7 @@ export function SpawnMenu(props: {
 		<>
 			{(blueprint === null) && <div className="p-5">
 				<OlSearchBar onChange={(ev) => setFilterString(ev.target.value)}/>
-				<OlAccordion title={`Aircrafts`}>
+				<OlAccordion title={`Aircraft`}>
 					<div className="flex flex-col gap-1 max-h-80 overflow-y-scroll">
 						{Object.keys(filteredAircraft).map((key) => {
 							const blueprint = getApp().getAircraftDatabase().blueprints[key];
diff --git a/frontend/react/src/ui/panels/unitcontrolmenu.tsx b/frontend/react/src/ui/panels/unitcontrolmenu.tsx
index 3c7361a5..ee0bada8 100644
--- a/frontend/react/src/ui/panels/unitcontrolmenu.tsx
+++ b/frontend/react/src/ui/panels/unitcontrolmenu.tsx
@@ -134,7 +134,7 @@ export function UnitControlMenu() {
 		<div className="p-5 flex flex-col gap-5">
 			{/* Altitude selector */
 				selectedCategories.every((category) => { return ['Aircraft', 'Helicopter'].includes(category) }) && <div>
-					<div className="flex flex-row content-center justify-between">
+					<div className="flex flex-row content-center items-center justify-between">
 						<div className="flex flex-col">
 							<span className="font-normal dark:text-white">Altitude</span>
 							<span
@@ -175,7 +175,7 @@ export function UnitControlMenu() {
 			}
 			{/* Airspeed selector */}
 			<div>
-				<div className="flex flex-row content-center justify-between">
+				<div className="flex flex-row content-center items-center justify-between">
 					<div className="flex flex-col">
 						<span className="font-normal dark:text-white">Speed</span>
 						<span
diff --git a/frontend/react/src/ui/panels/unitspawnmenu.tsx b/frontend/react/src/ui/panels/unitspawnmenu.tsx
index 9d50c527..d107fe4a 100644
--- a/frontend/react/src/ui/panels/unitspawnmenu.tsx
+++ b/frontend/react/src/ui/panels/unitspawnmenu.tsx
@@ -69,7 +69,7 @@ export function UnitSpawnMenu(props: {
                 />
             </div>
             <div>
-                <div className="flex flex-row content-center justify-between">
+                <div className="flex flex-row content-center items-center justify-between">
                     <div className="flex flex-col">
                         <span className="font-normal dark:text-white">Altitude</span>
                         <span className="font-bold dark:text-blue-500">{`${Intl.NumberFormat("en-US").format(spawnAltitude)} FT`}</span>