From afedf1ef9858d011a279683a1a0c039b9533825e Mon Sep 17 00:00:00 2001
From: "[dyad]" <git@dyad.sh>
Date: Sun, 18 Jan 2026 11:02:38 +0100
Subject: [PATCH] [dyad] Update upload area design - wrote 1 file(s)

---
 src/components/image-converter.tsx | 24 ++++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/components/image-converter.tsx b/src/components/image-converter.tsx
index 0dba146..05fd900 100644
--- a/src/components/image-converter.tsx
+++ b/src/components/image-converter.tsx
@@ -20,7 +20,7 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { ScrollArea } from "@/components/ui/scroll-area";
-import { Upload, Download, Image as ImageIcon, X, Trash2 } from "lucide-react";
+import { Upload, Download, X, Trash2 } from "lucide-react";
 import { toast } from "sonner";
 import { cn } from "@/lib/utils";
 
@@ -242,13 +242,25 @@ export function ImageConverter() {
       </div>
 
       <div className="lg:col-span-2 flex flex-col gap-8">
-        <div className={cn("w-full aspect-video rounded-md border flex items-center justify-center bg-gray-100 dark:bg-gray-800 relative transition-colors", isDraggingOver && "border-primary bg-primary/10")} onDragOver={handleDragOver} onDragLeave={handleDragLeave} onDrop={handleDrop}>
+        <div
+          className={cn(
+            "w-full aspect-video rounded-lg border-2 border-dashed flex items-center justify-center relative transition-colors p-1",
+            isDraggingOver ? "border-primary bg-accent" : "border-input"
+          )}
+          onDragOver={handleDragOver}
+          onDragLeave={handleDragLeave}
+          onDrop={handleDrop}
+        >
           {isImageSelected && previewUrls[selectedImageIndex] ? (
-            <img src={previewUrls[selectedImageIndex]} alt="Selected image preview" className="max-w-full max-h-full object-contain" />
+            <img src={previewUrls[selectedImageIndex]} alt="Selected image preview" className="max-w-full max-h-full object-contain rounded-md" />
           ) : (
-            <div className="w-full h-full border-2 border-dashed rounded-md flex flex-col items-center justify-center text-gray-500 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50" onClick={() => fileInputRef.current?.click()}>
-              <ImageIcon className="w-12 h-12 mb-2" />
-              <span>Click or drag & drop images here</span>
+            <div
+              className="w-full h-full flex flex-col items-center justify-center text-center cursor-pointer text-muted-foreground hover:text-primary transition-colors"
+              onClick={() => fileInputRef.current?.click()}
+            >
+              <Upload className="w-10 h-10 mb-4" />
+              <p className="text-lg font-semibold">Click to upload or drag and drop</p>
+              <p className="text-sm">Select files from your computer</p>
             </div>
           )}
           <Input type="file" ref={fileInputRef} onChange={handleImageChange} className="hidden" accept="image/*" multiple />