colors on selector of input in date list

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

@@ -22,6 +22,7 @@
 		&.is-secondary {
 			color: $white !important;
 			background: $secondary_color !important;
+			border-color: $secondary_color !important;
 		}
 	}
 

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

@@ -38,9 +38,6 @@
 			</div>
 		</div>
 		<section class="same-time-slices">
-			<!--			<button class="is-outlined is-primary" (click)="toggleHasSeveralHours()">-->
-			<!--				Appliquer le même horaire / option à toutes les dates-->
-			<!--			</button>-->
 			<section class="same-time-slices" *ngIf="pollService.form.value.hasSeveralHours">
 				<h3 class="title is-3">
 					Choisissez les horaires ou options à appliquer à toutes les dates
@@ -61,12 +58,13 @@
 						</div>
 					</div>
 				</section>
-				<div *ngFor="let timeSlice of pollService.timeList; index as id" class="time-choice padded">
+				<div *ngFor="let timeSlice of pollService.timeList; index as id" class="time-choice">
 					<label for="timeList_{{ id }}"> Horaire / option {{ id + 1 }} </label>
 					<input
 						class="input is-fullwidth"
 						type="text"
 						id="timeList_{{ id }}"
+						(change)="applyTimeSlicesToDateChoices()"
 						[(ngModel)]="timeSlice.literal"
 					/>
 					<button class="button is-block" (click)="pollService.timeList.splice(id, 1)">
@@ -91,9 +89,6 @@
 					<i class="fa fa-plus" aria-hidden="true"></i>
 					{{ 'dates.add_time' | translate }}
 				</button>
-				<button class="is-primary button" (click)="applyTimeSlicesToDateChoices()">
-					Appliquer ces créneaux
-				</button>
 			</section>
 		</section>
 

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

@@ -1 +1,6 @@
 @import '../../../../../../styles/variables';
+@import '../../../../../../styles/dev-utilities/helpers';
+
+.time-choice {
+	@extend .rounded-block;
+}

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

@@ -92,6 +92,5 @@ export class StepFourComponent implements OnInit {
 		this.pollService.dateChoiceList.forEach((elem) => {
 			return (elem.timeSlices = timeSlicesToApply);
 		});
-		this.toastService.display(`time slices appliquées avec succès`);
 	}
 }

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

@@ -3,7 +3,7 @@
 	<app-errors-list [form]="pollService.form"></app-errors-list>
 	<!--	sélecteur d'interface-->
 	<button
-		class="button is-fullwidth"
+		class="button is-fullwidth date-input-selector is-secondary"
 		(click)="changeDateInputMode()"
 		[ngClass]="{ 'is-primary': !pollService.mode_calendar }"
 	>

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

@@ -10,3 +10,12 @@
 .text-date-list {
 	margin-top: 1em;
 }
+
+.is-secondary {
+	border-color: $primary-color;
+	color: $primary-color;
+	&:hover {
+		background: $primary_color;
+		color: $white;
+	}
+}

src/app/features/administration/nav-steps/nav-steps.component.html

@@ -3,7 +3,7 @@
 		<div class="column">
 			<button
 				*ngIf="display_previous_button"
-				class="button is-secondary is-fullwidth"
+				class="button button-previous is-secondary is-fullwidth"
 				[routerLink]="['/administration/step/' + previous_step_number]"
 			>
 				Précédent
@@ -12,7 +12,7 @@
 		<div class="column">
 			<button
 				*ngIf="display_next_button"
-				class="button is-fullwidth"
+				class="button button-next is-fullwidth"
 				[ngClass]="{ 'is-finish': is_finish_step, 'is-primary': !is_finish_step }"
 				[routerLink]="['/administration/step/' + next_step_number]"
 				(click)="runEndAction()"

src/app/features/administration/nav-steps/nav-steps.component.scss

@@ -0,0 +1,8 @@
+@import '../../../../styles/variables';
+
+.button {
+	&.is-secondary {
+		color: $secondary_color !important;
+		border-color: $secondary_color !important;
+	}
+}

src/app/features/administration/stepper/stepper.component.scss

@@ -33,7 +33,7 @@
 		height: 0.5em;
 		display: inline-block;
 		min-width: 1px;
-		background: $primary_color;
+		background: $d-blue-700;
 	}
 
 	.shortcut {

src/styles/dev-utilities/_helpers.scss

@@ -36,6 +36,10 @@
 .marged {
 	margin: 1em;
 }
+.marged-v {
+	margin-top: 1em;
+	margin-bottom: 1em;
+}
 .marged-auto {
 	margin: 0 auto;
 }
@@ -47,3 +51,28 @@
 	width: 100%;
 	z-index: 10;
 }
+
+.rounded-block {
+	border-radius: 0.25em;
+	background: $bg-grey;
+	padding: 1em;
+	margin-bottom: 0.5em;
+
+	hr {
+		margin: 0.5em -1em;
+		background: $rules;
+	}
+
+	.go-to-step,
+	.custom-action {
+		@extend .clickable;
+		color: $secondary_color;
+		padding: 1.5em;
+		border-radius: 0.25em;
+
+		&:hover {
+			background: $secondary_color;
+			color: $white;
+		}
+	}
+}

src/styles/partials/_datepicker.scss

@@ -9,7 +9,7 @@
 
 	.p-datepicker-title,
 	.p-datepicker-calendar thead tr th span {
-		color: $secondary_color !important;
+		color: $primary_color !important;
 		text-align: center;
 		width: 100%;
 		display: block;
@@ -17,8 +17,13 @@
 
 	p-button,
 	button {
-		border: solid 1px $secondary_color !important;
+		border: solid 1px $primary_color !important;
-		color: $secondary_color !important;
+		color: $primary_color !important;
+		&:hover {
+			color: $white !important;
+			background: $secondary_color !important;
+			border-color: $secondary_color !important;
+		}
 	}
 
 	.p-datepicker-buttonbar {
@@ -34,12 +39,12 @@
 	}
 
 	.p-datepicker-weeknumber span {
-		border-right: 1px solid $secondary_color;
+		border-right: 1px solid $primary_color;
 	}
 
 	.p-datepicker-today span {
 		font-weight: bold;
-		border: solid 3px $secondary_color !important;
+		border: solid 3px $primary_color !important;
 		background: $white;
 	}
 
@@ -50,11 +55,11 @@
 			width: 3.5em;
 			transition: all ease 0.5s;
 			background: $white;
-			border: solid 1px $secondary_color;
+			border: solid 1px $primary_color;
-			color: $secondary_color;
+			color: $primary_color;
 
 			&:hover {
-				background: $secondary_color !important;
+				background: $primary_color !important;
 				color: $white;
 				transition: all ease 0.2s;
 			}
@@ -66,7 +71,7 @@
 	}
 
 	.p-highlight {
-		background: $secondary_color !important;
+		background: $primary_color !important;
 		color: $white !important;
 	}
 

src/styles/partials/_forms.scss

@@ -330,31 +330,6 @@ mat-checkbox {
 	}
 }
 
-.rounded-block {
-	border-radius: 0.25em;
-	background: $bg-grey;
-	padding: 1em;
-	margin-bottom: 0.5em;
-
-	hr {
-		margin: 0.5em -1em;
-		background: $rules;
-	}
-
-	.go-to-step,
-	.custom-action {
-		@extend .clickable;
-		color: $secondary_color;
-		padding: 1.5em;
-		border-radius: 0.25em;
-
-		&:hover {
-			background: $secondary_color;
-			color: $white;
-		}
-	}
-}
-
 .block-resume {
 	@extend .rounded-block;
 }

src/styles/variables.scss

@@ -23,9 +23,10 @@ $beige-lighter: #eff0eb;
 
 // DINUM colors
 
-$d-primary: #3e3882; // bleu 800
+$d-primary-intense: #3e3882; // bleu 800
-$d-primary-intense: #6359cf; // bleu 600
+$d-blue-700: #4f47af; // bleu 700
-$d-grey: #e3e3ea; // bleu 300
+$d-primary: #6359cf; // bleu 600
+$d-grey: #e3e3ea;
 $d-blue30: #f6f5fd; // bleu 300
 $d-rule: #e2e0fa; // bleu 100
 $d-neutral: #767486;