3 files changed, 12 insertions, 9 deletions

diff --git a/client/src/app/videos/+video-watch/comment/video-comment-add.component.html b/client/src/app/videos/+video-watch/comment/video-comment-add.component.html
index 29c7a8bfa..3e820041d 100644
--- a/client/src/app/videos/+video-watch/comment/video-comment-add.component.html
+++ b/client/src/app/videos/+video-watch/comment/video-comment-add.component.html
@@ -17,7 +17,7 @@
   </div>
 
   <div class="comment-buttons">
-    <button *ngIf="isAddButtonDisplayed()" class="cancel-button" (click)="cancelCommentReply()" i18n>
+    <button *ngIf="isAddButtonDisplayed()" class="cancel-button" (click)="cancelCommentReply()" type="button" i18n>
       Cancel
     </button>
     <button *ngIf="isAddButtonDisplayed()" [ngClass]="{ disabled: !form.valid || addingComment }" i18n>
diff --git a/client/src/app/videos/+video-watch/comment/video-comment-add.component.scss b/client/src/app/videos/+video-watch/comment/video-comment-add.component.scss
index c04727ba0..b9e864491 100644
--- a/client/src/app/videos/+video-watch/comment/video-comment-add.component.scss
+++ b/client/src/app/videos/+video-watch/comment/video-comment-add.component.scss
@@ -30,14 +30,6 @@ form {
   }
 }
 
-.cancel-button {
-  font-weight: $font-semibold;
-  display: inline-block;
-  padding: 0 10px 0 10px;
-  white-space: nowrap;
-  background: transparent;
-}
-
 .comment-buttons {
   display: flex;
   justify-content: flex-end;
@@ -49,6 +41,16 @@ form {
       @include orange-button;
     }
   }
+
+  .cancel-button {
+    @include tertiary-button;
+
+    font-weight: $font-semibold;
+    display: inline-block;
+    padding: 0 10px 0 10px;
+    white-space: nowrap;
+    background: transparent;
+  }
 }
 
 @media screen and (max-width: 600px) {
diff --git a/client/src/app/videos/+video-watch/comment/video-comment-add.component.ts b/client/src/app/videos/+video-watch/comment/video-comment-add.component.ts
index a8c432653..5784efcdf 100644
--- a/client/src/app/videos/+video-watch/comment/video-comment-add.component.ts
+++ b/client/src/app/videos/+video-watch/comment/video-comment-add.component.ts
@@ -139,6 +139,7 @@ export class VideoCommentAddComponent extends FormReactive implements OnInit {
 
   cancelCommentReply () {
     this.cancel.emit(null)
+    this.form.value['text'] = this.textareaElement.nativeElement.value = ''
   }
 
   private addCommentReply (commentCreate: VideoCommentCreate) {