step 3 delete buttons

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

@@ -37,7 +37,7 @@
 				/>
 				<hr />
 				<div class="button delete-date is-block" (click)="dateChoices.splice(id, 1)">
-					<img class="icon" aria-hidden="true" src="assets/icons/trash.csv" />
+					<img class="icon" aria-hidden="true" src="assets/icons/trash.svg" />
 					Supprimer la date
 				</div>
 				<div *ngIf="hasSeveralHours" class="several-times">

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

@@ -1,84 +1,108 @@
 @import '../../../../../../../styles/variables';
+
 .day-list-container {
 	padding-bottom: 2rem;
-}
-.day-weekend {
-	background: #dccfed;
-}
 
-.button {
+	.day-weekend {
-	min-width: 9ch;
+		background: #dccfed;
-}
-
-.icon {
-	margin-right: 1ch;
-	margin-left: 1ch;
-	display: inline-block;
-}
-
-.several-times {
-	padding-left: 2em;
-	width: 96.5%;
-}
-
-.date-choice {
-	margin-bottom: 0.5em;
-	border-radius: 0.25em;
-	background: $bg-grey;
-
-	.columns {
-		margin-bottom: 0;
 	}
-	label {
+
-		font-weight: 600;
-	}
-	input,
 	.button {
-		width: 100%;
+		min-width: 9ch;
-		display: block;
 	}
-	hr {
+
-		margin: 0.5em -1em;
+	.icon {
-		background: $rules;
+		margin-right: 1ch;
+		margin-left: 1ch;
+		display: inline-block;
 	}
-	//&.day-weekend {
-	//	background: mix($legend_color_2, $grey-lighter);
-	//}
 
-	//&:nth-child(odd) {
+	.several-times {
-	//	background: $grey-lighter;
+		padding-left: 2em;
-	//
+		width: 96.5%;
-	//	&.day-weekend {
-	//		background: mix($d-neutral, $grey-lighter);
-	//	}
-	//}
-}
-
-.date-choice-item {
-	width: 75%;
-}
-
-.button .fa {
-	margin-left: 1ch;
-	display: inline-block;
-}
-
-.delete-date {
-	color: $secondary_color !important;
-	border: 0;
-	background: transparent;
-	.fa {
-		color: $secondary_color !important;
 	}
-	&:hover {
+
-		color: $white;
+	.date-choice {
-		background-color: $primary_color;
+		margin-bottom: 0.5em;
+		border-radius: 0.25em;
+		background: $bg-grey;
+
+		.columns {
+			margin-bottom: 0;
+		}
+
+		label {
+			font-weight: 600;
+		}
+
+		input {
+			margin-bottom: 1rem;
+		}
+		input,
+		.button {
+			width: 100%;
+			display: block;
+		}
+
+		hr {
+			margin: 0.5em -1em;
+			background: $rules;
+		}
+
+		//&.day-weekend {
+		//	background: mix($legend_color_2, $grey-lighter);
+		//}
+
+		//&:nth-child(odd) {
+		//	background: $grey-lighter;
+		//
+		//	&.day-weekend {
+		//		background: mix($d-neutral, $grey-lighter);
+		//	}
+		//}
+	}
+
+	.date-choice-item {
+		width: 75%;
+	}
+
+	.button .fa {
+		margin-left: 1ch;
+		display: inline-block;
+	}
+
+	.delete-date {
+		color: $primary_color;
+		border: 0;
+		background: transparent;
+		text-align: left;
+
+		.fa,
+		.icon {
+			float: left;
+			color: $primary_color;
+			margin-right: 1rem;
+			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;
+		font-size: 14px;
+		line-height: 16px;
 	}
 }
-
-.format-helper {
-	font-style: normal;
-	font-weight: normal;
-	font-size: 14px;
-	line-height: 16px;
-}

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

@@ -27,7 +27,7 @@
 	<div class="text-date-list" *ngIf="!pollService.mode_calendar">
 		<app-day-list
 			[form]="pollService.form"
-			[hasSeveralHours]="environment.enable_several_hours && pollService.form.value.hasSeveralHours"
+			[hasSeveralHours]="environment.creation_display_hour_per_day && pollService.form.value.hasSeveralHours"
 		></app-day-list>
 	</div>
 </div>

src/environments/environment.ts

@@ -38,7 +38,6 @@ export const environment = {
 	production: false,
 	showDemoWarning: false,
 	showStepperShortcuts: false,
-	enable_several_hours: false,
 
 	api: endpoints,
 	poll: poll_conf,

src/styles/partials/_forms.scss

@@ -305,6 +305,9 @@ mat-checkbox {
 	* {
 		max-width: $main-column-width-inner;
 	}
+	.icon {
+		width: 1rem;
+	}
 }
 
 // resume de la création de sondage