Made some UI changes

UCI-HyperXite · May 31, 2024 · 673e576 · 673e576
1 parent d98e34f
commit 673e576
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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>
 	);
 }