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:
parent
eec704c479
commit
21e77b0fd2
@ -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>
|
||||
|
Loading…
x
Reference in New Issue
Block a user