transaction list styles

9 files changed, 30 insertions, 27 deletions

diff --git a/src/routes/(app)/[username]/+page.svelte b/src/routes/(app)/[username]/+page.svelte
index 8795c916..42e3dd3a 100644
--- a/src/routes/(app)/[username]/+page.svelte
+++ b/src/routes/(app)/[username]/+page.svelte
@@ -21,10 +21,10 @@
 		<div class="flex flex-wrap gap-2 w-full">
 			<div class="w-full flex">
 				<a href={`/${subject.username}/receive`} class="mx-auto">
-					<button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-40">
+					<button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60">
 						<div class="mx-auto flex">
 							<div style="mr-1">⚡️</div>
-							<div>{$t('user.lightning')}</div>
+							<div>{$t('user.lightning')} {$t('user.invoice')}</div>
 						</div>
 					</button>
 				</a>
@@ -32,10 +32,10 @@
 
 			<div class="w-full flex">
 				<a href={`/${subject.username}/receive/bitcoin`} class="mx-auto">
-					<button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-40">
+					<button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60">
 						<div class="mx-auto flex">
 							<img src="/images/bitcoin.svg" class="w-5 my-auto mr-1" />
-							<div>{$t('user.bitcoin')}</div>
+							<div>{$t('user.bitcoin')} {$t('user.invoice')}</div>
 						</div>
 					</button>
 				</a>
@@ -44,10 +44,10 @@
 			{#if user?.username !== subject.username}
 				<div class="w-full flex">
 					<a href={`/${subject.username}/request`} class="mx-auto">
-						<button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-40">
+						<button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60">
 							<div class="mx-auto flex">
 								<Icon icon="support" style="mr-1" />
-								<div>{$t('user.invoice')}</div>
+								<div>{$t('transactions.requestAnInvoice')}</div>
 							</div>
 						</button>
 					</a>
diff --git a/src/routes/(app)/[username]/dashboard/+page.svelte b/src/routes/(app)/[username]/dashboard/+page.svelte
index 1c8fdb1b..c10518f5 100644
--- a/src/routes/(app)/[username]/dashboard/+page.svelte
+++ b/src/routes/(app)/[username]/dashboard/+page.svelte
@@ -159,7 +159,7 @@
 	<div class="text-secondary flex mr-auto">
 		<div class="flex mr-1">
 			<div class="my-auto mr-1">1</div>
-			<img src="/images/bitcoin.svg" class="w-5 my-auto" />
+			<img src="/images/bitcoin.svg" class="w-5 my-auto" alt="Bitcoin" />
 		</div>
 		<div>= {f(animatedRate, user.currency)}</div>
 	</div>
diff --git a/src/routes/(app)/[username]/request/[id]/+page.svelte b/src/routes/(app)/[username]/request/[id]/+page.svelte
index c4dabf16..356fd95a 100644
--- a/src/routes/(app)/[username]/request/[id]/+page.svelte
+++ b/src/routes/(app)/[username]/request/[id]/+page.svelte
@@ -49,4 +49,4 @@
 	<div class="opacity-0 w-screen h-screen fixed top-0 left-0 z-50" />
 </a>
 
-<div class="fixed bottom-10 w-full text-center">(tap anywhere to continue)</div>
+<div class="fixed bottom-10 w-full text-center">{$t('transactions.tapAnywhere')}</div>
diff --git a/src/routes/(app)/[username]/settings/[...tab]/_account.svelte b/src/routes/(app)/[username]/settings/[...tab]/_account.svelte
index 4551ccec..a60ab7a6 100644
--- a/src/routes/(app)/[username]/settings/[...tab]/_account.svelte
+++ b/src/routes/(app)/[username]/settings/[...tab]/_account.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { tick } from 'svelte';
-	import { colorTheme, tempProfileFiles, avatarUpload, bannerUpload } from '$lib/store';
+	import { colorTheme, avatarUpload, bannerUpload } from '$lib/store';
 	import { Icon, Toggle, LocaleSelector } from '$comp';
 	import { t } from '$lib/translations';
 	import { upload } from '$lib/upload';
@@ -15,7 +15,6 @@
 
 	$: profile = files.profile.src;
 	$: banner = files.banner.src;
-	$: $tempProfileFiles = { profile: files.profile.src, banner: files.banner.src };
 
 	let togglePassword = () => (revealPassword = !revealPassword);
 	let colorThemes = [
diff --git a/src/routes/(app)/[username]/transactions/[...page]/+page.svelte b/src/routes/(app)/[username]/transactions/[...page]/+page.svelte
index 9fe9cde6..2ea151d5 100644
--- a/src/routes/(app)/[username]/transactions/[...page]/+page.svelte
+++ b/src/routes/(app)/[username]/transactions/[...page]/+page.svelte
@@ -127,30 +127,30 @@
 					<div class="flex my-auto">
 						{#if tx.redeemcode}
 							<a href={`/voucher/${tx.redeemcode}`}>
-								<div class="mx-auto text-secondary flex">
-									<div class="w-20 my-auto">
-										<img src="/icons/logo-symbol.svg" />
+								<div class="text-secondary flex">
+									<div class="my-auto mr-1">
+										<img src="/icons/logo-symbol.svg" class="w-12 border-4 border-white" />
 									</div>
 
 									<div class="my-auto">Voucher</div>
 								</div>
 							</a>
 						{:else if tx.with}
-							<a href={`/${tx.with.username}`} class="mx-auto">
+							<a href={`/${tx.with.username}`}>
 								<div class="flex">
 									<div class="my-auto">
-										<Avatar user={tx.with} size={20} />
+										<Avatar user={tx.with} size={12} />
 									</div>
 									<div class="my-auto ml-1 text-secondary">{tx.with.username}</div>
 								</div>
 							</a>
 						{:else}
-							<div class="mx-auto text-secondary flex">
+							<div class="text-secondary flex">
 								{#if tx.network === 'lightning'}
-									<div class="text-5xl">⚡️</div>
+									<div class="text-3xl">⚡️</div>
 								{:else}
-									<div class="w-20 my-auto">
-										<img src="/images/bitcoin.svg" class="border-4 border-white" />
+									<div class="my-auto mr-1">
+										<img src="/images/bitcoin.svg" class="w-12 border-4 border-white" />
 									</div>
 								{/if}
 
diff --git a/src/routes/(app)/invoice/[id]/paid/+page.svelte b/src/routes/(app)/invoice/[id]/paid/+page.svelte
index 65b11bd4..ec0f6fae 100644
--- a/src/routes/(app)/invoice/[id]/paid/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/paid/+page.svelte
@@ -60,4 +60,4 @@
 	<div class="opacity-0 w-screen h-screen fixed top-0 left-0 z-50" />
 </a>
 
-<div class="fixed bottom-10 w-full text-center">(tap anywhere to continue)</div>
+<div class="fixed bottom-10 w-full text-center">{$t('transactions.tapAnywhere')}</div>
diff --git a/src/routes/(app)/redeem/[redeemcode]/+page.server.js b/src/routes/(app)/redeem/[redeemcode]/+page.server.js
index 15d96436..b3795acb 100644
--- a/src/routes/(app)/redeem/[redeemcode]/+page.server.js
+++ b/src/routes/(app)/redeem/[redeemcode]/+page.server.js
@@ -5,7 +5,11 @@ export async function load({ cookies, locals, params }) {
 	let { user } = locals;
 
 	if (user) {
-		await post('/redeem', params, auth(cookies));
+		try {
+			await post('/redeem', params, auth(cookies));
+		} catch (e) {
+			throw redirect(307, '/');
+		}
 		throw redirect(307, `/${user.username}/transactions`);
 	}
 
diff --git a/src/routes/(app)/sent/+page.svelte b/src/routes/(app)/sent/+page.svelte
index cb22ccd5..047efc86 100644
--- a/src/routes/(app)/sent/+page.svelte
+++ b/src/routes/(app)/sent/+page.svelte
@@ -32,4 +32,4 @@
 	<div class="opacity-0 w-screen h-screen fixed top-0 left-0 z-50" />
 </a>
 
-<div class="fixed bottom-10 w-full text-center">(tap anywhere to continue)</div>
+<div class="fixed bottom-10 w-full text-center">{$t('transactions.tapAnywhere')}</div>
diff --git a/src/routes/(app)/voucher/[redeemcode]/+page.svelte b/src/routes/(app)/voucher/[redeemcode]/+page.svelte
index 99d5da5e..9af67498 100644
--- a/src/routes/(app)/voucher/[redeemcode]/+page.svelte
+++ b/src/routes/(app)/voucher/[redeemcode]/+page.svelte
@@ -42,15 +42,15 @@
 						{sat(amount)}
 					</h3>
 				</div>
-				<div class="my-auto">from</div>
+				<div class="my-auto">{$t('transactions.from')}</div>
 				<div class="flex">
 					<Avatar {user} size={20} />
 					<div class="my-auto">{user.username}</div>
 				</div>
 			</div>
 			<div class="mx-auto my-auto flex gap-2 justify-center" data-sveltekit-prefetch="off">
-				{#if redeemed}
-					<div class="my-auto">Redeemed by</div>
+				{#if redeemer}
+					<div class="my-auto">{$t('transactions.redeemedBy')}</div>
 					<div class="flex">
 						<Avatar user={redeemer} size={20} />
 						<div class="my-auto">{redeemer.username}</div>
@@ -65,9 +65,9 @@
 							type="submit"
 							class="text-lg rounded-full border py-3 px-7 font-bold hover:opacity-80"
 							class:bg-gray-200={redeemed}
-							disabled={$loginRedirect}
+							disabled={$loginRedirect || redeemed}
 						>
-							{'Redeem'}
+							{redeemed ? $t('transactions.redeemed') : $t('transactions.redeem')}
 						</button>
 					</form>
 				{/if}