Add timezone warning to top of +layout.svelte conditionally displayed when the users device is not in the Europe/London timezone

src/lib/components/ui/Button.svelte

@@ -19,47 +19,60 @@
 {#if isLink}
 	<a
 		{href}
-		class="btn {color}"
+		class="hitbox-wrapper"
 		target={isExternal ? '_blank' : undefined}
 		rel={isExternal ? 'noopener noreferrer' : undefined}
 		{...rest}
-	>
+		><span class="btn {color}">
-		{@render children?.()}
+			{@render children?.()}
+		</span>
 	</a>
 {:else}
-	<button class="btn {color}" {onclick} {...rest}>
+	<button class="hitbox-wrapper" {onclick} {...rest}>
-		{@render children?.()}
+		<span class="btn {color}">{@render children?.()}</span>
 	</button>
 {/if}
 
 <style>
-	.btn {
+	.hitbox-wrapper {
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
-		padding: 0.4rem 1.2rem;
-		width: fit-content;
-		min-width: 90px;
 		min-height: 48px;
+		min-width: 48px;
+		appearance: none;
+		background: transparent;
 		border: none;
-		border-radius: 20px;
+		padding: 0 4px;
 		cursor: pointer;
 		text-decoration: none;
-		font-family: 'URW Gothic', sans-serif;
-		letter-spacing: 0.05ch;
-		font-size: 1rem;
-		font-weight: 600;
-		transition: all 0.2s;
-		box-shadow: var(--shadow-std);
-		user-select: none;
-		-webkit-user-select: none;
 		-webkit-tap-highlight-color: transparent;
-		touch-action: manipulation;
+	}
+	.btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: fit-content;
+		flex-shrink: 0;
+		padding: 0 1.2rem;
+		min-width: 90px;
+		height: 36px;
+		border-radius: 20px;
+		border: none;
+		box-shadow: var(--shadow-small);
+		font-family: 'URW Gothic', sans-serif;
+		font-size: 0.93rem;
+		font-weight: 400;
+		letter-spacing: 0.05ch;
+		transition:
+			all 0.1s ease,
+			box-shadow 0.2s;
 	}
 
 	.accent {
 		background-color: var(--color-accent);
 		color: var(--color-title);
+		font-weight: 600;
 	}
 
 	.brand {
@@ -72,11 +85,11 @@
 		color: var(--color-title);
 	}
 
-	.btn:hover {
+	.hitbox-wrapper:hover .btn {
 		filter: brightness(1.5);
 	}
 
-	.btn.active {
+	.hitbox-wrapper:active .btn {
 		transform: scale(0.98);
 	}
 </style>

src/lib/components/ui/TimezoneWarning.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+    import { slide } from 'svelte/transition';
+
+	let isNotLondon = $state(false);
+	let londonZone = $state('Greenwich Mean Time');
+
+	onMount(() => {
+		const userTZ = Intl.DateTimeFormat().resolvedOptions().timeZone;
+		isNotLondon = userTZ !== 'Europe/London';
+
+		const parts = new Intl.DateTimeFormat('en-GB', {
+			timeZone: 'Europe/London',
+			timeZoneName: 'long'
+		}).formatToParts(new Date());
+
+		londonZone = parts.find((p) => p.type === 'timeZoneName')?.value || 'UK Time';
+	});
+</script>
+
+{#if isNotLondon}
+	<div transition:slide={{duration: 300}} class="tzWarn"><p class="tzText">
+		All times are shown in <strong>{londonZone}</strong>
+    </p></div>
+{/if}
+
+<style>
+    .tzWarn {
+        display: flex;
+        justify-content: center;
+        width: 100%;
+        padding: 1rem 0 0 0;
+    }
+
+    .tzText {
+        width: 80%;
+        text-align: center;
+        margin: auto;
+        font-family: 'URW Gothic', sans-serif;
+        font-size: 1.2rem;
+    }
+</style>

src/lib/components/ui/cards/NearbyStationsCard.svelte

@@ -22,8 +22,7 @@
 					<div
 						class="btn-container"
 						animate:flip={{ duration: flipDuration }}
-						in:fade={{ duration: 200, delay: 100 }}
+						in:fade|global={{ duration: 200 }}
-						out:fade={{ duration: 150 }}
 					>
 						<Button href={`/board?loc=${station.c}`}
 							><span class="stn-name">{station.n}</span></Button
@@ -37,8 +36,13 @@
 
 <style>
 	.card-content {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
 		text-align: center;
 		width: 90%;
+		min-height: 98px;
 		margin: auto;
 		padding: 10px 0 10px 0;
 	}
@@ -46,14 +50,14 @@
 	.stations-flex {
 		display: flex;
 		flex-wrap: wrap;
-		gap: 0.75rem;
+		gap: 0.1rem 0.5rem;
 		justify-content: center;
 		align-items: flex-start;
 	}
 
 	.btn-container {
 		display: block;
-        width: fit-content;
+		width: fit-content;
 		will-change: transform;
 	}
 

src/lib/global.css

@@ -55,6 +55,7 @@
 	/* Shadows */
 	--color-shadow: hsla(210, 20%, 5%, 0.35);
 	--shadow-std: 0 4px 12px var(--color-shadow);
+	--shadow-small: 0 4px 6px var(--color-shadow);
 	--shadow-up: 0 -4px 12px var(--color-shadow);
 	--shadow-right: 4px 0 12px var(--color-shadow);
 }

src/routes/+layout.svelte

@@ -6,6 +6,8 @@
 	import { LOCATIONS } from '$lib/locations-object.svelte';
 	import { nearestStationsState } from '$lib/geohash.svelte';
 
+	import TimezoneWarning from '$lib/components/ui/TimezoneWarning.svelte';
+
 	import '$lib/global.css';
 
 	import logoText from '$lib/assets/round-logo-text.svg';
@@ -78,6 +80,7 @@
 </header>
 
 <main>
+	<TimezoneWarning />
 	{@render children()}
 </main>