diff options
| -rw-r--r-- | src/Layout.tsx | 8 | ||||
| -rw-r--r-- | src/main.tsx | 6 | ||||
| -rw-r--r-- | src/pages/Settings.tsx (renamed from src/pages/About.tsx) | 19 | ||||
| -rw-r--r-- | src/styles/Settings.css (renamed from src/styles/About.css) | 0 |
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 |