Some more work on the uploader

src/app.css

@@ -2,7 +2,12 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 
-html,
+:root {
-body {
+	--bg: hsl(0, 0%, 100%);
-	height: 100%;
+	--fg: hsl(0, 0%, 10%);
+	--fg-muted: hsl(0, 0%, 40%);
+}
+
+body {
+	@apply text-foreground bg-background;
 }

src/lib/components/visual/Uploader.svelte

@@ -8,12 +8,12 @@
 	let { files = $bindable() }: Props = $props();
 </script>
 
-<div class="flex items-center justify-center h-full">
+<div
-	<div
+	class="flex items-center justify-center flex-col border-2 border-solid border-foreground rounded-xl w-full max-w-screen-lg h-80"
-		class="flex items-center justify-center border-2 border-solid border-black w-full max-w-screen-lg h-80"
+>
-	>
 	<Upload />
-	</div>
+	<h2>Drop or click to upload files</h2>
+	<p class="text-foregroundMuted">the</p>
 </div>
 
 <input type="file" class="hidden" bind:files />

src/routes/+page.svelte

@@ -4,4 +4,13 @@
 	let files = $state<FileList>();
 </script>
 
-<Uploader bind:files />
+<div class="flex items-center justify-center h-full">
+	<Uploader bind:files />
+</div>
+
+<style>
+	/* for this page specifically */
+	:global(html, body) {
+		height: 100%;
+	}
+</style>

tailwind.config.ts

@@ -5,6 +5,11 @@ export default {
 
 	theme: {
 		extend: {},
+		colors: {
+			background: "var(--bg)",
+			foreground: "var(--fg)",
+			foregroundMuted: "var(--fg-muted)",
+		},
 	},
 
 	plugins: [],