From 557f72abb9555d30963c24a4cb7dc83de443cada Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Wed, 23 Aug 2023 11:07:01 -0700
Subject: display lightning address qr

---
 .../[username]/settings/[...tab]/_account.svelte   | 44 +++++++++++++++-------
 1 file changed, 30 insertions(+), 14 deletions(-)

(limited to 'src')

diff --git a/src/routes/(app)/[username]/settings/[...tab]/_account.svelte b/src/routes/(app)/[username]/settings/[...tab]/_account.svelte
index 8c67a0f1..bda48562 100644
--- a/src/routes/(app)/[username]/settings/[...tab]/_account.svelte
+++ b/src/routes/(app)/[username]/settings/[...tab]/_account.svelte
@@ -64,23 +64,39 @@
 
 	$: url = `${$page.url.host}/${user.username}`;
 	$: full = `${$page.url.protocol}//${url}`;
+  $: addr = `${user.username}@${$page.url.host}`;
 </script>
 
-<div class="relative">
-	<div>
-		<label for="username" class="font-bold mb-1 block">{$t('user.settings.username')}</label>
-		<input type="text" name="username" bind:value={user.username} />
-	</div>
-	<div
-		class="absolute right-[2px] top-[30px] text-gray-600 rounded-r-2xl p-4 h-[54px] my-auto border-l "
-	>
-		@coinos.io
+<div>
+	<label for="username" class="font-bold mb-1 block">{$t('user.settings.username')}</label>
+	<div class="flex mb-2">
+    <input
+      type="text"
+      name="username"
+      bind:value={user.username}
+      class="border-r-0 rounded-r-none w-auto min-w-0"
+      />
+      <div class="text-gray-600 p-4 my-auto bg-gray-100 border border-r-0 pl-1">@{$page.url.host}</div>
+		<div class="text-gray-600 border-l-0 bg-gray-100 rounded-r-2xl p-4 my-auto border w-16" >
+      <a href={`/qr/${encodeURIComponent(addr)}`}>
+        <Icon icon="qr" style="invert" />
+      </a>
+		</div>
 	</div>
-	<div class="my-2 flex gap-2">
-		<div class="ml-auto text-gray-400">{url}</div>
-		<a href={`/qr/${encodeURIComponent(full)}`}>
-			<Icon icon="qr" style="invert" />
-		</a>
+
+	<div class="flex mb-2">
+    <div class="text-gray-600 rounded-l-2xl p-4 my-auto border bg-gray-100 pr-1">{$page.url.host}/</div>
+		<input
+			type="text"
+			name="username"
+			bind:value={user.username}
+			class="grow border-l-0 rounded-l-none border-r-0 rounded-r-none w-auto min-w-0"
+		/>
+		<div class="text-gray-600 rounded-r-2xl p-4 my-auto border bg-gray-100 w-16">
+      <a href={`/qr/${encodeURIComponent(full)}`}>
+        <Icon icon="qr" style="invert" />
+      </a>
+		</div>
 	</div>
 </div>
 
-- 
cgit v1.2.3