Fix shit

4 files changed, 17 insertions, 16 deletions

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/Settings.tsx
index 7e1b0d3..e4a1a31 100644
--- a/src/pages/About.tsx
+++ b/src/pages/Settings.tsx
@@ -1,8 +1,7 @@
-import { List, Moon, Sun, Table, Table2, TableCellsMerge, TableColumnsSplit } from "lucide-react";
 import { useApp } from "../AppContext";
-import "../styles/About.css";
+import "../styles/Settings.css";
 
-export function About() {
+export function Settings() {
     const { theme, setTheme, tableStyle, setTableStyle } = useApp();
 
     return (
@@ -16,14 +15,16 @@ export function About() {
                 <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)}>
+                    <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)}>
+                    <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>
@@ -43,16 +44,16 @@ export function About() {
             </section>
             <h2>Créditos</h2>
             <p>
-                <a href="https://github.com/arielcostas/urbanovigo-web" className="about-link">
+                <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">
+                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">datos.vigo.org</a> bajo
-                licencia <a href="https://opendefinition.org/licenses/odc-by/">Open Data Commons Attribution License</a>
+                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>
     )
diff --git a/src/styles/About.css b/src/styles/Settings.css
index 934577d..934577d 100644
--- a/src/styles/About.css
+++ b/src/styles/Settings.css