revert visual changes

joonarafael · Jan 28, 2024 · 77c696f · 77c696f
1 parent a7200e4
commit 77c696f
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 39 deletions.
diff --git a/__tests__/newplansettings.test.tsx b/__tests__/newplansettings.test.tsx
@@ -23,15 +23,15 @@ describe("NewPlanSettings", () => {
 	it("should have FIELD WIDTH input", () => {
 		render(<NewPlanSettingsPage />);
 
-		const myElem = screen.getByLabelText("FIELD WIDTH");
+		const myElem = screen.getByLabelText("FIELD COLUMN COUNT");
 
 		expect(myElem).toBeInTheDocument();
 	});
 
 	it("should have FIELD HEIGHT input", () => {
 		render(<NewPlanSettingsPage />);
 
-		const myElem = screen.getByLabelText("FIELD HEIGHT");
+		const myElem = screen.getByLabelText("FIELD ROW COUNT");
 
 		expect(myElem).toBeInTheDocument();
 	});

diff --git a/app/calc/connection.tsx b/app/calc/connection.tsx
@@ -1,15 +1,9 @@
 "use client";
 
 import {
-	TbArrowDownCircle,
-	TbArrowDownLeftCircle,
-	TbArrowDownRightCircle,
-	TbArrowLeftCircle,
-	TbArrowRightCircle,
-	TbArrowUpCircle,
-	TbArrowUpLeftCircle,
-	TbArrowUpRightCircle,
-} from "react-icons/tb";
+    TbArrowDownCircle, TbArrowDownLeftCircle, TbArrowDownRightCircle, TbArrowLeftCircle,
+    TbArrowRightCircle, TbArrowUpCircle, TbArrowUpLeftCircle, TbArrowUpRightCircle
+} from 'react-icons/tb';
 
 interface ConnectionProps {
 	index: number;
@@ -43,7 +37,7 @@ const Connection: React.FC<ConnectionProps> = ({
 			value !== 0 &&
 			tool !== "entry" &&
 			tool !== "borehole" &&
-			"hover:bg-red-300 hover:border cursor-pointer"
+			"hover:border hover:bg-red-300 cursor-pointer"
 		}
 		rounded-2xl`;
 
@@ -54,16 +48,16 @@ const Connection: React.FC<ConnectionProps> = ({
 		size = "text-sm min-w-14 min-h-14";
 		icon = 48;
 	} else if (zoom === 3) {
-		size = "text-sm min-w-20 min-h-20";
+		size = "text-base min-w-20 min-h-20";
 		icon = 78;
 	} else if (zoom === 4) {
-		size = "text-base min-w-24 min-h-24";
+		size = "text-xl min-w-24 min-h-24";
 		icon = 90;
 	} else if (zoom === 5) {
-		size = "text-xl min-w-28 min-h-28";
+		size = "text-2xl min-w-28 min-h-28";
 		icon = 106;
 	} else if (zoom === 6) {
-		size = "text-2xl min-w-36 min-h-36";
+		size = "text-3xl min-w-36 min-h-36";
 		icon = 132;
 	}
 
@@ -92,9 +86,10 @@ const Connection: React.FC<ConnectionProps> = ({
 			<div>
 				{value !== 0 ? (
 					<div className="relative">
+						<div className="z-2">{arrowElement(status)}</div>
 						{zoom > 2 ? (
 							<div
-								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`}
+								className={`z-6 absolute bg-slate-950 px-1 rounded-xl drop-shadow-lg top-2/4 left-2/4 -translate-x-2/4 -translate-y-2/4 font-bold`}
 							>
 								{value === 65535 ? "0" : `${value}`}
 							</div>
@@ -116,8 +111,6 @@ const Connection: React.FC<ConnectionProps> = ({
 								{value === 65535 ? "0" : `${value}`}
 							</span>
 						)}
-
-						<div className="z-2">{arrowElement(status)}</div>
 					</div>
 				) : (
 					<></>

diff --git a/app/calc/menu.tsx b/app/calc/menu.tsx
@@ -188,7 +188,7 @@ const Menu: React.FC<MenuProps> = ({
 						<MenubarItem onClick={zoomMin}>Zoom Minimum</MenubarItem>
 						<MenubarItem onClick={zoomMax}>Zoom Maximum</MenubarItem>
 						<MenubarSeparator />
-						<MenubarItem onClick={zoomDefault}>Reset Zoom</MenubarItem>
+						<MenubarItem onClick={zoomDefault}>Zoom Default</MenubarItem>
 						<MenubarSeparator />
 						<MenubarItem onClick={toggleFullscreen}>
 							Toggle Fullscreen

diff --git a/app/calc/new/newplansettingsclient.tsx b/app/calc/new/newplansettingsclient.tsx
@@ -99,7 +99,7 @@ const NewPlanSettingsClient = () => {
 							(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.
+							THE COUNT OF ROWS & COLUMNS CANNOT BE ALTERED AFTERWARDS.
 						</div>
 						<Button variant={"secondary"} onClick={handleNewPlan}>
 							CREATE

diff --git a/app/calc/toolbar.tsx b/app/calc/toolbar.tsx
@@ -25,9 +25,18 @@ const ToolBar: React.FC<ToolBarProps> = ({
 
 	const commonCSS = `cursor-pointer text-lg hover:pl-4 hover:underline rounded border p-2`;
 
+	const toolList = ["cursor", "entry", "borehole", "eraser"];
+
 	return (
 		<div className="flex flex-col p-2 gap-2 w-full h-[80svh]">
-			<div className="font-light text-neutral-500 text-xs">SELECTED TOOL</div>
+			{toolList.includes(tool) ? (
+				<div className="font-light text-neutral-500 text-xs">SELECTED TOOL</div>
+			) : (
+				<div className="font-light text-neutral-500 text-xs">
+					SELECTED DELAY
+				</div>
+			)}
+
 			<div className="font-bold text-3xl">{tool}</div>
 			<div
 				onClick={toggleIsLinking}
@@ -41,22 +50,6 @@ const ToolBar: React.FC<ToolBarProps> = ({
 				)}
 			</div>
 			<hr />
-			<Button
-				className="h-18"
-				variant={"secondary"}
-				onClick={() => {
-					setLatencyChangeView(true);
-				}}
-			>
-				<p className="font-bold">
-					CONFIGURE
-					<br />
-					DELAY
-					<br />
-					SELECTION
-				</p>
-			</Button>
-			<hr />
 			<div className="font-light text-neutral-500 text-xs">TOOL SELECTION</div>
 			<div className="overflow-y-scroll flex flex-col gap-1 pr-1">
 				<div
@@ -83,8 +76,26 @@ const ToolBar: React.FC<ToolBarProps> = ({
 				>
 					ERASER
 				</div>
-
 				<hr className="my-1" />
+				<Button
+					className="h-18"
+					variant={"secondary"}
+					onClick={() => {
+						setLatencyChangeView(true);
+					}}
+				>
+					<p className="font-bold">
+						CONFIGURE
+						<br />
+						DELAY
+						<br />
+						SELECTION
+					</p>
+				</Button>
+				<hr className="my-1" />
+				<div className="font-light text-neutral-500 text-xs">
+					DELAY SELECTION
+				</div>
 				{latencySelection.map((item, i) => (
 					<div
 						key={i}