Merge pull request #1331 from tidalcycles/BRANCH_NAME

Add Icon to import sample button

Author: daslyfe

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

@@ -20,25 +20,42 @@ export default function ImportSoundsButton({ onComplete }) {
   });
 
   return (
-    <label
-      style={{ alignItems: 'center' }}
-      className="flex bg-background ml-2 pl-2 pr-2 max-w-[210px] rounded-md hover:opacity-50 whitespace-nowrap cursor-pointer"
-    >
-      <input
-        disabled={isUploading}
-        ref={fileUploadRef}
-        id="audio_file"
-        style={{ display: 'none' }}
-        type="file"
-        directory=""
-        webkitdirectory=""
-        multiple
-        accept="audio/*, .wav, .mp3, .m4a, .flac, .aac, .ogg"
-        onChange={() => {
-          onChange();
-        }}
-      />
-      {isUploading ? 'importing...' : 'import sounds folder'}
-    </label>
+    <div>
+      <label
+        style={{ alignItems: 'center', borderColor: 'red', border: 1 }}
+        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}
+          id="audio_file"
+          style={{ display: 'none' }}
+          type="file"
+          directory=""
+          webkitdirectory=""
+          multiple
+          accept="audio/*, .wav, .mp3, .m4a, .flac, .aac, .ogg"
+          onChange={() => {
+            onChange();
+          }}
+        />
+        {isUploading ? 'importing...' : 'import sounds folder'}
+      </label>
+    </div>
   );
 }