diff options
| author | secondl1ght <[email protected]> | 2022-09-16 23:34:58 -0600 |
|---|---|---|
| committer | Adam Soltys <[email protected]> | 2022-09-24 09:05:08 -0700 |
| commit | 01a1bb630e6e29b60a9f20671287913a3993e256 (patch) | |
| tree | f8f97d02e4d6a0bf748006cb94bfaabfdf5f41de /src/components | |
| parent | 0ae9f1998e77c269cdefe82a1dcd013f3a82769e (diff) | |
| download | coinos-ui-01a1bb630e6e29b60a9f20671287913a3993e256.tar.gz coinos-ui-01a1bb630e6e29b60a9f20671287913a3993e256.zip | |
add loading state to invoice button, improve nav button states/styles
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/AppHeader.svelte | 26 |
1 files changed, 22 insertions, 4 deletions
diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte index cd3dfd30..22c18622 100644 --- a/src/components/AppHeader.svelte +++ b/src/components/AppHeader.svelte @@ -4,6 +4,7 @@ import { goto } from '$app/navigation'; import { Icon } from '$comp'; import { t } from '$lib/translations'; + import { page } from '$app/stores'; export let avatarPosition = 'left-[calc(50vw-48px)] bottom-[-48px]'; @@ -37,12 +38,20 @@ <nav class="flex justify-end items-center space-x-4 p-5"> {#if $user} <a href={`/${$user.username}/receive`}> - <button class="bg-white p-2 rounded-full w-12 h-12 shadow-xl" + <button + class="bg-white p-2 rounded-full w-12 h-12 drop-shadow-xl border border-black/10 {$page + .url.pathname === `/${$user.username}/receive` + ? 'opacity-100' + : 'opacity-70'}" ><Icon icon="numpad" style="mx-auto" /> </button> </a> <a href={`/${$user.username}/transactions`}> - <button class="bg-white p-2 rounded-full w-12 h-12 shadow-xl relative" + <button + class="bg-white p-2 rounded-full w-12 h-12 drop-shadow-xl border border-black/10 {$page + .url.pathname === `/${$user.username}/transactions` + ? 'opacity-100' + : 'opacity-70'} relative" ><Icon icon="clock" style="mx-auto" /> {#if $newPayment} <span class="absolute top-0 right-0"> @@ -57,14 +66,23 @@ </button> </a> <a href={`/${$user.username}`}> - <button class="bg-white p-2 rounded-full w-12 h-12 shadow-xl" + <button + class="bg-white p-2 rounded-full w-12 h-12 drop-shadow-xl border border-black/10 {$page + .url.pathname === `/${$user.username}` + ? 'opacity-100' + : 'opacity-70'}" ><Icon icon="profile" style="mx-auto" /> </button> </a> <div class="relative"> <OutClick on:outclick={() => (showMenu = false)}> <button - class="bg-white p-2 rounded-full w-12 h-12 shadow-xl" + class="bg-white p-2 rounded-full w-12 h-12 drop-shadow-xl border border-black/10 {$page + .url.pathname === `/${$user.username}/dashboard` || + $page.url.pathname === `/${$user.username}/settings` || + $page.url.pathname === `/${$user.username}/support` + ? 'opacity-100' + : 'opacity-70'}" on:click={() => (showMenu = !showMenu)} ><Icon icon="menu" style="mx-auto" /> </button> |