diff options
| author | secondl1ght <[email protected]> | 2022-08-02 20:23:00 -0600 |
|---|---|---|
| committer | secondl1ght <[email protected]> | 2022-08-02 20:23:00 -0600 |
| commit | 1281f173cd5f109799ef5974ed6f57165c9d2791 (patch) | |
| tree | 7f6bb492bdfc8fd7b71fcd2d4f6e080222c23bbc /src/components/AppHeader.svelte | |
| parent | fe130806aea8ba9e0b16a9f8c2ec4adcfe12a821 (diff) | |
| download | coinos-ui-1281f173cd5f109799ef5974ed6f57165c9d2791.tar.gz coinos-ui-1281f173cd5f109799ef5974ed6f57165c9d2791.zip | |
add settings screen
Diffstat (limited to 'src/components/AppHeader.svelte')
| -rw-r--r-- | src/components/AppHeader.svelte | 19 |
1 files changed, 14 insertions, 5 deletions
diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte index cc147b0d..ff8ede70 100644 --- a/src/components/AppHeader.svelte +++ b/src/components/AppHeader.svelte @@ -2,7 +2,7 @@ // we will want to dynamically use the users avatar on this screen if they have uploaded one import OutClick from 'svelte-outclick'; - import { user } from '$lib/store'; + import { user, newPayment, colorTheme } from '$lib/store'; import { goto } from '$app/navigation'; import { Icon } from '$comp'; @@ -28,7 +28,7 @@ }; </script> -<header class="bg-gradient-to-r from-primary to-gradient h-[175px] w-full relative"> +<header class="bg-gradient-to-r {$colorTheme} h-[175px] w-full relative"> <nav class="flex justify-end items-center space-x-4 p-5"> {#if $user} <a href={`/${$user.username}/receive`}> @@ -37,12 +37,21 @@ </button> </a> <a href={`/${$user.username}/transactions`}> - <button class="bg-white p-2 rounded-full w-12 h-12" + <button class="bg-white p-2 rounded-full w-12 h-12 relative" ><Icon icon="clock" style="mx-auto" /> + {#if $newPayment} + <span class="absolute top-[8px] right-[8px]"> + <span class="flex h-8 w-8"> + <span + class="animate-ping absolute inline-flex h-full w-full rounded-full bg-[#F7931A] opacity-75" + /> + </span> + </span> + {/if} </button> </a> <a href={`/${$user.username}`}> - <button class="bg-white p-2 rounded-full w-12 h-12" + <button class="bg-white p-2 rounded-full w-12 h-12" ><Icon icon="profile" style="mx-auto" /> </button> </a> @@ -80,7 +89,7 @@ {/if} </nav> <div - class="absolute top-[calc(175px-48px)] {avatarPosition} rounded-full border-4 border-white p-4 bg-gradient-to-r from-primary to-gradient w-24 h-24" + class="absolute top-[calc(175px-48px)] {avatarPosition} rounded-full border-4 border-white p-4 bg-gradient-to-r {$colorTheme} w-24 h-24" > <Icon icon="logo-symbol-white" style="mx-auto" /> </div> |