update uploader status containers for new theme

Mintplex-Labs · Nov 19, 2024 · 6de29cb · 6de29cb
1 parent 727d802
commit 6de29cb
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 16 deletions.
diff --git a/...d/src/components/Modals/ManageWorkspace/Documents/UploadFile/FileUploadProgress/index.jsx b/...d/src/components/Modals/ManageWorkspace/Documents/UploadFile/FileUploadProgress/index.jsx
@@ -61,9 +61,9 @@ function FileUploadProgressComponent({
       }
 
       // Begin fadeout timer to clear uploader queue.
-      setTimeout(() => {
-        fadeOut(() => setTimeout(() => beginFadeOut(), 300));
-      }, 5000);
+      // setTimeout(() => {
+      //   fadeOut(() => setTimeout(() => beginFadeOut(), 300));
+      // }, 5000);
     }
     !!file && !rejected && uploadFile();
   }, []);
@@ -73,16 +73,21 @@ function FileUploadProgressComponent({
       <div
         className={`${
           isFadingOut ? "file-upload-fadeout" : "file-upload"
-        } h-14 px-2 py-2 flex items-center gap-x-4 rounded-lg bg-white/5 border border-white/40`}
+        } h-14 px-2 py-2 flex items-center gap-x-4 rounded-lg bg-error/40 light:bg-error/30 light:border-solid light:border-error/40 border border-transparent`}
       >
         <div className="w-6 h-6 flex-shrink-0">
-          <XCircle className="w-6 h-6 stroke-white bg-red-500 rounded-full p-1 w-full h-full" />
+          <XCircle
+            color="var(--theme-bg-primary)"
+            className="w-6 h-6 stroke-white bg-error rounded-full p-1 w-full h-full"
+          />
         </div>
         <div className="flex flex-col">
-          <p className="text-white text-xs font-medium">
+          <p className="text-white light:text-red-600 text-xs font-semibold">
             {truncate(file.name, 30)}
           </p>
-          <p className="text-red-400 text-xs font-medium">{reason}</p>
+          <p className="text-red-100 light:text-red-600 text-xs font-medium">
+            {reason || "this file failed to upload"}
+          </p>
         </div>
       </div>
     );
@@ -93,16 +98,21 @@ function FileUploadProgressComponent({
       <div
         className={`${
           isFadingOut ? "file-upload-fadeout" : "file-upload"
-        } h-14 px-2 py-2 flex items-center gap-x-4 rounded-lg bg-white/5 border border-white/40 overflow-y-auto`}
+        } h-14 px-2 py-2 flex items-center gap-x-4 rounded-lg bg-error/40 light:bg-error/30 light:border-solid light:border-error/40 border border-transparent`}
       >
         <div className="w-6 h-6 flex-shrink-0">
-          <XCircle className="w-6 h-6 stroke-white bg-red-500 rounded-full p-1 w-full h-full" />
+          <XCircle
+            color="var(--theme-bg-primary)"
+            className="w-6 h-6 stroke-white bg-error rounded-full p-1 w-full h-full"
+          />
         </div>
         <div className="flex flex-col">
-          <p className="text-white text-xs font-medium">
+          <p className="text-white light:text-red-600 text-xs font-semibold">
             {truncate(file.name, 30)}
           </p>
-          <p className="text-red-400 text-xs font-medium">{error}</p>
+          <p className="text-red-100 light:text-red-600 text-xs font-medium">
+            {reason || "this file failed to upload"}
+          </p>
         </div>
       </div>
     );
@@ -112,22 +122,25 @@ function FileUploadProgressComponent({
     <div
       className={`${
         isFadingOut ? "file-upload-fadeout" : "file-upload"
-      } h-14 px-2 py-2 flex items-center gap-x-4 rounded-lg bg-white border border-white/40 shadow-md`}
+      } h-14 px-2 py-2 flex items-center gap-x-4 rounded-lg bg-zinc-800 light:border-solid light:border-theme-modal-border light:bg-theme-bg-sidebar border border-white/20 shadow-md`}
     >
       <div className="w-6 h-6 flex-shrink-0">
         {status !== "complete" ? (
           <div className="flex items-center justify-center">
             <PreLoader size="6" />
           </div>
         ) : (
-          <CheckCircle className="w-6 h-6 stroke-white bg-green-500 rounded-full p-1 w-full h-full" />
+          <CheckCircle
+            color="var(--theme-bg-primary)"
+            className="w-6 h-6 stroke-white bg-green-500 rounded-full p-1 w-full h-full"
+          />
         )}
       </div>
       <div className="flex flex-col">
-        <p className="text-white text-xs font-medium">
+        <p className="text-white light:text-theme-text-primary text-xs font-medium">
           {truncate(file.name, 30)}
         </p>
-        <p className="text-white/60 text-xs font-medium">
+        <p className="text-white/80 light:text-theme-text-secondary text-xs font-medium">
           {humanFileSize(file.size)} | {milliToHms(timerMs)}
         </p>
       </div>

diff --git a/frontend/src/components/Modals/ManageWorkspace/Documents/UploadFile/index.jsx b/frontend/src/components/Modals/ManageWorkspace/Documents/UploadFile/index.jsx
@@ -142,7 +142,7 @@ export default function UploadFile({
         <button
           disabled={fetchingUrl}
           type="submit"
-          className="disabled:bg-white/20 disabled:text-slate-300 disabled:border-slate-400 disabled:cursor-wait bg bg-transparent hover:bg-slate-200 hover:text-slate-800 w-auto border border-white text-sm text-white p-2.5 rounded-lg"
+          className="disabled:bg-white/20 disabled:text-slate-300 disabled:border-slate-400 disabled:cursor-wait bg bg-transparent hover:bg-slate-200 hover:text-slate-800 w-auto border border-white light:border-theme-modal-border text-sm text-white p-2.5 rounded-lg"
         >
           {fetchingUrl ? "Fetching..." : "Fetch website"}
         </button>