7 files changed, 24 insertions, 47 deletions

diff --git a/client/src/app/+videos/+video-edit/shared/video-edit.component.html b/client/src/app/+videos/+video-edit/shared/video-edit.component.html
index b0da84979..b607dabe9 100644
--- a/client/src/app/+videos/+video-edit/shared/video-edit.component.html
+++ b/client/src/app/+videos/+video-edit/shared/video-edit.component.html
@@ -22,7 +22,7 @@
             </div>
 
             <div class="form-group">
-              <label i18n class="label-tags">Tags</label>
+              <label for="label-tags" i18n class="label-tags">Tags</label>
 
               <my-help>
                 <ng-template ptTemplate="customHtml">
@@ -170,10 +170,10 @@
         <div class="captions">
 
           <div class="captions-header">
-            <a (click)="openAddCaptionModal()" class="create-caption">
+            <button (click)="openAddCaptionModal()" class="peertube-create-button">
               <my-global-icon iconName="add" aria-hidden="true"></my-global-icon>
               <ng-container i18n>Add another caption</ng-container>
-            </a>
+            </button>
           </div>
 
           <div class="form-group" *ngFor="let videoCaption of videoCaptions">
@@ -187,8 +187,8 @@
 
                 <div i18n class="caption-entry-state">Already uploaded on {{ videoCaption.updatedAt | date }}   &#10004;</div>
 
-                <span i18n class="caption-entry-edit" (click)="openEditCaptionModal(videoCaption)">Edit</span>
-                <span i18n class="caption-entry-delete" (click)="deleteCaption(videoCaption)">Delete</span>
+                <button i18n class="caption-entry-edit" (click)="openEditCaptionModal(videoCaption)">Edit</button>
+                <button i18n class="caption-entry-delete" (click)="deleteCaption(videoCaption)">Delete</button>
               </ng-container>
 
               <ng-container *ngIf="videoCaption.action === 'CREATE'">
@@ -196,7 +196,7 @@
 
                 <div i18n class="caption-entry-state caption-entry-state-create">Will be created on update</div>
 
-                <span i18n class="caption-entry-delete" (click)="deleteCaption(videoCaption)">Cancel create</span>
+                <button i18n class="caption-entry-delete" (click)="deleteCaption(videoCaption)">Cancel create</button>
               </ng-container>
 
               <ng-container *ngIf="videoCaption.action === 'UPDATE'">
@@ -204,7 +204,7 @@
 
                 <div i18n class="caption-entry-state caption-entry-state-create">Will be edited on update</div>
 
-                <span i18n class="caption-entry-delete" (click)="deleteCaption(videoCaption)">Cancel edition</span>
+                <button i18n class="caption-entry-delete" (click)="deleteCaption(videoCaption)">Cancel edition</button>
               </ng-container>
 
               <ng-container *ngIf="videoCaption.action === 'REMOVE'">
@@ -212,7 +212,7 @@
 
                 <div i18n class="caption-entry-state caption-entry-state-delete">Will be deleted on update</div>
 
-                <span i18n class="caption-entry-delete" (click)="deleteCaption(videoCaption)">Cancel deletion</span>
+                <button i18n class="caption-entry-delete" (click)="deleteCaption(videoCaption)">Cancel deletion</button>
               </ng-container>
             </div>
           </div>
diff --git a/client/src/app/+videos/+video-edit/shared/video-edit.component.scss b/client/src/app/+videos/+video-edit/shared/video-edit.component.scss
index a8075cc6d..1c6f7f5ab 100644
--- a/client/src/app/+videos/+video-edit/shared/video-edit.component.scss
+++ b/client/src/app/+videos/+video-edit/shared/video-edit.component.scss
@@ -29,10 +29,6 @@ my-peertube-checkbox {
   margin-bottom: 1rem;
 }
 
-.create-caption {
-  @include create-button;
-}
-
 .caption-entry {
   display: flex;
   height: 40px;
diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.html b/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.html
index e27942e66..a003a10eb 100644
--- a/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.html
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.html
@@ -64,7 +64,7 @@
           (timestampClicked)="handleTimestampClicked($event)"
           [redraftValue]="commentReplyRedraftValue"
         >
-          <div *ngIf="comment.totalReplies !== 0 && !threadComments[comment.id]" (click)="viewReplies(comment.id)" class="view-replies mb-2">
+          <button *ngIf="comment.totalReplies !== 0 && !threadComments[comment.id]" (click)="viewReplies(comment.id)" class="view-replies mb-2 button-unstyle">
             <span class="chevron-down"></span>
 
             <ng-container *ngIf="comment.totalRepliesFromVideoAuthor > 0; then hasAuthorComments; else noAuthorComments"></ng-container>
@@ -81,7 +81,7 @@
             <ng-template i18n #noAuthorComments>View {comment.totalReplies, plural, =1 {1 reply} other {{{ comment.totalReplies }} replies}}</ng-template>
 
             <my-loader size="sm" class="ms-1" [loading]="threadLoading[comment.id]"></my-loader>
-          </div>
+          </button>
         </my-video-comment>
 
       </div>
diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.scss b/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.scss
index 5001ad168..7720fe43b 100644
--- a/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.scss
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.scss
@@ -24,16 +24,11 @@
     @include margin-left(5px);
 
     display: inline-block;
-    opacity: 0;
     transition: ease-in .2s opacity;
     width: 12px;
     position: relative;
     top: -3px;
   }
-
-  &:hover my-feed {
-    opacity: 1;
-  }
 }
 
 #dropdown-sort-comments {
diff --git a/client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.html b/client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.html
index 7677ae836..93c4ba7a7 100644
--- a/client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.html
+++ b/client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.html
@@ -6,10 +6,11 @@
         the sharing system used for this video implies that some technical information about your system (such as a public IP address) can be sent to other peers.
       </ng-container>
     </span>
+
     <a i18n i18n-title title="Get more information" target="_blank" rel="noopener noreferrer" href="/about/peertube#privacy">More information</a>
   </div>
 
-  <div i18n class="privacy-concerns-button privacy-concerns-okay" (click)="acceptedPrivacyConcern()">
+  <button i18n class="ms-2 peertube-button orange-button" (click)="acceptedPrivacyConcern()">
     OK
-  </div>
+  </button>
 </div>
diff --git a/client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.scss b/client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.scss
index a6479c7ec..f7f9dfd2f 100644
--- a/client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.scss
+++ b/client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.scss
@@ -50,31 +50,10 @@ a {
   transition: color 0.3s;
 
   &:hover {
-    color: #fff;
+    color: pvar(--mainBackgroundColor);
   }
 }
 
-.privacy-concerns-button {
-  @include margin-left(auto);
-
-  padding: 5px 8px 5px 7px;
-  border-radius: 3px;
-  white-space: nowrap;
-  cursor: pointer;
-  transition: background-color 0.3s;
-  font-weight: $font-semibold;
-
-  &:hover {
-    background-color: #000;
-  }
-}
-
-.privacy-concerns-okay {
-  @include margin-left(10px);
-
-  background-color: pvar(--mainColor);
-}
-
 @media screen and (max-width: 1300px) {
   .privacy-concerns {
     font-size: 12px;
diff --git a/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.html b/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.html
index d847daff7..9db3018e6 100644
--- a/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.html
+++ b/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.html
@@ -6,14 +6,20 @@
     myTimestampRouteTransformer
   ></div>
 
-  <div class="video-info-description-more" *ngIf="completeDescriptionShown === false && video.description?.length >= 250" (click)="showMoreDescription()">
+  <button
+    *ngIf="completeDescriptionShown === false && video.description?.length >= 250"
+    (click)="showMoreDescription()" class="video-info-description-more button-unstyle"
+  >
     <ng-container i18n>Show more</ng-container>
     <span *ngIf="descriptionLoading === false" class="chevron-down"></span>
     <my-loader size="sm" class="description-loading" [loading]="descriptionLoading"></my-loader>
-  </div>
+  </button>
 
-  <div *ngIf="completeDescriptionShown === true" (click)="showLessDescription()" class="video-info-description-more">
+  <button
+    *ngIf="completeDescriptionShown === true"
+    (click)="showLessDescription()" class="video-info-description-more button-unstyle"
+  >
     <ng-container i18n>Show less</ng-container>
     <span *ngIf="descriptionLoading === false" class="chevron-up"></span>
-  </div>
+  </button>
 </div>