From 6de29cb241e026a4c866f350128069b981bb518f Mon Sep 17 00:00:00 2001
From: timothycarambat <rambat1010@gmail.com>
Date: Tue, 19 Nov 2024 09:56:06 -0800
Subject: [PATCH] update uploader status containers for new theme
---
.../UploadFile/FileUploadProgress/index.jsx | 43 ++++++++++++-------
.../Documents/UploadFile/index.jsx | 2 +-
2 files changed, 29 insertions(+), 16 deletions(-)
diff --git a/frontend/src/components/Modals/ManageWorkspace/Documents/UploadFile/FileUploadProgress/index.jsx b/frontend/src/components/Modals/ManageWorkspace/Documents/UploadFile/FileUploadProgress/index.jsx
index 64a5bd9b7..f33d751ee 100644
--- a/frontend/src/components/Modals/ManageWorkspace/Documents/UploadFile/FileUploadProgress/index.jsx
+++ b/frontend/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,7 +122,7 @@ 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" ? (
@@ -120,14 +130,17 @@ function FileUploadProgressComponent({
<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
index 798284e24..775ccf149 100644
--- 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>