From 06dc4370332d32e3a67acb42b94f8aa5c003e917 Mon Sep 17 00:00:00 2001 From: trev Date: Tue, 13 May 2025 10:07:35 -0400 Subject: [PATCH] fix: better mobile support --- client/src/app.html | 2 +- client/src/lib/ui/avatar/avatar-fallback.svelte | 2 +- client/src/lib/ui/avatar/avatar.svelte | 3 ++- client/src/lib/ui/button/button.svelte | 4 ++-- client/src/lib/ui/pagination/pagination-link.svelte | 2 +- client/src/lib/ui/range-calendar/range-calendar-day.svelte | 2 +- client/src/lib/ui/sonner/sonner.svelte | 2 +- client/src/routes/(app)/+layout.svelte | 7 ++++--- client/src/routes/(app)/items/+page.svelte | 2 +- client/src/routes/auth/+page.svelte | 2 +- 10 files changed, 15 insertions(+), 13 deletions(-) diff --git a/client/src/app.html b/client/src/app.html index 6d54097..7495c85 100644 --- a/client/src/app.html +++ b/client/src/app.html @@ -8,7 +8,7 @@ TrevStack %sveltekit.head% - +
%sveltekit.body%
diff --git a/client/src/lib/ui/avatar/avatar-fallback.svelte b/client/src/lib/ui/avatar/avatar-fallback.svelte index ad1e73c..ffa30d1 100644 --- a/client/src/lib/ui/avatar/avatar-fallback.svelte +++ b/client/src/lib/ui/avatar/avatar-fallback.svelte @@ -13,7 +13,7 @@ bind:ref data-slot="avatar-fallback" class={cn( - 'bg-surface outline-surface-2 flex size-full items-center justify-center rounded-full text-sm transition-all select-none', + 'bg-surface flex size-full items-center justify-center rounded-full text-sm transition-all select-none', className )} {...restProps} diff --git a/client/src/lib/ui/avatar/avatar.svelte b/client/src/lib/ui/avatar/avatar.svelte index e92090c..52d3731 100644 --- a/client/src/lib/ui/avatar/avatar.svelte +++ b/client/src/lib/ui/avatar/avatar.svelte @@ -13,7 +13,8 @@ bind:ref data-slot="avatar" class={cn( - 'outline-surface-1 relative flex size-9 shrink-0 overflow-hidden rounded-full outline outline-offset-2', + 'outline-surface-1 relative flex size-9 shrink-0 overflow-hidden rounded-full shadow-xs outline outline-offset-2', + className )} {...restProps} diff --git a/client/src/lib/ui/button/button.svelte b/client/src/lib/ui/button/button.svelte index 1a8aa03..74a247b 100644 --- a/client/src/lib/ui/button/button.svelte +++ b/client/src/lib/ui/button/button.svelte @@ -7,7 +7,7 @@ export const buttonVariants = tv({ base: cn( - 'inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap shadow-xs transition-all', + 'inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all', // Focus 'focus-visible:outline-accent focus-visible:outline-2 focus-visible:outline-offset-2', @@ -24,7 +24,7 @@ red: 'text-crust bg-red hover:bg-red/90 shadow-xs', outline: 'text-text border-surface-1 hover:bg-surface border bg-transparent shadow-xs', input: 'text-text border-surface-1 hover:border-overlay border bg-transparent shadow-xs', - ghost: 'text-text hover:bg-surface shadow-xs' + ghost: 'text-text hover:bg-surface' }, size: { default: 'h-9 px-4 py-2 has-[>svg]:px-3', diff --git a/client/src/lib/ui/pagination/pagination-link.svelte b/client/src/lib/ui/pagination/pagination-link.svelte index 4b7d6ed..f8040ce 100644 --- a/client/src/lib/ui/pagination/pagination-link.svelte +++ b/client/src/lib/ui/pagination/pagination-link.svelte @@ -33,7 +33,7 @@ size }), 'text-text', - isActive && 'bg-surface-1', + isActive && 'bg-surface', className )} children={children || Fallback} diff --git a/client/src/lib/ui/range-calendar/range-calendar-day.svelte b/client/src/lib/ui/range-calendar/range-calendar-day.svelte index 9b117b3..579b714 100644 --- a/client/src/lib/ui/range-calendar/range-calendar-day.svelte +++ b/client/src/lib/ui/range-calendar/range-calendar-day.svelte @@ -17,7 +17,7 @@ class={cn( buttonVariants({ variant: 'ghost' }), 'size-9 p-0 font-normal', - '[&[data-today]:not([data-selected])]:bg-blue [&[data-today]:not([data-selected])]:text-crust [&[data-today]:not([data-selected])]:rounded-md', + '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-crust [&[data-today]:not([data-selected])]:rounded-md', // Selected 'data-[selected]:bg-surface data-[selected]:hover:bg-surface-1 data-[selected]:rounded-none data-[selected]:opacity-100', // Selection Start diff --git a/client/src/lib/ui/sonner/sonner.svelte b/client/src/lib/ui/sonner/sonner.svelte index bd8bf9c..ef63fc0 100644 --- a/client/src/lib/ui/sonner/sonner.svelte +++ b/client/src/lib/ui/sonner/sonner.svelte @@ -12,7 +12,7 @@ 'bg-based text-sm flex gap-2 px-4 border border-surface-1 p-2 rounded-md items-center text-text w-full min-h-12', title: 'text-text', description: 'text-subtext text-xs', - actionButton: 'bg-blue', + actionButton: 'bg-accent', cancelButton: 'bg-red', closeButton: 'bg-green' } diff --git a/client/src/routes/(app)/+layout.svelte b/client/src/routes/(app)/+layout.svelte index 4b81652..27ec9af 100644 --- a/client/src/routes/(app)/+layout.svelte +++ b/client/src/routes/(app)/+layout.svelte @@ -47,9 +47,9 @@ } -
+
@@ -58,7 +58,7 @@ -