aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/components/Heart.svelte16
-rw-r--r--src/components/Qr.svelte6
-rw-r--r--src/components/Tip.svelte1
-rw-r--r--src/components/index.js1
-rw-r--r--src/locales/en.json5
-rw-r--r--src/routes/invoice/[id]/+page.svelte44
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
generated by cgit v1.2.3 (git 2.51.0) at 2026-10-15 12:39:40 +0000