From 69ae5e2b84a7eedc71c7219af2e25d6de815b801 Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Fri, 22 Jul 2022 13:24:51 -0600
Subject: add numpad/generate invoice step 1 to receive page, refactoring

---
 src/components/AppHeader.svelte       |  2 ++
 src/components/LandingHeader.svelte   | 13 +++++--
 src/components/LandingHero.svelte     |  9 +++--
 src/components/PrimaryButton.svelte   |  8 -----
 src/components/SecondaryButton.svelte |  6 ----
 src/components/index.js               |  2 --
 src/routes/receive.svelte             | 65 ++++++++++++++++++++++++++++++++++-
 static/icons/chevron-left-white.svg   |  3 ++
 static/icons/chevron-left.svg         |  3 ++
 static/icons/qr.svg                   |  3 ++
 static/icons/send.svg                 |  3 ++
 static/icons/swap.svg                 |  3 ++
 12 files changed, 98 insertions(+), 22 deletions(-)
 delete mode 100644 src/components/PrimaryButton.svelte
 delete mode 100644 src/components/SecondaryButton.svelte
 create mode 100644 static/icons/chevron-left-white.svg
 create mode 100644 static/icons/chevron-left.svg
 create mode 100644 static/icons/qr.svg
 create mode 100644 static/icons/send.svg
 create mode 100644 static/icons/swap.svg

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 -->
diff --git a/static/icons/chevron-left-white.svg b/static/icons/chevron-left-white.svg
new file mode 100644
index 00000000..c73054bf
--- /dev/null
+++ b/static/icons/chevron-left-white.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="M15 19L8 12L15 5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/static/icons/chevron-left.svg b/static/icons/chevron-left.svg
new file mode 100644
index 00000000..71bbaadb
--- /dev/null
+++ b/static/icons/chevron-left.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="M15 19L8 12L15 5" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/static/icons/qr.svg b/static/icons/qr.svg
new file mode 100644
index 00000000..d88761ee
--- /dev/null
+++ b/static/icons/qr.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="M13 4C13 3.44772 12.5523 3 12 3C11.4477 3 11 3.44772 11 4H13ZM11 5C11 5.55228 11.4477 6 12 6C12.5523 6 13 5.55228 13 5H11ZM18 15C17.4477 15 17 15.4477 17 16C17 16.5523 17.4477 17 18 17V15ZM20 17C20.5523 17 21 16.5523 21 16C21 15.4477 20.5523 15 20 15V17ZM12 16V15C11.4477 15 11 15.4477 11 16H12ZM14 17C14.5523 17 15 16.5523 15 16C15 15.4477 14.5523 15 14 15V17ZM11 20C11 20.5523 11.4477 21 12 21C12.5523 21 13 20.5523 13 20H11ZM13 9C13 8.44772 12.5523 8 12 8C11.4477 8 11 8.44772 11 9H13ZM12 12H11C11 12.5523 11.4477 13 12 13V12ZM16 19C15.4477 19 15 19.4477 15 20C15 20.5523 15.4477 21 16 21V19ZM20 21C20.5523 21 21 20.5523 21 20C21 19.4477 20.5523 19 20 19V21ZM4 11C3.44772 11 3 11.4477 3 12C3 12.5523 3.44772 13 4 13V11ZM8 13C8.55228 13 9 12.5523 9 12C9 11.4477 8.55228 11 8 11V13ZM12.01 13C12.5623 13 13.01 12.5523 13.01 12C13.01 11.4477 12.5623 11 12.01 11V13ZM16.01 13C16.5623 13 17.01 12.5523 17.01 12C17.01 11.4477 16.5623 11 16.01 11V13ZM20 11C19.4477 11 19 11.4477 19 12C19 12.5523 19.4477 13 20 13V11ZM20.01 13C20.5623 13 21.01 12.5523 21.01 12C21.01 11.4477 20.5623 11 20.01 11V13ZM5 5H7V3H5V5ZM7 5V7H9V5H7ZM7 7H5V9H7V7ZM5 7V5H3V7H5ZM5 7H3C3 8.10457 3.89543 9 5 9V7ZM7 7V9C8.10457 9 9 8.10457 9 7H7ZM7 5H9C9 3.89543 8.10457 3 7 3V5ZM5 3C3.89543 3 3 3.89543 3 5H5V3ZM17 5H19V3H17V5ZM19 5V7H21V5H19ZM19 7H17V9H19V7ZM17 7V5H15V7H17ZM17 7H15C15 8.10457 15.8954 9 17 9V7ZM19 7V9C20.1046 9 21 8.10457 21 7H19ZM19 5H21C21 3.89543 20.1046 3 19 3V5ZM17 3C15.8954 3 15 3.89543 15 5H17V3ZM5 17H7V15H5V17ZM7 17V19H9V17H7ZM7 19H5V21H7V19ZM5 19V17H3V19H5ZM5 19H3C3 20.1046 3.89543 21 5 21V19ZM7 19V21C8.10457 21 9 20.1046 9 19H7ZM7 17H9C9 15.8954 8.10457 15 7 15V17ZM5 15C3.89543 15 3 15.8954 3 17H5V15ZM11 4V5H13V4H11ZM18 17H20V15H18V17ZM12 17H14V15H12V17ZM11 16V20H13V16H11ZM11 9V12H13V9H11ZM16 21H20V19H16V21ZM4 13H8V11H4V13ZM12 13H12.01V11H12V13ZM20 13H20.01V11H20V13ZM12 13H16.01V11H12V13Z" fill="white"/>
+</svg>
diff --git a/static/icons/send.svg b/static/icons/send.svg
new file mode 100644
index 00000000..1d20f7aa
--- /dev/null
+++ b/static/icons/send.svg
@@ -0,0 +1,3 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 12.9953L3.99392 21.9939L22 13.0061L4.00608 3.99393L6 12.9953ZM6 12.9953L14 13.0007" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/static/icons/swap.svg b/static/icons/swap.svg
new file mode 100644
index 00000000..4774add5
--- /dev/null
+++ b/static/icons/swap.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="M7 16V4M7 4L3 8M7 4L11 8M17 8V20M17 20L21 16M17 20L13 16" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
-- 
cgit v1.2.3