Update frontend/src/components/ocr/UploadZone.jsx

frontend/src/components/ocr/UploadZone.jsx

@@ -115,30 +115,30 @@ export default function UploadZone({ onFileSelect, selectedFile, onClear }) {
             initial={{ opacity: 0, scale: 0.95 }}
             animate={{ opacity: 1, scale: 1 }}
             exit={{ opacity: 0, scale: 0.95 }}
-            className="relative bg-gradient-to-br from-indigo-50 to-violet-50 rounded-2xl p-6 border border-indigo-100"
+            className="relative bg-gradient-to-br from-indigo-50 to-violet-50 rounded-xl p-3 border border-indigo-100"
           >
-            <div className="flex items-center gap-4">
-              <div className="h-14 w-14 rounded-xl bg-white shadow-sm flex items-center justify-center">
-                <FileIcon className="h-7 w-7 text-indigo-600" />
+            <div className="flex items-center gap-3">
+              <div className="h-10 w-10 rounded-lg bg-white shadow-sm flex items-center justify-center flex-shrink-0">
+                <FileIcon className="h-5 w-5 text-indigo-600" />
               </div>
               <div className="flex-1 min-w-0">
-                <p className="font-semibold text-slate-800 truncate">{selectedFile.name}</p>
-                <p className="text-sm text-slate-500">
-                  {(selectedFile.size / 1024 / 1024).toFixed(2)} MB
-                </p>
+                <p className="font-medium text-slate-800 truncate text-sm">{selectedFile.name}</p>
+                <div className="flex items-center gap-2 text-xs text-slate-500">
+                  <span>{(selectedFile.size / 1024 / 1024).toFixed(2)} MB</span>
+                  <span className="text-indigo-500">•</span>
+                  <span className="text-indigo-600 flex items-center gap-1">
+                    <Sparkles className="h-3 w-3" />
+                    Ready for extraction
+                  </span>
+                </div>
               </div>
               <button
                 onClick={onClear}
-                className="h-9 w-9 rounded-xl bg-white hover:bg-red-50 border border-slate-200 hover:border-red-200 flex items-center justify-center text-slate-400 hover:text-red-500 transition-colors"
+                className="h-8 w-8 rounded-lg bg-white hover:bg-red-50 border border-slate-200 hover:border-red-200 flex items-center justify-center text-slate-400 hover:text-red-500 transition-colors"
               >
                 <X className="h-4 w-4" />
               </button>
             </div>
-
-            <div className="mt-4 flex items-center gap-2 text-sm">
-              <Sparkles className="h-4 w-4 text-indigo-500" />
-              <span className="text-indigo-600 font-medium">Ready for AI extraction</span>
-            </div>
           </motion.div>
         )}
       </AnimatePresence>