Pretty okay looking upload dialog

package.json

@@ -32,6 +32,8 @@
 		"vite": "^5.0.3"
 	},
 	"dependencies": {
+		"@fontsource/azeret-mono": "^5.1.0",
+		"@fontsource/lexend": "^5.1.1",
 		"@imagemagick/magick-wasm": "^0.0.31",
 		"lucide-svelte": "^0.456.0",
 		"svelte-adapter-bun": "^0.5.2",

src/app.css

@@ -2,12 +2,21 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 
+@import url(@fontsource/lexend/400.css);
+@import url(@fontsource/lexend/500.css);
+@import url(@fontsource/azeret-mono/600.css);
+
 :root {
+	--font-body: "Lexend", system-ui, -apple-system, BlinkMacSystemFont,
+		"Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
+		"Helvetica Neue", sans-serif;
+	--font-display: "Azeret Mono", var(--font-body);
 	--bg: hsl(0, 0%, 100%);
 	--fg: hsl(0, 0%, 10%);
-	--fg-muted: hsl(0, 0%, 40%);
+	--fg-muted: hsl(0, 0%, 50%);
+	--fg-muted-alt: hsl(0, 0%, 75%);
 }
 
 body {
-	@apply text-foreground bg-background;
+	@apply text-foreground bg-background font-body;
 }

src/lib/components/visual/Uploader.svelte

@@ -6,22 +6,44 @@
 	}
 
 	let fileInput = $state<HTMLInputElement>();
+	let dragOver = $state(false);
 
 	let { files = $bindable() }: Props = $props();
 
-	const upload = () => {
+	function upload() {
 		if (!fileInput) return;
 		fileInput.click();
-	};
+	}
 </script>
 
 <button
 	onclick={upload}
-	class="flex items-center justify-center cursor-pointer flex-col border-2 border-solid border-foreground rounded-xl px-4 py-2 w-full h-full"
+	ondragover={() => (dragOver = true)}
+	ondragleave={() => (dragOver = false)}
+	class="file-uploader"
+	class:_drag-over={dragOver}
 >
-	<Upload />
-	<h2>Drop or click to upload files</h2>
-	<p class="text-foreground-muted">the</p>
+	<div
+		class="size-16 rounded-full text-background bg-foreground flex items-center justify-center"
+	>
+		<Upload class="size-8" />
+	</div>
+	<h2 class="font-display text-2xl mt-6">Drop or click to upload files</h2>
+	<p class="text-foreground-muted mt-4">
+		All processing is done on your device. No file or size limit.
+	</p>
 </button>
 
 <input type="file" class="hidden" bind:files bind:this={fileInput} multiple />
+
+<style>
+	.file-uploader {
+		@apply w-full h-80 max-w-screen-lg flex items-center justify-center cursor-pointer
+			flex-col border-2 border-solid border-foreground-muted-alt rounded-2xl
+			hover:scale-95 hover:opacity-70 transition-all duration-150 ease-out;
+	}
+
+	.file-uploader._drag-over {
+		@apply scale-95 opacity-70;
+	}
+</style>

src/routes/+page.svelte

@@ -39,55 +39,8 @@
 	};
 </script>
 
-<div class="flex flex-col items-center">
-	<div class="max-w-screen-lg w-full">
-		<div class="h-80 justify-self-center mt-40">
-			<Uploader bind:files />
-		</div>
-		<div class="flex flex-col items-center">
-			{#each iterableFiles as file, i}
-				<div
-					class="flex items-center w-full max-w-screen-lg border-2 border-solid border-foreground rounded-xl px-4 py-2 mt-4"
-				>
-					<div class="flex items-center flex-grow">
-						{file.name}
-					</div>
-					<div class="flex gap-4 flex-shrink-0">
-						{#if downloadFns[i]}
-							<button
-								class="px-4 py-2 border-2 border-solid border-foreground rounded-xl"
-								onclick={downloadFns[i]}
-							>
-								Download
-							</button>
-						{/if}
-						<!-- <input
-							type="text"
-							class="border-2 border-solid border-foreground rounded-xl px-4 py-2 focus:!outline-none"
-							bind:value={conversionTypes[i]}
-							placeholder="jpeg"
-						/> -->
-						<select
-							class="border-2 border-solid border-foreground rounded-xl px-4 py-2 focus:!outline-none"
-							bind:value={conversionTypes[i]}
-						>
-							{#each converters[0].supportedFormats as conversionType}
-								<option value={conversionType}
-									>{conversionType}</option
-								>
-							{/each}
-						</select>
-					</div>
-				</div>
-			{/each}
-			<button
-				class="mt-4 px-4 py-2 border-2 border-solid border-foreground rounded-xl"
-				onclick={convertAllFiles}
-			>
-				Convert
-			</button>
-		</div>
-	</div>
+<div class="w-full h-full flex items-center justify-center">
+	<Uploader bind:files />
 </div>
 
 <style>

tailwind.config.ts

@@ -9,6 +9,11 @@ export default {
 			background: "var(--bg)",
 			foreground: "var(--fg)",
 			"foreground-muted": "var(--fg-muted)",
+			"foreground-muted-alt": "var(--fg-muted-alt)",
+		},
+		fontFamily: {
+			display: "var(--font-display)",
+			body: "var(--font-body)",
 		},
 	},