add numpad/generate invoice step 1 to receive page, refactoring

7 files changed, 83 insertions, 22 deletions

diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
index 580f442f..9998a4f6 100644
--- a/src/components/AppHeader.svelte
+++ b/src/components/AppHeader.svelte
@@ -1,4 +1,6 @@
 <script>
+	// we will want to dynamically use the users avatar on this screen if they have uploaded one
+
 	import { goto } from '$app/navigation';
 	import { Icon } from '$comp';
 </script>
diff --git a/src/components/LandingHeader.svelte b/src/components/LandingHeader.svelte
index d6d55863..89f4014f 100644
--- a/src/components/LandingHeader.svelte
+++ b/src/components/LandingHeader.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { goto } from '$app/navigation';
 	import { scroll } from '../lib/utils';
-	import { PrimaryButton, SecondaryButton, Icon } from '$comp';
+	import { Icon } from '$comp';
 
 	export let howItWorks;
 	export let faq;
@@ -17,8 +17,15 @@
 			<button on:click={() => scroll(howItWorks)}>How It Works</button>
 			<button on:click={() => scroll(faq)}>FAQ</button>
 			<button>About</button>
-			<SecondaryButton title="Start in Seconds" click={() => goto('/register')} />
-			<PrimaryButton title="Sign In" click={() => goto('/login')} />
+			<button class="border rounded-full px-6 py-2 font-bold" on:click={() => goto('/register')}
+				>Start in Seconds</button
+			>
+			<button
+				class="bg-black text-white border rounded-full px-6 py-2 font-bold"
+				on:click={() => goto('/login')}
+			>
+				Sign in
+			</button>
 		</div>
 	</nav>
 </header>
diff --git a/src/components/LandingHero.svelte b/src/components/LandingHero.svelte
index 43f02134..2c2e1ab5 100644
--- a/src/components/LandingHero.svelte
+++ b/src/components/LandingHero.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { goto } from '$app/navigation';
-	import { PrimaryButton, Icon, Image } from '$comp';
+	import { Icon, Image } from '$comp';
 </script>
 
 <div>
@@ -20,7 +20,12 @@
 			of Sale. No software or hardware required.
 		</h2>
 		<div class="flex justify-center">
-			<PrimaryButton title="Start in Seconds" click={() => goto('/register')} />
+			<button
+				class="bg-black text-white border rounded-full px-6 py-2 font-bold"
+				on:click={() => goto('/register')}
+			>
+				Start in Seconds
+			</button>
 		</div>
 	</div>
 
diff --git a/src/components/PrimaryButton.svelte b/src/components/PrimaryButton.svelte
deleted file mode 100644
index ef8f7718..00000000
--- a/src/components/PrimaryButton.svelte
+++ /dev/null
@@ -1,8 +0,0 @@
-<script>
-	export let title;
-	export let click;
-</script>
-
-<button class="bg-black text-white border rounded-full px-6 py-2 font-bold" on:click={click}>
-	{title}
-</button>
diff --git a/src/components/SecondaryButton.svelte b/src/components/SecondaryButton.svelte
deleted file mode 100644
index 723a7569..00000000
--- a/src/components/SecondaryButton.svelte
+++ /dev/null
@@ -1,6 +0,0 @@
-<script>
-	export let title;
-	export let click;
-</script>
-
-<button class="border rounded-full px-6 py-2 font-bold" on:click={click}>{title}</button>
diff --git a/src/components/index.js b/src/components/index.js
index 32082d8f..febf8dac 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -3,8 +3,6 @@ export { default as LandingHero } from './LandingHero.svelte';
 export { default as LandingInfoCard } from './LandingInfoCard.svelte';
 export { default as HowItWorksCard } from './HowItWorksCard.svelte';
 export { default as FaqCard } from './FaqCard.svelte';
-export { default as PrimaryButton } from './PrimaryButton.svelte';
-export { default as SecondaryButton } from './SecondaryButton.svelte';
 export { default as Icon } from './Icon.svelte';
 export { default as Image } from './Image.svelte';
 export { default as RegisterOrLogin } from './RegisterOrLogin.svelte';
diff --git a/src/routes/receive.svelte b/src/routes/receive.svelte
index 1935b156..92138005 100644
--- a/src/routes/receive.svelte
+++ b/src/routes/receive.svelte
@@ -1,5 +1,68 @@
 <script>
-	import { AppHeader } from '$comp';
+	// in the future we will want to allow users to set their fiat currency in the settings
+	import { AppHeader, Icon } from '$comp';
+
+	let useFiat = true;
+	let amountFiat = 0;
+	let amountSats = 0;
+	let deleteActive = false;
+
+	const numPad = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '.', '0', '<'];
 </script>
 
 <AppHeader />
+
+<!-- step 1 input amount and generate QR code -->
+<div class="flex justify-center items-center mt-20 mb-3 px-3">
+	<div class="space-y-5">
+		<!-- amounts -->
+		<div class="text-center">
+			<div class="text-6xl font-semibold tracking-widest mb-1">
+				{useFiat ? `$${amountFiat}` : amountSats}<span class="tracking-normal text-base font-normal"
+					>{useFiat ? 'CAD' : 'SATS'}</span
+				>
+			</div>
+			<span class="text-secondary mr-1"
+				>{useFiat ? `${amountSats} SATS` : `$${amountFiat} CAD`}</span
+			> <button on:click={() => (useFiat = !useFiat)}><Icon icon="swap" style="inline" /></button>
+		</div>
+
+		<!-- numpad -->
+		<div class="grid grid-cols-3 gap-2">
+			{#each numPad as value}
+				{#if value === '<'}
+					<button
+						class="bg-primary rounded-xl py-4 px-8 font-semibold active:bg-black active:text-white"
+						on:mousedown={() => (deleteActive = true)}
+						on:mouseup={() => (deleteActive = false)}
+						><Icon
+							icon={deleteActive ? 'chevron-left-white' : 'chevron-left'}
+							style="w-5"
+						/></button
+					>
+				{:else}
+					<button
+						class="bg-primary rounded-xl py-4 px-8 font-semibold active:bg-black active:text-white"
+						>{value}</button
+					>
+				{/if}
+			{/each}
+		</div>
+
+		<!-- buttons -->
+		<div class="space-y-3">
+			<button
+				class="bg-black text-white rounded-xl w-full h-[48px] flex justify-center items-center font-semibold text-sm"
+				><Icon icon="qr" style="mr-2" /> Show QR</button
+			>
+			<button
+				class="bg-primary rounded-xl w-full h-[48px] flex justify-center items-center font-semibold text-sm"
+				><Icon icon="send" style="mr-2" /> Send Invoice</button
+			>
+		</div>
+	</div>
+</div>
+
+<!-- step 2 customer adds tip and pays -->
+
+<!-- step 3 success screen -->