Customize checkboxs

2 files changed, 18 insertions, 17 deletions

diff --git a/client/src/app/account/account-settings/account-details/account-details.component.html b/client/src/app/account/account-settings/account-details/account-details.component.html
index 593b87e29..c8e1e73b0 100644
--- a/client/src/app/account/account-settings/account-details/account-details.component.html
+++ b/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>
diff --git a/client/src/app/account/account-settings/account-details/account-details.component.scss b/client/src/app/account/account-settings/account-details/account-details.component.scss
index 1bdb19a38..4e8dfde1d 100644
--- a/client/src/app/account/account-settings/account-details/account-details.component.scss
+++ b/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] {