From 442bf66d5531eeb9276ae136649cff95b02de9a5 Mon Sep 17 00:00:00 2001
From: bflatastic <bombayapirat@gmail.com>
Date: Fri, 3 Apr 2026 22:14:45 +0700
Subject: [PATCH] file upload icon update and focus outline removal on upload
 field when modal opens

---
 .../components/reusable/UploadModal3D/UploadFiles3D.tsx  | 1 +
 .../reusable/UploadModalSplat/UploadFilesSplat.tsx       | 1 +
 .../file-uploader/src/lib/drag-and-drop-zone.tsx         | 9 ++++++---
 .../components/file-uploader/src/lib/file-uploader.tsx   | 6 +++++-
 4 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/frontend/apps/artcraft/app/src/components/reusable/UploadModal3D/UploadFiles3D.tsx b/frontend/apps/artcraft/app/src/components/reusable/UploadModal3D/UploadFiles3D.tsx
index b58112ceca..793e215c90 100644
--- a/frontend/apps/artcraft/app/src/components/reusable/UploadModal3D/UploadFiles3D.tsx
+++ b/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>}
diff --git a/frontend/apps/artcraft/app/src/components/reusable/UploadModalSplat/UploadFilesSplat.tsx b/frontend/apps/artcraft/app/src/components/reusable/UploadModalSplat/UploadFilesSplat.tsx
index 488393bb6e..ee2d797bd3 100644
--- a/frontend/apps/artcraft/app/src/components/reusable/UploadModalSplat/UploadFilesSplat.tsx
+++ b/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 && (
diff --git a/frontend/libs/components/file-uploader/src/lib/drag-and-drop-zone.tsx b/frontend/libs/components/file-uploader/src/lib/drag-and-drop-zone.tsx
index 2ad324f56a..61a17b6418 100644
--- a/frontend/libs/components/file-uploader/src/lib/drag-and-drop-zone.tsx
+++ b/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">
diff --git a/frontend/libs/components/file-uploader/src/lib/file-uploader.tsx b/frontend/libs/components/file-uploader/src/lib/file-uploader.tsx
index 4abcf162a5..6ef4330836 100644
--- a/frontend/libs/components/file-uploader/src/lib/file-uploader.tsx
+++ b/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>
 );