add mobile view with dynamic tipping menu

2 files changed, 174 insertions, 107 deletions

diff --git a/src/routes/invoice/[amount].svelte b/src/routes/invoice/[amount].svelte
index 2cf16e37..d1dea907 100644
--- a/src/routes/invoice/[amount].svelte
+++ b/src/routes/invoice/[amount].svelte
@@ -74,6 +74,9 @@
 				type: 'svg',
 				data: text,
 				image: '/images/invoice.svg',
+				backgroundOptions: {
+					color: 'rgba(0, 0, 0, 0)'
+				},
 				dotsOptions: {
 					type: 'rounded'
 				},
@@ -85,132 +88,189 @@
 			qrCode.append(document.getElementById('qr'));
 		}
 	});
-</script>
 
-{#if $user}
-	<button class="ml-5 md:ml-20 mt-5 md:mt-10" on:click={() => goto('/receive')}>
-		<Icon icon="arrow-left" style="w-10" />
-	</button>
+	let showMobileTip = false;
 
-	<div class="flex justify-center items-center mb-20 mt-[20px] px-3">
-		<div
-			class="block lg:flex justify-center items-center space-y-10 lg:space-y-0 space-x-0 lg:space-x-24"
-		>
-			{#if $invoiceAmount && $invoiceAmountFiat && $rate && text}
-				<!-- tipping section  -->
-				<div class="text-center space-y-5">
-					<h1 class="text-4xl font-semibold">Add a tip?</h1>
+	const handleBackButton = () => {
+		if (showMobileTip) {
+			tipPercent = 0;
+			customInput.value = '';
+			customTipAmount = 0;
+			tipAmount = 0;
+			showMobileTip = false;
+		} else {
+			goto('/receive');
+		}
+	};
 
-					<div>
-						<span class="font-semibold mr-1">{tipAmountFormatted}</span><span
-							class="text-secondary font-semibold text-sm">{`(${tipAmountSats} SATS)`}</span
-						>
-						<span class="block text-secondary text-sm">{tipPercent}%</span>
-					</div>
+	let customInput;
+</script>
 
-					<input
-						id="slider"
-						type="range"
-						min="0"
-						max="100"
-						value={tipPercent}
-						class="px-2"
-						on:input={(e) => {
-							customTipAmount = '';
-							tipPercent = e.target.value;
-						}}
-					/>
+{#if $user}
+	<div class:full-shadow={showMobileTip}>
+		<button class="ml-5 md:ml-20 mt-5 md:mt-10" on:click={handleBackButton}>
+			<Icon icon="arrow-left" style="w-10" />
+		</button>
 
-					<div>
-						{#each tipAmounts as amount}
-							<button
-								class="bg-primary w-20 py-3 m-1 rounded-2xl font-semibold {tipPercent ===
-									amount.slice(0, 2) ||
-								((tipPercent === 0 || tipPercent === '0') && amount === 'None')
-									? '!bg-black text-white'
-									: ''}"
-								on:click={() => handleTipButtonClick(amount)}>{amount}</button
-							>
-						{/each}
+		<div class="flex justify-center items-center mb-20 md:mt-[20px] px-3">
+			<div
+				class="block lg:flex justify-center items-center space-y-10 lg:space-y-0 space-x-0 lg:space-x-24"
+			>
+				{#if $invoiceAmount && $invoiceAmountFiat && $rate && text}
+					<!-- tipping section  -->
+					<div
+						class="absolute {showMobileTip
+							? 'bottom-0'
+							: '-bottom-full'} bg-white p-6 md:p-0 rounded-t-3xl md:rounded-none transition-all md:transition-none ease-in-out duration-500 left-0 md:static text-center space-y-5"
+					>
+						<h1 class="hidden md:block text-4xl font-semibold">Add a tip?</h1>
 
-						<div class="relative">
-							<span
-								class="absolute top-[20px] left-5 font-semibold {!customTipAmount
-									? 'opacity-50'
-									: 'opacity-100'}">$</span
-							>
-							<input
-								type="number"
-								min="0"
-								on:input={(e) => handleCustomTipAmount(e)}
-								class="bg-primary rounded-2xl py-3 px-10 font-semibold mt-2 mr-1 w-full md:w-auto"
-								placeholder="Other"
-							/>
-							<button
-								class="w-full md:w-auto mt-2 md:mt-0 bg-black text-white font-semibold py-3 px-7 rounded-2xl {!customTipAmount
-									? 'opacity-50'
-									: 'opacity-100'}"
-								disabled={!customTipAmount}>Done</button
+						<div>
+							<span class="font-semibold mr-1">{tipAmountFormatted}</span><span
+								class="text-secondary font-semibold text-sm">{`(${tipAmountSats} SATS)`}</span
 							>
+							<span class="block text-secondary text-sm">{tipPercent}%</span>
 						</div>
-					</div>
-				</div>
 
-				<div
-					class="h-[1px] lg:h-[600px] w-full lg:w-[1px] bg-lightgrey rounded-xl"
-					id="section-divider"
-				/>
+						<input
+							id="slider"
+							type="range"
+							min="0"
+							max="100"
+							value={tipPercent}
+							class="px-2"
+							on:input={(e) => {
+								customTipAmount = '';
+								tipPercent = e.target.value;
+							}}
+						/>
 
-				<!-- invoice section -->
-				<div class="text-center space-y-5">
-					<span class="text-secondary"
-						>Scan to pay <span class="text-black font-semibold">insert name here</span></span
-					>
+						<div>
+							{#each tipAmounts as amount}
+								<button
+									class="bg-primary w-16 md:w-20 py-3 m-1 rounded-2xl font-semibold {tipPercent ===
+										amount.slice(0, 2) ||
+									((tipPercent === 0 || tipPercent === '0') && amount === 'None')
+										? '!bg-black text-white'
+										: ''}"
+									on:click={() => handleTipButtonClick(amount)}>{amount}</button
+								>
+							{/each}
+
+							<div class="relative">
+								<span
+									class="absolute top-[20px] left-5 font-semibold {!customTipAmount
+										? 'opacity-50'
+										: 'opacity-100'}">$</span
+								>
+								<input
+									bind:this={customInput}
+									type="number"
+									min="0"
+									on:input={(e) => handleCustomTipAmount(e)}
+									class="bg-primary rounded-2xl py-3 px-10 font-semibold mt-2 mr-1 w-full md:w-auto"
+									placeholder="Other"
+								/>
+								<button
+									class="w-full md:w-auto mt-2 md:mt-0 bg-black text-white font-semibold py-3 px-7 rounded-2xl {showMobileTip
+										? !customTipAmount && !tipAmount
+											? 'opacity-50'
+											: 'opacity-100'
+										: !customTipAmount
+										? 'opacity-50'
+										: 'opacity-100'}"
+									disabled={showMobileTip ? !customTipAmount && !tipAmount : !customTipAmount}
+									>Done</button
+								>
+							</div>
+						</div>
+					</div>
 
 					<div
-						id="qr"
-						class="border border-lightgrey rounded-3xl lg:p-5 flex justify-center items-center"
+						class="hidden md:block h-[1px] lg:h-[600px] w-full lg:w-[1px] bg-lightgrey rounded-xl"
+						id="section-divider"
 					/>
 
-					<div class="px-5 space-y-3">
-						<div class="flex justify-between">
-							<span class="font-semibold text-sm">Invoice</span>
-							<span class="font-semibold text-sm"
-								>{invoiceAmountFiatFormatted}
-								<span class="text-secondary font-normal">{`(${invoiceAmountFormatted} SATS)`}</span
-								></span
+					<!-- invoice section -->
+					<div class="text-center space-y-5">
+						<button
+							class="block md:hidden bg-black {showMobileTip
+								? 'text-white/50'
+								: 'text-white'} rounded-xl px-6 py-3 block text-sm font-semibold mx-auto flex justify-center items-center"
+							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"
 							>
-						</div>
+								<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> Add a tip
+						</button>
 
-						<div class="flex justify-between">
-							<span class="font-semibold text-sm">Tip</span>
-							<span class="font-semibold text-sm"
-								>{tipAmountFormatted}
-								<span class="text-secondary font-normal">{`(${tipAmountSats} SATS)`}</span></span
-							>
-						</div>
+						<span class="text-secondary block"
+							>Scan to pay <span class="text-black font-semibold">{$user.username}</span></span
+						>
 
-						<div class="flex justify-between">
-							<span class="font-bold">Total</span>
-							<span class="font-bold"
-								>{totalAmountFormatted}
-								<span class="text-secondary font-normal">{`(${totalAmountSats} SATS)`}</span></span
-							>
+						<div
+							id="qr"
+							class="border {showMobileTip
+								? 'border-gray-400'
+								: 'border-lightgrey'} rounded-3xl block md:flex justify-center items-center"
+						/>
+
+						<div class="px-5 space-y-3">
+							<div class="flex justify-between">
+								<span class="font-semibold text-sm">Invoice</span>
+								<span class="font-semibold text-sm"
+									>{invoiceAmountFiatFormatted}
+									<span class="text-secondary font-normal"
+										>{`(${invoiceAmountFormatted} SATS)`}</span
+									></span
+								>
+							</div>
+
+							<div class="flex justify-between">
+								<span class="font-semibold text-sm">Tip</span>
+								<span class="font-semibold text-sm"
+									>{tipAmountFormatted}
+									<span class="text-secondary font-normal">{`(${tipAmountSats} SATS)`}</span></span
+								>
+							</div>
+
+							<div class="flex justify-between">
+								<span class="font-bold">Total</span>
+								<span class="font-bold"
+									>{totalAmountFormatted}
+									<span class="text-secondary font-normal">{`(${totalAmountSats} SATS)`}</span
+									></span
+								>
+							</div>
 						</div>
 					</div>
-				</div>
-			{:else}
-				<div
-					class="w-[94vw] md:w-[375px] h-[381px] md:h-[269px] animate-pulse bg-gray-400 rounded-xl"
-				/>
-				<div
-					class="h-[1px] lg:h-[600px] w-full lg:w-[1px] bg-lightgrey rounded-xl"
-					id="section-divider"
-				/>
-				<div
-					class="w-full md:w-[342px] h-[454px] md:h-[494px] animate-pulse bg-gray-400 rounded-xl"
-				/>
-			{/if}
+				{:else}
+					<div
+						class="w-[94vw] md:w-[375px] h-[381px] md:h-[269px] animate-pulse bg-gray-400 rounded-xl"
+					/>
+					<div
+						class="h-[1px] lg:h-[600px] w-full lg:w-[1px] bg-lightgrey rounded-xl"
+						id="section-divider"
+					/>
+					<div
+						class="w-full md:w-[342px] h-[454px] md:h-[494px] animate-pulse bg-gray-400 rounded-xl"
+					/>
+				{/if}
+			</div>
 		</div>
 	</div>
 {/if}
@@ -255,4 +315,8 @@
 	input[type='number'] {
 		-moz-appearance: textfield;
 	}
+
+	.full-shadow {
+		box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.25);
+	}
 </style>
diff --git a/static/icons/heart.svg b/static/icons/heart.svg
new file mode 100644
index 00000000..f3a5f757
--- /dev/null
+++ b/static/icons/heart.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" 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="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>