delete download when stopping

src/ui/components/common/ProgressBar.css

@@ -25,6 +25,7 @@
 .ProgressText {
   color: #c5c5c5;
   padding: 0px 10px;
+  width: 30%;
 }
 
 .MainProgressBarWrapper {
@@ -46,7 +47,7 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
 }
 
 .DownloadControls {
@@ -64,4 +65,8 @@
 
 .DownloadControls div img {
   height: 100%;
+}
+
+.downloadStop:hover {
+  cursor: pointer;
 }

src/ui/components/common/ProgressBar.tsx

@@ -25,6 +25,8 @@ export default class ProgressBar extends React.Component<IProps, IState> {
       status: '',
       total: this.props.downloadManager.getDownloadProgress(this.props.path)?.total || 0,
     }
+
+    this.stopDownload = this.stopDownload.bind(this)
   }
 
   componentDidMount() {
@@ -33,7 +35,7 @@ export default class ProgressBar extends React.Component<IProps, IState> {
       const prog = this.props.downloadManager.getDownloadProgress(this.props.path)
       this.setState({
         progress: prog?.progress || 0,
-        status: prog?.status || 'error',
+        status: prog?.status || 'stopped',
         total: prog?.total || 0,
       })
 
@@ -71,7 +73,7 @@ export default class ProgressBar extends React.Component<IProps, IState> {
             }}></div>
           </div>
           <div className="DownloadControls">
-            <div onClick={this.stopDownload}>
+            <div onClick={this.stopDownload} className="downloadStop">
               <img src={Stop}></img>
             </div>
           </div>
@@ -79,7 +81,7 @@ export default class ProgressBar extends React.Component<IProps, IState> {
 
 
         <div className="ProgressText">
-          {capitalize(this.state.status)}
+          {capitalize(this.state.status) || 'Waiting'}
         </div>
       </div>
     )