From 6ab5dd648ca3e1d248c841deedca58b19890215c Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Tue, 4 Oct 2022 21:44:56 -0700
Subject: tip slider progress fill

---
 src/components/Tip.svelte                    | 34 ++++++++++++++++++----------
 src/routes/[username]/dashboard/+page.svelte | 23 +++++++++++--------
 src/routes/invoice/[id]/paid/+page.svelte    |  3 ---
 src/routes/register/+page.server.js          |  4 ++--
 4 files changed, 37 insertions(+), 27 deletions(-)

(limited to 'src')

diff --git a/src/components/Tip.svelte b/src/components/Tip.svelte
index 093fef46..9beee3af 100644
--- a/src/components/Tip.svelte
+++ b/src/components/Tip.svelte
@@ -73,13 +73,12 @@
 		<input type="hidden" name="username" value={username} />
 		<input type="hidden" name="prompt" value="true" />
 
-		<h1 class="hidden md:block text-4xl font-semibold">{$t('invoice.addTipq')}</h1>
+		<h1 class="hidden md:block text-4xl font-semibold mb-2">{$t('invoice.addTipq')}</h1>
 		{#if !showCustomAmount}
-			<div>
-				<span class="font-semibold mr-1">{f(tipAmount, currency)}</span><span
-					class="text-secondary font-semibold text-sm">{`(${s(tip)} SAT)`}</span
-				>
-				<span class="block text-secondary text-sm">{Math.round(tipPercent)}%</span>
+			<div class="mb-2">
+				<span class="font-semibold mr-1">{f(tipAmount, currency)}</span>
+				<span class="text-secondary font-semibold text-sm">{`(${s(tip)} SAT)`}</span>
+				<div class="text-secondary text-sm mb-2">{Math.round(tipPercent)}%</div>
 			</div>
 
 			<input
@@ -88,7 +87,8 @@
 				min="0"
 				max="100"
 				value={tipPercent}
-				class="px-2 py-0 mb-4"
+				class="px-0 py-0 mb-4"
+				style="--bgPercent: {tipPercent}%;"
 				on:input={handleSlide}
 				on:change={() => (showMobileTip = false)}
 			/>
@@ -157,7 +157,13 @@
 		width: 100%;
 		height: 6px;
 		border-radius: 5px;
-		background: #eaecef;
+		background: linear-gradient(
+			to right,
+			black 0%,
+			black var(--bgPercent),
+			#F5F7FA var(--bgPercent),
+			#F5F7FA 100%
+		);
 		outline: none;
 	}
 
@@ -168,18 +174,22 @@
 	#slider::-webkit-slider-thumb {
 		-webkit-appearance: none;
 		appearance: none;
-		width: 25px;
-		height: 25px;
+		width: 20px;
+		height: 20px;
 		border-radius: 50%;
 		background: black;
 		cursor: pointer;
 	}
 
 	#slider::-moz-range-thumb {
-		width: 25px;
-		height: 25px;
+		width: 20px;
+		height: 20px;
 		border-radius: 50%;
 		background: black;
 		cursor: pointer;
 	}
+
+	#slider.slider-track::-moz-range-progress {
+		background: black;
+	}
 </style>
diff --git a/src/routes/[username]/dashboard/+page.svelte b/src/routes/[username]/dashboard/+page.svelte
index 667c4749..8d77b699 100644
--- a/src/routes/[username]/dashboard/+page.svelte
+++ b/src/routes/[username]/dashboard/+page.svelte
@@ -53,10 +53,6 @@
 
 <div class="px-3 md:px-0 flex justify-center items-center mt-10 lg:mt-0 mb-20">
 	<div>
-		<h3 class="text-secondary font-bold pb-1 mt-10 mb-6 w-full md:w-[500px] uppercase">
-			{$t('user.dashboard.accountBalance')}
-		</h3>
-
 		<span class="text-3xl font-bold block mb-1"
 			>{$selectedRate
 				? f(accountBalanceFiat, user.currency)
@@ -73,12 +69,19 @@
 					>{$t('user.dashboard.receive')}</button
 				>
 			</a>
-			<a href="/send">
-				<button
-					class="rounded-full border py-2 px-5 font-bold hover:opacity-80 w-full mb-2"
-					on:click={() => goto('/send')}>{$t('user.dashboard.withdraw')}</button
-				>
-			</a>
+			{#if user.account.balance > 0}
+				<a href="/send">
+					<button class="rounded-full border py-2 px-5 font-bold hover:opacity-80 w-full mb-2"
+						>{$t('user.dashboard.withdraw')}</button
+					>
+				</a>
+			{:else}
+        <a href={`/${user.username}/settings`}>
+					<button class="rounded-full border py-2 px-5 font-bold hover:opacity-80 w-full mb-2"
+						>Setup Account</button
+					>
+				</a>
+			{/if}
 		</div>
 	</div>
 </div>
diff --git a/src/routes/invoice/[id]/paid/+page.svelte b/src/routes/invoice/[id]/paid/+page.svelte
index 1b212a92..9479f0aa 100644
--- a/src/routes/invoice/[id]/paid/+page.svelte
+++ b/src/routes/invoice/[id]/paid/+page.svelte
@@ -1,7 +1,5 @@
 <script>
 	import { scale } from 'svelte/transition';
-	import { onMount } from 'svelte';
-	import { quintOut } from 'svelte/easing';
 	import { Icon } from '$comp';
 	import { toast } from '@zerodevx/svelte-toast';
 	import { browser } from '$app/environment';
@@ -13,7 +11,6 @@
 	export let data;
 	let { invoice } = data;
 	let { amount, rate } = invoice;
-	let yeah;
 
 	toast.pop(0);
 
diff --git a/src/routes/register/+page.server.js b/src/routes/register/+page.server.js
index 95ea4511..26f4475f 100644
--- a/src/routes/register/+page.server.js
+++ b/src/routes/register/+page.server.js
@@ -2,13 +2,13 @@ import { redirect } from '@sveltejs/kit';
 import { post, login } from '$lib/utils';
 
 export const actions = {
-	default: async ({ cookie, request }) => {
+	default: async ({ cookies, request }) => {
 		let form = Object.fromEntries(await request.formData());
 		let { username, password, redirect: r } = form;
 
 		let user = { username, password };
 		await post('/register', { user });
-		await login(user, cookie);
+		await login(user, cookies);
 
 		throw redirect(303, r || `/${user.username}/dashboard`);
 	}
-- 
cgit v1.2.3