Merge pull request #20 from filecoin-project/UXIT-3449/implement-file-picker

[UXIT-3449] Implement Native File Picker

Author: CharlyMartin

package-lock.json

@@ -21,7 +21,6 @@
     "pretty-bytes": "^7.1.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
-    "react-dropzone": "^14.3.8",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.1.14"
   },

package.json

@@ -21,7 +21,7 @@ export function UploadInstructions({ maxSize, ...rest }: UploadInstructionsProps
 
         <div className="space-y-1 text-center">
           <p>
-            <span className="font-medium text-[#10B4FF]">Click to upload</span> or drag and drop
+            <span className="font-medium text-brand-500">Click to upload</span> or drag and drop
           </p>
           <p className="text-sm">(Up to {prettyBytes(maxSize)})</p>
         </div>

src/components/file-picker/upload-instructions.tsx

@@ -1,10 +1,3 @@
-.upload-section {
-  margin-top: 2rem;
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-}
-
 .upload-progress-section {
   margin-top: 2rem;
 }

src/components/layout/content.css

@@ -3,21 +3,14 @@ import { useFilecoinUpload } from '../../hooks/use-filecoin-upload.ts'
 import DragNDrop from '../upload/drag-n-drop.tsx'
 import UploadProgress from '../upload/upload-progress.tsx'
 import './content.css'
-import PageTitle from '../ui/page-title.tsx'
+import { PageTitle } from '../ui/page-title.tsx'
 
 export default function Content() {
   const [uploadedFile, setUploadedFile] = useState<{ file: File; cid: string } | null>(null)
   const [isExpanded, setIsExpanded] = useState(true)
   const { uploadState, uploadFile, resetUpload } = useFilecoinUpload()
 
-  const handleUpload = (filesToUpload: File[]) => {
-    if (filesToUpload.length === 0) {
-      alert('Please select files to upload')
-      return
-    }
-
-    // For demo purposes, upload the first file
-    const file = filesToUpload[0]
+  const handleUpload = (file: File) => {
     // Set uploadedFile immediately to switch to progress view
     setUploadedFile({ file, cid: '' })
 
@@ -42,7 +35,7 @@ export default function Content() {
   }
 
   return (
-    <div className="content">
+    <div className="space-y-10">
       <PageTitle />
 
       {uploadedFile ? (
@@ -84,7 +77,8 @@ export default function Content() {
           )}
         </div>
       ) : (
-        <div className="upload-section">
+        <div className="space-y-6">
+          <h2 className="text-xl font-medium text-white">Upload a file</h2>
           <DragNDrop isUploading={uploadState.isUploading} onUpload={handleUpload} />
         </div>
       )}

src/components/layout/content.tsx

@@ -6,8 +6,9 @@ function BadgeNumber({ number }: BadgeNumberProps) {
   if (number <= 0) {
     console.error('BadgeNumber: number must be positive, received:', number)
   }
+
   return (
-    <span className="text-brand-50 bg-brand-200 border-brand-100 flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full border">
+    <span className="text-brand-500 bg-brand-950 border-brand-900 flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full border">
       {number}
     </span>
   )