1
0
mirror of https://github.com/upscayl/upscayl.git synced 2025-02-17 11:18:36 +01:00

Refactor ProgressBar component styling

This commit is contained in:
Nayam Amarshe 2024-01-15 19:02:21 +05:30
parent eec704c479
commit 21e77b0fd2

View File

@ -24,13 +24,13 @@ function ProgressBar({
return (
<div className="absolute flex h-full w-full flex-col items-center justify-center bg-base-300/50 backdrop-blur-lg">
<div className="flex flex-col items-center gap-2">
<div className="flex flex-col items-center bg-base-100/50 backdrop-blur-lg p-4 rounded-btn">
<img
src="icon.png"
alt="Upscayl Icon"
className="w-12 h-12 mb-2 spinner"
className="w-12 h-12 spinner mb-4"
/>
<p className="rounded-full bg-base-300 px-2 py-1 font-bold">
<p className="rounded-full px-2 font-bold pb-2">
{batchMode && "Batch Upscale In Progress: " + batchProgress}
{!batchMode &&
@ -39,16 +39,16 @@ function ProgressBar({
: `${progress}`)}
</p>
<p className="rounded-full bg-base-300 px-2 py-1 text-sm font-medium">
<p className="rounded-full px-2 text-sm font-medium pb-3 animate-pulse">
Doing the Upscayl magic...
</p>
{batchMode && (
<p className="text-xs rounded-btn text-base-content/70 bg-base-300 max-w-xs text-center pb-1">
<p className="text-xs rounded-btn text-base-content/70 text-center pb-4 w-64">
Info: The images will be converted and scaled after the upscaling
process.
</p>
)}
<button onClick={stopHandler} className="btn-danger btn">
<button onClick={stopHandler} className="btn-outline btn">
STOP
</button>
</div>