@@ -10,7 +10,6 @@ import {
1010 Divider ,
1111 Flex ,
1212 GridItem ,
13- Icon ,
1413 Input ,
1514 Progress ,
1615 SimpleGrid ,
@@ -22,10 +21,9 @@ import { PINNED_FILES_QUERY_KEY_ROOT } from "components/storage/your-files";
2221import { useErrorHandler } from "contexts/error-handler" ;
2322import { useTrack } from "hooks/analytics/useTrack" ;
2423import { replaceIpfsUrl } from "lib/sdk" ;
24+ import { ExternalLinkIcon , Trash2Icon , UploadIcon } from "lucide-react" ;
2525import { type Dispatch , type SetStateAction , useMemo , useState } from "react" ;
2626import { useDropzone } from "react-dropzone" ;
27- import { BsFillCloudUploadFill } from "react-icons/bs" ;
28- import { FiExternalLink , FiTrash2 , FiUploadCloud } from "react-icons/fi" ;
2927import { toast } from "sonner" ;
3028import { MediaRenderer } from "thirdweb/react" ;
3129import { useActiveAccount } from "thirdweb/react" ;
@@ -92,7 +90,7 @@ export const IpfsUploadDropzone: React.FC = () => {
9290 ) : (
9391 < div
9492 className = { cn (
95- "flex items-center justify-center rounded-xl border-2 border-border border-solid bg-transparent hover:border-blue-600 dark:border-blue-400" ,
93+ "flex h-full items-center justify-center rounded-xl border-2 border-border border-solid bg-transparent hover:border-blue-600 dark:border-blue-400" ,
9694 address ? "cursor-pointer" : "cursor-default" ,
9795 ) }
9896 { ...getRootProps ( ) }
@@ -101,29 +99,13 @@ export const IpfsUploadDropzone: React.FC = () => {
10199
102100 {
103101 < Flex direction = "column" gap = { 2 } p = { 6 } align = "center" >
102+ < UploadIcon className = "mb-2 size-8 text-gray-600" />
104103 { isDragActive ? (
105- < >
106- < Icon
107- as = { BsFillCloudUploadFill }
108- boxSize = { 8 }
109- mb = { 2 }
110- color = "gray.600"
111- />
112- < Text size = "label.lg" > Drop the files here</ Text >
113- </ >
104+ < Text size = "label.lg" > Drop the files here</ Text >
114105 ) : (
115- < >
116- < Icon
117- as = { BsFillCloudUploadFill }
118- boxSize = { 8 }
119- mb = { 2 }
120- color = "gray.600"
121- />
122- < Text size = "label.lg" textAlign = "center" lineHeight = "150%" >
123- Drag and drop your file or folder here to upload it to
124- IPFS
125- </ Text >
126- </ >
106+ < Text size = "label.lg" textAlign = "center" lineHeight = "150%" >
107+ Drag and drop your file or folder here to upload it to IPFS
108+ </ Text >
127109 ) }
128110 </ Flex >
129111 }
@@ -260,7 +242,7 @@ const FileUpload: React.FC<FileUploadProps> = ({ files, updateFiles }) => {
260242 category = { TRACKING_CATEGORY }
261243 label = "open-in-gateway"
262244 aria-label = "Open in gateway"
263- icon = { < Icon as = { FiExternalLink } /> }
245+ icon = { < ExternalLinkIcon className = "size-4" /> }
264246 variant = "ghost"
265247 isExternal
266248 size = "sm"
@@ -285,7 +267,7 @@ const FileUpload: React.FC<FileUploadProps> = ({ files, updateFiles }) => {
285267 aria-label = "Remove File"
286268 category = { TRACKING_CATEGORY }
287269 label = "remove-file"
288- icon = { < Icon as = { FiTrash2 } /> }
270+ icon = { < Trash2Icon className = "size-4" /> }
289271 variant = "ghost"
290272 onClick = { ( e ) => {
291273 e . stopPropagation ( ) ;
@@ -465,7 +447,7 @@ const FileUpload: React.FC<FileUploadProps> = ({ files, updateFiles }) => {
465447 category = { TRACKING_CATEGORY }
466448 href = { mainIpfsUri }
467449 textDecor = "none!important"
468- rightIcon = { < Icon as = { FiExternalLink } /> }
450+ rightIcon = { < ExternalLinkIcon className = "size-4" /> }
469451 colorScheme = "green"
470452 isExternal
471453 onClick = { ( ) => {
@@ -483,7 +465,7 @@ const FileUpload: React.FC<FileUploadProps> = ({ files, updateFiles }) => {
483465 isLoading = { storageUpload . isPending }
484466 loadingText = "Uploading..."
485467 colorScheme = "green"
486- leftIcon = { < Icon as = { FiUploadCloud } /> }
468+ leftIcon = { < UploadIcon className = "size-4" /> }
487469 onClick = { ( ) => {
488470 setIpfsHashes ( [ ] ) ;
489471 trackEvent ( {
0 commit comments