style: update splash information on download

Author: Nemika-Haj

main/background.ts

@@ -69,7 +69,7 @@ if (isProd) {
   })
 
   autoUpdater.on("download-progress", (progress) => {
-      splashWindow.webContents.send("update-progress", progress.percent)
+      splashWindow.webContents.send("update-progress", progress)
   })
 
   if(isProd) {

package.json

@@ -2,7 +2,7 @@
   "private": true,
   "name": "lock-pass",
   "description": "A simple password manager",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "author": "Nemika Hajbour <nemika@bytestobits.dev>",
   "repository": {
     "type": "git",

renderer/components/Menu.tsx

@@ -29,6 +29,7 @@ export default function Menu() {
                 className={"e-drag"}
                 justifyContent={"space-between"}
                 alignItems={"center"}
+                zIndex={9999}
             >
                 <Image src="/images/icon.png" boxSize="20px" m={2} />
 

renderer/pages/splash.tsx

@@ -1,12 +1,12 @@
-import { AbsoluteCenter, Button, Flex, Heading, Image, Progress } from "@chakra-ui/react";
+import { AbsoluteCenter, Button, Flex, Heading, Image, Progress, Text } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
 
 import electron from "electron"
 
 export default function SplashScreen() {
   const [loading, setLoading] = useState(true)
   const [loadingText, setLoadingText] = useState("Loading...")
-  const [downloadProgress, setDownloadProgress] = useState(null)
+  const [downloadProgressData, setDownloadProgressData] = useState(null)
   const [firstFetch, FirstFetch] = useState(false)
 
   useEffect(() => {
@@ -18,7 +18,7 @@ export default function SplashScreen() {
         electron.ipcRenderer.on('load-window', () => setLoading(false))
         electron.ipcRenderer.on('update-progress', (event, progress) => {
           setLoadingText("Downloading update...")
-          setDownloadProgress(progress)
+          setDownloadProgressData(progress)
         })
         electron.ipcRenderer.send('check-updates')
         setLoadingText("Checking for updates...")
@@ -52,11 +52,16 @@ export default function SplashScreen() {
 
           onClick={() => electron.ipcRenderer.send('open-main')}
         >
-            Open Manager
+          Open Manager
         </Button>
 
-        {downloadProgress && (
-          <Progress mt={5} w="50%" rounded="md" hasStripe value={downloadProgress} isAnimated colorScheme="green" />
+        {downloadProgressData && (
+          <>
+            <Progress mt={5} w="50%" rounded="md" hasStripe value={downloadProgressData.percent} isAnimated colorScheme="green" />
+            <Text textAlign={"center"} fontStyle="italic" fontSize="14px" color="gray">
+              {downloadProgressData.transferred}/{downloadProgressData.total} ({(downloadProgressData.bytesPerSecond/1000000).toFixed(2)} mb/s)
+            </Text>
+          </>
         )}
       </Flex>
     </AbsoluteCenter>