fix(dashboard): improve tfl tile styling

apps/dashboard/src/App.tsx

@@ -219,6 +219,7 @@ function TFLTile() {
 		select: (data) => {
 			data.disruptions.sort((a, b) => {
 				if (a.lineName.match(/northern/i)) return -1
+				if (b.lineName.match(/northern/i)) return 1
 				return a.statusSeverity - b.statusSeverity
 			})
 			return data
@@ -258,16 +259,19 @@ function TFLTile() {
 			className="gap-x-1 col-start-3 h-full row-start-1 col-span-2 row-span-1 grid grid-cols-[min-content_1fr] auto-rows-min overflow-y-auto"
 		>
 			{tflData.goodService.includes("Northern") && (
+				<>
 					<TFLDistruptionItem lineId="northern" reason="Good service" severity={StatusSeverity.GoodService} />
+					<hr className="col-span-2 border-neutral-700" />
+				</>
 			)}
-			{tflData.disruptions.map((disruption) => (
+			{tflData.disruptions.map((disruption, i) => (
 				<Fragment key={disruption.lineId}>
 					<TFLDistruptionItem
 						lineId={disruption.lineId}
 						reason={disruption.reason ?? "Unknown reason"}
 						severity={disruption.statusSeverity}
 					/>
-					<hr className="col-span-2 border-neutral-700" />
+					{i < tflData.disruptions.length - 1 && <hr className="col-span-2 border-neutral-700" />}
 				</Fragment>
 			))}
 		</Tile>
@@ -276,14 +280,108 @@ function TFLTile() {
 
 function TFLDistruptionItem({ lineId, reason, severity }: { lineId: string; reason: string; severity: number }) {
 	const lineName = formatLineName(lineId)
+
+	console.log(lineId)
+	let lineStyleClass: string
+	switch (lineId) {
+		case "bakerloo":
+			lineStyleClass = "bg-amber-700"
+			break
+		case "central":
+			lineStyleClass = "bg-red-600"
+			break
+		case "circle":
+			lineStyleClass = "bg-yellow-400 text-neutral-900"
+			break
+		case "district":
+			lineStyleClass = "bg-green-600"
+			break
+		case "hammersmith-city":
+			lineStyleClass = "bg-pink-400"
+			break
+		case "jubilee":
+			lineStyleClass = "bg-slate-500"
+			break
+		case "metropolitan":
+			lineStyleClass = "bg-purple-800"
+			break
+		case "northern":
+			lineStyleClass = "bg-black"
+			break
+		case "piccadilly":
+			lineStyleClass = "bg-blue-900"
+			break
+		case "victoria":
+			lineStyleClass = "bg-sky-500"
+			break
+		case "waterloo-city":
+			lineStyleClass = "bg-teal-500"
+			break
+		case "london-overground":
+			lineStyleClass = "bg-orange-500"
+			break
+		case "dlr":
+			lineStyleClass = "bg-teal-600"
+			break
+		case "elizabeth":
+			lineStyleClass = "bg-purple-600"
+			break
+		case "tram":
+			lineStyleClass = "bg-green-500"
+			break
+		default:
+			lineStyleClass = "bg-gray-500"
+			break
+	}
+
+	let statusBorderClass: string
+	switch (severity) {
+		case StatusSeverity.GoodService:
+			statusBorderClass = "border-green-500"
+			break
+		case StatusSeverity.MinorDelays:
+			statusBorderClass = "border-yellow-500"
+			break
+		case StatusSeverity.Suspended:
+			statusBorderClass = "border-red-600"
+			break
+		case StatusSeverity.PartSuspended:
+			statusBorderClass = "border-red-500"
+			break
+		case StatusSeverity.PlannedClosure:
+			statusBorderClass = "border-orange-600"
+			break
+		case StatusSeverity.PartClosure:
+			statusBorderClass = "border-yellow-500"
+			break
+		case StatusSeverity.SevereDelays:
+			statusBorderClass = "border-red-500"
+			break
+		case StatusSeverity.ReducedService:
+			statusBorderClass = "border-orange-500"
+			break
+		case StatusSeverity.BusService:
+			statusBorderClass = "border-blue-500"
+			break
+		case StatusSeverity.Information:
+			statusBorderClass = "border-blue-400"
+			break
+		case StatusSeverity.ServiceClosed:
+			statusBorderClass = "border-red-700"
+			break
+		default:
+			statusBorderClass = "border-gray-400"
+			break
+	}
+
 	return (
 		<>
 			<div className="h-full flex items-center justify-center px-2 py-0.5">
 				<p
 					className={cn(
-						"text-xl uppercase font-bold bg-blue-500 w-full text-center px-1 rounded-sm",
+						"text-xl uppercase font-bold w-full text-center px-1 rounded-sm",
-						getLineColor(lineId),
+						lineStyleClass,
-						getStatusBorderColor(severity),
+						statusBorderClass,
 					)}
 				>
 					{lineName}

apps/dashboard/src/tfl.ts

@@ -111,68 +111,6 @@ export function formatLineName(lineId: string): string {
 	return lineNames[lineId] || lineId
 }
 
-// Map of tube lines to their official TfL colors (as Tailwind classes)
-export function getLineColor(lineId: string): string {
-	const lineColors: Record<string, string> = {
-		bakerloo: "bg-amber-700",
-		central: "bg-red-600",
-		circle: "bg-yellow-400",
-		district: "bg-green-600",
-		"hammersmith-city": "bg-pink-400",
-		jubilee: "bg-slate-500",
-		metropolitan: "bg-purple-800",
-		northern: "bg-black",
-		piccadilly: "bg-blue-900",
-		victoria: "bg-sky-500",
-		"waterloo-city": "bg-teal-500",
-		"london-overground": "bg-orange-500",
-		dlr: "bg-teal-600",
-		"elizabeth-line": "bg-purple-600",
-		tram: "bg-green-500",
-	}
-	return lineColors[lineId] || "bg-gray-500"
-}
-
-// Map of status severity to border colors
-export function getStatusBorderColor(severity: number): string {
-	const borderColors: Record<number, string> = {
-		[StatusSeverity.SpecialService]: "border-gray-500",
-		[StatusSeverity.Closed]: "border-red-700",
-		[StatusSeverity.Suspended]: "border-red-600",
-		[StatusSeverity.PartSuspended]: "border-red-500",
-		[StatusSeverity.PlannedClosure]: "border-orange-600",
-		[StatusSeverity.PartClosure]: "border-yellow-500",
-		[StatusSeverity.SevereDelays]: "border-red-500",
-		[StatusSeverity.ReducedService]: "border-orange-500",
-		[StatusSeverity.BusService]: "border-blue-500",
-		[StatusSeverity.MinorDelays]: "border-yellow-500",
-		[StatusSeverity.GoodService]: "border-green-500",
-		[StatusSeverity.PartClosed]: "border-orange-600",
-		[StatusSeverity.ExitOnly]: "border-gray-600",
-		[StatusSeverity.NoStepFreeAccess]: "border-gray-500",
-		[StatusSeverity.ChangeOfFrequency]: "border-blue-400",
-		[StatusSeverity.Diverted]: "border-purple-500",
-		[StatusSeverity.NotRunning]: "border-red-600",
-		[StatusSeverity.IssuesReported]: "border-yellow-400",
-		[StatusSeverity.NoIssues]: "border-green-500",
-		[StatusSeverity.Information]: "border-blue-400",
-		[StatusSeverity.ServiceClosed]: "border-red-700",
-	}
-	return borderColors[severity] || "border-gray-400"
-}
-
-// Helper function to check if there are any disruptions
-export function hasDisruptions(data: DisruptionsResponse): boolean {
-	return data.disruptedLines > 0
-}
-
-// Helper function to get critical disruptions (severe or worse)
-export function getCriticalDisruptions(data: DisruptionsResponse): DisruptionSummary[] {
-	return data.disruptions.filter((d) => d.statusSeverity <= 6)
-}
-
-// TanStack Query Options
-
 /**
  * Query options for fetching current TfL disruptions
  * Returns disruptions across Tube, Overground, DLR, Elizabeth Line, and Tram