Customize checkboxs

2 files changed, 15 insertions, 6 deletions

diff --git a/client/src/app/account/account-videos/account-videos.component.html b/client/src/app/account/account-videos/account-videos.component.html
index 4f3a774bd..f73483039 100644
--- a/client/src/app/account/account-videos/account-videos.component.html
+++ b/client/src/app/account/account-videos/account-videos.component.html
@@ -7,7 +7,10 @@
   (scrolledUp)="onNearOfTop()"
 >
   <div class="video" *ngFor="let video of videos; let i = index">
-    <input type="checkbox" [(ngModel)]="checkedVideos[video.id]" />
+    <div class="checkbox-container">
+      <input [id]="'video-check-' + i" type="checkbox" [(ngModel)]="checkedVideos[video.id]" />
+      <label [for]="'video-check-' + i"></label>
+    </div>
 
     <my-video-thumbnail [video]="video"></my-video-thumbnail>
 
diff --git a/client/src/app/account/account-videos/account-videos.component.scss b/client/src/app/account/account-videos/account-videos.component.scss
index 0d478edd7..707bd66ad 100644
--- a/client/src/app/account/account-videos/account-videos.component.scss
+++ b/client/src/app/account/account-videos/account-videos.component.scss
@@ -46,11 +46,6 @@
   min-height: 130px;
   padding-bottom: 20px;
 
-  input[type=checkbox] {
-    margin-right: 20px;
-    outline: 0;
-  }
-
   &:first-child {
     margin-top: 47px;
   }
@@ -60,6 +55,17 @@
     border-bottom: 1px solid #C6C6C6;
   }
 
+  .checkbox-container {
+    display: flex;
+    align-items: center;
+    margin-right: 20px;
+    margin-left: 12px;
+
+    input[type=checkbox] {
+      @include peertube-checkbox(2px);
+    }
+  }
+
   my-video-thumbnail {
     margin-right: 10px;
   }