diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/AppHeader.svelte | 26 | ||||
| -rw-r--r-- | src/components/RegisterOrLogin.svelte | 6 | ||||
| -rw-r--r-- | src/components/index.js | 1 | ||||
| -rw-r--r-- | src/routes/receive.svelte | 5 |
4 files changed, 35 insertions, 3 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 /> |