Navbar

frontend/package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

frontend/src/App.js

@@ -1,30 +1,30 @@
-import trainImage from '../public/images/Septa_sideview.jpg';
+//React Router
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+//Context
+import { useTheme } from './context/themeContext';
+//Endpoints
+import { Home } from './pages/Home';
+import { FaresPage } from './pages/Fares';
+import { NotFound } from './pages/NotFound';
+//Components
+import { Navbar } from './components/Navbar';
+//Styling
 import styles from "./styles/App.module.css";
 
 function App() {
+  //Light and dark mode context
+  const { theme } = useTheme();
   return (
-    <div className={styles.body}>
-      <nav></nav>
-      <img 
-        className={styles.trainImage} 
-        src={trainImage} 
-        alt="A sideview of a regional rail train." 
-      />
-      <h1>SEPTA Regional Rail Fare</h1>
-      <div>
-        <div><p>i</p></div>
-        <p>A 10% discount applies at checkout when you purchase 10 or more rides.</p>
+    <BrowserRouter>
+      <div className={theme === 'light' ? styles.body : styles.darkBody}>
+        <Navbar />
+        <Routes>
+          <Route path='/' element={<Home />} />
+          <Route path='/fares' element={<FaresPage />} />
+          <Route path='*' element={<NotFound />} />
+        </Routes>
       </div>
-      <section>
-        <form>
-          <div></div>
-          <button></button>
-          <button></button>
-        </form>
-      </section>
-      <h2>Map</h2>
-      <h2>Prices</h2>
-    </div>
+    </BrowserRouter>
   );
 }
 

frontend/src/components/Buttons/Buttons.module.css

@@ -0,0 +1,35 @@
+.submit {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100px;
+    height: 35px;
+    background: white;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 16px;
+    color: #205479;
+    border: 1px solid white;
+    border-radius: 5px;
+    cursor: pointer;
+    opacity: 0.9;
+}
+
+.cancel {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100px;
+    height: 35px;
+    background: #205479;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 16px;
+    color: white;
+    border: 1px solid white;
+    border-radius: 5px;
+    cursor: pointer;
+    opacity: 0.75;
+}
+
+:hover {
+    opacity: 1;
+}

frontend/src/components/Buttons/index.js

@@ -0,0 +1,18 @@
+//Styling
+import styles from "./Buttons.module.css";
+
+export const Buttons = ({ action }) => {
+    return (
+        <button 
+            type={
+                action === 'Cancel' || action === 'Cancelar' ? 
+                'reset' : 'submit'
+            }
+            className={
+                action === 'Cancel' || action === 'Cancelar' ? 
+                styles.cancel : styles.submit
+            }>
+            {action}
+        </button>
+    )
+}

frontend/src/components/InfoImages/InfoImages.module.css

@@ -0,0 +1,35 @@
+.trainImage {
+    width: 100vw;
+    height: 75px;
+    object-fit: cover;
+    object-position: center;
+}
+
+.mapImage {
+    width: 545px;
+    min-width: 400px;
+    height: 480px;
+    min-height: 380px;
+    object-fit: fill;
+    object-position: center;
+    border: 1px solid white;
+    border-radius: 5px;
+}
+
+.fareImage {
+    width: 545px;
+    min-width: 400px;
+    height: 265px;
+    min-height: 165px;
+    object-fit: fill;
+    object-position: center;
+    border: 1px solid white;
+    border-radius: 5px;
+}
+
+.fareImage:after {
+    display: block;
+    background: black;
+    content: "This image will get replaced with more accurate information.";
+    color: white;
+}

frontend/src/components/InfoImages/index.js

@@ -0,0 +1,18 @@
+//Styling
+import styles from "./InfoImages.module.css";
+
+export const InfoImages = ({ imageSrc, altText, type }) => {
+    return (
+        <img
+            className={
+                type === 'train' ? 
+                styles.trainImage 
+                : type === 'map' ?
+                styles.mapImage
+                : styles.fareImage
+            }
+            src={imageSrc}
+            alt={altText}
+        />
+    )
+}

frontend/src/components/LanguageSwitch/LanguageSwitch.module.css

@@ -0,0 +1,22 @@
+.languageBox {
+    width: 50px;
+    height: 30px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 5px;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 14px;
+    cursor: pointer;
+}
+
+.light {
+    color: #595959;
+    text-decoration: underline;
+}
+
+.dark {
+    color: white;
+    text-decoration: underline;
+}

frontend/src/components/LanguageSwitch/index.js

@@ -0,0 +1,42 @@
+//Language Context
+import { useLanguage } from "../../context/languageContext";
+import { useTheme } from "../../context/themeContext";
+//Styling
+import styles from './LanguageSwitch.module.css';
+
+export const LanguageSwitch = () => {
+    const { setLanguage } = useLanguage();
+    const { theme } = useTheme();
+
+    const english = (e) => {
+        e.preventDefault();
+        return setLanguage('english');
+    }
+
+    const spanish = (e) => {
+        e.preventDefault();
+        return setLanguage('spanish');
+    }
+
+    return (
+        <div className={styles.languageBox}>
+            <p  
+                className={theme === 'light' ? styles.light : styles.dark} 
+                onClick={english}
+            >
+                EN
+            </p>
+            <span 
+                className={theme === 'light' ? styles.light : styles.dark} 
+            >
+                /
+            </span>
+            <p  
+                className={theme === 'light' ? styles.light : styles.dark} 
+                onClick={spanish}
+            >
+                ES
+            </p>
+        </div>
+    )
+}

frontend/src/components/LightSwitch/LightSwitch.module.css

@@ -0,0 +1,60 @@
+.switchBox {
+    width: auto;
+    height: 40px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 16px;
+}
+
+.lightLabel {
+    color: #595959;
+}
+
+.darkLabel {
+    color: white;
+}
+
+.lightSwitch {
+    width: 60px;
+    padding: 0px 5px 0px 5px;
+    height: 35px;
+    border-radius: 100px;
+    border: 1px solid #595959;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    background-color: lightgreen;
+}
+
+.darkSwitch {
+    width: 60px;
+    padding: 0px 5px 0px 5px;
+    height: 35px;
+    border-radius: 100px;
+    border: 1px solid #595959;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-end;
+    background-color: lightgreen;
+}
+
+.lightCircle {
+    width: 30px;
+    height: 30px;
+    border-radius: 100px;
+    background-color: white;
+    border: 1px solid lightgrey;
+}
+
+.darkCircle {
+    width: 30px;
+    height: 30px;
+    border-radius: 100px;
+    background-color: #595959;
+}

frontend/src/components/LightSwitch/index.js

@@ -0,0 +1,27 @@
+//Theme context
+import { useTheme } from "../../context/themeContext";
+//Styling
+import styles from "./LightSwitch.module.css";
+
+export const LightSwitch = () => {
+    const {theme, setTheme} = useTheme();
+
+    const switchThemes = (e) => {
+        e.preventDefault();
+        return setTheme(theme === 'light' ? 'dark' : 'light');
+    }
+
+    return (
+        <div 
+        className={styles.switchBox}
+        onClick={switchThemes}
+        >
+            <p className={theme === "light" ? styles.lightLabel : styles.darkLabel}>
+                {theme === 'light' ? "Light mode" : "Dark mode"}
+            </p>
+            <div className={theme === 'light' ? styles.lightSwitch : styles.darkSwitch}>
+                <div className={theme === 'light' ? styles.lightCircle : styles.darkCircle} />
+            </div>
+        </div>
+    )
+}