popertots/Crussell
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

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

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
This commit is contained in:
popertots
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
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/layout/NavBar.svelte
+4 -4
View File
@@ -188,7 +188,7 @@
<!-- Mobile Menu --> <!-- Mobile Menu -->
{#if mobileMenuOpen} {#if mobileMenuOpen}
<div class="border-b border-gray-200 bg-background md:hidden"> <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} {#each links as link}
{#if canShow(link)} {#if canShow(link)}
{#if isLoading} {#if isLoading}
@@ -196,7 +196,7 @@
{:else} {:else}
<a <a
href={link.href} 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} {link.label}
</a> </a>
@@ -207,11 +207,11 @@
{#if isAuthenticated} {#if isAuthenticated}
<a <a
href="/notifications" 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> <span>Notifications</span>
{#if unreadCount > 0} {#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} {unreadCount > 9 ? '9+' : unreadCount}
</span> </span>
{/if} {/if}
frontend/src/lib/components/payments/UserPaymentModal.svelte
+2 -2
View File
@@ -442,7 +442,7 @@
{#if method.id === selectedPaymentMethod} {#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 justify-between rounded-lg border border-input bg-fuchsia-100 p-3">
<div class="flex items-center gap-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} {method.brand}
</div> </div>
<div class="text-sm"> <div class="text-sm">
@@ -497,7 +497,7 @@
}} }}
> >
<div class="flex items-center gap-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} {method.brand}
</div> </div>
<div class="text-sm"> <div class="text-sm">
frontend/src/lib/components/ui/calendar/calendar-day.svelte
+2
View File
@@ -23,6 +23,8 @@
"data-[disabled]:text-muted-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", "data-[disabled]:text-muted-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
// Unavailable // Unavailable
"data-[unavailable]:text-muted-foreground data-[unavailable]:line-through", "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 // hover
"dark:hover:text-accent-foreground", "dark:hover:text-accent-foreground",
// focus // focus
frontend/src/lib/components/ui/dialog/dialog-content.svelte
+1 -1
View File
@@ -33,7 +33,7 @@
{@render children?.()} {@render children?.()}
{#if !hideClose} {#if !hideClose}
<DialogPrimitive.Close <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 /> <XIcon />
<span class="sr-only">Close</span> <span class="sr-only">Close</span>