Adjust sizes on manifest icons

Update theme colour to accent colour to provide thematic separation of notification bar and header bar when running full screen on android.

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",

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",

src/routes/manifest.webmanifest/+server.ts

@@ -9,21 +9,21 @@ export const prerender = true;
 export const GET: RequestHandler = ({ url }) => {
 	const manifest = {
 		name: 'OwlBoard Maps',
-		short_name: 'OwlBoard Maps',
+		short_name: 'OB Maps',
 		start_url: '/',
 		display: 'standalone',
-		theme_color: '#3c6f79',
+		theme_color: '#4fd1d1',
 		background_color: '#3d4952',
 		icons: [
 			{
 				src: logo,
-				sizes: 'any',
+				sizes: '48x48 72x72 96x96 128x128 256x256 512x512 any',
 				type: 'image/svg+xml',
 				purpose: 'any'
 			},
 			{
 				src: maskableLogo,
-				sizes: 'any',
+				sizes: '48x48 72x72 96x96 128x128 256x256 512x512 any',
 				type: 'image/svg+xml',
 				purpose: 'maskable'
 			},

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;
 	}