file upload icon update and focus outline removal on upload field when modal opens

frontend/apps/artcraft/app/src/components/reusable/UploadModal3D/UploadFiles3D.tsx

@@ -350,6 +350,7 @@ export const UploadFiles3D = ({
         files={fileEntries.map((e) => e.file)}
         handleChange={handleFilesChange}
         multiple={true}
+        fileIcon={faCube}
       />
 
       {selectionError && <h6 className="z-10 text-red">{selectionError}</h6>}

frontend/apps/artcraft/app/src/components/reusable/UploadModalSplat/UploadFilesSplat.tsx

@@ -335,6 +335,7 @@ export const UploadFilesSplat = ({
         files={fileEntries.map((e) => e.file)}
         handleChange={handleFilesChange}
         multiple={true}
+        fileIcon={faCube}
       />
 
       {selectionError && (

frontend/libs/components/file-uploader/src/lib/drag-and-drop-zone.tsx

@@ -1,12 +1,15 @@
-import { faFileArrowUp, faFileAudio } from "@fortawesome/pro-solid-svg-icons";
+import { faFileArrowUp, faFileImage } from "@fortawesome/pro-solid-svg-icons";
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 export const DragAndDropZone = ({
   files,
   fileTypes,
+  fileIcon = faFileImage,
 }: {
   files: File[];
   fileTypes: string[];
+  fileIcon?: IconDefinition;
 }) => {
   if (files.length === 0) {
     return (
@@ -35,7 +38,7 @@ export const DragAndDropZone = ({
 
     return (
       <div className="flex cursor-pointer items-center justify-between gap-3.5 rounded-lg border border-dashed border-[#363636] bg-brand-secondary p-3">
-        <FontAwesomeIcon icon={faFileAudio} className="text-4xl" />
+        <FontAwesomeIcon icon={fileIcon} className="text-4xl" />
         <div className="flex grow flex-col gap-0">
           <p className="font-medium">
             {file.name.slice(0, file.name.lastIndexOf("."))}
@@ -53,7 +56,7 @@ export const DragAndDropZone = ({
 
   return (
     <div className="flex cursor-pointer items-center justify-between gap-3.5 rounded-lg border border-dashed border-[#363636] bg-brand-secondary p-3">
-      <FontAwesomeIcon icon={faFileAudio} className="text-4xl" />
+      <FontAwesomeIcon icon={fileIcon} className="text-4xl" />
       <div className="flex grow flex-col gap-0">
         <p className="font-medium">{files.length} files selected</p>
         <p className="flex items-center gap-2 text-sm font-normal">

frontend/libs/components/file-uploader/src/lib/file-uploader.tsx

@@ -1,6 +1,7 @@
 import { FileUploader as DragDropFileUploader } from "react-drag-drop-files";
 // Usage refer to https://github.com/KarimMokhtar/react-drag-drop-files
 
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
 import { DragAndDropZone } from "./drag-and-drop-zone";
 
 export const FileUploader = ({
@@ -8,11 +9,13 @@ export const FileUploader = ({
   fileTypes,
   handleChange,
   multiple = false,
+  fileIcon,
 }: {
   files: File[];
   handleChange: (files: File[]) => void;
   fileTypes: string[];
   multiple?: boolean;
+  fileIcon?: IconDefinition;
 }) => (
   <DragDropFileUploader
     handleChange={(result: File | File[]) => {
@@ -30,7 +33,8 @@ export const FileUploader = ({
     maxSize={50}
     types={fileTypes}
     multiple={multiple}
+    classes="!outline-none"
   >
-    <DragAndDropZone files={files} fileTypes={fileTypes} />
+    <DragAndDropZone files={files} fileTypes={fileTypes} fileIcon={fileIcon} />
   </DragDropFileUploader>
 );