diff options
| author | secondl1ght <[email protected]> | 2022-07-22 10:36:38 -0600 |
|---|---|---|
| committer | secondl1ght <[email protected]> | 2022-07-22 10:36:38 -0600 |
| commit | 7d6019ab7e24fc243c7d5dce331713372ff83331 (patch) | |
| tree | a1c889b8f891644199f3cb3ce369764b23cdc05f /src/components | |
| parent | 07c13d98a8cc1df1c72572c8c2e27029ff0522d8 (diff) | |
| download | coinos-ui-7d6019ab7e24fc243c7d5dce331713372ff83331.tar.gz coinos-ui-7d6019ab7e24fc243c7d5dce331713372ff83331.zip | |
add receive page and app header comp
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/AppHeader.svelte | 26 | ||||
| -rw-r--r-- | src/components/RegisterOrLogin.svelte | 6 | ||||
| -rw-r--r-- | src/components/index.js | 1 |
3 files changed, 30 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'; |