style of small trash icon, placing negative margins, bg icon in css

src/app/core/components/header/header.component.scss

@@ -2,6 +2,7 @@
 .big-header {
 	height: $header-nav-height;
 	padding-top: 1rem;
+	padding-left: 1rem;
 	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.05);
 	position: fixed;
 	top: 0;

src/app/core/components/home/home.component.html

@@ -57,6 +57,19 @@
 					bouton fermeture popin <img class="icon fa" src="assets/icons/x_blue.svg" />
 				</button>
 				<app-language-selector></app-language-selector>
+
+				<div class="delete-date">
+					<button class="has-background-trash has-background-icon-left is-filtered-icon-primary">
+						{{ 'dates.remove' | translate }} N
+					</button>
+				</div>
+				<div class="add-time-choice">
+					<button
+						class="has-text-primary has-no-border is-large-button has-text-left has-background-transparent has-background-plus has-background-icon-left is-filtered-icon-primary"
+					>
+						{{ 'hours.add' | translate }}
+					</button>
+				</div>
 			</section>
 			<br />
 			<br />

src/app/core/models/configuration.model.ts

@@ -15,7 +15,7 @@ export class PollConfiguration {
 		public isOwnerNotifiedByEmailOnNewComment: boolean = false,
 		public isZeroKnoledge: boolean = true,
 		public hasSeveralHours: boolean = false,
-		public hasMaxCountOfAnswers: boolean = false,
+		public hasMaxCountOfAnswers: boolean = true,
 		public whoCanChangeAnswers: string = environment.poll.defaultConfig.whoCanChangeAnswers, // everybody, self, nobody (= just admin)
 		public visibility: string = environment.poll.defaultConfig.visibility, // visible to anyone with the link:
 		public voteChoices: string = environment.poll.defaultConfig.voteChoices, // possible answers to a vote timeSlice: only "yes", "yes, maybe, no": number = environment.poll.defaultConfig.maxCountOfAnswers,

src/app/core/services/poll.service.ts

@@ -37,7 +37,7 @@ export class PollService implements Resolve<Poll> {
 	public intervalDays: number = 1;
 	public intervalDaysDefault = 7;
 	public dateChoiceList: DateChoice[] = []; // sets of days as strings, config to set identical time for days in a special days poll
-	public timeList: TimeSlices[] = [{ literal: 'example' }]; // ranges of time expressed as strings
+	public timeList: TimeSlices[] = [{ literal: '' }]; // ranges of time expressed as strings
 	public previousRouteName: string = '/administration';
 	public nextRouteName: string = '/administration/step/2';
 	public step_current: number = 1;
@@ -197,7 +197,7 @@ export class PollService implements Resolve<Poll> {
 			isMaybeAnswerAvailable: [true, [Validators.required]],
 			isNoAnswerAvailable: [true, [Validators.required]],
 			allowComments: [true, [Validators.required]],
-			maxCountOfAnswers: [1, []],
+			maxCountOfAnswers: ['', []],
 			hasMaxCountOfAnswers: ['', [Validators.required]],
 			useVoterUniqueLink: [false, [Validators.required]],
 			voterEmailList: ['', []],

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

@@ -3,7 +3,7 @@
 		<h2 class="title is-3">
 			{{ 'advanced.limit_title' | translate }}
 		</h2>
-		<div *ngIf="form.value.hasMaxCountOfAnswers">
+		<div>
 			<label for="maxCountOfAnswers">
 				{{ 'advanced.limit_label' | translate }}
 			</label>

src/app/features/administration/form/date/list/day/day-list.component.html

@@ -28,10 +28,9 @@
 				<hr />
 				<div class="delete-date">
 					<button
-						class="has-no-outline has-no-background has-text-primary has-text-left"
+						class="has-background-trash has-background-icon-left is-filtered-icon-primary"
 						(click)="deleteChoiceField(id)"
 					>
-						<img class="icon" aria-hidden="true" src="assets/icons/trash-2.svg" />
 						{{ 'dates.remove' | translate }} {{ id + 1 }}
 					</button>
 				</div>

src/app/features/administration/form/date/list/day/day-list.component.scss

@@ -76,49 +76,6 @@
 		display: inline-block;
 	}
 
-	.delete-date {
-		color: $primary_color;
-		border: 0;
-		border-radius: 0.25rem;
-		border-top-left-radius: 0;
-		border-top-right-radius: 0;
-		background: transparent;
-
-		margin-right: 0;
-
-		button {
-			text-align: left !important;
-			width: 100%;
-			display: block;
-			padding-left: 1rem;
-			&:hover {
-				color: $white !important;
-			}
-		}
-
-		.fa,
-		.icon {
-			float: left;
-			color: $primary_color;
-			margin: 0;
-			margin-right: 8px;
-			height: 1.25rem;
-			// filter converter is here https://codepen.io/sosuke/pen/Pjoqqp
-			filter: invert(48%) sepia(68%) saturate(6489%) hue-rotate(233deg) brightness(89%) contrast(81%);
-		}
-
-		&:hover {
-			color: $white;
-			background-color: $primary_color;
-
-			.fa,
-			.icon {
-				color: $white;
-				filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(80deg) brightness(104%) contrast(105%);
-			}
-		}
-	}
-
 	.format-helper {
 		font-style: normal;
 		font-weight: normal;

src/app/features/administration/form/steps/step-four/step-four.component.html

@@ -22,11 +22,11 @@
 						<input class="input" type="text" id="dateChoices_{{ id }}" [(ngModel)]="timeSlice.literal" />
 						<button
 							[attr.aria-label]="'choices.delete' | translate"
-							class="has-no-border delete-hour"
+							class="has-no-border delete-hour has-background-trash has-background-icon-left is-filtered-icon-primary"
 							(click)="removeHour(dayChoice.timeSlices, id)"
 						>
 							<!--							{{ 'choices.delete' | translate }}-->
-							<img src="assets/icons/trash-2.svg" class="icon is-filtered-icon-primary" />
+							<!--							<img src="assets/icons/trash-2.svg" class="icon is-filtered-icon-primary" />-->
 						</button>
 					</div>
 					<div class="add-time-choice">
@@ -110,12 +110,9 @@
 					<input class="input" type="text" id="timeList_{{ id }}" [(ngModel)]="timeSlice.literal" />
 					<button
 						[attr.aria-label]="'choices.delete' | translate"
-						class="has-no-border delete-hour"
+						class="has-no-border delete-hour has-background-trash has-background-icon-left"
 						(click)="pollService.timeList.splice(id, 1)"
-					>
+					></button>
-						<!--							{{ 'choices.delete' | translate }}-->
-						<img src="assets/icons/trash-2.svg" class="icon is-filtered-icon-primary" />
-					</button>
 				</div>
 				<div class="title" *ngIf="environment.display_count_timelist && pollService.timeList.length">
 					<span class="count-dates">

src/app/features/administration/form/steps/step-four/step-four.component.scss

@@ -18,7 +18,7 @@
 	}
 
 	input {
-		width: calc(100% - 2rem);
+		width: calc(100% - 40px);
 		margin-bottom: 1rem;
 	}
 
@@ -43,22 +43,26 @@
 	}
 
 	.add-time-choice {
-		margin-top: 0.5rem;
+		margin-top: 0;
-
+		font-size: 16px;
-		.button {
+		line-height: 20px;
+		button {
 			justify-content: inherit;
-			background: transparent;
+			background-color: transparent;
+			background-position: 0;
+			padding: 0.5rem 0.5rem 0.5rem 2rem;
 		}
 	}
 
 	.delete-hour {
-		background: transparent;
+		background-position: center;
+		background-size: 20px 20px;
 		font-size: 0.8rem;
-		width: 2rem;
+		width: 40px;
 		padding: 0;
 		float: right;
-		margin-top: -3rem;
+		margin-top: 0;
-		margin-right: 0;
+		margin-right: -4px;
-		margin-bottom: 0;
+		height: 40px;
 	}
 }

src/app/features/administration/form/steps/step-two/step-two.component.html

@@ -16,7 +16,6 @@
 						}"
 						(click)="pollService.form.controls.isAboutDate.setValue(true)"
 					>
-						<!--						<img class="icon" src="assets/img/kind_date.svg" alt="icone cal" />-->
 						<label for="isAboutDate_true">
 							{{ 'creation.kind.date' | translate }}
 						</label>
@@ -30,8 +29,6 @@
 						}"
 						(click)="pollService.form.controls.isAboutDate.setValue(false)"
 					>
-						<!--						<img class="icon" src="assets/img/kind_classic.svg" alt="icone chart" />-->
-
 						<label for="isAboutDate_false">
 							{{ 'creation.kind.classic' | translate }}
 						</label>

src/app/features/administration/form/steps/step-two/step-two.component.scss

@@ -21,6 +21,11 @@
 			font-weight: 700;
 			font-size: 14px;
 			line-height: 16px;
+
+			float: left;
+			display: inline;
+			margin-top: -0.5rem;
+			width: 80%;
 		}
 
 		img {
@@ -35,6 +40,9 @@
 		input[type='radio'] {
 			width: 24px;
 			height: 24px;
+			display: inline-block;
+			margin-top: -0.7rem;
+			float: right;
 		}
 
 		&.is-selected {

src/app/shared/components/selectors/language-selector/language-selector.component.ts

@@ -16,7 +16,7 @@ export class LanguageSelectorComponent implements OnInit {
 	public availableLanguages: any = ['FR', 'EN', 'ES'];
 	language: string;
 	language_to_apply: string;
-	display_lang_dialog: boolean = true;
+	display_lang_dialog: boolean = false;
 	display_dynamic_langs: boolean = false;
 
 	availableLanguagesStatic: any = [

src/styles/dev-utilities/_helpers.scss

@@ -98,15 +98,17 @@
 	padding-left: 0;
 }
 .has-background-icon-left {
-	padding-left: 33px;
+	padding-left: 44px;
 }
 // icone bg
 .has-background-transparent {
 	background-color: transparent;
 }
 .has-background-plus {
-	background: url('/assets/icons/plus-circle.svg') no-repeat left center;
+	background: url('/assets/icons/plus-circle.svg') no-repeat 16px center;
-	//background: $d-blue30 url('/assets/img/kind_classic.svg') no-repeat 19px center;
+}
+.has-background-trash {
+	background: url('/assets/icons/trash-2.svg') no-repeat 16px center;
 }
 .is-block {
 	display: block;

src/styles/partials/_buttons.scss

@@ -4,6 +4,9 @@
 		outline-style: solid;
 		outline-offset: 0.15rem;
 	}
+	&:active {
+		outline: transparent;
+	}
 }
 
 button,
@@ -14,6 +17,7 @@ button,
 .btn--full {
 	@extend .is-block;
 }
+
 .button,
 button,
 a {
@@ -24,6 +28,7 @@ a {
 	box-sizing: border-box;
 	border-radius: 4px;
 	cursor: pointer;
+
 	&.is-fullwidth {
 		display: block;
 		text-align: center;
@@ -36,10 +41,12 @@ a {
 		color: $white;
 	}
 }
+
 .is-final {
 	background: #128149;
 	border-color: #128149;
 	color: #fff;
+
 	&:hover {
 		background: #07532d;
 		border-color: #07532d;
@@ -50,12 +57,15 @@ a {
 	background: #6359cf;
 	color: #fff;
 	border-color: #6359cf;
+
 	&.is-disabled {
 		background: #767486;
 	}
+
 	&:hover {
 		background-color: #3e3882;
 		border-color: #3e3882;
+
 		&.is-disabled {
 			background: #767486;
 			border-color: #6359cf;
@@ -72,14 +82,17 @@ a {
 	background: #fff;
 	color: #6359cf;
 	border-color: #6359cf;
+
 	&.is-disabled {
 		color: #767486;
 		border-color: #767486;
 	}
+
 	&:hover {
 		background-color: #f6f5fb;
 		border-color: #3e3882;
 		color: #3e3882;
+
 		&.is-disabled {
 			color: #767486;
 			border-color: #767486;
@@ -105,6 +118,7 @@ a {
 		color: #3e3882;
 	}
 }
+
 .is-closing-popup {
 	background: #fff;
 	color: #6359cf !important;
@@ -122,8 +136,7 @@ a {
 }
 
 .buttons-demo button {
-	float: left;
+	margin-right: 1rem;
-	clear: both;
 	margin-bottom: 1rem;
 }
 
@@ -134,9 +147,11 @@ a {
 .is-warning {
 	@extend .is-warning;
 }
+
 .is-info {
 	background-color: #94bae2;
 }
+
 .btn--info {
 	@extend .is-info;
 }
@@ -144,6 +159,42 @@ a {
 .is-danger {
 	background-color: #e08181;
 }
+
 .btn--danger {
 	@extend .is-danger;
 }
+
+.delete-date {
+	border: 0;
+	border-radius: 0.25rem;
+	border-top-left-radius: 0;
+	border-top-right-radius: 0;
+	background: #f6f5fd;
+	cursor: pointer;
+	margin-right: 0;
+
+	&:hover {
+		color: $white !important;
+		//background-color: $primary_color;
+		button {
+			color: $white !important;
+		}
+	}
+
+	button {
+		color: $primary_color;
+		text-align: left !important;
+		width: 100%;
+		display: block;
+		padding: 1rem;
+		padding-left: 44px;
+		font-weight: 400;
+		font-size: 16px;
+		line-height: 20px;
+		@extend .outlined;
+
+		&:hover {
+			color: $white !important;
+		}
+	}
+}