From 264f76bfd8c43490b0a597f66b66894fb5f0d598 Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Fri, 4 Nov 2022 14:01:23 -0700
Subject: css tweaks

---
 src/components/AppHeader.svelte                    |  2 +-
 src/routes/(app)/[username]/+page.svelte           | 46 +++++++++++-----------
 .../(app)/[username]/settings/+page.server.js      |  2 +-
 src/routes/(app)/[username]/settings/+page.svelte  |  3 ++
 src/routes/(app)/invoice/[id]/tip/+page.svelte     |  4 +-
 5 files changed, 30 insertions(+), 27 deletions(-)

(limited to 'src')

diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
index 6fb6447a..ec0f5174 100644
--- a/src/components/AppHeader.svelte
+++ b/src/components/AppHeader.svelte
@@ -115,7 +115,7 @@
 			</a>
 		{/if}
 	</nav>
-	<div class="absolute left-[calc(50vw-64px)] md:left-[calc(15vw-48px)] -bottom-[64px]">
+	<div class="absolute md:w-[64px] md:mx-auto left-[calc(50vw-64px)] -bottom-[64px]">
 		<Avatar user={subject} />
 	</div>
 </header>
diff --git a/src/routes/(app)/[username]/+page.svelte b/src/routes/(app)/[username]/+page.svelte
index 35f16dc9..0f9aa38c 100644
--- a/src/routes/(app)/[username]/+page.svelte
+++ b/src/routes/(app)/[username]/+page.svelte
@@ -36,8 +36,8 @@
 	let followed = false;
 </script>
 
-<div class="container px-4 flex flex-wrap">
-	<div class="w-full pt-20 space-y-5">
+<div class="container px-4 flex flex-wrap sm:flex-nowrap mb-4">
+	<div class="hidden sm:block w-sm min-w-sm pt-20 space-y-5">
 		<h1 class="text-3xl font-bold">{subject.username}</h1>
 
 		<p class="text-secondary w-64 mb-4">
@@ -45,23 +45,31 @@
 		</p>
 
 		{#if user?.username !== subject.username}
-      <a href={`/${subject.username}/receive`}>
-        <button
-     class="w-full md:w-40 mt-2 text-black hover:bg-black hover:text-white font-semibold py-3 px-5 rounded-full border border-black"
-     >
-     Pay
-        </button>
-      </a>
+			<a href={`/${subject.username}/receive`}>
+				<button
+					class="w-full sm:w-40 mt-2 text-black hover:bg-black hover:text-white font-semibold py-3 px-5 rounded-full border border-black"
+				>
+					Pay
+				</button>
+			</a>
 
-      <a href={`/${subject.username}/request`}>
-        <button class="w-full md:w-40 mt-2 bg-black text-white font-semibold py-3 px-5 rounded-full"
-                >Request invoice</button
-              >
-      </a>
+			<a href={`/${subject.username}/request`}>
+				<button class="w-full sm:w-40 mt-2 bg-black text-white font-semibold py-3 px-5 rounded-full"
+					>Request invoice</button
+				>
+			</a>
 		{/if}
 	</div>
 
-	<div class="space-y-5 md:mt-20 mx-auto w-[350px]">
+	<div class="space-y-5 mt-20 mx-auto max-w-lg">
+		<h1 class="text-2xl font-bold sm:hidden text-center">{subject.username}</h1>
+		<span class="font-bold mb-1">Lightning address</span>
+		<p class="text-secondary mb-1">
+			This <a href="https://lightningaddress.com" class="underline" target="_blank" rel="noreferrer"
+				>lightning address</a
+			> can be used repeatedly so you can publish it on websites, business cards, posters, etc.
+		</p>
+
 		<div
 			on:click={() => copy(lightningAddress)}
 			id="qr"
@@ -74,13 +82,5 @@
 				<Icon icon="copy" style="ml-2" />
 			</button>
 		</div>
-		<p class="text-center">
-			This is a <a
-				href="https://lightningaddress.com/"
-				class="underline"
-				target="_blank"
-				rel="noreferrer">lightning address</a
-			>
-		</p>
 	</div>
 </div>
diff --git a/src/routes/(app)/[username]/settings/+page.server.js b/src/routes/(app)/[username]/settings/+page.server.js
index bf5661f6..713841c2 100644
--- a/src/routes/(app)/[username]/settings/+page.server.js
+++ b/src/routes/(app)/[username]/settings/+page.server.js
@@ -26,6 +26,6 @@ export const actions = {
 			return invalid(400, { message: e.message });
 		}
 
-		return { success: true };
+		return { user, success: true };
 	}
 };
diff --git a/src/routes/(app)/[username]/settings/+page.svelte b/src/routes/(app)/[username]/settings/+page.svelte
index 86705b1d..f4660fab 100644
--- a/src/routes/(app)/[username]/settings/+page.svelte
+++ b/src/routes/(app)/[username]/settings/+page.svelte
@@ -19,6 +19,8 @@
 	$: update(data);
 	let update = () => ({ user, rates, token } = data);
 
+	$: form && ({ user } = form);
+
 	$: if (form?.message?.startsWith('Pin')) {
 		failure('Wrong pin, try again');
 		$pin = '';
@@ -85,6 +87,7 @@
 
 		<svelte:component this={comp} {user} {rates} {submit} />
 	</div>
+
 	<div
 		class="z-10 fixed bottom-0 bg-white shadow border-t w-full flex justify-center items-center py-3"
 	>
diff --git a/src/routes/(app)/invoice/[id]/tip/+page.svelte b/src/routes/(app)/invoice/[id]/tip/+page.svelte
index b3906010..ef878831 100644
--- a/src/routes/(app)/invoice/[id]/tip/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/tip/+page.svelte
@@ -8,7 +8,7 @@
 	import { enhance } from '$app/forms';
 	import { tick } from 'svelte';
 
-	const tipAmounts = ['None', '10%', '15%', '20%'];
+	const tipAmounts = ['No', '10%', '15%', '20%'];
 	let showCustomAmount;
 
 	let customInput;
@@ -44,7 +44,7 @@
 	let submitting;
 	const handleTipButtonClick = async (amount) => {
 		submitting = true;
-		if (amount === 'None') {
+		if (amount === 'No') {
 			tipPercent = 0;
 		} else {
 			tipPercent = parseInt(amount.slice(0, 2));
-- 
cgit v1.2.3