Merge pull request #46 from BYU-PCCL/bus-bunching-bug-fix

fixed some css on control view
BYU-PCCL · Oct 15, 2024 · b7811be · b7811be
2 parents 0664f61 + d440940
commit b7811be
Showing 1 changed file with 20 additions and 13 deletions.
diff --git a/experiences/bus-bunching/controls/lib/index.js b/experiences/bus-bunching/controls/lib/index.js
@@ -22,24 +22,31 @@ const sectionWrapperStyle = {
 };
 
 const buttonWrapperStyle = {
-  width: "100%",
   display: "grid",
-  gridTemplateColumns: "repeat(5, 17%)",
-  gridTemplateRows: "repeat(4, 100%)",
-  gap: "3%",
-  alignItems: "center",
-  justifyContent: "center",
-  Height: "auto",
+  gap: "10px",
+  gridTemplateColumns: "repeat(5, minmax(70px, 1fr))",
 };
 
 const buttonStyle = {
+  position: "relative",
   width: "100%",
-  aspectRatio: "1 / 1",
-  borderRadius: "100%",
-  fontSize: "200%",
+  paddingTop: "100%",
+  borderRadius: "50%",
+};
+
+const contentStyle = {
+  position: "absolute",
+  top: "0",
+  left: "0",
+  right: "0",
+  bottom: "0",
+  display: "flex",
   alignItems: "center",
   justifyContent: "center",
-};
+  color: "white",
+  fontSize: "500%",
+
+}
 
 const ControlsComponent = () => {
   const { sendMessage } = useMessaging();
@@ -84,8 +91,8 @@ const ControlsComponent = () => {
   );
 
   const busStopSymbol = (index) => {
-    const stopStyle = {
-      ...buttonStyle,
+    let stopStyle = {
+      ...contentStyle,
       color: stopColors[index % stopColors.length],
     };
     return (