From 8d90bfd0b4f35c91c6a2a57db63317510569050a Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Mon, 31 Oct 2022 12:44:41 -0700 Subject: adjust tip and qr styles --- src/components/Qr.svelte | 9 +- src/components/Tip.svelte | 215 ------------------------------- src/components/index.js | 1 - src/routes/invoice/[id]/+page.svelte | 36 +++--- src/routes/invoice/[id]/tip/+page.svelte | 41 +++--- 5 files changed, 36 insertions(+), 266 deletions(-) delete mode 100644 src/components/Tip.svelte (limited to 'src') diff --git a/src/components/Qr.svelte b/src/components/Qr.svelte index d9bf63ba..e07906a5 100644 --- a/src/components/Qr.svelte +++ b/src/components/Qr.svelte @@ -18,14 +18,6 @@ backgroundOptions: { color: 'rgba(0, 0, 0, 0)' }, - cornersSquareOptions: { - type: 'extra-rounded' - }, - dotsOptions: { - type: 'extra-rounded' - }, - - image, imageOptions: { hideBackgroundDots: false } @@ -57,6 +49,7 @@ {#if mask}
{/if} +
- import { enhance } from '$app/forms'; - import { Icon } from '$comp'; - import { t } from '$lib/translations'; - import { f, post, s } from '$lib/utils'; - import { tick } from 'svelte'; - import { goto } from '$app/navigation'; - - export let amountFiat, - showMobileTip, - tipPercent, - tipAmount, - amount, - currency, - tip, - username, - rate; - - const tipAmounts = ['No thanks', '10%', '15%', '20%']; - let showCustomAmount; - - let customInput; - let customTipAmount; - - let apply = async () => { - if (customTipAmount > 0) { - tipPercent = (customTipAmount / amountFiat) * 100; - showMobileTip = false; - showCustomAmount = false; - } - }; - - let active = (amount) => - !customTipAmount && Math.round(tipPercent) === parseInt(amount.slice(0, 2)); - - const handleCustomTipAmount = (e) => { - tipPercent = 0; - customTipAmount = e.target.value; - }; - - let timeout; - const handleSlide = (e) => { - customTipAmount = ''; - if (customInput) { - customInput.value = ''; - } - tipPercent = e.target.value; - - clearTimeout(timeout); - timeout = setTimeout(update, 800); - }; - - let submitting; - const handleTipButtonClick = async (amount) => { - submitting = true; - if (amount === 'No thanks') { - tipPercent = 0; - } else { - tipPercent = parseInt(amount.slice(0, 2)); - } - - await tick(); - submit.click(); - }; - - let submit; - let update = async () => { - await tick(); - //submit.click(); - }; - - -
- - - - - - -

{$t('invoice.addTipq')}

- {#if !showCustomAmount} -
{Math.round(tipPercent)}%
- - (showMobileTip = false)} - /> - -
-
- - {f(amountFiat, currency)} - +{f(tipAmount, currency)} -
- -
- {s(amount)} - +{s(tip)} SAT -
-
- - {#if tip} -
- - -
- {:else} - {#each tipAmounts as amount} - - {/each} - {/if} - -
- -
- {/if} - -
-
- -{/if} - - diff --git a/src/components/index.js b/src/components/index.js index c3a5000c..468e132e 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -26,4 +26,3 @@ export { default as Footer } from './Footer.svelte'; export { default as Toggle } from './Toggle.svelte'; export { default as LocationsMap } from './LocationsMap.svelte'; export { default as Qr } from './Qr.svelte'; -export { default as Tip } from './Tip.svelte'; diff --git a/src/routes/invoice/[id]/+page.svelte b/src/routes/invoice/[id]/+page.svelte index 16ec186e..17eac2f5 100644 --- a/src/routes/invoice/[id]/+page.svelte +++ b/src/routes/invoice/[id]/+page.svelte @@ -3,7 +3,7 @@ import { onMount, onDestroy } from 'svelte'; import { browser } from '$app/environment'; import { invoices, last } from '$lib/store'; - import { Icon, Heart, Image, Qr, Tip } from '$comp'; + import { Icon, Heart, Image, Qr } from '$comp'; import { goto } from '$app/navigation'; import { t } from '$lib/translations'; @@ -62,7 +62,7 @@
-
+
Scan to pay {username} -
+
-
- {$t('invoice.invoice')} - {f(amountFiat, currency)} - {`(${s(amount)} SAT)`} -
+ {#if invoice.tip} +
+ {$t('invoice.invoice')} + {f(amountFiat, currency)} + {`(${s(amount)} SAT)`} +
-
- {$t('invoice.tip')} - {f(tipAmount, currency)} - {`(${s(tip)} SAT)`} -
+
+ {$t('invoice.tip')} + {f(tipAmount, currency)} + {`(${s(tip)} SAT)`} +
+ {/if}
{$t('invoice.total')} diff --git a/src/routes/invoice/[id]/tip/+page.svelte b/src/routes/invoice/[id]/tip/+page.svelte index 26eeba31..12e8e257 100644 --- a/src/routes/invoice/[id]/tip/+page.svelte +++ b/src/routes/invoice/[id]/tip/+page.svelte @@ -2,13 +2,13 @@ import { browser } from '$app/environment'; import { invoices } from '$lib/store'; import { copy, f, get, reverseFormat, s, sats } from '$lib/utils'; - import { Icon, Tip } from '$comp'; + import { Icon } from '$comp'; import { goto } from '$app/navigation'; import { t } from '$lib/translations'; import { enhance } from '$app/forms'; import { tick } from 'svelte'; - const tipAmounts = ['No thank you', '10%', '15%', '20%']; + const tipAmounts = ['None', '10%', '15%', '20%']; let showCustomAmount; let customInput; @@ -44,7 +44,7 @@ let submitting; const handleTipButtonClick = async (amount) => { submitting = true; - if (amount === 'No thank you') { + if (amount === 'None') { tipPercent = 0; } else { tipPercent = parseInt(amount.slice(0, 2)); @@ -138,50 +138,37 @@ on:input={handleSlide} /> -
+
- + {f(amountFiat, currency)} - +{f(tipAmount, currency)} + +{f(tipAmount, currency)} +
- {s(amount)} - +{s(tip)} SAT + {s(amount)} + +{s(tip)} SAT
{#if tip}
- - + +
{:else} {#each tipAmounts as amount} {/each} {/if}
- +
{/if} @@ -258,4 +245,8 @@ .active { @apply !bg-black !text-white; } + + .container button[type='button'] { + @apply w-full mt-2 bg-primary text-black hover:bg-black hover:text-white font-semibold py-5 px-7 rounded-2xl; + } -- cgit v1.2.3