fix: UI polish across navbar, payment modal, calendar, and dialog

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
This commit is contained in:
2026-05-28 16:34:13 +01:00
co-authored by Sisyphus
parent fff8afcbe9
commit 72270649b6
4 changed files with 9 additions and 7 deletions
@@ -188,7 +188,7 @@
<!-- Mobile Menu -->
{#if mobileMenuOpen}
<div class="border-b border-gray-200 bg-background md:hidden">
<div class="space-y-1 px-2 pt-2 pb-3">
<div class="space-y-1 px-4 pt-2 pb-3">
{#each links as link}
{#if canShow(link)}
{#if isLoading}
@@ -196,7 +196,7 @@
{:else}
<a
href={link.href}
class="block rounded px-3 py-2 text-center text-primary hover:text-gray-800"
class="block rounded px-3 py-3 text-center text-primary hover:text-gray-800"
>
{link.label}
</a>
@@ -207,11 +207,11 @@
{#if isAuthenticated}
<a
href="/notifications"
class="flex items-center justify-center gap-2 rounded px-3 py-2 text-primary hover:text-gray-800"
class="flex items-center justify-center gap-2 rounded px-3 py-3 text-primary hover:text-gray-800"
>
<span>Notifications</span>
{#if unreadCount > 0}
<span class="flex h-5 w-5 items-center justify-center rounded-full bg-red-500 text-[10px] font-bold text-white">
<span class="flex h-6 w-6 min-w-6 items-center justify-center rounded-full bg-red-500 px-1.5 text-[10px] font-bold text-white">
{unreadCount > 9 ? '9+' : unreadCount}
</span>
{/if}
@@ -442,7 +442,7 @@
{#if method.id === selectedPaymentMethod}
<div class="flex items-center justify-between rounded-lg border border-input bg-fuchsia-100 p-3">
<div class="flex items-center gap-3">
<div class="flex h-10 w-14 items-center justify-center rounded bg-gray-100 text-xs font-medium">
<div class="flex h-10 min-w-14 items-center justify-center rounded bg-gray-100 px-2 text-xs font-medium">
{method.brand}
</div>
<div class="text-sm">
@@ -497,7 +497,7 @@
}}
>
<div class="flex items-center gap-3">
<div class="flex h-10 w-14 items-center justify-center rounded bg-gray-100 text-xs font-medium">
<div class="flex h-10 min-w-14 items-center justify-center rounded bg-gray-100 px-2 text-xs font-medium">
{method.brand}
</div>
<div class="text-sm">
@@ -23,6 +23,8 @@
"data-[disabled]:text-muted-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
// Unavailable
"data-[unavailable]:text-muted-foreground data-[unavailable]:line-through",
// Today dot (::after pseudo-element on [data-today])
"[&[data-today]]:after:block [&[data-today]]:after:content-[''] [&[data-today]]:after:w-1 [&[data-today]]:after:h-1 [&[data-today]]:after:bg-current [&[data-today]]:after:rounded-full [&[data-today]]:after:mx-auto [&[data-today]]:after:mt-[-2px] [&[data-today]]:after:opacity-70",
// hover
"dark:hover:text-accent-foreground",
// focus
@@ -33,7 +33,7 @@
{@render children?.()}
{#if !hideClose}
<DialogPrimitive.Close
class="ring-offset-background focus:ring-ring absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
class="ring-offset-background focus:ring-ring absolute top-4 right-4 flex h-8 w-8 items-center justify-center rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0"
>
<XIcon />
<span class="sr-only">Close</span>