fix: directions panel dark mode colors and limit departure time to transit mode

Replace hardcoded grey.50/grey.100/grey.200 with theme-aware action.hover and action.selected tokens in waypoint inputs, time picker, and route details. Show departure time chip only in transit mode where it functions.

Author: Medformatik

apps/web/src/components/panels/directions/DetailsView.tsx

@@ -171,8 +171,8 @@ function LegByLegView({
                 px: 2,
                 py: 1.25,
                 cursor: "pointer",
-                bgcolor: "grey.50",
-                "&:hover": { bgcolor: "grey.100" },
+                bgcolor: "action.hover",
+                "&:hover": { bgcolor: "action.selected" },
                 transition: "background-color 0.15s",
                 borderTop: "1px solid",
                 borderColor: "divider",

apps/web/src/components/panels/directions/DirectionsPanelContent.tsx

@@ -453,49 +453,53 @@ export function DirectionsPanelContent() {
           </Box>
         )}
 
-        {/* Leave now / Depart at / Arrive by + Options */}
+        {/* Leave now / Depart at / Arrive by (transit only) + Options (non-transit) */}
         <Box
           sx={{
             display: "flex",
             alignItems: "center",
-            justifyContent: "space-between",
+            justifyContent: isTransitMode ? "space-between" : "flex-end",
             px: 2,
             py: 1,
           }}
         >
-          <Box
-            onClick={() => setTimePickerOpen((v) => !v)}
-            sx={{
-              display: "inline-flex",
-              alignItems: "center",
-              gap: 0.75,
-              px: 1.75,
-              py: 0.75,
-              borderRadius: "12px",
-              bgcolor: transitTimeMode !== "now" ? `${TEAL}18` : "grey.100",
-              cursor: "pointer",
-              "&:hover": { bgcolor: transitTimeMode !== "now" ? `${TEAL}28` : "grey.200" },
-              transition: "background-color 0.15s",
-            }}
-          >
-            <ScheduleIcon
-              sx={{ fontSize: 18, color: transitTimeMode !== "now" ? TEAL : "text.primary" }}
-            />
-            <Typography
-              variant="body2"
-              fontWeight={500}
-              color={transitTimeMode !== "now" ? TEAL : "text.primary"}
+          {isTransitMode && (
+            <Box
+              onClick={() => setTimePickerOpen((v) => !v)}
+              sx={{
+                display: "inline-flex",
+                alignItems: "center",
+                gap: 0.75,
+                px: 1.75,
+                py: 0.75,
+                borderRadius: "12px",
+                bgcolor: transitTimeMode !== "now" ? `${TEAL}18` : "action.hover",
+                cursor: "pointer",
+                "&:hover": {
+                  bgcolor: transitTimeMode !== "now" ? `${TEAL}28` : "action.selected",
+                },
+                transition: "background-color 0.15s",
+              }}
             >
-              {transitTimeMode === "now"
-                ? t("departNow")
-                : transitTimeMode === "depart"
-                  ? `${t("departAt")} ${transitDepartureTime instanceof Date ? transitDepartureTime.toLocaleTimeString(locale, { hour: "2-digit", minute: "2-digit" }) : ""}`
-                  : `${t("arriveBy")} ${transitArrivalTime instanceof Date ? transitArrivalTime.toLocaleTimeString(locale, { hour: "2-digit", minute: "2-digit" }) : ""}`}
-            </Typography>
-            <ExpandMoreIcon
-              sx={{ fontSize: 18, color: transitTimeMode !== "now" ? TEAL : "text.primary" }}
-            />
-          </Box>
+              <ScheduleIcon
+                sx={{ fontSize: 18, color: transitTimeMode !== "now" ? TEAL : "text.primary" }}
+              />
+              <Typography
+                variant="body2"
+                fontWeight={500}
+                color={transitTimeMode !== "now" ? TEAL : "text.primary"}
+              >
+                {transitTimeMode === "now"
+                  ? t("departNow")
+                  : transitTimeMode === "depart"
+                    ? `${t("departAt")} ${transitDepartureTime instanceof Date ? transitDepartureTime.toLocaleTimeString(locale, { hour: "2-digit", minute: "2-digit" }) : ""}`
+                    : `${t("arriveBy")} ${transitArrivalTime instanceof Date ? transitArrivalTime.toLocaleTimeString(locale, { hour: "2-digit", minute: "2-digit" }) : ""}`}
+              </Typography>
+              <ExpandMoreIcon
+                sx={{ fontSize: 18, color: transitTimeMode !== "now" ? TEAL : "text.primary" }}
+              />
+            </Box>
+          )}
 
           {!isTransitMode && (
             <Typography
@@ -542,8 +546,8 @@ export function DirectionsPanelContent() {
                     cursor: "pointer",
                     display: "flex",
                     alignItems: "center",
-                    bgcolor: transitTimeMode === m ? TEAL : "grey.100",
-                    "&:hover": { bgcolor: transitTimeMode === m ? TEAL : "grey.200" },
+                    bgcolor: transitTimeMode === m ? TEAL : "action.hover",
+                    "&:hover": { bgcolor: transitTimeMode === m ? TEAL : "action.selected" },
                     transition: "background-color 0.15s",
                   }}
                 >

apps/web/src/components/panels/directions/WaypointRow.tsx

@@ -110,7 +110,7 @@ export function WaypointRow({
           border: "1px solid",
           borderColor: "divider",
           borderRadius: "8px",
-          bgcolor: "grey.50",
+          bgcolor: "action.hover",
           "&:focus-within": {
             borderColor: TEAL,
             bgcolor: "background.paper",