From a7200e4b625675765a97d8f9cad0349e7376985f Mon Sep 17 00:00:00 2001
From: Joona  Kettunen <joona.kettunen21@gmail.com>
Date: Sat, 27 Jan 2024 18:21:30 +0200
Subject: [PATCH] zIndex work

---
 app/calc/connection.tsx                |  5 +++--
 app/calc/latencychange.tsx             |  9 ++++-----
 app/calc/menu.tsx                      |  2 +-
 app/calc/new/newplansettingsclient.tsx | 16 +++++++++-------
 app/calc/toolbar.tsx                   |  2 +-
 5 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/app/calc/connection.tsx b/app/calc/connection.tsx
index 7b61750..e8d9d0d 100644
--- a/app/calc/connection.tsx
+++ b/app/calc/connection.tsx
@@ -92,10 +92,9 @@ const Connection: React.FC<ConnectionProps> = ({
 			<div>
 				{value !== 0 ? (
 					<div className="relative">
-						<div>{arrowElement(status)}</div>
 						{zoom > 2 ? (
 							<div
-								className={`z-99 absolute bg-zinc-900 p-1 rounded-xl top-2/4 left-2/4 -translate-x-2/4 -translate-y-2/4`}
+								className={`z-1 absolute p-1 rounded-xl top-2/4 left-2/4 -translate-x-2/4 -translate-y-2/4 text-neutral-500 font-bold text-5xl`}
 							>
 								{value === 65535 ? "0" : `${value}`}
 							</div>
@@ -117,6 +116,8 @@ const Connection: React.FC<ConnectionProps> = ({
 								{value === 65535 ? "0" : `${value}`}
 							</span>
 						)}
+
+						<div className="z-2">{arrowElement(status)}</div>
 					</div>
 				) : (
 					<></>
diff --git a/app/calc/latencychange.tsx b/app/calc/latencychange.tsx
index 3daf30b..b929678 100644
--- a/app/calc/latencychange.tsx
+++ b/app/calc/latencychange.tsx
@@ -102,7 +102,7 @@ const LatencyChange: React.FC<LatencyChangeProps> = ({
 
 	return (
 		<div className="w-full flex flex-col text-center  max-w-[1080px]">
-			<div className="font-bold text-4xl mb-4">CONFIGURE LATENCY SELECTION</div>
+			<div className="font-bold text-4xl mb-4">CONFIGURE DELAY SELECTION</div>
 			<div className="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-4 gap-4 rounded-lg p-4">
 				<div className="flex flex-col gap-2 border rounded p-2 border-indigo-500">
 					<Button
@@ -146,10 +146,9 @@ const LatencyChange: React.FC<LatencyChangeProps> = ({
 							counts[item] > 1 ? "border-red-500" : "border-neutral-500"
 						}`}
 					>
-						<label
-							className="font-light"
-							htmlFor={`latencyTime${i}`}
-						>{`LATENCY ${i + 1}`}</label>
+						<label className="font-light" htmlFor={`latencyTime${i}`}>{`DELAY ${
+							i + 1
+						}`}</label>
 						<Input
 							value={item}
 							type="number"
diff --git a/app/calc/menu.tsx b/app/calc/menu.tsx
index e5e03fc..fd87a3a 100644
--- a/app/calc/menu.tsx
+++ b/app/calc/menu.tsx
@@ -98,7 +98,7 @@ const Menu: React.FC<MenuProps> = ({
 								setLatencyChangeView(true);
 							}}
 						>
-							Configure Latency Selection
+							Configure Delay Selection
 						</MenubarItem>
 						<MenubarSeparator />
 						<MenubarItem disabled>Analyze</MenubarItem>
diff --git a/app/calc/new/newplansettingsclient.tsx b/app/calc/new/newplansettingsclient.tsx
index d2c06d1..0ce7784 100644
--- a/app/calc/new/newplansettingsclient.tsx
+++ b/app/calc/new/newplansettingsclient.tsx
@@ -74,8 +74,8 @@ const NewPlanSettingsClient = () => {
 						<hr />
 						<div>Enter values between 1 and 32.</div>
 						<div className="flex flex-row gap-4 w-full">
-							<div className="flex flex-col gap-2 p-4 border w-1/2">
-								<label htmlFor="fieldWidth">FIELD WIDTH</label>
+							<div className="flex flex-col gap-2 p-4 border rounded-lg w-1/2">
+								<label htmlFor="fieldWidth">FIELD COLUMN COUNT</label>
 								<Input
 									value={fieldWidth}
 									type="number"
@@ -84,8 +84,8 @@ const NewPlanSettingsClient = () => {
 									onChange={(e) => handleFieldWidthChange(e.target.value)}
 								/>
 							</div>
-							<div className="flex flex-col gap-2 p-4 border w-1/2">
-								<label htmlFor="fieldHeight">FIELD HEIGHT</label>
+							<div className="flex flex-col gap-2 p-4 rounded-lg border w-1/2">
+								<label htmlFor="fieldHeight">FIELD ROW COUNT</label>
 								<Input
 									value={fieldHeight}
 									type="number"
@@ -95,10 +95,12 @@ const NewPlanSettingsClient = () => {
 								/>
 							</div>
 						</div>
-						<div className="text-yellow-500">
-							THE FIELD WIDTH & HEIGHT CANNOT BE ALTERED AFTERWARDS.
+						<div className="text-neutral-500 font-light text-sm">
+							(COLUMNS = X-AXIS AND ROWS = Y-AXIS)
+						</div>
+						<div className="text-yellow-500 border rounded-lg p-2 border-red-500">
+							THE ROW & COLUMN COUNT CANNOT BE ALTERED AFTERWARDS.
 						</div>
-						<hr />
 						<Button variant={"secondary"} onClick={handleNewPlan}>
 							CREATE
 						</Button>
diff --git a/app/calc/toolbar.tsx b/app/calc/toolbar.tsx
index 0c4c150..29eb287 100644
--- a/app/calc/toolbar.tsx
+++ b/app/calc/toolbar.tsx
@@ -51,7 +51,7 @@ const ToolBar: React.FC<ToolBarProps> = ({
 				<p className="font-bold">
 					CONFIGURE
 					<br />
-					LATENCY
+					DELAY
 					<br />
 					SELECTION
 				</p>