From 524097a8f421448343ff2466da56c47589ffcac4 Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Thu, 15 Dec 2022 14:41:28 -0800
Subject: transaction list styles

---
 src/components/AppHeader.svelte                        | 10 ++--------
 src/components/Avatar.svelte                           |  8 +++-----
 src/components/LandingHero.svelte                      |  2 --
 src/lib/store.js                                       |  1 -
 src/locales/en.json                                    |  7 ++++++-
 src/routes/(app)/[username]/+page.svelte               | 12 ++++++------
 src/routes/(app)/[username]/dashboard/+page.svelte     |  2 +-
 src/routes/(app)/[username]/request/[id]/+page.svelte  |  2 +-
 .../(app)/[username]/settings/[...tab]/_account.svelte |  3 +--
 .../[username]/transactions/[...page]/+page.svelte     | 18 +++++++++---------
 src/routes/(app)/invoice/[id]/paid/+page.svelte        |  2 +-
 src/routes/(app)/redeem/[redeemcode]/+page.server.js   |  6 +++++-
 src/routes/(app)/sent/+page.svelte                     |  2 +-
 src/routes/(app)/voucher/[redeemcode]/+page.svelte     | 10 +++++-----
 14 files changed, 41 insertions(+), 44 deletions(-)

(limited to 'src')

diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
index 429735ab..bdfc76b6 100644
--- a/src/components/AppHeader.svelte
+++ b/src/components/AppHeader.svelte
@@ -1,6 +1,6 @@
 <script>
 	import OutClick from 'svelte-outclick';
-	import { newPayment, colorTheme, tempProfileFiles } from '$lib/store';
+	import { newPayment, colorTheme } from '$lib/store';
 	import { goto } from '$app/navigation';
 	import { Avatar, Icon } from '$comp';
 	import { t } from '$lib/translations';
@@ -23,13 +23,7 @@
 
 	let showMenu = false;
 
-	$: bg =
-		$tempProfileFiles && $tempProfileFiles.banner
-			? `url(${$tempProfileFiles.banner})`
-			: subject?.banner
-			? `url(/api/public/${subject.username}-banner.webp)`
-			: undefined;
-
+	$: bg = subject?.banner ? `url(/api/public/${subject.username}-banner.webp)` : undefined;
 	$: $page && (showMenu = false);
 </script>
 
diff --git a/src/components/Avatar.svelte b/src/components/Avatar.svelte
index 054279ec..d636416d 100644
--- a/src/components/Avatar.svelte
+++ b/src/components/Avatar.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { colorTheme, tempProfileFiles } from '$lib/store';
+	import { colorTheme } from '$lib/store';
 	import { Icon } from '$comp';
 
 	export let user;
@@ -14,14 +14,12 @@
 	>
 		{#if user?.profile}
 			<img
-				src={$tempProfileFiles && $tempProfileFiles.profile
-					? $tempProfileFiles.profile
-					: `/api/public/${user.username}-profile.webp`}
+				src={`/api/public/${user.username}-profile.webp`}
 				class="w-full h-full object-cover object-center overflow-hidden"
 				alt={user.username}
 			/>
 		{:else}
-			<Icon icon="logo-symbol-white" />
+			<Icon icon="logo-symbol-white" style="w-4/5" />
 		{/if}
 	</div>
 </a>
diff --git a/src/components/LandingHero.svelte b/src/components/LandingHero.svelte
index 213138a2..8e1d6476 100644
--- a/src/components/LandingHero.svelte
+++ b/src/components/LandingHero.svelte
@@ -2,8 +2,6 @@
 	import { goto } from '$app/navigation';
 	import { Icon, Image } from '$comp';
 	import { t } from '$lib/translations';
-
-	export let user;
 </script>
 
 <div class="mt-[96.88px] md:mt-0">
diff --git a/src/lib/store.js b/src/lib/store.js
index a273b756..342bdc40 100644
--- a/src/lib/store.js
+++ b/src/lib/store.js
@@ -40,7 +40,6 @@ export const token = persistSession('token');
 export const invoices = writable({});
 export const newPayment = persistLocal('newPayment');
 export const colorTheme = writable('from-primary to-gradient');
-export const tempProfileFiles = writable();
 export const avatarUpload = writable();
 export const bannerUpload = writable();
 export const pin = persistSession('pin', undefined, 5 * 60 * 1000);
diff --git a/src/locales/en.json b/src/locales/en.json
index 08256803..fc0d2453 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -272,6 +272,11 @@
 		"requestAnInvoice": "Request an invoice",
 		"submit": "Submit",
 		"isRequesting": "is requesting",
-		"awaiting": "Awaiting"
+		"awaiting": "Awaiting",
+		"tapAnywhere": "Tap anywhere",
+		"from": "from",
+		"redeem": "Redeem",
+		"redeemed": "Redeemed",
+		"redeemedBy": "Redeemed by"
 	}
 }
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}
-- 
cgit v1.2.3