use card

src/lib/components/common/Container/Container.svelte

@@ -1,27 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import { fade as fadeTransition } from 'svelte/transition';
-	import type { SvelteHTMLElements } from 'svelte/elements';
-	import { twMerge } from 'tailwind-merge';
-
-	type Props = {
-		children?: Snippet;
-		fade?: boolean;
-	} & SvelteHTMLElements['div'];
-
-	let { children, fade = false, ...props }: Props = $props();
-</script>
-
-<div
-	transition:fadeTransition={{ duration: fade ? 200 : 0 }}
-	{...props}
-	class={twMerge('container-body', props.class)}
->
-	{@render children?.()}
-</div>
-
-<style>
-	.container-body {
-		@apply container h-fit w-fit max-w-lg animate-fade rounded-lg bg-base-200 p-8 transition-transform;
-	}
-</style>

src/lib/components/common/Container/index.ts

@@ -1,3 +0,0 @@
-import Container from './Container.svelte';
-
-export default Container;

src/routes/login/+page.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import Button from '$lib/components/common/Button';
-	import Container from '$lib/components/common/Container';
 	import TextInput from '$lib/components/common/TextInput';
 	import Tabs from '$lib/components/Navigation/Tabs';
 	import { fade } from 'svelte/transition';
@@ -21,21 +20,27 @@
 {/snippet}
 
 {#snippet form(variant: 'login' | 'register')}
-	<form class="flex w-full flex-col items-center gap-6" method="POST" action={`?/${variant}`}>
+	<form method="POST" action={`?/${variant}`}>
+		<div class="card-body gap-4">
 			<TextInput start={userIcon} placeholder="Email" name="email" type="email" />
 			<TextInput start={passwordIcon} placeholder="Password" name="password" type="password" />
 			{#if variant === 'register'}
 				<TextInput start={nameIcon} placeholder="Name" name="name" fade />
 			{/if}
+		</div>
+		<div class="card-actions px-4">
 			<Button block type="submit" label="Submit" outline />
+		</div>
 	</form>
 {/snippet}
 
 <div class="page" transition:fade>
-	<Container>
+	<div class="card bg-base-200 py-4 shadow-xl">
+		<div class="card-title">
 			<Tabs variant="bordered" bind:selected={tab} tabs={['Login', 'Register']} />
+		</div>
 		{@render form(tab === 0 ? 'login' : 'register')}
-	</Container>
+	</div>
 </div>
 
 <style>