diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/AppHeader.svelte | 26 | ||||
| -rw-r--r-- | src/routes/[username]/receive/+page.svelte | 32 | ||||
| -rw-r--r-- | src/routes/invoice/[id]/+page.svelte | 2 |
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> |