fancy shmancy ui

client/src/App.js

@@ -2,15 +2,15 @@ import React from "react";
 import "./App.css"
 import MapComponent from './components/RealtimeMap';
 import Banner from "./components/Banner";
-import InputBox from "./components/inputBox";
+import RouteSearchDiv from "./components/RouteSearchDiv";
 
 function App() {
 
   return (
     <div className="App">
       <Banner />
-      <InputBox />
       <MapComponent />
+      <RouteSearchDiv />
     </div>
   );
 }

client/src/components/inputBox.js → client/src/components/InputBox.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-function App() {
+function InputBox() {
     const [input1, setInput1] = useState('');
     const [input2, setInput2] = useState('');
     const [suggestedStations1, setSuggestedStations1] = useState([]);
@@ -111,4 +111,4 @@ function App() {
     );
 }
 
-export default App;
+export default InputBox;

client/src/components/RealtimeMap.js

@@ -89,6 +89,14 @@ function RealtimeMap() {
           {item.name}
         </div>
         <div className="popup-info">
+          <div className="info-line">
+            <span><span className="info-label">Transportation mode(s):</span> { 
+              Object.entries(item.products)
+                .filter(([key, value]) => value)
+                .map(([key]) => key)
+                .join(', ')
+            }</span>
+          </div>
           <div className="info-line">
             <span className="info-label">Absolute Utilization:</span> {item.utilization.abs !== null ? item.utilization.abs : 'null'}
           </div>

client/src/components/RouteSearchDiv.js

@@ -0,0 +1,10 @@
+import React, { useState } from 'react';
+import InputBox from "./InputBox";
+
+function RouteSearchDiv() {
+  return (
+    <InputBox />
+  );
+}
+
+export default RouteSearchDiv;

client/src/components/VehicleIcons.js

@@ -71,7 +71,7 @@ export function getColor(products) {
     return "red";
   } else if (products.tram) {
     return "blue";
-  } else if (products.bus) {
+  } else if (products.suburban) {
     return "yellow";
   } else if (products.ferry) {
     return "purple";