From 1fec31c135772f9658d2d2061c867f14f6a15f84 Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Wed, 31 Aug 2022 22:55:49 -0400
Subject: add copy and expand qr code buttons and mobile bug fixes

---
 src/app.css                          |  4 ++++
 src/components/LandingHeader.svelte  |  6 +++---
 src/routes/invoice/[id]/+page.svelte | 28 ++++++++++++++++++++++++----
 3 files changed, 31 insertions(+), 7 deletions(-)

(limited to 'src')

diff --git a/src/app.css b/src/app.css
index 91fcc5c1..3c760dad 100644
--- a/src/app.css
+++ b/src/app.css
@@ -15,3 +15,7 @@ html {
 	color: black;
 	background: #eaf2ff;
 }
+
+:fullscreen {
+	background-color: white;
+}
diff --git a/src/components/LandingHeader.svelte b/src/components/LandingHeader.svelte
index 372c0b98..77dd2322 100644
--- a/src/components/LandingHeader.svelte
+++ b/src/components/LandingHeader.svelte
@@ -70,11 +70,11 @@
 		>
 			<div class="space-y-8 mt-24 ml-10 font-bold text-xl">
 				<button on:click={() => mobileMenuButtonClick(howItWorks)} class="block"
-					>{$t('nav.howItWorks')}</button
+					>{$t('howItWorks.header')}</button
 				>
-				<button on:click={() => mobileMenuButtonClick(faq)} class="block">{$t('nav.faq')}</button>
+				<button on:click={() => mobileMenuButtonClick(faq)} class="block">{$t('faq.header')}</button>
 				<button on:click={() => mobileMenuButtonClick(about)} class="block"
-					>{$t('nav.about')}</button
+					>{$t('about.header')}</button
 				>
 				{#if !$user}
 					<button
diff --git a/src/routes/invoice/[id]/+page.svelte b/src/routes/invoice/[id]/+page.svelte
index e8bd9edf..1377c8ef 100644
--- a/src/routes/invoice/[id]/+page.svelte
+++ b/src/routes/invoice/[id]/+page.svelte
@@ -63,6 +63,7 @@
 		tipAmount = customTipAmount;
 		tipPercent = Math.round((tipAmount / amountFiat) * 100);
 		update();
+		showMobileTip = false;
 	};
 
 	let update = async () => {
@@ -130,7 +131,7 @@
 		let { default: QRCodeStyling } = await import('qr-code-styling');
 
 		const qrCode = new QRCodeStyling({
-			width: window.screen.width < 640 ? 250 : 300,
+			width: 250,
 			type: 'canvas',
 			data: text,
 			image: '/images/invoice.svg',
@@ -168,6 +169,16 @@
 	const handleDoneClick = () => {
 		goto(`/${username}/receive`);
 	};
+
+	function toggleFullscreen() {
+		if (!document.fullscreenElement) {
+			qr.requestFullscreen().catch((err) => {
+				alert(`Error attempting to enable fullscreen mode: ${err.message} (${err.name})`);
+			});
+		} else {
+			document.exitFullscreen();
+		}
+	}
 </script>
 
 {#if $invoices[id]?.status !== 'paid'}
@@ -257,7 +268,7 @@
 				/>
 
 				<!-- invoice section -->
-				<div class="w-[325px] text-center space-y-5">
+				<div class="text-center space-y-5">
 					<button
 						class="block md:hidden bg-black {showMobileTip
 							? 'text-white/50'
@@ -290,12 +301,21 @@
 
 					<div
 						bind:this={qr}
-						on:click={() => copy(text)}
+						on:click={toggleFullscreen}
 						class="border {showMobileTip
 							? 'border-gray-400'
-							: 'border-lightgrey'} px-5 md:px-0 w-[292px] h-[302px] md:w-[300px] md:h-[300px] rounded-3xl block md:flex justify-center items-center cursor-pointer mx-auto"
+							: 'border-lightgrey'} px-5 md:px-0 w-[292px] h-[302px] md:w-[300px] md:h-[300px] rounded-3xl block md:flex justify-center items-center mx-auto cursor-pointer"
 					/>
 
+					<div>
+						<button class="border border-lightgrey rounded-md p-2 mx-2" on:click={toggleFullscreen}
+							><Icon icon="expand" /></button
+						>
+						<button class="border border-lightgrey rounded-md p-2 mx-2" on:click={() => copy(text)}
+							><Icon icon="copy" /></button
+						>
+					</div>
+
 					<div class="px-5 space-y-3">
 						<div class="flex justify-between">
 							<span class="font-semibold text-sm">Invoice</span>
-- 
cgit v1.2.3