adjust tip and qr styles

3 files changed, 1 insertions, 224 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';