Made some UI changes

Author: vrushang1234

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;
 }

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>
 	);

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>
 	);
 }