From 673e576c8bd206f57bd86f30d6d3d7f0da293ebc Mon Sep 17 00:00:00 2001
From: vrushang1234 <vrushanganand20@gmail.com>
Date: Fri, 31 May 2024 16:14:01 -0700
Subject: [PATCH] Made some UI changes

---
 .../src/components/SensorBoxes/Sensors/SensorBox.css      | 4 +++-
 .../src/components/SensorBoxes/Sensors/SensorBox.tsx      | 7 ++++---
 .../components/SensorBoxes/Sensors/SensorsContainer.tsx   | 8 ++++----
 3 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/control-station/src/components/SensorBoxes/Sensors/SensorBox.css b/control-station/src/components/SensorBoxes/Sensors/SensorBox.css
index a16423fc..0f06e7b8 100644
--- a/control-station/src/components/SensorBoxes/Sensors/SensorBox.css
+++ b/control-station/src/components/SensorBoxes/Sensors/SensorBox.css
@@ -5,6 +5,7 @@
 	margin-top: 1%;
 	margin-bottom: 1%;
 	background: #e0e0e0;
+	position: relative;
 }
 .SensorContainer {
 	width: 65vw;
@@ -20,6 +21,7 @@
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	height: 90%;
+	height: auto;
 	font-size: 3rem;
+	position: relative;
 }
diff --git a/control-station/src/components/SensorBoxes/Sensors/SensorBox.tsx b/control-station/src/components/SensorBoxes/Sensors/SensorBox.tsx
index 53891801..e5572c8f 100644
--- a/control-station/src/components/SensorBoxes/Sensors/SensorBox.tsx
+++ b/control-station/src/components/SensorBoxes/Sensors/SensorBox.tsx
@@ -1,13 +1,14 @@
 import "./SensorBox.css";
 
-interface Value {
+interface SensorBoxProps {
+	title: string;
 	value: number;
 }
 
-function SensorBox({ value }: Value) {
+function SensorBox({ title, value }: SensorBoxProps) {
 	return (
 		<div className="sensorbox">
-			<h3 style={{ textAlign: "center", height: "10%" }}>Title</h3>
+			<h3 style={{ textAlign: "center", height: "10%" }}>{title}</h3>
 			<p className="sensor-value">{value}</p>
 		</div>
 	);
diff --git a/control-station/src/components/SensorBoxes/Sensors/SensorsContainer.tsx b/control-station/src/components/SensorBoxes/Sensors/SensorsContainer.tsx
index b36d9d7e..b7dd2837 100644
--- a/control-station/src/components/SensorBoxes/Sensors/SensorsContainer.tsx
+++ b/control-station/src/components/SensorBoxes/Sensors/SensorsContainer.tsx
@@ -6,10 +6,10 @@ function SensorContainer() {
 	const { podData } = useContext(PodContext);
 	return (
 		<div className="SensorContainer">
-			<SensorBox value={podData.gyroscope} />
-			<SensorBox value={podData.wheel_encoder} />
-			<SensorBox value={podData.downstream_pressure_transducer} />
-			<SensorBox value={podData.upstream_pressure_transducer} />
+			<SensorBox title="Speed" value={podData.gyroscope} />
+			<SensorBox title="Distance" value={podData.wheel_encoder} />
+			<SensorBox title="PT1" value={podData.downstream_pressure_transducer} />
+			<SensorBox title="PT2" value={podData.upstream_pressure_transducer} />
 		</div>
 	);
 }