diff options
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> |