From 7d6019ab7e24fc243c7d5dce331713372ff83331 Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Fri, 22 Jul 2022 10:36:38 -0600
Subject: add receive page and app header comp

---
 src/components/AppHeader.svelte       | 26 ++++++++++++++++++++++++++
 src/components/RegisterOrLogin.svelte |  6 +++---
 src/components/index.js               |  1 +
 3 files changed, 30 insertions(+), 3 deletions(-)
 create mode 100644 src/components/AppHeader.svelte

(limited to 'src/components')

diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
new file mode 100644
index 00000000..580f442f
--- /dev/null
+++ b/src/components/AppHeader.svelte
@@ -0,0 +1,26 @@
+<script>
+	import { goto } from '$app/navigation';
+	import { Icon } from '$comp';
+</script>
+
+<header class="bg-gradient-to-r from-primary to-gradient h-[20vh] w-full relative">
+	<nav class="flex justify-end items-center space-x-4 p-5">
+		<button class="bg-white p-2 rounded-full w-12 h-12" on:click={() => goto('/receive')}
+			><Icon icon="numpad" style="mx-auto" /></button
+		>
+		<button class="bg-white p-2 rounded-full  w-12 h-12"
+			><Icon icon="clock" style="mx-auto" /></button
+		>
+		<button class="bg-white p-2 rounded-full  w-12 h-12"
+			><Icon icon="menu" style="mx-auto" /></button
+		>
+		<button class="bg-white p-2 rounded-full  w-12 h-12"
+			><Icon icon="profile" style="mx-auto" /></button
+		>
+	</nav>
+	<div
+		class="absolute top-[calc(20vh-48px)] left-[calc(50vw-48px)] rounded-full border-4 border-white p-4 bg-gradient-to-r from-primary to-gradient w-24 h-24"
+	>
+		<Icon icon="logo-symbol-white" style="mx-auto" />
+	</div>
+</header>
diff --git a/src/components/RegisterOrLogin.svelte b/src/components/RegisterOrLogin.svelte
index 4b1c7293..77c1d76f 100644
--- a/src/components/RegisterOrLogin.svelte
+++ b/src/components/RegisterOrLogin.svelte
@@ -18,7 +18,7 @@
 			<form class="space-y-5">
 				<div>
 					<label for="username" class="font-semibold">Username</label>
-					<input type="text" required class="bg-input p-4 rounded-2xl w-full" />
+					<input type="text" required class="bg-primary p-4 rounded-2xl w-full" />
 				</div>
 
 				<div class="relative">
@@ -26,14 +26,14 @@
 					<input
 						type={revealPassword ? 'text' : 'password'}
 						required
-						class="block bg-input p-4 rounded-2xl w-full"
+						class="block bg-primary p-4 rounded-2xl w-full"
 					/>
 					<button
 						type="button"
 						on:click={() => (revealPassword = !revealPassword)}
 						class="absolute right-5 top-10"
 					>
-						<Icon icon={revealPassword ? "eye" : 'eye-off'} />
+						<Icon icon={revealPassword ? 'eye' : 'eye-off'} />
 					</button>
 				</div>
 
diff --git a/src/components/index.js b/src/components/index.js
index d96a8656..32082d8f 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -8,3 +8,4 @@ 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';
+export { default as AppHeader } from './AppHeader.svelte';
-- 
cgit v1.2.3