UX: tone down popover elements

This commit is contained in:
Pieter Vander Vennet 2025-06-25 16:55:55 +02:00
parent 559605a169
commit d0b487bfa5
4 changed files with 27 additions and 24 deletions

View file

@ -6,26 +6,26 @@
let open = false
export let state: { osmConnection: OsmConnection }
let userdetails = state.osmConnection.userDetails
userdetails.addCallbackAndRunD((ud) => {
let username = userdetails.mapD(ud => ud.name)
username.addCallbackAndRunD((ud) => {
if (ud) {
open = true
window.setTimeout(() => {
open = false
}, 5000)
open = false
}, 3000)
}
})
</script>
<Popover
class="z-50 mt-4"
class="mt-4 hidden sm:block"
defaultClass="py-2 px-3 w-fit "
trigger="null"
placement="bottom"
transition={(e) => fade(e, { duration: 150 })}
bind:open
>
{#if $userdetails !== undefined}
{#if $username !== undefined}
<div style="width: max-content" class="flex items-center">
{#if $userdetails.img}
<img src={$userdetails.img} alt="avatar" class="mr-4 h-8 w-8 rounded-full" />
@ -33,7 +33,7 @@
<div>
<div>Welcome back</div>
<div class="normal-background" style="width: max-content">
<b>{$userdetails?.name}</b>
<b>{$username}</b>
</div>
</div>
</div>