Use openfreemapinstead of self-hosting, improve stop display, improve dark mode

3 files changed, 27 insertions, 8 deletions

diff --git a/src/frontend/app/routes/map.tsx b/src/frontend/app/routes/map.tsx
index 5887b9c..56a9c79 100644
--- a/src/frontend/app/routes/map.tsx
+++ b/src/frontend/app/routes/map.tsx
@@ -73,7 +73,8 @@ export default function StopMap() {
   }, []);
 
   useEffect(() => {
-    const styleName = "carto";
+    //const styleName = "carto";
+    const styleName = "openfreemap";
     loadStyle(styleName, theme)
       .then((style) => setMapStyle(style))
       .catch((error) => console.error("Failed to load map style:", error));
@@ -158,12 +159,33 @@ export default function StopMap() {
         source="stops-source"
         layout={{
           "icon-image": "stop",
-          "icon-size": ["interpolate", ["linear"], ["zoom"], 11, 0.4, 16, 0.8],
+          "icon-size": ["interpolate", ["linear"], ["zoom"], 11, 0.4, 18, 0.8],
           "icon-allow-overlap": true,
           "icon-ignore-placement": true,
         }}
       />
 
+      <Layer
+        id="stops-label"
+        type="symbol"
+        source="stops-source"
+        minzoom={16}
+        layout={{
+          "text-field": ["get", "name"],
+          "text-font": ["Noto Sans Regular"],
+          "text-offset": [0, 2.5],
+          "text-anchor": "center",
+          "text-justify": "center",
+          "text-size": ["interpolate", ["linear"], ["zoom"], 11, 8, 22, 14]
+        }}
+        paint={{
+          "text-color": "#45a15a",
+          "text-halo-color": "#fff",
+          "text-halo-width": 1.5
+        }}
+      />
+
+
       {selectedStop && (
         <StopSheet
           isOpen={isSheetOpen}
diff --git a/src/frontend/app/routes/settings.css b/src/frontend/app/routes/settings.css
index 47de391..ef9fbd5 100644
--- a/src/frontend/app/routes/settings.css
+++ b/src/frontend/app/routes/settings.css
@@ -51,7 +51,6 @@
   margin-left: 0.5em;
   padding: 0.5rem;
   font-size: 1rem;
-  border: 1px solid var(--border-color);
   border-radius: 8px;
 }
 
diff --git a/src/frontend/app/routes/settings.tsx b/src/frontend/app/routes/settings.tsx
index 3bc3492..bcda311 100644
--- a/src/frontend/app/routes/settings.tsx
+++ b/src/frontend/app/routes/settings.tsx
@@ -1,4 +1,4 @@
-import { useApp } from "../AppContext";
+import { type Theme, useApp } from "../AppContext";
 import "./settings.css";
 import { useTranslation } from "react-i18next";
 import { useState } from "react";
@@ -14,9 +14,6 @@ export default function Settings() {
     setMapPositionMode,
   } = useApp();
 
-  const [isCheckingUpdates, setIsCheckingUpdates] = useState(false);
-  const [updateMessage, setUpdateMessage] = useState<string | null>(null);
-
   return (
     <div className="page-container">
       <h1 className="page-title">{t("about.title")}</h1>
@@ -31,10 +28,11 @@ export default function Settings() {
             id="theme"
             className="form-select-inline"
             value={theme}
-            onChange={(e) => setTheme(e.target.value as "light" | "dark")}
+            onChange={(e) => setTheme(e.target.value as Theme)}
           >
             <option value="light">{t("about.theme_light")}</option>
             <option value="dark">{t("about.theme_dark")}</option>
+            <option value="system">{t("about.theme_system")}</option>
           </select>
         </div>
         <div className="settings-content-inline">