button size and icon

website/src/repl/components/panel/ImportSoundsButton.jsx

@@ -20,10 +20,26 @@ export default function ImportSoundsButton({ onComplete }) {
   });
 
   return (
+    <div>
       <label
-      style={{ alignItems: 'center' }}
+        style={{ alignItems: 'center', borderColor: 'red', border: 1 }}
-      className="flex bg-background ml-2 pl-2 pr-2 max-w-[210px] rounded-md hover:opacity-50 whitespace-nowrap cursor-pointer"
+        className="flex bg-background  p-4  w-fit rounded-xl hover:opacity-50 whitespace-nowrap cursor-pointer"
       >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth={1.5}
+          stroke="currentColor"
+          className="size-6 mr-2"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M7.5 7.5h-.75A2.25 2.25 0 0 0 4.5 9.75v7.5a2.25 2.25 0 0 0 2.25 2.25h7.5a2.25 2.25 0 0 0 2.25-2.25v-7.5a2.25 2.25 0 0 0-2.25-2.25h-.75m0-3-3-3m0 0-3 3m3-3v11.25m6-2.25h.75a2.25 2.25 0 0 1 2.25 2.25v7.5a2.25 2.25 0 0 1-2.25 2.25h-7.5a2.25 2.25 0 0 1-2.25-2.25v-.75"
+          />
+        </svg>
+
         <input
           disabled={isUploading}
           ref={fileUploadRef}
@@ -40,5 +56,6 @@ export default function ImportSoundsButton({ onComplete }) {
         />
         {isUploading ? 'importing...' : 'import sounds folder'}
       </label>
+    </div>
   );
 }