From eeecc98c5b22d75b19e65cd122562e6e69eed14e Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Fri, 11 Nov 2022 20:04:48 -0800
Subject: style tweaks

---
 src/components/AppHeader.svelte                    | 11 +--
 src/components/Avatar.svelte                       |  2 +-
 src/routes/(app)/[username]/+page.svelte           | 99 +++++++++++++---------
 .../[username]/receive/[...recipient]/+page.svelte |  8 +-
 src/routes/(app)/[username]/request/+page.svelte   |  8 +-
 .../(app)/[username]/request/sent/+page.svelte     | 10 +--
 .../[username]/transactions/[...page]/+page.svelte | 43 +++++++---
 src/routes/(app)/invoice/[id]/+layout.server.js    |  1 +
 src/routes/(app)/invoice/[id]/+page.svelte         | 60 ++++++-------
 src/routes/(app)/invoice/[id]/paid/+page.svelte    | 10 +--
 src/routes/(app)/invoice/[id]/tip/+page.server.js  |  6 ++
 src/routes/(app)/invoice/[id]/tip/+page.svelte     |  4 +-
 src/routes/(app)/sent/+page.svelte                 |  9 +-
 13 files changed, 151 insertions(+), 120 deletions(-)

(limited to 'src')

diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
index 7d03ec84..e0b5d002 100644
--- a/src/components/AppHeader.svelte
+++ b/src/components/AppHeader.svelte
@@ -107,16 +107,15 @@
 							{#each menuButtons as { href, icon, key }}
 								<li>
 									<a {href}>
-										<button
-											class="flex justify-center items-center font-semibold hover:opacity-80"
+										<button class="flex justify-center items-center font-semibold hover:opacity-80"
 											><Icon {icon} style="mr-2 w-6 md:w-8" /> {$t(key)}
 										</button>
 									</a>
 								</li>
 							{/each}
 						</ul>
-            <hr class="my-4" />
-            <a href="/"><img src="/images/logo.svg" alt="Coinos"></a>
+						<hr class="my-4" />
+						<a href="/"><img src="/images/logo.svg" alt="Coinos" /></a>
 					</div>
 				</OutClick>
 			</div>
@@ -128,7 +127,9 @@
 			</a>
 		{/if}
 	</nav>
-	<div class="absolute md:w-[64px] md:mx-auto left-[calc(50vw-64px)] -bottom-[64px]">
+	<div
+		class="absolute md:w-[64px] md:mx-auto lg:left-[138px] left-[calc(50vw-64px)] -bottom-[64px]"
+	>
 		<Avatar user={subject} />
 	</div>
 </header>
diff --git a/src/components/Avatar.svelte b/src/components/Avatar.svelte
index d2d83977..054279ec 100644
--- a/src/components/Avatar.svelte
+++ b/src/components/Avatar.svelte
@@ -4,7 +4,7 @@
 
 	export let user;
 	export let size = 32;
-  export let disabled = false;
+	export let disabled = false;
 	$: s = size.toString();
 </script>
 
diff --git a/src/routes/(app)/[username]/+page.svelte b/src/routes/(app)/[username]/+page.svelte
index 4edfaa38..328f5bbe 100644
--- a/src/routes/(app)/[username]/+page.svelte
+++ b/src/routes/(app)/[username]/+page.svelte
@@ -10,59 +10,78 @@
 	let followed = false;
 </script>
 
-<div class="container px-4 flex flex-wrap sm:flex-nowrap mb-4">
-	<div class="w-full sm:w-[340px] pt-20 space-y-5 mr-4">
-		<h1 class="text-3xl font-bold text-center sm:text-left">{subject.username}</h1>
+<div class="container mx-auto w-full x-4 mb-4 flex flex-wrap">
+	<div class="w-[240px] pt-20 space-y-5 lg:absolute left-20 mx-auto">
+		<h1 class="text-3xl font-bold text-center mx-auto lg:text-left">{subject.username}</h1>
 
-		<div class="text-secondary w-64">
+		<div class="text-secondary mx-auto text-center lg:text-left lg:mx-0">
 			{subject.address && subject.address !== 'null' ? subject.address : ''}
 		</div>
 
 		{#if user?.username !== subject.username}
-			<div>
-				<a href={`/${subject.username}/receive`}>
-					<button class="rounded-full border py-2 px-5 font-bold hover:opacity-80 w-full mb-2">
-						Pay now
-					</button>
-				</a>
+			<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">
+							<div class="mx-auto flex">
+								<div style="mr-1">⚡️</div>
+								<div>Lightning</div>
+							</div>
+						</button>
+					</a>
+				</div>
 
-				{#if user}
-					<a href={`/${subject.username}/request`}>
-						<button class="rounded-full border py-2 px-5 font-bold hover:opacity-80 w-full mb-2"
-							>Ask to pay</button
-						>
+				<div class="w-full flex">
+					<a href={`/${subject.username}/address`} class="mx-auto">
+						<button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-40">
+							<div class="mx-auto flex">
+								<img src="/images/bitcoin.svg" class="w-5 my-auto mr-1" />
+								<div>Bitcoin</div>
+							</div>
+						</button>
 					</a>
-				{/if}
+				</div>
 
-				<a href={`/${subject.username}/address`}>
-					<button class="rounded-full border py-2 px-5 font-bold hover:opacity-80 w-full mb-2">
-						Bitcoin address
-					</button>
-				</a>
+				{#if user}
+					<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">
+								<div class="mx-auto flex">
+									<Icon icon="support" style="mr-1" />
+									<div>Invoice</div>
+								</div>
+							</button>
+						</a>
+					</div>
+				{/if}
 			</div>
 		{/if}
 	</div>
 
-	<div class="space-y-5 mt-5 sm:mt-20 mx-auto max-w-lg">
-		<img {src} class="w-[300px] mx-auto" on:click={() => copy(text)} alt="Lightning address" />
+	<div class="w-full flex">
+		<div class="space-y-5 mt-5 lg:pt-20 mx-auto max-w-lg">
+			<div class="border-2 rounded-[20%] w-[380px] py-6 mx-auto">
+				<img {src} class="mx-auto" on:click={() => copy(text)} alt="Lightning address" />
+			</div>
 
-		<div class="bg-primary font-semibold rounded-xl text-sm p-3 flex">
-			<div class="my-auto font-semibold text-lg w-full text-center">{text}</div>
-			<button class="ml-auto hover:opacity-80" on:click={() => copy(text)}>
-				<Icon icon="copy" />
-			</button>
-		</div>
+			<div class="bg-primary font-semibold rounded-3xl text-sm p-3 flex">
+				<div class="my-auto font-semibold text-lg w-full text-center">{text}</div>
+				<button class="ml-auto hover:opacity-80" on:click={() => copy(text)}>
+					<Icon icon="copy" />
+				</button>
+			</div>
 
-		{#if user?.username === subject.username}
-			<p class="text-secondary mb-1">
-				This <a
-					href="https://lightningaddress.com"
-					class="underline"
-					target="_blank"
-					rel="noreferrer">lightning address</a
-				> is like an email for bitcoin. You can publish it on your website or business cards and use
-				it multiple times.
-			</p>
-		{/if}
+			{#if user?.username === subject.username}
+				<p class="text-secondary mb-1">
+					This <a
+						href="https://lightningaddress.com"
+						class="underline"
+						target="_blank"
+						rel="noreferrer">lightning address</a
+					> is like an email for bitcoin. You can publish it on your website or business cards and use
+					it multiple times.
+				</p>
+			{/if}
+		</div>
 	</div>
 </div>
diff --git a/src/routes/(app)/[username]/receive/[...recipient]/+page.svelte b/src/routes/(app)/[username]/receive/[...recipient]/+page.svelte
index 41958cd0..76e5e124 100644
--- a/src/routes/(app)/[username]/receive/[...recipient]/+page.svelte
+++ b/src/routes/(app)/[username]/receive/[...recipient]/+page.svelte
@@ -68,12 +68,10 @@
 			<Numpad bind:amount bind:currency />
 			<button
 				type="submit"
-				class="bg-black text-white rounded-xl w-full h-[48px] flex justify-center items-center font-semibold {!amount
-					? 'opacity-50'
-					: 'opacity-100 hover:opacity-80'}"
-				disabled={!amount}
+				class="bg-black text-white rounded-xl w-full h-[48px] flex justify-center items-center font-semibold
+				opacity-100 hover:opacity-80"
 			>
-				Next
+				{amount ? 'Next' : "Sender's choice"}
 			</button>
 		</div>
 	</form>
diff --git a/src/routes/(app)/[username]/request/+page.svelte b/src/routes/(app)/[username]/request/+page.svelte
index 6e7eb08a..6422b794 100644
--- a/src/routes/(app)/[username]/request/+page.svelte
+++ b/src/routes/(app)/[username]/request/+page.svelte
@@ -9,11 +9,11 @@
 	let { subject, user } = data;
 </script>
 
-<button class="ml-5 md:ml-20 mt-5 md:mt-10 hover:opacity-80" on:click={back}>
+<button class="ml-5 md:ml-20 mt-10 hover:opacity-80" on:click={back}>
 	<Icon icon="arrow-left" style="w-10" />
 </button>
 
-<div class="container max-w-lg px-4 mx-auto">
+<div class="container max-w-lg px-4 mx-auto mt-10 space-y-5">
 	<h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold">Request an invoice</h1>
 
 	<form method="POST" use:enhance class="space-y-5">
@@ -22,7 +22,7 @@
 
 		<textarea
 			name="memo"
-			placeholder="You can use this field to describe your order"
+			placeholder="Use this field to describe your order"
 			class="w-full p-4 border rounded-xl h-48"
 		/>
 
@@ -31,7 +31,7 @@
 				type="submit"
 				class="bg-black text-white border rounded-full px-6 py-2 font-bold mx-auto"
 			>
-				Submit Request
+				Submit
 			</button>
 		</div>
 	</form>
diff --git a/src/routes/(app)/[username]/request/sent/+page.svelte b/src/routes/(app)/[username]/request/sent/+page.svelte
index 1ee2cde1..4995bfb2 100644
--- a/src/routes/(app)/[username]/request/sent/+page.svelte
+++ b/src/routes/(app)/[username]/request/sent/+page.svelte
@@ -11,10 +11,8 @@
 		<Icon icon="check" style="mx-auto" />
 	</div>
 	<h1 class="text-3xl md:text-4xl font-bold mb-6">Request sent</h1>
-
-	<a href={`/${subject.username}`}>
-		<button class="bg-black text-white rounded-2xl w-20 py-3 font-bold hover:opacity-80">
-			Done
-		</button>
-	</a>
 </div>
+
+<a href={`/${subject.username}`}>
+	<div class="opacity-0 w-screen h-screen fixed top-24 left-0 z-50" />
+</a>
diff --git a/src/routes/(app)/[username]/transactions/[...page]/+page.svelte b/src/routes/(app)/[username]/transactions/[...page]/+page.svelte
index c7007af4..5d8377d4 100644
--- a/src/routes/(app)/[username]/transactions/[...page]/+page.svelte
+++ b/src/routes/(app)/[username]/transactions/[...page]/+page.svelte
@@ -71,9 +71,13 @@
 		{$t('user.transactions.header')}
 	</h1>
 
-	<div class="container w-full mx-auto md:text-lg px-4 max-w-xl">
-		<div class="flex text-md text-secondary flex-wrap mb-4">
-			<select class="md:hidden bg-white border p-4 rounded-full" on:change={change}>
+	<div class="container w-full mx-auto text-lg px-4 max-w-xl space-y-5">
+		<div class="flex text-md text-secondary flex-wrap relative">
+			<Icon icon="clock" style="absolute left-4 top-4 opacity-50 md:hidden" />
+			<select
+				class="md:hidden bg-white border rounded-full text-center w-36 h-14"
+				on:change={change}
+			>
 				{#each presets as { start, end, title }, i}
 					<option
 						selected={selection === i}
@@ -87,14 +91,17 @@
 						class:active={selection === i}
 						href={`/${user.username}/transactions/${getUnixTime(start) + '/'}1`}
 					>
-						<button class="rounded-full border py-2 px-5 hover:opacity-80 mb-2">
+						<button class="rounded-full border px-4 hover:opacity-80 h-14 w-20">
 							<div class="my-auto">{title}</div>
 						</button>
 					</a>
 				{/each}
 			</div>
-			<button class="ml-auto rounded-xl border py-2 px-5 hover:opacity-80 mb-2 flex" on:click={csv}>
-				<Icon icon="save" style="opacity-50 mr-2" />
+			<button
+				class="ml-auto rounded-full border px-4 w-36 hover:opacity-80 flex h-14"
+				on:click={csv}
+			>
+				<Icon icon="save" style="opacity-50 mr-2 my-auto" />
 				<div class="my-auto">Export</div>
 			</button>
 		</div>
@@ -111,10 +118,10 @@
 			{/if}
 		</div>
 
-		<div class="space-y-10">
+		<div class="text-base">
 			{#each $txns as tx}
-				<div class="grid grid-cols-3 border-b pb-5">
-					<div class="whitespace-nowrap">
+				<div class="grid grid-cols-3 border-b h-24">
+					<div class="whitespace-nowrap my-auto">
 						<div class="mb-1 font-bold">
 							{f(tx.amount * (tx.rate / sats), tx.currency)}
 
@@ -136,24 +143,32 @@
 						</span>
 					</div>
 
-					<div class="flex">
+					<div class="flex my-auto">
 						{#if tx.with}
 							<a href={`/${tx.with.username}`} class="mx-auto">
 								<div class="flex">
 									<div class="my-auto">
-										<Avatar user={tx.with} size={12} />
+										<Avatar user={tx.with} size={20} />
 									</div>
 									<div class="my-auto ml-1 text-secondary">{tx.with.username}</div>
 								</div>
 							</a>
 						{:else}
-							<div class="mx-auto text-secondary">
-								{tx.amount > 0 ? (tx.confirmed ? 'Received' : 'Pending') : 'Sent'}
+							<div class="mx-auto text-secondary flex">
+								{#if tx.network === 'lightning'}
+									<div class="text-6xl">⚡️</div>
+								{:else}
+									<img src="/images/bitcoin.svg" class="w-16 my-auto mr-2" />
+								{/if}
+
+								<div class="my-auto">
+									{tx.amount > 0 ? (tx.confirmed ? 'Received' : 'Pending') : 'Sent'}
+								</div>
 							</div>
 						{/if}
 					</div>
 
-					<div class="text-secondary text-right">
+					<div class="text-secondary text-right text-sm my-auto">
 						<div>
 							{format(parseISO(tx.createdAt), 'h:mm aaa')}
 						</div>
diff --git a/src/routes/(app)/invoice/[id]/+layout.server.js b/src/routes/(app)/invoice/[id]/+layout.server.js
index 48d92a36..b4d7d496 100644
--- a/src/routes/(app)/invoice/[id]/+layout.server.js
+++ b/src/routes/(app)/invoice/[id]/+layout.server.js
@@ -8,6 +8,7 @@ export async function load({ depends, params, url }) {
 	let { id } = params;
 	let invoice = await get(`/invoice?uuid=${id}`);
 	let { amount, received, pending } = invoice;
+	amount = parseInt(amount);
 
 	let paid = (!amount && (received || pending)) || (amount > 0 && received + pending >= amount);
 	if (paid && !url.pathname.endsWith('paid')) throw redirect(307, `/invoice/${id}/paid`);
diff --git a/src/routes/(app)/invoice/[id]/+page.svelte b/src/routes/(app)/invoice/[id]/+page.svelte
index 46b0f07e..50495724 100644
--- a/src/routes/(app)/invoice/[id]/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/+page.svelte
@@ -73,11 +73,11 @@
 	};
 </script>
 
-<button class="ml-5 md:ml-20 mt-5 md:mt-10 hover:opacity-80" on:click={back}>
+<button class="ml-5 mt-5 sm:mt-10 hover:opacity-80" on:click={back}>
 	<Icon icon="arrow-left" style="w-10" />
 </button>
 
-<div class="container mx-auto max-w-lg px-4 space-y-2 md:space-y-5">
+<div class="container mx-auto max-w-lg px-4 space-y-2 sm:space-y-5">
 	<div>
 		<h1 class="text-secondary text-center text-xl">Please pay</h1>
 
@@ -93,25 +93,35 @@
 		</div>
 	</div>
 
-	{#if !user || user.username === username || showQr}
-		<div class="mx-auto">
-			<img {src} class:p-4={full} class="w-[300px] mx-auto" bind:this={qr} on:click={toggle} />
+	<div class="w-full !mt-5 sm:!mt-8">
+		<div class="relative mx-auto w-[330px] h-[330px]">
+			<img {src} class:p-4={full} class="w-[300px] mx-auto pt-1" bind:this={qr} on:click={toggle} />
+			<div class="border-2 rounded-[20%] w-[330px] -top-[10px] absolute h-[330px]" />
 		</div>
+	</div>
 
-		{#if address}
-			<div class="text-secondary">{address}</div>
-		{/if}
-
-		<div class="flex gap-2 justify-center">
-			<button
-				class="flex rounded-full border py-2 px-5 font-bold hover:opacity-80"
-				on:click={() => copy(text)}
-				><Icon icon="copy" style="mr-1" />
-				<div>Copy</div></button
-			>
-		</div>
+	{#if address}
+		<div class="text-secondary text-center">{address}</div>
 	{/if}
 
+	<div class="flex gap-2 justify-center">
+		<button
+			class="flex rounded-full border py-2 px-5 font-bold hover:opacity-80"
+			on:click={() => copy(text)}
+			><Icon icon="copy" style="mr-1" />
+			<div>Copy</div></button
+		>
+
+		{#if user && user.username !== username}
+			<a href={`/send/${invoice.uuid}`}>
+				<button class="flex rounded-full border py-2 px-5 font-bold hover:opacity-80">
+					<Icon icon="send" style="mr-1" />
+					<div class="my-auto">Pay</div>
+				</button>
+			</a>
+		{/if}
+	</div>
+
 	<div class="space-y-2 w-80 mx-auto">
 		{#if invoice.tip}
 			<div class="flex justify-between">
@@ -141,22 +151,6 @@
 			</div>
 		{/if}
 	</div>
-
-	{#if user && user.username !== username}
-		<div class="mx-auto my-auto flex gap-2 justify-center">
-			<a href={`/send/${invoice.uuid}`}>
-				<button class="text-lg rounded-full border py-3 px-7 font-bold hover:opacity-80">
-					Pay now
-				</button>
-			</a>
-			<button
-				class="text-lg rounded-full border py-3 px-7 font-bold hover:opacity-80"
-				on:click={() => (showQr = !showQr)}
-			>
-				{showQr ? 'Hide' : 'Show'} QR
-			</button>
-		</div>
-	{/if}
 </div>
 
 <style>
diff --git a/src/routes/(app)/invoice/[id]/paid/+page.svelte b/src/routes/(app)/invoice/[id]/paid/+page.svelte
index 60bc4592..ec80c14d 100644
--- a/src/routes/(app)/invoice/[id]/paid/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/paid/+page.svelte
@@ -54,10 +54,8 @@
 			{/if}
 		</h3>
 	{/if}
-
-	<a href={`/${user.username}/receive`}>
-		<button class="bg-black text-white rounded-2xl w-20 py-3 font-bold hover:opacity-80">
-			{$t('invoice.done')}
-		</button>
-	</a>
 </div>
+
+<a href={`/${user.username}/receive`}>
+	<div class="opacity-0 w-screen h-screen fixed top-0 left-0 z-50" />
+</a>
diff --git a/src/routes/(app)/invoice/[id]/tip/+page.server.js b/src/routes/(app)/invoice/[id]/tip/+page.server.js
index 1068f273..dd618b8a 100644
--- a/src/routes/(app)/invoice/[id]/tip/+page.server.js
+++ b/src/routes/(app)/invoice/[id]/tip/+page.server.js
@@ -1,4 +1,10 @@
 import invoice from '$lib/invoice';
+import { redirect } from '@sveltejs/kit';
+
+export async function load({ parent }) {
+	let { invoice } = await parent();
+	if (!invoice.amount) throw redirect(307, `/invoice/${invoice.uuid}`);
+}
 
 export const actions = {
 	default: invoice
diff --git a/src/routes/(app)/invoice/[id]/tip/+page.svelte b/src/routes/(app)/invoice/[id]/tip/+page.svelte
index 74c1639e..ca0a0437 100644
--- a/src/routes/(app)/invoice/[id]/tip/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/tip/+page.svelte
@@ -102,7 +102,9 @@
 	$invoices[id] = { amount, id, network, rate, received, text, tip, username };
 
 	$: browser &&
-		$invoices[id]?.received >= $invoices[id]?.amount &&
+		($invoices[id]?.amount > 0
+			? $invoices[id]?.received >= $invoices[id]?.amount
+			: $invoices[id]?.received) &&
 		goto(($invoices[id].memo === 'launch' && '/launch/purchase') || `/invoice/${id}/paid`);
 
 	$: amountFiat = parseFloat(((amount * rate) / sats).toFixed(2));
diff --git a/src/routes/(app)/sent/+page.svelte b/src/routes/(app)/sent/+page.svelte
index 4b73e651..c7c88383 100644
--- a/src/routes/(app)/sent/+page.svelte
+++ b/src/routes/(app)/sent/+page.svelte
@@ -26,9 +26,8 @@
 		{f(fiat, user.currency)}
 	</h2>
 	<h3 class="text-secondary md:text-lg mb-6 mt-1">{sat(amount)}</h3>
-	<a href={`/${user.username}/transactions`}>
-		<button class="bg-black text-white rounded-2xl w-20 py-3 font-bold hover:opacity-80">
-			{$t('invoice.done')}
-		</button>
-	</a>
 </div>
+
+<a href={`/${user.username}/transactions`}>
+	<div class="opacity-0 w-screen h-screen fixed top-0 left-0 z-50" />
+</a>
-- 
cgit v1.2.3