Add style to cancel button

client/src/app/videos/+video-edit/video-add.component.html

@@ -32,17 +32,15 @@
     </div>
   </div>
 
-  <div
+  <div *ngIf="isUploadingVideo" class="upload-progress-cancel">
-    *ngIf="isUploadingVideo"
-  >
     <p-progressBar
       [value]="videoUploadPercents"
       [ngClass]="{ processing: videoUploadPercents === 100 && videoUploaded === false }"
     ></p-progressBar>
-    <input type="button" value="Cancel" (click)="cancelUpload()" />
+    <input *ngIf="videoUploaded === false" type="button" value="Cancel" (click)="cancelUpload()" />
   </div>
 
-  <!-- Hidden because we need to load the component -->
+  <!-- Hidden because we want to load the component -->
   <form [hidden]="!isUploadingVideo" novalidate [formGroup]="form">
     <my-video-edit
       [form]="form" [formErrors]="formErrors"

client/src/app/videos/+video-edit/video-add.component.scss

@@ -41,10 +41,15 @@
   }
 }
 
-p-progressBar {
+.upload-progress-cancel {
+  display: flex;
+  margin-top: 25px;
+  margin-bottom: 40px;
+
+  p-progressBar {
+    flex-grow: 1;
+
     /deep/ .ui-progressbar {
-    margin-top: 25px !important;
-    margin-bottom: 40px !important;
       font-size: 15px !important;
       color: #fff !important;
       height: 30px !important;
@@ -74,6 +79,13 @@ p-progressBar {
         }
       }
     }
+  }
+
+  input {
+    @include peertube-button;
+    @include grey-button;
+
+    margin-left: 10px;
+  }
 }
 
-

client/src/app/videos/+video-edit/video-add.component.ts

@@ -99,8 +99,8 @@ export class VideoAddComponent extends FormReactive implements OnInit {
       this.videoUploadObservable.unsubscribe()
       this.isUploadingVideo = false
       this.videoUploadPercents = 0
-      this.notificationsService.error('Error', 'Upload cancelled')
       this.videoUploadObservable = null
+      this.notificationsService.info('Info', 'Upload cancelled')
     }
   }