From 3654aa3bcf0fed120910937dd2268c2f640c3ab0 Mon Sep 17 00:00:00 2001
From: Ariel Costas Guerrero <94913521+arielcostas@users.noreply.github.com>
Date: Mon, 3 Mar 2025 21:42:20 +0100
Subject: Implement about page

---
 src/main.tsx         | 34 +---------------------------------
 src/pages/About.tsx  | 50 ++++++++++++++++++++++++++++++++++++++++++++++++++
 src/styles/Pages.css | 36 +++++-------------------------------
 3 files changed, 56 insertions(+), 64 deletions(-)
 create mode 100644 src/pages/About.tsx

diff --git a/src/main.tsx b/src/main.tsx
index 85d2caf..496acc8 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -7,8 +7,7 @@ import { StopList } from './pages/StopList.tsx'
 import { Estimates } from './pages/Estimates.tsx'
 import { StopMap } from './pages/Map.tsx'
 import { Layout } from './Layout.tsx'
-import { Sun, Moon } from 'lucide-react';
-import { useState, useEffect } from 'react';
+import { About } from './pages/About.tsx'
 
 const router = createBrowserRouter([
   {
@@ -33,37 +32,6 @@ const router = createBrowserRouter([
   }
 ])
 
-function About() {
-  const [theme, setTheme] = useState<'light' | 'dark'>(() => {
-    const savedTheme = localStorage.getItem('theme');
-    if (savedTheme) {
-      return savedTheme as 'light' | 'dark';
-    }
-    const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
-    return prefersDark ? 'dark' : 'light';
-  });
-
-  useEffect(() => {
-    document.documentElement.setAttribute('data-theme', theme);
-    localStorage.setItem('theme', theme);
-  }, [theme]);
-
-  const toggleTheme = () => {
-    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
-  };
-
-  return (
-    <div className="page-container about-page">
-      <h1 className="page-title">About InfoBus App</h1>
-      <p className="about-description">This application helps you find bus stops and check bus arrival estimates.</p>
-      <p className="about-version">Version 1.0.0</p>
-      <button className="theme-toggle" onClick={toggleTheme}>
-        {theme === 'light' ? <Moon size={24} /> : <Sun size={24} />}
-      </button>
-    </div>
-  )
-}
-
 createRoot(document.getElementById('root')!).render(
   <RouterProvider router={router} />,
 )
diff --git a/src/pages/About.tsx b/src/pages/About.tsx
new file mode 100644
index 0000000..d286fb1
--- /dev/null
+++ b/src/pages/About.tsx
@@ -0,0 +1,50 @@
+import { Moon, Sun } from "lucide-react";
+import { useEffect, useState } from "react";
+
+export function About() {
+    const [theme, setTheme] = useState<'light' | 'dark'>(() => {
+        const savedTheme = localStorage.getItem('theme');
+        if (savedTheme) {
+            return savedTheme as 'light' | 'dark';
+        }
+        const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+        return prefersDark ? 'dark' : 'light';
+    });
+
+    useEffect(() => {
+        document.documentElement.setAttribute('data-theme', theme);
+        localStorage.setItem('theme', theme);
+    }, [theme]);
+
+    const toggleTheme = () => {
+        setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
+    };
+
+    return (
+        <div className="about-page">
+            <h1 className="page-title">Sobre UrbanoVigo Web</h1>
+            <p className="about-description">
+                Aplicación web para encontrar paradas y tiempos de llegada de los autobuses
+                urbanos de Vigo, España.
+            </p>
+            <button className="form-button" onClick={toggleTheme}>
+                {theme === 'light' ?
+                    <><Moon size={24} /> Usar modo oscuro</> :
+                    <><Sun size={24} /> Usar modo claro</>
+                }
+            </button>
+            <p>
+                <a href="https://github.com/arielcostas/urbanovigo-web" className="about-link">
+                    Código en GitHub
+                </a> -
+                Desarrollado por <a href="https://www.costas.dev" className="about-link">
+                    Ariel Costas
+                </a>
+            </p>
+            <p>
+                Datos obtenidos de <a href="https://datos.vigo.org">datos.vigo.org</a> bajo 
+                licencia <a href="https://opendefinition.org/licenses/odc-by/">Open Data Commons Attribution License</a>
+            </p>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/styles/Pages.css b/src/styles/Pages.css
index a8ff842..e8318ef 100644
--- a/src/styles/Pages.css
+++ b/src/styles/Pages.css
@@ -79,6 +79,11 @@ body {
 }
 
 .form-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+
   padding: 0.75rem 1rem;
   background-color: var(--button-background-color);
   color: white;
@@ -168,37 +173,6 @@ body {
   position: relative;
 }
 
-#map {
-  position: absolute;
-  top: 0;
-  bottom: 60px; /* Adjust this value based on your navbar height */
-  left: 0;
-  right: 0;
-  height: calc(100vh - 60px); /* Adjust this value based on your navbar height */
-  overflow: hidden;
-  z-index: 0;
-}
-
-.main-content {
-  position: relative;
-  height: calc(100vh - 60px); /* Adjust this value based on your navbar height */
-  overflow: hidden;
-}
-
-.nav-bar {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 60px; /* Adjust this value based on your navbar height */
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  background-color: #fff;
-  border-top: 1px solid #ccc;
-  z-index: 1;
-}
-
 /* Fullscreen map styles */
 .fullscreen-container {
   position: absolute;
-- 
cgit v1.3