wtg · danasiongsin · Oct 3, 2025 · Oct 3, 2025 · Oct 17, 2025 · Oct 17, 2025
diff --git a/client/index.html b/client/index.html
@@ -4,6 +4,12 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
     <title>Shubble</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&family=KoHo:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
   </head>
   <body>
     <div id="root"></div>

diff --git a/client/src/App.css b/client/src/App.css
@@ -1,6 +1,6 @@
 :root {
   --text-color: #141301;
-  --header-color: #a1c3ff;
+  --header-color: #578FCA;
 }
 
 .App {
@@ -14,12 +14,17 @@
   width: 100%;
 }
 
+.title {
+  font-family: "KoHo", sans-serif;
+  font-weight: 700;
+}
+
 nav.small ul {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   display: flex;
-  gap: 10px;
+  gap: 50px;
   flex-direction: row;
   width: 100%;
   list-style: none;
@@ -29,13 +34,15 @@ nav.small ul {
 nav.big ul {
   margin: 0;
   padding: 0;
+  padding-top:10px;
   box-sizing: border-box;
   display: flex;
   gap: 30px;
   flex-direction: row;
   width: 100%;
   list-style: none;
-  font-size: 0.8em;
+  font-size: 0.6em;
+  font-family: "Karla", sans-serif;
 }
 
 li {
@@ -54,15 +61,14 @@ header {
   box-sizing: border-box;
   max-height: 100px;
   background-color: var(--header-color);
-  padding: 20px;
+  padding: 10px;
   margin: 0;
   font-size: 2em;
-  font-weight: bold;
   z-index: 1000;
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
-  gap: 10px;
+  gap: 30px;
+  justify-content: center;
 }
 
 @media (max-width: 768px) {
@@ -76,6 +82,7 @@ header {
 
   footer {
     border-radius: 20px 20px 0 0;
+    background-color: #e1e1e1;
   }
 }
 
@@ -90,6 +97,7 @@ header {
 
   footer {
     border-radius: 0;
+    /* background-color: #f0f0f0; */
   }
 }
 
@@ -116,14 +124,21 @@ footer {
   padding: 20px;
   box-sizing: border-box;
   width: 100%;
-  background-color: #ddd;
+  /* background-color: ; */
+  justify-content: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }
 
 .big-footer {
   display: flex;
-  flex-direction: row;
-  justify-content: space-between;
+  flex-direction: column;
+  justify-content: center;
   align-items: center;
+  font-family: "Karla", sans-serif;
+  background-color: #ffffff;
 }
 
 .git-copy {
@@ -134,3 +149,9 @@ footer {
   align-items: center;
   padding: 0 20px;
 }
+
+.line {
+  height: 1px;
+  background-color: #d9d9d9;
+  width: 1200px;
+}
diff --git a/client/src/App.jsx b/client/src/App.jsx
@@ -70,6 +70,7 @@ function App() {
           </ul>
         </nav>
         <div className='big'>
+          <div class='line'></div>
           <div className='big-footer'>
             <div className='git-copy'>
               <a href='https://github.com/wtg/shubble' target='_blank'>

diff --git a/client/src/components/RouteToggle.jsx b/client/src/components/RouteToggle.jsx
@@ -0,0 +1,29 @@
+import { useState, useEffect, useLayoutEffect } from 'react';
+import '../styles/RouteToggle.css';
+import scheduleData from '../data/schedule.json';
+import routeData from '../data/routes.json';
+import { aggregatedSchedule } from '../data/parseSchedule';
+
+export default function RouteToggle({selectedRoute, setSelectedRoute}) {
+   console.log(aggregatedSchedule);
+   const today = new Date();
+   const keys = Object.keys(aggregatedSchedule[today.getDay()])
+
+   // const [active, setActive] = useState("north");
+   return(
+      <div class="toggle-div">
+         <button 
+            className={selectedRoute ===keys[0] ? "north-on" : "north-off"}
+            onClick={() => setSelectedRoute(keys[0])}          
+         >
+            North
+         </button>
+         <button
+            className={selectedRoute === keys[1] ? "west-on" : "west-off"}
+            onClick={() => setSelectedRoute(keys[1])}
+         >
+            West
+         </button>
+      </div>
+   );
+}
diff --git a/client/src/components/Schedule.jsx b/client/src/components/Schedule.jsx
@@ -3,6 +3,7 @@ import '../styles/Schedule.css';
 import scheduleData from '../data/schedule.json';
 import routeData from '../data/routes.json';
 import { aggregatedSchedule } from '../data/parseSchedule';
+import RouteToggle from './RouteToggle';
 
 export default function Schedule() {
   const now = new Date();
@@ -44,7 +45,7 @@ export default function Schedule() {
     const scheduleDiv = document.querySelector('.schedule-scroll');
     if (!scheduleDiv) return;
 
-    if (selectedDay !== now.getDay()) return; // only scroll if viewing today's schedule
+    // if (selectedDay !== now.getDay()) return; // only scroll if viewing today's schedule
     const currentTimeRow = Array.from(scheduleDiv.querySelectorAll('td.outdented')).find(td => {
       const text = td.textContent.trim();
 
@@ -71,42 +72,24 @@ export default function Schedule() {
     });
 
     if (currentTimeRow) {
-      currentTimeRow.scrollIntoView({ behavior: "auto" });
+      currentTimeRow.scrollIntoView({
+        block: 'nearest',
+        inline: 'nearest',
+        behavior: 'smooth'
+      });
     }
   }, [selectedRoute, selectedDay, selectedStop, schedule]);
 
 
-  const daysOfTheWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+  // const daysOfTheWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
 
   return (
     <div className="p-4">
-      <h2>Schedule</h2>
+      <h2>Today's schedule</h2>
+      <RouteToggle selectedRoute={selectedRoute} setSelectedRoute={setSelectedRoute} />
+
       <div>
-        <label for='weekday-dropdown'>Weekday:</label>
-        <select id='weekday-dropdown' className="schedule-dropdown-style" value={selectedDay} onChange={handleDayChange}>
-          {
-            daysOfTheWeek.map((day, index) =>
-              <option key={index} value={index}>
-                {day}
-              </option>
-            )
-          }
-        </select>
-      </div>
-      <div>
-        <label for='loop-dropdown'>Loop:</label>
-        <select id='loop-dropdown' className="schedule-dropdown-style" value={selectedRoute} onChange={(e) => setSelectedRoute(e.target.value)}>
-          {
-            routeNames.map((route, index) =>
-              <option key={index} value={route}>
-                {route}
-              </option>
-            )
-          }
-        </select>
-      </div>
-      <div>
-        <label for='stop-dropdown'>Stop:</label>
+        <label for='stop-dropdown'>Filter stops: </label>
         <select id='stop-dropdown' className="schedule-dropdown-style" value={selectedStop} onChange={(e) => setSelectedStop(e.target.value)}>
           <option value="all">All Stops</option>
           {

diff --git a/client/src/index.css b/client/src/index.css
@@ -2,9 +2,6 @@ html, body {
   margin: 0;
   padding: 0;
   height: 100%;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

diff --git a/client/src/styles/LiveLocation.css b/client/src/styles/LiveLocation.css
@@ -5,6 +5,7 @@
     width: 100%;
     justify-content: center;
     padding: 20px;
+    box-sizing:border-box;
 }
 
 .schedule-table {

diff --git a/client/src/styles/MapKitMap.css b/client/src/styles/MapKitMap.css
@@ -1,6 +1,6 @@
 .map {
-    width: 800px;
-    height: 500px;
+    width: 760px;
+    height: 450px;
     touch-action: manipulation;
     -webkit-overflow-scrolling: touch;
     background-color: #f0f0f0;

diff --git a/client/src/styles/RouteToggle.css b/client/src/styles/RouteToggle.css
@@ -0,0 +1,47 @@
+/* want 2 north button classes, one for on and off*/
+
+button {
+   width: 140px;
+   height: 36px;
+   border-radius: 0;
+   border-width: 0;
+   font-family: "Karla", sans-serif;
+   color:white;
+}
+
+button:hover {
+   cursor: pointer;
+}
+
+.north-off {
+   background-color:red;
+   opacity: 0.42;
+   font-size: 20px;
+   box-shadow: inset 1px 4px 4px rgba(0, 0, 0, 0.4);
+}
+
+.north-on {
+   background-color: red;
+   font-size: 24px;
+   font-weight:bold;
+   box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.20);
+}
+
+.west-off {
+   background-color: blue;
+   opacity:0.3;
+   font-size:20px;
+   box-shadow: inset 1px 4px 4px rgba(0, 0, 0, 0.4);
+}
+
+.west-on {
+   background-color: blue;
+   font-size: 24px;
+   font-weight: bold;
+   box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.20);
+}
+
+.toggle-div {
+   display: flex;
+   flex-direction: row;
+}
diff --git a/client/src/styles/Schedule.css b/client/src/styles/Schedule.css
@@ -32,3 +32,16 @@
 th.schedule-header {
     text-align: left;
 }
+
+h2 {
+    font-family: "Karla", sans-serif;
+    font-weight: bold;
+    font-size:30px;
+    margin-bottom: 10px;
+    margin-top:10px
+}
+
+label {
+    font-family: "Karla", sans-serif;
+    font-size: 20px;
+}