From b90d04e432c468975214c3fd13002688fd537b4a Mon Sep 17 00:00:00 2001
From: "[dyad]" <git@dyad.sh>
Date: Sun, 18 Jan 2026 12:19:07 +0100
Subject: [PATCH] [dyad] Updated image upload component design - wrote 1
 file(s)

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

diff --git a/src/components/image-converter.tsx b/src/components/image-converter.tsx
index d1a662f..c749e61 100644
--- a/src/components/image-converter.tsx
+++ b/src/components/image-converter.tsx
@@ -510,23 +510,30 @@ export function ImageConverter() {
       </div>
 
       <div className="lg:col-span-2 flex flex-col gap-8">
-        <div
-          className={cn(
-            "w-full aspect-video rounded-lg border-2 border-dashed flex items-center justify-center relative transition-colors p-1 cursor-pointer",
-            isDraggingOver ? "border-primary bg-accent" : "border-input"
-          )}
-          onDragOver={handleDragOver}
-          onDragLeave={handleDragLeave}
-          onDrop={handleDrop}
-          onClick={() => fileInputRef.current?.click()}
-        >
-          <div className="flex flex-col items-center justify-center text-center text-muted-foreground">
-            <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 />
-        </div>
+        <Card>
+          <CardContent className="pt-6">
+            <div className="space-y-4">
+              <h3 className="text-lg font-medium">Upload Images</h3>
+              <div
+                className={cn(
+                  "w-full h-48 rounded-lg border-2 border-dashed flex items-center justify-center relative transition-colors cursor-pointer hover:border-primary/60",
+                  isDraggingOver ? "border-primary bg-accent" : "border-input"
+                )}
+                onDragOver={handleDragOver}
+                onDragLeave={handleDragLeave}
+                onDrop={handleDrop}
+                onClick={() => fileInputRef.current?.click()}
+              >
+                <div className="flex flex-col items-center justify-center text-center text-muted-foreground">
+                  <Upload className="w-8 h-8 mb-2" />
+                  <p className="font-semibold">Click or drag and drop to upload</p>
+                  <p className="text-xs text-muted-foreground mt-1">PNG, JPG, WEBP supported</p>
+                </div>
+                <Input type="file" ref={fileInputRef} onChange={handleImageChange} className="hidden" accept="image/*" multiple />
+              </div>
+            </div>
+          </CardContent>
+        </Card>
 
         {hasImages && (
           <Card>