From 6677ce3906670afd2a2d13e91f37ccadebca12a7 Mon Sep 17 00:00:00 2001
From: Ariel Costas Guerrero <94913521+arielcostas@users.noreply.github.com>
Date: Tue, 4 Mar 2025 00:55:10 +0100
Subject: Fix shit

---
 src/Layout.tsx          |  8 ++---
 src/main.tsx            |  6 ++--
 src/pages/About.tsx     | 59 -------------------------------
 src/pages/Settings.tsx  | 60 +++++++++++++++++++++++++++++++
 src/styles/About.css    | 94 -------------------------------------------------
 src/styles/Settings.css | 94 +++++++++++++++++++++++++++++++++++++++++++++++++
 6 files changed, 161 insertions(+), 160 deletions(-)
 delete mode 100644 src/pages/About.tsx
 create mode 100644 src/pages/Settings.tsx
 delete mode 100644 src/styles/About.css
 create mode 100644 src/styles/Settings.css

diff --git a/src/Layout.tsx b/src/Layout.tsx
index de5a16a..2a7816c 100644
--- a/src/Layout.tsx
+++ b/src/Layout.tsx
@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { Link, useLocation } from 'react-router';
-import { MapPin, Map, Info } from 'lucide-react';
+import { MapPin, Map, Settings } from 'lucide-react';
 import './Layout.css';
 
 interface LayoutProps {
@@ -22,9 +22,9 @@ export function Layout({ children }: LayoutProps) {
       path: '/map'
     },
     {
-      name: 'Acerca de',
-      icon: Info,
-      path: '/about'
+      name: 'Ajustes',
+      icon: Settings,
+      path: '/settings'
     }
   ];
 
diff --git a/src/main.tsx b/src/main.tsx
index 060e1b8..c7a4db9 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -7,7 +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 { About } from './pages/About.tsx'
+import { Settings } from './pages/Settings.tsx'
 import { AppProvider } from './AppContext.tsx'
 import ErrorBoundary from './ErrorBoundary'
 
@@ -29,8 +29,8 @@ const router = createBrowserRouter([
     element: <Layout><Estimates /></Layout>
   },
   {
-    path: '/about',
-    element: <Layout><About /></Layout>
+    path: '/settings',
+    element: <Layout><Settings /></Layout>
   }
 ])
 
diff --git a/src/pages/About.tsx b/src/pages/About.tsx
deleted file mode 100644
index 7e1b0d3..0000000
--- a/src/pages/About.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { List, Moon, Sun, Table, Table2, TableCellsMerge, TableColumnsSplit } from "lucide-react";
-import { useApp } from "../AppContext";
-import "../styles/About.css";
-
-export function About() {
-    const { theme, setTheme, tableStyle, setTableStyle } = useApp();
-
-    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>
-            <section className="settings-section">
-                <h2>Ajustes</h2>
-                <div className="settings-content-inline">
-                    <label htmlFor="theme" className="form-label-inline">Modo:</label>
-                    <select id="theme" className="form-select-inline" value={theme} onChange={(e) => setTheme(e.target.value)}>
-                        <option value="light">Claro</option>
-                        <option value="dark">Oscuro</option>
-                    </select>
-                </div>
-                <div className="settings-content-inline">
-                    <label htmlFor="tableStyle" className="form-label-inline">Estilo de tabla:</label>
-                    <select id="tableStyle" className="form-select-inline" value={tableStyle} onChange={(e) => setTableStyle(e.target.value)}>
-                        <option value="regular">Mostrar por orden</option>
-                        <option value="grouped">Agrupar por línea</option>
-                    </select>
-                </div>
-                <details className="form-details">
-                    <summary>¿Qué significa esto?</summary>
-                    <p>
-                        La tabla de horarios puede mostrarse de dos formas:
-                    </p>
-                    <dl>
-                        <dt>Mostrar por orden</dt>
-                        <dd>Las paradas se muestran en el orden en que se visitan. Aplicaciones como Infobus (Vitrasa) usan este estilo.</dd>
-                        <dt>Agrupar por línea</dt>
-                        <dd>Las paradas se agrupan por la línea de autobús. Aplicaciones como iTranvias (A Coruña) o Moovit (más o menos) usan este estilo.</dd>
-                    </dl>
-                </details>
-            </section>
-            <h2>Créditos</h2>
-            <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/pages/Settings.tsx b/src/pages/Settings.tsx
new file mode 100644
index 0000000..e4a1a31
--- /dev/null
+++ b/src/pages/Settings.tsx
@@ -0,0 +1,60 @@
+import { useApp } from "../AppContext";
+import "../styles/Settings.css";
+
+export function Settings() {
+    const { theme, setTheme, tableStyle, setTableStyle } = useApp();
+
+    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>
+            <section className="settings-section">
+                <h2>Ajustes</h2>
+                <div className="settings-content-inline">
+                    <label htmlFor="theme" className="form-label-inline">Modo:</label>
+                    <select id="theme" className="form-select-inline" value={theme} onChange={(e) => setTheme(e.target.value as "light" | "dark")}
+                        style={{ backgroundColor: theme === "dark" ? "#333" : "#fff", color: theme === "dark" ? "#fff" : "#000" }}>
+                        <option value="light">Claro</option>
+                        <option value="dark">Oscuro</option>
+                    </select>
+                </div>
+                <div className="settings-content-inline">
+                    <label htmlFor="tableStyle" className="form-label-inline">Estilo de tabla:</label>
+                    <select id="tableStyle" className="form-select-inline" value={tableStyle} onChange={(e) => setTableStyle(e.target.value as "regular" | "grouped")}
+                        style={{ backgroundColor: theme === "dark" ? "#333" : "#fff", color: theme === "dark" ? "#fff" : "#000" }}>
+                        <option value="regular">Mostrar por orden</option>
+                        <option value="grouped">Agrupar por línea</option>
+                    </select>
+                </div>
+                <details className="form-details">
+                    <summary>¿Qué significa esto?</summary>
+                    <p>
+                        La tabla de horarios puede mostrarse de dos formas:
+                    </p>
+                    <dl>
+                        <dt>Mostrar por orden</dt>
+                        <dd>Las paradas se muestran en el orden en que se visitan. Aplicaciones como Infobus (Vitrasa) usan este estilo.</dd>
+                        <dt>Agrupar por línea</dt>
+                        <dd>Las paradas se agrupan por la línea de autobús. Aplicaciones como iTranvias (A Coruña) o Moovit (más o menos) usan este estilo.</dd>
+                    </dl>
+                </details>
+            </section>
+            <h2>Créditos</h2>
+            <p>
+                <a href="https://github.com/arielcostas/urbanovigo-web" className="about-link" style={{ color: theme === "dark" ? "#bbb" : "#000" }}>
+                    Código en GitHub
+                </a> -
+                Desarrollado por <a href="https://www.costas.dev" className="about-link" style={{ color: theme === "dark" ? "#bbb" : "#000" }}>
+                    Ariel Costas
+                </a>
+            </p>
+            <p>
+                Datos obtenidos de <a href="https://datos.vigo.org" style={{ color: theme === "dark" ? "#bbb" : "#000" }}>datos.vigo.org</a> bajo
+                licencia <a href="https://opendefinition.org/licenses/odc-by/" style={{ color: theme === "dark" ? "#bbb" : "#000" }}>Open Data Commons Attribution License</a>
+            </p>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/styles/About.css b/src/styles/About.css
deleted file mode 100644
index 934577d..0000000
--- a/src/styles/About.css
+++ /dev/null
@@ -1,94 +0,0 @@
-/* About page specific styles */
-.about-page {
-    text-align: center;
-    padding: 1rem;
-}
-
-.about-version {
-    color: var(--subtitle-color);
-    font-size: 0.9rem;
-    margin-top: 2rem;
-}
-
-.about-description {
-    margin-top: 1rem;
-    line-height: 1.6;
-}
-
-.settings-section {
-    margin-bottom: 2em;
-    padding: 1rem;
-    border: 1px solid var(--border-color);
-    border-radius: 8px;
-    background-color: var(--message-background-color);
-    text-align: left;
-}
-
-.settings-section h2 {
-    margin-bottom: 1em;
-}
-
-.settings-content {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    margin-bottom: 1em;
-}
-
-.settings-content-inline {
-    display: flex;
-    align-items: center;
-    margin-bottom: 1em;
-}
-
-.settings-section .form-button {
-    margin-bottom: 1em;
-    padding: 0.75rem 1.5rem;
-    font-size: 1.1rem;
-}
-
-.settings-section .form-select-inline {
-    margin-left: 0.5em;
-    padding: 0.5rem;
-    font-size: 1rem;
-    border: 1px solid var(--border-color);
-    border-radius: 8px;
-}
-
-.settings-section .form-label-inline {
-    font-weight: 500;
-}
-
-.settings-section .form-label {
-    display: block;
-    margin-bottom: 0.5em;
-    font-weight: 500;
-}
-
-.settings-section .form-description {
-    margin-top: 0.5em;
-    font-size: 0.9rem;
-    color: var(--subtitle-color);
-}
-
-.settings-section .form-details {
-    margin-top: 0.5em;
-    font-size: 0.9rem;
-    color: var(--subtitle-color);
-    border: 1px solid var(--border-color);
-    border-radius: 8px;
-    padding: 0.5rem;
-}
-
-.settings-section .form-details summary {
-    cursor: pointer;
-    font-weight: 500;
-}
-
-.settings-section .form-details p {
-    margin-top: 0.5em;
-}
-
-.settings-section p {
-    margin-top: 0.5em;
-}
\ No newline at end of file
diff --git a/src/styles/Settings.css b/src/styles/Settings.css
new file mode 100644
index 0000000..934577d
--- /dev/null
+++ b/src/styles/Settings.css
@@ -0,0 +1,94 @@
+/* About page specific styles */
+.about-page {
+    text-align: center;
+    padding: 1rem;
+}
+
+.about-version {
+    color: var(--subtitle-color);
+    font-size: 0.9rem;
+    margin-top: 2rem;
+}
+
+.about-description {
+    margin-top: 1rem;
+    line-height: 1.6;
+}
+
+.settings-section {
+    margin-bottom: 2em;
+    padding: 1rem;
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    background-color: var(--message-background-color);
+    text-align: left;
+}
+
+.settings-section h2 {
+    margin-bottom: 1em;
+}
+
+.settings-content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    margin-bottom: 1em;
+}
+
+.settings-content-inline {
+    display: flex;
+    align-items: center;
+    margin-bottom: 1em;
+}
+
+.settings-section .form-button {
+    margin-bottom: 1em;
+    padding: 0.75rem 1.5rem;
+    font-size: 1.1rem;
+}
+
+.settings-section .form-select-inline {
+    margin-left: 0.5em;
+    padding: 0.5rem;
+    font-size: 1rem;
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+}
+
+.settings-section .form-label-inline {
+    font-weight: 500;
+}
+
+.settings-section .form-label {
+    display: block;
+    margin-bottom: 0.5em;
+    font-weight: 500;
+}
+
+.settings-section .form-description {
+    margin-top: 0.5em;
+    font-size: 0.9rem;
+    color: var(--subtitle-color);
+}
+
+.settings-section .form-details {
+    margin-top: 0.5em;
+    font-size: 0.9rem;
+    color: var(--subtitle-color);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    padding: 0.5rem;
+}
+
+.settings-section .form-details summary {
+    cursor: pointer;
+    font-weight: 500;
+}
+
+.settings-section .form-details p {
+    margin-top: 0.5em;
+}
+
+.settings-section p {
+    margin-top: 0.5em;
+}
\ No newline at end of file
-- 
cgit v1.3