cleanup

6 files changed, 32 insertions, 41 deletions

diff --git a/src/components/Heart.svelte b/src/components/Heart.svelte
new file mode 100644
index 00000000..55b13fa9
--- /dev/null
+++ b/src/components/Heart.svelte
@@ -0,0 +1,16 @@
+<svg
+	width="24"
+	height="24"
+	class="mr-1"
+	viewBox="0 0 24 24"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		d="M4.31802 6.31802C2.56066 8.07538 2.56066 10.9246 4.31802 12.682L12.0001 20.364L19.682 12.682C21.4393 10.9246 21.4393 8.07538 19.682 6.31802C17.9246 4.56066 15.0754 4.56066 13.318 6.31802L12.0001 7.63609L10.682 6.31802C8.92462 4.56066 6.07538 4.56066 4.31802 6.31802Z"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>
diff --git a/src/components/Qr.svelte b/src/components/Qr.svelte
index e590a228..35146ec3 100644
--- a/src/components/Qr.svelte
+++ b/src/components/Qr.svelte
@@ -46,10 +46,8 @@
 	div {
 		@apply px-5
       md:px-0
-      w-[292px]
-      h-[302px]
-      md:w-[300px]
-      md:h-[300px]
+      w-[300px]
+      h-[300px]
       rounded-3xl
       block
       md:flex
diff --git a/src/components/Tip.svelte b/src/components/Tip.svelte
index 44728326..d08368d9 100644
--- a/src/components/Tip.svelte
+++ b/src/components/Tip.svelte
@@ -63,6 +63,7 @@
 		showCustomAmount = false;
 	};
 
+let timeout;
 	const handleSlide = (e) => {
 		customTipAmount = '';
 		if (customInput) {
diff --git a/src/components/index.js b/src/components/index.js
index 1a673737..7d01e338 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,4 +1,5 @@
 export { default as Check } from './Check.svelte';
+export { default as Heart } from './Heart.svelte';
 export { default as Quote } from './Quote.svelte';
 export { default as LandingHeader } from './LandingHeader.svelte';
 export { default as LandingHero } from './LandingHero.svelte';
diff --git a/src/locales/en.json b/src/locales/en.json
index a6afe366..704f6d1b 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -96,7 +96,10 @@
 		"addTip": "Add a tip",
 		"addTipq": "Add a tip?",
 		"done": "Done",
-		"paymentSuccessful": "Payment Successful!"
+		"paymentSuccessful": "Payment Successful!",
+    "invoice": "Invoice",
+    "total": "Total",
+    "tip": "Tip"
 	},
 	"jobs": {
 		"header": "Jobs",
diff --git a/src/routes/invoice/[id]/+page.svelte b/src/routes/invoice/[id]/+page.svelte
index 0fa34430..ef3ba08e 100644
--- a/src/routes/invoice/[id]/+page.svelte
+++ b/src/routes/invoice/[id]/+page.svelte
@@ -2,7 +2,7 @@
 	import { copy, f, get, reverseFormat, s, toggleFullscreen } from '$lib/utils';
 	import { browser } from '$app/environment';
 	import { invoices, user } from '$lib/store';
-	import { Icon, Image, Qr, Tip } from '$comp';
+	import { Icon, Heart, Image, Qr, Tip } from '$comp';
 	import { goto } from '$app/navigation';
 	import { t } from '$lib/translations';
 
@@ -22,7 +22,6 @@
 	let showCustomAmount = false;
 	let showMobileTip = false;
 
-	let image = '/images/invoice.svg';
 	let qr;
 	let tipPercent = 0;
 
@@ -52,14 +51,7 @@
 
 	$: tipAmount = ((tip * rate) / 100000000).toFixed(2);
 
-	const amountFormatted = s(amount);
-
 	$: invoiceAmountFiatFormatted = f(amountFiat, currency);
-
-	let timeout;
-	const handleBackButton = () => {
-		goto(`/${username}/receive`);
-	};
 </script>
 
 <div class:full-shadow={showMobileTip}>
@@ -67,7 +59,7 @@
 		class="ml-5 md:ml-20 mt-5 md:mt-10 hover:opacity-80"
 		class:invisible={!$user}
 		disabled={showMobileTip}
-		on:click={handleBackButton}
+		on:click={() => goto(`/${username}/receive`)}
 	>
 		<Icon icon="arrow-left" style="w-10" />
 	</button>
@@ -94,7 +86,7 @@
 			{/if}
 
 			<!-- invoice section -->
-			<div class="text-center space-y-5 max-w-[300px]">
+			<div class="text-center space-y-5">
 				<button
 					class="block md:hidden bg-black {showMobileTip
 						? 'text-white/50'
@@ -102,22 +94,7 @@
 					on:click={() => (showMobileTip = true)}
 					disabled={showMobileTip}
 				>
-					<svg
-						width="24"
-						height="24"
-						class="mr-1"
-						viewBox="0 0 24 24"
-						fill="none"
-						xmlns="http://www.w3.org/2000/svg"
-					>
-						<path
-							d="M4.31802 6.31802C2.56066 8.07538 2.56066 10.9246 4.31802 12.682L12.0001 20.364L19.682 12.682C21.4393 10.9246 21.4393 8.07538 19.682 6.31802C17.9246 4.56066 15.0754 4.56066 13.318 6.31802L12.0001 7.63609L10.682 6.31802C8.92462 4.56066 6.07538 4.56066 4.31802 6.31802Z"
-							stroke="currentColor"
-							stroke-width="2"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-						/>
-					</svg>
+					<Heart />
 					{$t('invoice.addTip')}
 				</button>
 
@@ -128,9 +105,7 @@
 					></span
 				>
 
-				<div class="border border-gray-200 rounded-3xl">
-					<Qr {text} {image} disabled={showMobileTip} bind:qr />
-				</div>
+				<Qr {text} image={'/images/invoice.svg'} disabled={showMobileTip} bind:qr />
 
 				<div>
 					<button
@@ -145,8 +120,7 @@
 
 				<div class="px-5 space-y-3">
 					<div class="flex justify-between">
-						<!-- found missing translation --->
-						<span class="font-semibold text-sm">Invoice</span>
+            <span class="font-semibold text-sm">{$t('invoice.invoice')}</span>
 						<span class="font-semibold text-sm"
 							>{invoiceAmountFiatFormatted}
 							<span class="text-secondary font-normal">{`(${s(amount)} SAT)`}</span></span
@@ -154,8 +128,7 @@
 					</div>
 
 					<div class="flex justify-between">
-						<!-- found missing translation --->
-						<span class="font-semibold text-sm">Tip</span>
+						<span class="font-semibold text-sm">{$t('invoice.tip')}</span>
 						<span class="font-semibold text-sm"
 							>{f(tipAmount, currency)}
 							<span class="text-secondary font-normal">{`(${s(tip)} SAT)`}</span></span
@@ -163,8 +136,7 @@
 					</div>
 
 					<div class="flex flex-wrap justify-between">
-						<!-- found missing translation --->
-						<span class="font-bold mr-1">Total</span>
+            <span class="font-bold mr-1">{$t('invoice.total')}</span>
 						<span class="font-bold"
 							>{f(amountFiat + parseFloat(tipAmount), currency)}
 							<span class="text-secondary font-normal">{`(${s(tip + amount)} SAT)`}</span></span