lightning send improvements

1 files changed, 64 insertions, 31 deletions

diff --git a/src/routes/send/+page.svelte b/src/routes/send/+page.svelte
index 2162d76d..fdaa1db0 100644
--- a/src/routes/send/+page.svelte
+++ b/src/routes/send/+page.svelte
@@ -2,10 +2,17 @@
 	import { browser } from '$app/environment';
 	import { t } from '$lib/translations';
 	import { AppHeader, Icon, Spinner } from '$comp';
-	import { back, focus } from '$lib/utils';
-	import parse from '$lib/parse';
+	import { back } from '$lib/utils';
 
-	let text, loading;
+	export let form;
+
+	let placeholder = 'Address, Invoice, Username';
+	let text = placeholder,
+		loading;
+
+	let focus = () => {
+		if (text === placeholder) text = '';
+	};
 
 	let paste = async () => {
 		text = await navigator.clipboard.readText();
@@ -16,46 +23,72 @@
 	<Icon icon="arrow-left" style="w-10" />
 </button>
 
-<div class="container px-4 mt-20 max-w-xl mx-auto">
-	<div>
+<form method="POST" class="container px-4 mt-20 max-w-xl mx-auto">
+	<div class="mb-2">
 		<label for="invoice" class="font-bold mb-1 block">Destination</label>
+		<input type="hidden" name="text" bind:value={text} />
 
-		<div class="relative mb-8">
-			<input
-				placeholder="Address, Invoice, Username"
-				type="text"
-				name="text"
-				required
-				bind:value={text}
-				class="block rounded-2xl p-3 w-full bg-primary"
-			/>
-
-			<a href="/scan">
-				<div class="flex absolute h-[48px] right-0 top-0 px-2 mt-[1px]">
-					<Icon icon="scan" style="mr-2 w-6 my-auto" />
-				</div>
-			</a>
-
-			{#if browser && navigator.clipboard}
-				<div class="flex absolute h-[48px] right-10 top-0 px-2 mt-[1px]" on:click={paste}>
-					<Icon icon="paste" style="mr-2 w-6 my-auto" />
-				</div>
-			{/if}
+		<div
+			class="expandable-textarea"
+			class:text-gray-400={text === placeholder}
+			role="textbox"
+			contenteditable
+			bind:textContent={text}
+			on:focus={focus}
+		>
+			{text}
 		</div>
 	</div>
 
-	<div class="flex w-full">
+	<div class="flex justify-end">
+		<a href="/scan">
+			<button
+				type="button"
+				class="flex border rounded-full px-6 py-2 font-bold hover:opacity-80 mr-1"
+			>
+				<Icon icon="scan" style="mr-2 w-6 my-auto" />
+				<div class="my-auto">Scan</div>
+			</button>
+		</a>
+
 		<button
+			type="button"
+			class="flex border rounded-full px-6 py-2 font-bold hover:opacity-80 mr-1"
+			on:click={paste}
+		>
+			<Icon icon="paste" style="mr-2 w-6 my-auto" />
+			<div class="my-auto">Paste</div>
+		</button>
+
+		<button
+			type="submit"
 			class="{!text
 				? 'opacity-50'
-				: 'opacity-100 hover:opacity-80'} rounded-2xl border py-3 font-bold mx-auto mt-2 bg-black text-white px-4 w-24"
-			on:click={() => parse(text)}
+				: 'opacity-100 hover:opacity-80'} bg-black text-white border rounded-full px-6 py-2 font-bold"
 		>
 			{#if loading}
 				<Spinner />
 			{:else}
-				{$t('user.dashboard.go')}
+				Next
 			{/if}
 		</button>
 	</div>
-</div>
+</form>
+
+<style>
+	.expandable-textarea {
+		font-family: inherit;
+		font-size: inherit;
+
+		resize: both;
+		display: block;
+		overflow: hidden;
+		min-height: 48px;
+		line-height: 20px;
+		@apply block border rounded-2xl p-3 py-4 w-full bg-primary;
+	}
+
+	.expandable-expandable::-webkit-resizer {
+		background: transparent;
+	}
+</style>