step 5 : checkboxes withotu material design

src/app/features/administration/form/advanced-config/advanced-config.component.html

@@ -42,7 +42,7 @@
 			/>
 		</div>
 		<button
-			*ngIf="form.controls.custom_url.value"
+			*ngIf="form.controls.custom_url.value && display_regen_slug"
 			aria-label="Clear"
 			(click)="form.patchValue({ custom_url: pollService.makeSlug(form) })"
 		>
@@ -60,9 +60,7 @@
 		</p>
 		<div class="password-box">
 			<input
-				#password
 				id="password_first"
-				matInput
 				[type]="displayClearPassword ? 'text' : 'password'"
 				formControlName="password"
 				required
@@ -94,13 +92,18 @@
 				<i class="fa fa-eye-slash" *ngIf="displayClearPassword"></i>
 			</button>
 			<div class="pass-validation" *ngIf="form.value.password == form.value.password_repeat">
-				<img class="icon" aria-hidden="true" src="assets/icons/book.svg" />
+				<p class="pass-validation-text">
+					<img class="icon" aria-hidden="true" src="assets/icons/check-grey-round.svg" />
 					{{ 'advanced.password_validation_ok' | translate }}
+				</p>
 			</div>
 			<div class="visibility_password_results">
-				<mat-checkbox class="is-not-flex" formControlName="areResultsPublic">
+				<label for="areResultsPublic" class="aside-label">
+					<input type="checkbox" formControlName="areResultsPublic" id="areResultsPublic" />
+					<span class="label-text">
 						{{ 'advanced.password_display_without' | translate }}
-				</mat-checkbox>
+					</span>
+				</label>
 			</div>
 		</div>
 	</div>
@@ -141,14 +144,28 @@
 			{{ 'advanced.notifications_description' | translate }}
 		</p>
 		<div class="choice">
-			<mat-checkbox class="is-not-flex" formControlName="isOwnerNotifiedByEmailOnNewComment">
+			<label for="areResultsPublic" class="aside-label">
+				<input
+					type="checkbox"
+					formControlName="isOwnerNotifiedByEmailOnNewComment"
+					id="isOwnerNotifiedByEmailOnNewComment"
+				/>
+				<span class="label-text">
 					{{ 'advanced.notifications_vote' | translate }}
-			</mat-checkbox>
+				</span>
+			</label>
 		</div>
 		<div class="choice">
-			<mat-checkbox class="is-not-flex" formControlName="isOwnerNotifiedByEmailOnNewVote">
+			<label for="areResultsPublic" class="aside-label">
+				<input
+					type="checkbox"
+					formControlName="isOwnerNotifiedByEmailOnNewVote"
+					id="isOwnerNotifiedByEmailOnNewVote"
+				/>
+				<span class="label-text">
 					{{ 'advanced.notifications_comment' | translate }}
-			</mat-checkbox>
+				</span>
+			</label>
 		</div>
 	</div>
 

src/app/features/administration/form/advanced-config/advanced-config.component.scss

@@ -5,20 +5,49 @@
 		margin-left: 1em;
 	}
 }
-
+.aside-label {
+	min-height: 1.5rem;
+	width: 100%;
+	display: inline-block;
+	margin-left: 0.5em;
+	line-height: 2.5rem;
+	img,
+	input {
+		float: left;
+		min-height: 1.5rem;
+		margin-right: 1rem;
+	}
+	margin-bottom: 0.5rem;
+}
 input,
 textarea {
 	margin-top: 0.5em;
 	margin-bottom: 1.5em;
 	width: 100%;
+	&[type='checkbox'] {
+		width: 1.5rem;
+		height: 1.5rem;
+		border-radius: 0.5rem;
+		border: solid 1px $font_color;
+		float: left;
+	}
+	+ label {
+		height: 1.5rem;
+		width: 90%;
+		display: inline-block;
+		margin-left: 0.5em;
+		float: left;
+		clear: right;
+	}
 }
 
 .domain-custom-box {
 	border-radius: 3px;
 	height: 1.5em;
 	width: 100%;
-	margin: 1rem;
 	display: block;
+	padding: 0;
+	margin: 0 0 1rem;
 
 	.domain {
 		border: solid 1px #eee;
@@ -27,6 +56,8 @@ textarea {
 		width: 40%;
 		background: #ddd;
 		text-align: right;
+		overflow: hidden;
+		text-overflow: ellipsis;
 	}
 
 	.inline-input {
@@ -36,7 +67,8 @@ textarea {
 		background: #fff;
 		margin: 0;
 		float: left;
-		width: 49%;
+		width: 59%;
+		line-height: 1.5rem;
 	}
 }
 .permissions-modification {
@@ -50,3 +82,7 @@ textarea {
 		width: 90%;
 	}
 }
+.pass-validation-text {
+	@extend .aside-label;
+	line-height: 1.6rem;
+}

src/app/features/administration/form/advanced-config/advanced-config.component.ts

@@ -18,6 +18,7 @@ export class AdvancedConfigComponent implements OnInit {
 	@Input()
 	public form: FormGroup;
 	domain_url: string;
+	display_regen_slug: boolean = false;
 	constructor(public pollService: PollService) {}
 
 	ngOnInit(): void {