Made some changes tothe UI

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

Hide file tree

Showing 5 changed files with 14 additions and 7 deletions.
diff --git a/control-station/src/components/ControlPanel/ControlPanel.css b/control-station/src/components/ControlPanel/ControlPanel.css
@@ -5,6 +5,8 @@
 	display: flex;
 	justify-content: space-evenly;
 	align-items: center;
+	position: fixed;
+	bottom: 0;
 }
 
 .button {

diff --git a/control-station/src/components/SensorBoxes/Sensors/SensorsContainer.tsx b/control-station/src/components/SensorBoxes/Sensors/SensorsContainer.tsx
@@ -1,7 +1,7 @@
 import { useContext } from "react";
 import SensorBox from "./SensorBox";
 import PodContext from "@/services/PodContext";
-
+import StatusIndicator from "@/components/StatusIndicator/StatusIndicator";
 function SensorContainer() {
 	const { podData } = useContext(PodContext);
 	return (
@@ -10,6 +10,8 @@ function SensorContainer() {
 			<SensorBox title="Distance" value={podData.wheel_encoder} />
 			<SensorBox title="PT1" value={podData.downstream_pressure_transducer} />
 			<SensorBox title="PT2" value={podData.upstream_pressure_transducer} />
+			<SensorBox title="Lim Current" value={podData.upstream_pressure_transducer} />
+			<StatusIndicator />
 		</div>
 	);
 }

diff --git a/control-station/src/components/StatusIndicator/StatusIndicator.css b/control-station/src/components/StatusIndicator/StatusIndicator.css
@@ -1,12 +1,15 @@
 .status-indicator {
 	background-color: lightgray;
 	border-radius: 10px;
-	padding: 1rem;
-	margin: 2rem;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-around;
 }
 
 .group {
-	margin-bottom: 1rem;
+	margin-bottom: 0.1rem;
+	margin-left: 1rem;
+	width: 40%;
 }
 
 .state-text {

diff --git a/control-station/src/components/StatusIndicator/StatusIndicator.tsx b/control-station/src/components/StatusIndicator/StatusIndicator.tsx
@@ -10,11 +10,12 @@ function StatusIndicator() {
 	const { state } = podData;
 
 	return (
-		<div className="status-indicator">
+		<div className="sensorbox status-indicator" style={{ fontSize: "1rem" }}>
 			{Object.values(State).map((s) => {
 				return (
 					<div key={s} className={`group ${s.toLowerCase()}-state`}>
 						<span className={`circle` + (s === state ? " active" : "")}></span>
+						<br />
 						<div className="state-text">{s}</div>
 					</div>
 				);

diff --git a/control-station/src/views/Dashboard/Dashboard.tsx b/control-station/src/views/Dashboard/Dashboard.tsx
@@ -1,10 +1,9 @@
-import { SensorData, StatusIndicator } from "@/components";
+import { SensorData } from "@/components";
 
 function Dashboard() {
 	return (
 		<div>
 			<SensorData />
-			<StatusIndicator />
 		</div>
 	);
 }