From 54e3483a39cf2f39c8a002f85de24f2ced1cab14 Mon Sep 17 00:00:00 2001
From: Fred Boniface <fjla@fredboniface.co.uk>
Date: Wed, 11 Feb 2026 19:01:24 +0000
Subject: [PATCH] Include tabler icons and switch buttons to use icons

---
 package-lock.json                  | 29 +++++++++++++++++++++++++++
 package.json                       |  1 +
 src/routes/map/[slug]/+page.svelte | 32 ++++++++++++++++++++----------
 3 files changed, 52 insertions(+), 10 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 3942bc5..d1a58c5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
 				"@sveltejs/adapter-node": "^5.5.2",
 				"@sveltejs/kit": "^2.50.1",
 				"@sveltejs/vite-plugin-svelte": "^6.2.4",
+				"@tabler/icons-svelte": "^3.36.1",
 				"@types/node": "^22",
 				"eslint": "^9.39.2",
 				"eslint-config-prettier": "^10.1.8",
@@ -1344,6 +1345,34 @@
 				"vite": "^6.3.0 || ^7.0.0"
 			}
 		},
+		"node_modules/@tabler/icons": {
+			"version": "3.36.1",
+			"resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-3.36.1.tgz",
+			"integrity": "sha512-f4Jg3Fof/Vru5ioix/UO4GX+sdDsF9wQo47FbtvG+utIYYVQ/QVAC0QYgcBbAjQGfbdOh2CCf0BgiFOF9Ixtjw==",
+			"dev": true,
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/codecalm"
+			}
+		},
+		"node_modules/@tabler/icons-svelte": {
+			"version": "3.36.1",
+			"resolved": "https://registry.npmjs.org/@tabler/icons-svelte/-/icons-svelte-3.36.1.tgz",
+			"integrity": "sha512-f48RDkXJr7dMbbWHho81rR91QiPleHTlOwJUM5uFhTqo7dXH4mNZxJo3tksQNmlIauh7PqoS3i+RY7YlZxg5yg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@tabler/icons": ""
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/codecalm"
+			},
+			"peerDependencies": {
+				"svelte": ">=3 <6 || >=5.0.0-next.0"
+			}
+		},
 		"node_modules/@types/cookie": {
 			"version": "0.6.0",
 			"resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
diff --git a/package.json b/package.json
index 1c9a0b0..5c90226 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
 		"@sveltejs/adapter-node": "^5.5.2",
 		"@sveltejs/kit": "^2.50.1",
 		"@sveltejs/vite-plugin-svelte": "^6.2.4",
+		"@tabler/icons-svelte": "^3.36.1",
 		"@types/node": "^22",
 		"eslint": "^9.39.2",
 		"eslint-config-prettier": "^10.1.8",
diff --git a/src/routes/map/[slug]/+page.svelte b/src/routes/map/[slug]/+page.svelte
index 8084ec9..f49fb8d 100644
--- a/src/routes/map/[slug]/+page.svelte
+++ b/src/routes/map/[slug]/+page.svelte
@@ -5,6 +5,7 @@
 	import { resolve } from '$app/paths';
 
 	import logo from '$lib/assets/round-logo.svg';
+    import { IconArrowsExchange, IconSettings } from '@tabler/icons-svelte';
 
 	// data.route contains: routeStart, routeEnd, routeId, elecStart, elecEnd, routeDetail[]
 	export let data;
@@ -82,9 +83,9 @@
 
 		<div class="quick-actions">
 			<button class="icon-btn" onclick={() => (reversed = !reversed)}>
-				⇄ {reversed ? 'UP' : 'DN'}
+				<IconArrowsExchange />
 			</button>
-			<button class="icon-btn" onclick={() => (showFilters = !showFilters)}> Settings </button>
+			<button class="icon-btn" onclick={() => (showFilters = !showFilters)}> <IconSettings /> </button>
 		</div>
 	</header>
 
@@ -184,11 +185,18 @@
 		width: 52px;
 		height: 52px;
 		padding-left: 0;
-		margin-left: 0;
+		margin-left: 15px;
 		flex-shrink: 0;
 		transition: all 0.3s ease;
 	}
 
+	@media (max-width: 350px) {
+		.home-link {
+			width: 42px;
+			height: 42px;
+		}
+	}
+
 	.home-link:hover {
 		transform: translateY(-1px) scale(1.05);
 		filter: brightness(1.1);
@@ -224,25 +232,23 @@
 	.quick-actions {
 		display: flex;
 		gap: 0.5rem;
+		margin-right: 15px;
 	}
 
 	.map-spine {
 		padding-top: 72px;
 	}
 
-	@media (min-width: 768px) {
-		.primary-station {
+	@media (min-width: 536px) {
+.primary-station {
 			font-size: 1.5rem;
 		}
 		.secondary-station {
 			font-size: 1rem;
 		}
+	}
 
-		.top-nav {
-			padding: 0 2rem;
-			height: 80px;
-		}
-
+	@media (min-width: 768px) {
 		h1 {
 			font-size: 1.5rem;
 			letter-spacing: -0.03em;
@@ -359,6 +365,12 @@
 		transition: all 0.3s ease;
 	}
 
+	@media (max-width: 350px) {
+		.icon-btn {
+			padding: 0.3rem 0.3rem;
+		}
+	}
+
 	.icon-btn:hover {
 		background: #2d2d2d;
 	}