add loading state to invoice button, improve nav button states/styles

3 files changed, 52 insertions, 8 deletions

diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
index cd3dfd30..22c18622 100644
--- a/src/components/AppHeader.svelte
+++ b/src/components/AppHeader.svelte
@@ -4,6 +4,7 @@
 	import { goto } from '$app/navigation';
 	import { Icon } from '$comp';
 	import { t } from '$lib/translations';
+	import { page } from '$app/stores';
 
 	export let avatarPosition = 'left-[calc(50vw-48px)] bottom-[-48px]';
 
@@ -37,12 +38,20 @@
 	<nav class="flex justify-end items-center space-x-4 p-5">
 		{#if $user}
 			<a href={`/${$user.username}/receive`}>
-				<button class="bg-white p-2 rounded-full w-12 h-12 shadow-xl"
+				<button
+					class="bg-white p-2 rounded-full w-12 h-12 drop-shadow-xl border border-black/10 {$page
+						.url.pathname === `/${$user.username}/receive`
+						? 'opacity-100'
+						: 'opacity-70'}"
 					><Icon icon="numpad" style="mx-auto" />
 				</button>
 			</a>
 			<a href={`/${$user.username}/transactions`}>
-				<button class="bg-white p-2 rounded-full w-12 h-12 shadow-xl relative"
+				<button
+					class="bg-white p-2 rounded-full w-12 h-12 drop-shadow-xl border border-black/10 {$page
+						.url.pathname === `/${$user.username}/transactions`
+						? 'opacity-100'
+						: 'opacity-70'} relative"
 					><Icon icon="clock" style="mx-auto" />
 					{#if $newPayment}
 						<span class="absolute top-0 right-0">
@@ -57,14 +66,23 @@
 				</button>
 			</a>
 			<a href={`/${$user.username}`}>
-				<button class="bg-white p-2 rounded-full w-12 h-12 shadow-xl"
+				<button
+					class="bg-white p-2 rounded-full w-12 h-12 drop-shadow-xl border border-black/10 {$page
+						.url.pathname === `/${$user.username}`
+						? 'opacity-100'
+						: 'opacity-70'}"
 					><Icon icon="profile" style="mx-auto" />
 				</button>
 			</a>
 			<div class="relative">
 				<OutClick on:outclick={() => (showMenu = false)}>
 					<button
-						class="bg-white p-2 rounded-full w-12 h-12 shadow-xl"
+						class="bg-white p-2 rounded-full w-12 h-12 drop-shadow-xl border border-black/10 {$page
+							.url.pathname === `/${$user.username}/dashboard` ||
+						$page.url.pathname === `/${$user.username}/settings` ||
+						$page.url.pathname === `/${$user.username}/support`
+							? 'opacity-100'
+							: 'opacity-70'}"
 						on:click={() => (showMenu = !showMenu)}
 						><Icon icon="menu" style="mx-auto" />
 					</button>
diff --git a/src/routes/[username]/receive/+page.svelte b/src/routes/[username]/receive/+page.svelte
index 699fa4bd..68cf0d83 100644
--- a/src/routes/[username]/receive/+page.svelte
+++ b/src/routes/[username]/receive/+page.svelte
@@ -9,6 +9,7 @@
 	let useFiat = true;
 	let amountFiat = 0;
 	let amountSats = 0;
+	let loading = false;
 
 	$: amount = parseInt(useFiat ? Math.round(amountFiat / ($selectedRate / 100000000)) : amountSats);
 
@@ -73,6 +74,7 @@
 	};
 
 	let submit = async () => {
+		loading = true;
 		let id = await post('/invoice', {
 			amount,
 			rate: $selectedRate,
@@ -171,13 +173,37 @@
 				<div class="space-y-3 w-full md:w-[300px] mx-auto">
 					<button
 						class="bg-black text-white rounded-xl w-full h-[48px] flex justify-center items-center font-semibold text-sm {$invoiceAmount ===
-						0
+							0 || loading
 							? 'opacity-50'
 							: 'opacity-100'}"
 						on:click={submit}
-						disabled={$invoiceAmount === 0}
-						><Icon icon="qr" style="mr-2" /> {$t('user.receive.showQR')}</button
+						disabled={$invoiceAmount === 0 || loading}
 					>
+						{#if loading}
+							<svg
+								class="mx-auto h-6 w-6 animate-spin text-white"
+								xmlns="http://www.w3.org/2000/svg"
+								fill="none"
+								viewBox="0 0 24 24"
+							>
+								<circle
+									class="opacity-25"
+									cx="12"
+									cy="12"
+									r="10"
+									stroke="currentColor"
+									stroke-width="4"
+								/>
+								<path
+									class="opacity-75"
+									fill="currentColor"
+									d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+								/>
+							</svg>
+						{:else}
+							<Icon icon="qr" style="mr-2" /> {$t('user.receive.showQR')}
+						{/if}
+					</button>
 				</div>
 			</div>
 		{:else}
diff --git a/src/routes/invoice/[id]/+page.svelte b/src/routes/invoice/[id]/+page.svelte
index a521f327..3f96bf06 100644
--- a/src/routes/invoice/[id]/+page.svelte
+++ b/src/routes/invoice/[id]/+page.svelte
@@ -261,7 +261,7 @@
 						>Scan to pay <a href="/{username}" class="text-black font-semibold">{username}</a></span
 					>
 
-					<div class="border border-gray-200 rounded-2xl md:p-4">
+					<div class="border border-gray-200 rounded-2xl">
 						<Qr {text} {image} bind:qr />
 					</div>