wip pt4

components/upload-component.tsx

@@ -458,11 +458,17 @@ const UploadComponent = () => {
   }
 
   return (
-    <div className="w-full max-w-2xl mx-auto">
+    <div className="w-full mx-auto">
       {showUploadForm ? (
+        <Card className="w-full">
+          <CardHeader>
+            <CardTitle>Upload Image</CardTitle>
+            <CardDescription>Select an image to upload to {serverChoice}</CardDescription>
+          </CardHeader>
+          <CardContent>
             <form className="space-y-4" onSubmit={onSubmit}>
               <div className="grid w-full items-center gap-1.5">
-            <Label htmlFor="file">Upload Image</Label>
+                <Label htmlFor="file">Select File</Label>
                 <Input id="file" name="file" type="file" accept="image/*" onChange={handleFileChange} />
               </div>
 
@@ -480,7 +486,11 @@ const UploadComponent = () => {
 
               {previewUrl && (
                 <div className="mt-4 rounded-md overflow-hidden">
-              <img src={previewUrl || "/placeholder.svg"} alt="Preview" className="w-full max-h-80 object-contain" />
+                  <img
+                    src={previewUrl || "/placeholder.svg"}
+                    alt="Preview"
+                    className="w-full max-h-80 object-contain"
+                  />
                 </div>
               )}
 
@@ -494,13 +504,17 @@ const UploadComponent = () => {
                 </Button>
               )}
             </form>
+          </CardContent>
+        </Card>
       ) : uploadResponse ? (
         <UploadResponseView data={uploadResponse} onReset={resetUpload} />
       ) : (
-        <div className="flex flex-col items-center justify-center p-8">
+        <Card className="w-full">
+          <CardContent className="flex flex-col items-center justify-center p-8">
             <Spinner />
             <p className="mt-4">Processing upload...</p>
-        </div>
+          </CardContent>
+        </Card>
       )}
     </div>
   )