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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user