add receive page and app header comp

10 files changed, 54 insertions, 4 deletions

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';
diff --git a/src/routes/receive.svelte b/src/routes/receive.svelte
new file mode 100644
index 00000000..1935b156
--- /dev/null
+++ b/src/routes/receive.svelte
@@ -0,0 +1,5 @@
+<script>
+	import { AppHeader } from '$comp';
+</script>
+
+<AppHeader />
diff --git a/static/icons/clock.svg b/static/icons/clock.svg
new file mode 100644
index 00000000..9ea9d1f3
--- /dev/null
+++ b/static/icons/clock.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="M12 8V12L15 15M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/static/icons/logo-symbol-white.svg b/static/icons/logo-symbol-white.svg
new file mode 100644
index 00000000..7ea394ad
--- /dev/null
+++ b/static/icons/logo-symbol-white.svg
@@ -0,0 +1,4 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M36 72C55.8823 72 72 55.8823 72 36C72 16.1177 55.8823 0 36 0C16.1177 0 0 16.1177 0 36C0 55.8823 16.1177 72 36 72ZM36 67.2C53.2313 67.2 67.2 53.2313 67.2 36C67.2 18.7687 53.2313 4.8 36 4.8C18.7687 4.8 4.8 18.7687 4.8 36C4.8 53.2313 18.7687 67.2 36 67.2Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M36.001 12.7998C36.0009 12.7998 36.0008 12.7998 36.0008 12.7998C23.1878 12.7998 12.8008 23.1868 12.8008 35.9998C12.8008 48.8128 23.1878 59.1998 36.0008 59.1998C36.0008 59.1998 36.0009 59.1998 36.001 59.1998V12.7998Z" fill="white"/>
+</svg>
diff --git a/static/icons/menu.svg b/static/icons/menu.svg
new file mode 100644
index 00000000..8883ea5e
--- /dev/null
+++ b/static/icons/menu.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 6H20M4 12H12M4 18H20" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/static/icons/numpad.svg b/static/icons/numpad.svg
new file mode 100644
index 00000000..fad4d83d
--- /dev/null
+++ b/static/icons/numpad.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="M17 14V20M14 17H20M6 10H8C9.10457 10 10 9.10457 10 8V6C10 4.89543 9.10457 4 8 4H6C4.89543 4 4 4.89543 4 6V8C4 9.10457 4.89543 10 6 10ZM16 10H18C19.1046 10 20 9.10457 20 8V6C20 4.89543 19.1046 4 18 4H16C14.8954 4 14 4.89543 14 6V8C14 9.10457 14.8954 10 16 10ZM6 20H8C9.10457 20 10 19.1046 10 18V16C10 14.8954 9.10457 14 8 14H6C4.89543 14 4 14.8954 4 16V18C4 19.1046 4.89543 20 6 20Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/static/icons/profile.svg b/static/icons/profile.svg
new file mode 100644
index 00000000..0fb4831a
--- /dev/null
+++ b/static/icons/profile.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 7C16 9.20914 14.2091 11 12 11C9.79086 11 8 9.20914 8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 14C8.13401 14 5 17.134 5 21H19C19 17.134 15.866 14 12 14Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 0d4dc4e3..86d5d1cf 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -4,8 +4,9 @@ module.exports = {
 	theme: {
 		extend: {
 			colors: {
+				primary: '#F5F7FA',
 				secondary: '#858A92',
-				input: '#F5F7FA'
+				gradient: '#C3CFE2'
 			}
 		}
 	},