More fixes

frontend/src/components/ui/AuthModal.tsx

@@ -87,7 +87,7 @@ export default function AuthModal({
         if (e.target === e.currentTarget) onClose();
       }}
     >
-      <div className="absolute inset-0 bg-black/50 dark:bg-black/70" onMouseDown={onClose} />
+      <div className="absolute inset-0 bg-black/50 dark:bg-black/70" />
       <div className="relative w-full max-w-sm mx-4 bg-white dark:bg-warm-900 rounded-lg shadow-xl border border-warm-200 dark:border-warm-700">
         {/* Header */}
         <div className="flex items-center justify-between px-5 pt-5 pb-3">

frontend/src/components/ui/Header.tsx

@@ -1,6 +1,6 @@
 import { useState, useCallback, useEffect } from 'react';
 import type { AuthUser } from '../../hooks/useAuth';
-import { shortenUrl } from '../../lib/api';
+import { shortenUrl, prewarmScreenshot } from '../../lib/api';
 import { copyToClipboard } from '../../lib/clipboard';
 import { DownloadIcon } from './icons/DownloadIcon';
 import { BookmarkIcon } from './icons/BookmarkIcon';
@@ -96,6 +96,7 @@ export default function Header({
       doCopy(window.location.href);
       return;
     }
+    prewarmScreenshot(params);
     setSharing(true);
     try {
       const shortUrl = await shortenUrl(params);
@@ -243,6 +244,7 @@ export default function Header({
                 theme={theme}
                 onToggleTheme={onToggleTheme}
                 onLogout={onLogout}
+                onNavigate={onPageChange}
               />
             ) : (
               <>

frontend/src/components/ui/InfoPopup.tsx

@@ -23,7 +23,7 @@ export default function InfoPopup({ title, children, onClose, sourceLink }: Info
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/30 p-4">
       <div
         ref={popupRef}
-        className="bg-white dark:bg-navy-800 border border-warm-200 dark:border-navy-700 rounded-lg shadow-xl max-w-md w-full max-h-full overflow-y-auto p-5"
+        className="bg-white dark:bg-warm-800 border border-warm-200 dark:border-warm-700 rounded-lg shadow-xl max-w-md w-full max-h-full overflow-y-auto p-5"
       >
         <div className="flex items-start justify-between mb-3">
           <h3 className="text-sm font-semibold text-warm-900 dark:text-warm-100 pr-4">{title}</h3>

frontend/src/components/ui/TravelTimeInfoPopup.tsx

@@ -0,0 +1,27 @@
+import InfoPopup from './InfoPopup';
+import { MODE_LABELS, type TransportMode } from '../../hooks/useTravelTime';
+
+const MODE_INFO: Record<TransportMode, string> = {
+  transit:
+    ' by public transport (bus, rail, tube). Times are computed across a typical weekday morning window.',
+  car: ' by car, based on typical road speeds and the road network.',
+  bicycle: ' by bicycle, using cycle-friendly routes.',
+  walking: ' on foot, using pedestrian paths and pavements.',
+};
+
+export function TravelTimeInfoPopup({
+  mode,
+  onClose,
+}: {
+  mode: TransportMode;
+  onClose: () => void;
+}) {
+  return (
+    <InfoPopup title={`Travel Time (${MODE_LABELS[mode]})`} onClose={onClose}>
+      <p className="text-sm text-warm-700 dark:text-warm-300 leading-relaxed">
+        Shows how long it takes to reach the selected destination from each area
+        {MODE_INFO[mode]} Use the slider to filter areas within your preferred commute time.
+      </p>
+    </InfoPopup>
+  );
+}

frontend/src/components/ui/UserMenu.tsx

@@ -1,5 +1,7 @@
 import { useState, useRef, useEffect } from 'react';
 import type { AuthUser } from '../../hooks/useAuth';
+import type { Page } from './Header';
+import { PAGE_PATHS } from './Header';
 import { SunIcon } from './icons/SunIcon';
 import { MoonIcon } from './icons/MoonIcon';
 
@@ -8,11 +10,13 @@ export default function UserMenu({
   theme,
   onToggleTheme,
   onLogout,
+  onNavigate,
 }: {
   user: AuthUser;
   theme: 'light' | 'dark';
   onToggleTheme: () => void;
   onLogout: () => void;
+  onNavigate: (page: Page) => void;
 }) {
   const [open, setOpen] = useState(false);
   const menuRef = useRef<HTMLDivElement>(null);
@@ -72,8 +76,13 @@ export default function UserMenu({
               Theme: {theme === 'light' ? 'Light' : 'Dark'}
             </button>
             <a
-              href="/account"
-              onClick={() => setOpen(false)}
+              href={PAGE_PATHS.account}
+              onClick={(e) => {
+                if (e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0) return;
+                e.preventDefault();
+                setOpen(false);
+                onNavigate('account');
+              }}
               className="block w-full text-left px-3 py-2 text-sm text-warm-700 dark:text-warm-300 hover:bg-warm-50 dark:hover:bg-warm-700 rounded"
             >
               Account