feat: improve buttons styling

frontend/src/lib/components/ui/button/button.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
 	import { cn, type WithElementRef } from '$lib/utils/style.js';
 	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
-	import { type VariantProps, tv } from 'tailwind-variants';
+	import { tv, type VariantProps } from 'tailwind-variants';
 
 	export const buttonVariants = tv({
 		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
@@ -17,10 +17,10 @@
 				link: 'text-primary underline-offset-4 hover:underline'
 			},
 			size: {
-				default: 'h-9 px-4 py-2 has-[>svg]:px-3',
-				sm: 'h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5',
-				lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
-				icon: 'size-9'
+				default: 'h-10 px-4 py-2',
+				sm: 'h-9 rounded-md px-3',
+				lg: 'h-11 rounded-md px-8',
+				icon: 'h-10 w-10'
 			}
 		},
 		defaultVariants: {
@@ -69,7 +69,7 @@
 		{...restProps}
 	>
 		{#if isLoading}
-			<LoaderCircle class="mr-2 size-4 animate-spin" />
+			<LoaderCircle class="size-4 animate-spin" />
 		{/if}
 		{@render children?.()}
 	</a>
@@ -79,11 +79,11 @@
 		data-slot="button"
 		class={cn(buttonVariants({ variant, size }), className)}
 		{type}
-		{disabled}
+		disabled={disabled || isLoading}
 		{...restProps}
 	>
 		{#if isLoading}
-			<LoaderCircle class="mr-2 size-4 animate-spin" />
+			<LoaderCircle class="size-4 animate-spin" />
 		{/if}
 		{@render children?.()}
 	</button>