From 58d309b69bcc80a215c4fd6f38044b820d4f3674 Mon Sep 17 00:00:00 2001
From: Ariel Costas Guerrero <ariel@costas.dev>
Date: Wed, 11 Feb 2026 18:05:34 +0100
Subject: fix: Use formatHex for route color formatting in RouteDetailsPage

---
 src/frontend/app/routes/routes-$id.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

(limited to 'src/frontend/app/routes/routes-$id.tsx')

diff --git a/src/frontend/app/routes/routes-$id.tsx b/src/frontend/app/routes/routes-$id.tsx
index f7c69d7..32f1fb7 100644
--- a/src/frontend/app/routes/routes-$id.tsx
+++ b/src/frontend/app/routes/routes-$id.tsx
@@ -24,6 +24,7 @@ import {
   usePageTitle,
   usePageTitleNode,
 } from "~/contexts/PageTitleContext";
+import { formatHex } from "~/utils/colours";
 import "../tailwind-full.css";
 
 export default function RouteDetailsPage() {
@@ -82,7 +83,7 @@ export default function RouteDetailsPage() {
           <span
             className="text-lg font-bold leading-none"
             style={{
-              color: route.color ? `#${route.color}` : "var(--text-color)",
+              color: route.color ? formatHex(route.color) : "var(--text-color)",
             }}
           >
             {route.shortName || route.longName}
@@ -276,7 +277,9 @@ export default function RouteDetailsPage() {
                     id="route-line"
                     type="line"
                     paint={{
-                      "line-color": route.color ? `#${route.color}` : "#3b82f6",
+                      "line-color": route.color
+                        ? formatHex(route.color)
+                        : "#3b82f6",
                       "line-width": 4,
                       "line-opacity": 0.8,
                     }}
@@ -292,7 +295,7 @@ export default function RouteDetailsPage() {
                     "circle-color": "#ffffff",
                     "circle-stroke-width": 2,
                     "circle-stroke-color": route.color
-                      ? `#${route.color}`
+                      ? formatHex(route.color)
                       : "#3b82f6",
                   }}
                 />
-- 
cgit v1.3

