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>