adjust tip and qr styles

5 files changed, 36 insertions, 266 deletions

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}
 	<div class="absolute bg-white w-[300px] h-[300px] t-0 l-0 z-10" out:fade />
 {/if}
+
 <div
 	bind:this={qr}
 	on:click={toggle}
diff --git a/src/components/Tip.svelte b/src/components/Tip.svelte
deleted file mode 100644
index 7e2df7f4..00000000
--- a/src/components/Tip.svelte
+++ /dev/null
@@ -1,215 +0,0 @@
-<script>
-	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();
-	};
-</script>
-
-<form method="POST" use:enhance class:invisible={submitting}>
-	<input type="hidden" name="amount" value={amount} />
-	<input type="hidden" name="tip" value={tip} />
-	<input type="hidden" name="username" value={username} />
-	<input type="hidden" name="rate" value={rate} />
-	<input type="hidden" name="prompt" value="false" />
-
-	<h1 class="text-4xl font-semibold my-8">{$t('invoice.addTipq')}</h1>
-	{#if !showCustomAmount}
-		<div class="my-2 text-xl">{Math.round(tipPercent)}%</div>
-
-		<input
-			id="slider"
-			type="range"
-			min="0"
-			max="100"
-			value={tipPercent}
-			class="px-0 py-0 my-5"
-			style="--bgPercent: {tipPercent}%;"
-			on:input={handleSlide}
-			on:change={() => (showMobileTip = false)}
-		/>
-
-		<div class="flex mb-8">
-			<div>
-				<span class="text-sm font-semibold mr-1">
-					{f(amountFiat, currency)}
-					<span class="tect-secondary text-xl">+{f(tipAmount, currency)}</span></span
-				>
-			</div>
-
-			<div class="ml-auto">
-				<span class="text-secondary font-semibold text-sm">{s(amount)}</span>
-				<span class="text-secondary font-semibold text-lg">+{s(tip)} SAT</span>
-			</div>
-		</div>
-
-		{#if tip}
-			<div>
-				<button
-					type="button"
-					class="w-full text-2xl mt-2 bg-primary text-black hover:bg-black hover:text-white font-semibold py-3 px-7 rounded-2xl"
-					on:click={() => submit.click()}>Next</button
-				>
-				<button
-					type="button"
-					class="w-full text-2xl mt-2 bg-primary text-black hover:bg-black hover:text-white font-semibold py-3 px-7 rounded-2xl"
-					on:click={() => (tipPercent = 0)}>Reset</button
-				>
-			</div>
-		{:else}
-			{#each tipAmounts as amount}
-				<button
-					type="button"
-					class:active={active(amount, tipPercent)}
-					class="w-full text-2xl text-black bg-primary hover:bg-black hover:text-white py-3 m-1 rounded-2xl font-semibold"
-					on:click={() => handleTipButtonClick(amount)}>{amount}</button
-				>
-			{/each}
-		{/if}
-
-		<div>
-			<button
-				type="button"
-				class="w-full text-2xl mt-2 bg-primary text-black hover:bg-black hover:text-white font-semibold py-3 px-7 rounded-2xl"
-				on:click={() => (showCustomAmount = true)}>Custom</button
-			>
-		</div>
-	{/if}
-
-	<button type="submit" bind:this={submit} />
-</form>
-
-{#if showCustomAmount}
-	<form on:submit|preventDefault={apply}>
-		<div class="relative">
-			<span
-				class="absolute top-[18px] left-5 font-semibold {!customTipAmount
-					? 'opacity-50'
-					: 'opacity-100'}">$</span
-			>
-			<input
-				bind:this={customInput}
-				type="number"
-				step="0.01"
-				on:input={(e) => handleCustomTipAmount(e)}
-				class="pl-10"
-				placeholder="Custom amount"
-				autofocus
-			/>
-			<button
-				type="submit"
-				class="w-full mt-2 bg-black text-white font-semibold py-3 px-7 rounded-2xl {!customTipAmount
-					? 'opacity-50'
-					: 'opacity-100 hover:opacity-80'}"
-				disabled={!customTipAmount}>Apply</button
-			>
-		</div>
-	</form>
-{/if}
-
-<style>
-	#slider {
-		-webkit-appearance: none;
-		width: 100%;
-		height: 6px;
-		border-radius: 5px;
-		background: linear-gradient(
-			to right,
-			black 0%,
-			black var(--bgPercent),
-			#f5f7fa var(--bgPercent),
-			#f5f7fa 100%
-		);
-		outline: none;
-	}
-
-	#slider:active {
-		background-color: black;
-	}
-
-	#slider::-webkit-slider-thumb {
-		-webkit-appearance: none;
-		appearance: none;
-		width: 30px;
-		height: 30px;
-		border-radius: 50%;
-		background: black;
-		cursor: pointer;
-	}
-
-	#slider::-moz-range-thumb {
-		width: 30px;
-		height: 30px;
-		border-radius: 50%;
-		background: black;
-		cursor: pointer;
-	}
-
-	.active {
-		@apply !bg-black !text-white;
-	}
-</style>
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 @@
 		<div
 			class="block lg:flex justify-center items-center space-y-10 lg:space-y-0 space-x-0 lg:space-x-24"
 		>
-			<div class="text-center space-y-5">
+			<div class="text-center">
 				<span class="text-secondary block text-2xl break-all"
 					>Scan to pay <a href="/{username}" class="text-black font-semibold hover:opacity-80"
 						>{username}</a
@@ -71,7 +71,7 @@
 
 				<Qr {text} image={'/images/invoice.svg'} bind:qr />
 
-				<div>
+				<div class="mb-10">
 					<button
 						class="flex rounded-full border py-2 px-5 font-bold hover:opacity-80 mb-2 mx-auto"
 						on:click={() => copy(text)}
@@ -81,21 +81,23 @@
 				</div>
 
 				<div class="px-5 space-y-3">
-					<div class="flex justify-between">
-						<span class="font-semibold text-sm">{$t('invoice.invoice')}</span>
-						<span class="font-semibold text-sm"
-							>{f(amountFiat, currency)}
-							<span class="text-secondary font-normal">{`(${s(amount)} SAT)`}</span></span
-						>
-					</div>
+					{#if invoice.tip}
+						<div class="flex justify-between">
+							<span class="font-semibold text-sm">{$t('invoice.invoice')}</span>
+							<span class="font-semibold text-sm"
+								>{f(amountFiat, currency)}
+								<span class="text-secondary font-normal">{`(${s(amount)} SAT)`}</span></span
+							>
+						</div>
 
-					<div class="flex justify-between">
-						<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
-						>
-					</div>
+						<div class="flex justify-between">
+							<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
+							>
+						</div>
+					{/if}
 
 					<div class="flex flex-wrap justify-between">
 						<span class="font-bold mr-1">{$t('invoice.total')}</span>
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}
 			/>
 
-			<div class="flex mb-8">
+			<div class="flex mb-8 text-sm">
 				<div>
-					<span class="text-sm font-semibold mr-1">
+					<span class="mr-1">
 						{f(amountFiat, currency)}
-						<span class="tect-secondary text-xl">+{f(tipAmount, currency)}</span></span
-					>
+						<span class="font-semibold">+{f(tipAmount, currency)}</span>
+					</span>
 				</div>
 
 				<div class="ml-auto">
-					<span class="text-secondary font-semibold text-sm">{s(amount)}</span>
-					<span class="text-secondary font-semibold text-lg">+{s(tip)} SAT</span>
+					{s(amount)}
+					<span class="font-semibold">+{s(tip)} SAT</span>
 				</div>
 			</div>
 
 			{#if tip}
 				<div>
-					<button
-						type="button"
-						class="w-full text-2xl mt-2 bg-primary text-black hover:bg-black hover:text-white font-semibold py-3 px-7 rounded-2xl"
-						on:click={() => submit.click()}>Next</button
-					>
-					<button
-						type="button"
-						class="w-full text-2xl mt-2 bg-primary text-black hover:bg-black hover:text-white font-semibold py-3 px-7 rounded-2xl"
-						on:click={() => (tipPercent = 0)}>Reset</button
-					>
+					<button type="button" on:click={() => submit.click()}>Next</button>
+					<button type="button" on:click={() => (tipPercent = 0)}>Reset</button>
 				</div>
 			{:else}
 				{#each tipAmounts as amount}
 					<button
 						type="button"
 						class:active={active(amount, tipPercent)}
-						class="w-full text-2xl text-black bg-primary hover:bg-black hover:text-white py-3 m-1 rounded-2xl font-semibold"
 						on:click={() => handleTipButtonClick(amount)}>{amount}</button
 					>
 				{/each}
 			{/if}
 
 			<div>
-				<button
-					type="button"
-					class="w-full text-2xl mt-2 bg-primary text-black hover:bg-black hover:text-white font-semibold py-3 px-7 rounded-2xl"
-					on:click={() => (showCustomAmount = true)}>Custom</button
-				>
+				<button type="button" on:click={() => (showCustomAmount = true)}>Custom</button>
 			</div>
 		{/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;
+	}
 </style>