Customize checkboxs

client/src/app/account/account-settings/account-details/account-details.component.html

@@ -1,20 +1,23 @@
 <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
 
 <form role="form" (ngSubmit)="updateDetails()" [formGroup]="form">
-  <input
-    type="checkbox" id="displayNSFW"
-    formControlName="displayNSFW"
-  >
-  <label for="displayNSFW">Display videos that contain mature or explicit content</label>
-  <div *ngIf="formErrors['displayNSFW']" class="alert alert-danger">
-    {{ formErrors['displayNSFW'] }}
+  <div class="form-group">
+    <input
+      type="checkbox" id="displayNSFW"
+      formControlName="displayNSFW"
+    >
+    <label for="displayNSFW"></label>
+    <label for="displayNSFW">Display videos that contain mature or explicit content</label>
+  </div>
+
+  <div class="form-group">
+    <input
+      type="checkbox" id="autoPlayVideo"
+      formControlName="autoPlayVideo"
+    >
+    <label for="autoPlayVideo"></label>
+    <label for="autoPlayVideo">Automatically plays video</label>
   </div>
-  <br/>
-  <input
-    type="checkbox" id="autoPlayVideo"
-    formControlName="autoPlayVideo"
-  >
-  <label for="autoPlayVideo">Automatically plays video</label>
 
   <input type="submit" value="Save" [disabled]="!form.valid">
 </form>

client/src/app/account/account-settings/account-details/account-details.component.scss

@@ -1,10 +1,8 @@
 @import '_variables';
 @import '_mixins';
 
-label {
-  font-size: 15px;
-  font-weight: $font-regular;
-  margin-left: 5px;
+input[type=checkbox] {
+  @include peertube-checkbox(1px);
 }
 
 input[type=submit] {

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>
 

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;
   }

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

@@ -95,6 +95,7 @@
 
     <div class="form-group form-group-checkbox">
       <input type="checkbox" id="nsfw" formControlName="nsfw" />
+      <label for="nsfw"></label>
       <label for="nsfw">This video contains mature or explicit content</label>
     </div>
 

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

@@ -21,7 +21,7 @@
     display: block;
 
     &[type=checkbox] {
-      outline: 0;
+      @include peertube-checkbox(1px);
     }
   }
 

client/src/sass/include/_mixins.scss

@@ -148,3 +148,49 @@
     cursor: default;
   }
 }
+
+@mixin peertube-checkbox ($border-width) {
+  display: none;
+
+  & + label {
+    position: relative;
+    width: 18px;
+    height: 18px;
+    border: $border-width solid #000;
+    border-radius: 3px;
+    vertical-align: middle;
+    cursor: pointer;
+
+    &:after {
+      content: '';
+      position: absolute;
+      top: calc(2px - #{$border-width});
+      left: 5px;
+      width: 5px;
+      height: 12px;
+      opacity: 0;
+      transform: rotate(45deg) scale(0);
+      border-right: 2px solid #fff;
+      border-bottom: 2px solid #fff;
+    }
+  }
+
+  &:checked + label {
+    border-color: transparent;
+    background: $orange-color;
+    animation: jelly 0.6s ease;
+
+    &:after {
+      opacity: 1;
+      transform: rotate(45deg) scale(1);
+    }
+  }
+
+  & + label + label {
+    font-size: 15px;
+    font-weight: $font-regular;
+    margin-left: 5px;
+    cursor: pointer;
+  }
+}
+