adjust tip and qr styles

2 files changed, 35 insertions, 42 deletions

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>