Fixed Progress Bar Issue

renderer/components/LeftPaneSteps.jsx

@@ -54,16 +54,25 @@ function LeftPaneSteps(props) {
                 <input
                   type="checkbox"
                   className="checked:bg-gradient-white h-4 w-4 cursor-pointer appearance-none rounded-full bg-neutral-500 transition duration-200 focus:outline-none focus-visible:border focus-visible:border-green-400"
+                  checked={props.doubleUpscayl}
                   onChange={(e) => {
-                    props.setDoubleUpscayl(e.target.checked);
+                    if (e.target.checked) {
+                      props.setDoubleUpscayl(true);
+                    } else {
+                      props.setDoubleUpscayl(false);
+                    }
                   }}
                 />
                 <p
+                  data-tip="Enable this option to get an 8x upscayl"
                   className={`inline-block cursor-help rounded-full text-sm font-medium ${
                     props.doubleUpscayl
-                      ? "text-neutral-100"
+                      ? "bg-gradient-white px-2 text-black/90"
                       : "text-neutral-500"
                   }`}
+                  onClick={(e) => {
+                    props.setDoubleUpscayl(!props.doubleUpscayl);
+                  }}
                 >
                   Double Upscayl
                 </p>
@@ -88,7 +97,7 @@ function LeftPaneSteps(props) {
               Defaults to Image's path
             </p>
             <button
-              className="bg-gradient mt-1 rounded-lg p-3 font-medium text-white/90 transition-colors hover:bg-teal-300"
+              className="bg-gradient mt-1 rounded-lg p-3 font-medium text-black/90 transition-colors hover:bg-teal-300"
               onClick={props.outputHandler}
             >
               Set Output Folder

renderer/components/ProgressBar.jsx

@@ -9,7 +9,6 @@ function ProgressBar(props) {
       <div className="flex flex-col items-center gap-2">
         <Image src={Animated} />
         <p className="font-bold text-neutral-50">{props.progress}</p>
-        {props.progress}
         <p className="text-sm font-medium text-neutral-200">
           Doing the Upscayl magic...
         </p>

renderer/pages/index.jsx

@@ -58,14 +58,17 @@ const Home = () => {
     };
 
     window.electron.on(commands.UPSCAYL_PROGRESS, (_, data) => {
-      setSharpening(false);
+      console.log(
+        "🚀 => file: index.jsx => line 61 => window.electron.on => data",
+        data
+      );
+
       if (data.length > 0 && data.length < 10) {
         setProgress(data);
       }
       handleErrors(data);
     });
     window.electron.on(commands.FOLDER_UPSCAYL_PROGRESS, (_, data) => {
-      setSharpening(false);
       if (data.length > 0 && data.length < 10) {
         setProgress(data);
       }
@@ -91,6 +94,10 @@ const Home = () => {
     });
   }, []);
 
+  useEffect(() => {
+    setProgress("");
+  }, [batchMode]);
+
   const selectImageHandler = async () => {
     resetImagePaths();
     var path = await window.electron.invoke(commands.SELECT_FILE);

renderer/styles/globals.css

@@ -3,9 +3,6 @@
 @tailwind utilities;
 
 @layer base {
-  * {
-    @apply transition-all duration-300 ease-in-out;
-  }
   ::-webkit-scrollbar {
     @apply w-3;
   }
@@ -40,7 +37,7 @@
     @apply bg-gradient-to-br from-[#7741ff] to-[#af55ff] hover:from-[#af55ff] hover:to-[#7741ff];
   }
   .bg-gradient {
-    @apply bg-gradient-to-br from-cyan-400 to-blue-500 hover:from-blue-500 hover:to-cyan-400;
+    @apply bg-gradient-to-br from-green-500 to-lime-300 hover:from-lime-300 hover:to-green-500;
   }
 }