fix commands and stylign

src-tauri/src/main.rs

@@ -10,9 +10,12 @@ mod proxy;
 
 fn main() {
   tauri::Builder::default()
-    .invoke_handler(tauri::generate_handler![downloader::download_file])
+    .invoke_handler(tauri::generate_handler![
-    .invoke_handler(tauri::generate_handler![run_program])
+      connect,
-    .invoke_handler(tauri::generate_handler![connect, disconnect])
+      disconnect,
+      run_program,
+      downloader::download_file
+    ])
     .run(tauri::generate_context!())
     .expect("error while running tauri application");
 }

src/ui/App.tsx

@@ -58,14 +58,15 @@ class App extends React.Component<IProps, IState> {
           }}
           downFunc={() => {
             this.setState({ miniDownloadsOpen: !this.state.miniDownloadsOpen })
-            console.log(this.state.miniDownloadsOpen)
           }}
         />
 
         {
           // Mini downloads section
           this.state.miniDownloadsOpen ? 
-            <MiniDialog>
+            <MiniDialog closeFn={() => {
+              this.setState({ miniDownloadsOpen: false })
+            }}>
               <DownloadList downloadManager={downloadHandler} />
             </MiniDialog> : null
         }

src/ui/components/MiniDialog.css

@@ -16,3 +16,19 @@
   border-radius: 10px;
 }
 
+.MiniDialogTop {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+
+  height: 20px;
+}
+
+.MiniDialogTop img {
+  height: 100%;
+}
+
+.MiniDialogTop:hover {
+  cursor: pointer;
+}

src/ui/components/MiniDialog.tsx

@@ -1,9 +1,11 @@
 import React from 'react'
 
+import Close from '../../resources/icons/close.svg'
 import './MiniDialog.css'
 
 interface IProps {
   children: React.ReactNode[] | React.ReactNode;
+  closeFn: () => void;
 }
 
 export default class MiniDialog extends React.Component<IProps, never> {
@@ -14,7 +16,13 @@ export default class MiniDialog extends React.Component<IProps, never> {
   render() {
     return (
       <div className="MiniDialog">
-        {this.props.children}
+        <div className="MiniDialogTop" onClick={this.props.closeFn}>
+          <div></div>
+          <img src={Close} className="MiniDialogClose" />
+        </div>
+        <div className="MiniDialogInner">
+          {this.props.children}
+        </div>
       </div>
     )
   }

src/ui/components/common/ProgressBar.css

@@ -12,7 +12,7 @@
   height: 20px;
   width: 80%;
   background-color: #fff;
-  color: #fff;
+  color: #c5c5c5;
 
   border: 1px solid #ccc;
 }
@@ -23,5 +23,5 @@
 }
 
 .ProgressText {
-  color: #fff;
+  color: #c5c5c5;
 }

src/utils/download.ts

@@ -42,9 +42,8 @@ export default class DownloadHandler {
   }
   
   addDownload(url: string, path: string) {
-    // Begin download from rust backend
+    // Begin download from rust backend, don't add if the download addition fails
     invoke('download_file', { url, path })
-
     const obj = {
       path,
       progress: 0,