fix: readme and progress bars weren't updating

Few fixes

Author: CarrotRub

README.md

@@ -1,22 +1,24 @@
 # 🎮 Fit Launcher
 
-Fit Launcher is a 🚀 **blazingly fast** 🚀 game launcher designed specifically for cracked games from FitGirl Repack. Built with Rust, Tauri, and SolidJS, this launcher delivers top-notch performance and a sleek, modern design. 
+Fit Launcher is a 🚀 **blazingly fast** 🚀 (sorry it's made in rust, I have to write that) game launcher designed specifically for cracked games from FitGirl Repack. Built with Rust, Tauri, and SolidJS, this launcher delivers the best performance and a sleek, modern design. 
 
 ## Features
 - ⚡ **Lightning Fast**: Powered by Rust and Tauri for better speed and efficiency.
-- 🎨 **Sleek Design**: Thanks to the creative design by Vintage_Soldier.
 - 🛠️ **Easy to Use**: Simple setup and easy to run—just execute the launcher and you're good to go!
-- 🌌 **Quick Download**: Using **librqbit** for torrenting for optimal speed.
+- 🌌 **Quick Download**: Using **aria2c** for torrenting and DDL for optimal speed.
 
 ## Getting Started
 
 ### Images of the launcher
 
-![Launcher Screenshot 1](images/screenshot1.png)
-![Launcher Screenshot 2](images/screenshot2.png)
-![Launcher Screenshot 3](images/screenshot3.png)
-![Launcher Screenshot 4](images/screenshot4.png)
-![Launcher Screenshot 5](images/screenshot5.png)
+![Launcher Screenshot 1](images/1.png)
+![Launcher Screenshot 2](images/2.png)
+![Launcher Screenshot 3](images/3.png)
+![Launcher Screenshot 4](images/4.png)
+![Launcher Screenshot 5](images/5.png)
+![Launcher Screenshot 6](images/6.png)
+![Launcher Screenshot 7](images/7.png)
+![Launcher Screenshot 8](images/8.png)
 
 ## Installation Guide
 
@@ -26,11 +28,11 @@ Fit Launcher is a 🚀 **blazingly fast** 🚀 game launcher designed specifical
    Go to the [release page here](https://github.com/CarrotRub/Fit-Launcher/releases/latest).
 
 2. **Download the Executable**  
-   Scroll down until you find the executable, which will look like this `Fit.Launcher_2.X.X_x64_en-US.msi`
+   Scroll down until you find the executable, which will look like this `Fit.Launcher_3.X.X_x64_en-US.msi`
 
 3. **Run it !**
    Once downloaded, simply execute the setup and install it inside
-   `C:/Program Files/` then run the executable 😃 !
+   `C:/Program Files/` then run the executable :) !
 
 ### Development Mode
 
@@ -62,33 +64,35 @@ npm run tauri build
 ## Create your own themes !
 Now you can even customize the launcher to your liking, you can go check the tutorial on how to create a theme in doc/theme_creation.md
 
-![image](https://github.com/user-attachments/assets/1f41575a-ccbe-4f05-9494-8d8d9b0c9059)
-![image](https://github.com/user-attachments/assets/331c6c13-6f8e-4eaa-9824-c5c66cedd624)
-![image](https://github.com/user-attachments/assets/88aa5062-2c3e-4ba6-bd6f-e7d9c93a7d16)
-![image](https://github.com/user-attachments/assets/2a1b22cb-89b4-4b85-96be-73ba44f5fe05)
-![image](https://github.com/user-attachments/assets/1e557d35-c76f-4445-8b39-57a2b7319fc1)
+![Launcher Screenshot 1](images/themes/1.png)
+![Launcher Screenshot 2](images/themes/2.png)
+![Launcher Screenshot 3](images/themes/3.png)
+![Launcher Screenshot 4](images/themes/4.png)
+![Launcher Screenshot 5](images/themes/5.png)
+
+*The last one is a special theme, come on Discord to get it*
 
 Here are a few of the default themes !
 You can then create as much as you want.
-Good luck 🎉
+Good luck !!
 
 ## Join Our Community 🎉
 
-Got questions or want to hang out with our users? Join us on Discord! Big thanks to **Kürst** for moderating our Discord server, to **Vintage_Soldier** for the amazing app design, and to **SimplyStoned** for maintaining the old launcher while I was developing this one.
+Got questions or want to hang out with our users? Join us on Discord! Big thanks to **Kürst** for moderating our Discord server, to **mokurin** for helping me tremendously with the many and most issues in the backend and to **SimplyStoned** for maintaining the old launcher while I was developing this one.
 
 [Join the Discord](https://discord.gg/cXaBWdcUSF)
 
 ## Credits
 
-- **CarrotRub** - Me, Developer of this app :3.
+- **CarrotRub** - Me, Developer of this app (Design now too) :3.
+- **mokurin000** - Main Contributor.
 - **Kürst** - Discord Moderator and Technical and Visual Co-Contributor
-- **Vintage_Soldier** - App Design
+- **Vintage_Soldier** - First App Design (Old design).
 - **SimplyStoned** - Maintenance of the Old Launcher and Contributor.
-- **mokurin000** - Contributor.
 
 ---
 
-Enjoy your games with Fit Launcher! 🎮🚀
+Enjoy your games with Fit Launcher!
 
 ## TODO List 📝
 

doc/theme_creation.md

@@ -17,8 +17,8 @@ Each theme consists of CSS variables that define colors for:
 - **Primary Color:** Main UI elements.
 - **Secondary Color:** Supporting elements.
 - **Background Color:** Base UI background.
+- **Popup Background Color:** For Popups and some elements.
 - **Text Color:** Default text color.
-- **Popup Background Color:** Background for modal elements.
 - **Transparency Levels:** Variants of colors with transparency.
 
 ---
@@ -33,41 +33,41 @@ Each theme consists of CSS variables that define colors for:
 
    Example of Blue Cyan Theme : 
    ```css
-        :root[data-theme="blue-cyan"] {
-          --accent-color: rgba(0, 128, 128, 1);
-          --secondary-color: rgba(0, 102, 102, 1);
-          --secondary-30-selected-color: rgba(0, 102, 102, 0.3);
-          --non-selected-text-color: rgba(200, 240, 240, 0.5);
-          --primary-color: rgba(64, 224, 208, 1);
-          --secondary-20-color: rgba(0, 102, 102, 0.2);
-          --text-color: rgba(240, 255, 255, 1);
-          --background-color: rgb(10, 20, 25);
-          --70-background-color: rgba(10, 20, 25, 0.7);
-          --30-background-color: rgba(10, 20, 25, 0.3);
-          --popup-background-color: rgb(5, 15, 20);
-          --resume-button-accent-color: #00CCCC;
-          --warning-orange: #FF7F50;
-        }
+      :root[data-theme="blue-cyan"] {
+        --color-accent: rgba(0, 128, 128, 1);
+        --color-primary: rgba(64, 224, 208, 1);
+        --color-secondary: rgba(0, 102, 102, 1);
+        --color-secondary-30: rgba(0, 102, 102, 0.3);
+        --color-secondary-20: rgba(0, 102, 102, 0.2);
+        --color-text: rgba(240, 255, 255, 1);
+        --color-muted: rgba(200, 240, 240, 0.5);
+        --color-background: rgba(10, 20, 25, 1);
+        --color-background-70: rgba(10, 20, 25, 0.7);
+        --color-background-30: rgba(10, 20, 25, 0.3);
+        --color-popup-background: rgba(5, 15, 20, 1);
+        --color-resume-accent: rgba(0, 204, 204, 1);
+        --color-warning-orange: rgba(255, 127, 80, 1);
+      }
 
     ```
 
 ### Copiable Example :
    ```css
-        :root[data-theme="your-theme-name"] {
-          --accent-color: ;
-          --secondary-color: ;
-          --secondary-30-selected-color: ;
-          --non-selected-text-color: ;
-          --primary-color: ;
-          --secondary-20-color: ;
-          --text-color: ;
-          --background-color: ;
-          --70-background-color: ;
-          --30-background-color: ;
-          --popup-background-color: ;
-          --resume-button-accent-color: ;
-          --warning-orange: ;
-        }
+      :root[data-theme="your-theme-name"] {
+        --color-accent: /* Value here (rgba) ! */;
+        --color-primary: /* Value here (rgba) ! */;
+        --color-secondary: /* Value here (rgba) ! */;
+        --color-secondary-30: /* Value here (rgba) ! */;
+        --color-secondary-20: /* Value here (rgba) ! */;
+        --color-text: /* Value here (rgba) ! */;
+        --color-muted: /* Value here (rgba) ! */;
+        --color-background: /* Value here (rgba) ! */;
+        --color-background-70: /* Value here (rgba) ! */;
+        --color-background-30: /* Value here (rgba) ! */;
+        --color-popup-background: /* Value here (rgba) ! */;
+        --color-resume-accent: /* Value here (rgba) ! */;
+        --color-warning-orange: /* Value here (rgba) ! */;
+      }
 
   ```
 ### Tips :