From c3433440d75e39b4435111c5257ef69d82342cc2 Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Tue, 1 Mar 2022 12:02:18 +0100
Subject: [PATCH] unify labels

---
 .../steps/step-four/step-four.component.html  | 35 +++----
 .../steps/step-four/step-four.component.scss  | 92 +++++++++----------
 .../steps/step-four/step-four.component.ts    |  2 +-
 src/styles/dev-utilities/_helpers.scss        |  2 +-
 4 files changed, 62 insertions(+), 69 deletions(-)

diff --git a/src/app/features/administration/form/steps/step-four/step-four.component.html b/src/app/features/administration/form/steps/step-four/step-four.component.html
index bbb2dc16..abdf5572 100644
--- a/src/app/features/administration/form/steps/step-four/step-four.component.html
+++ b/src/app/features/administration/form/steps/step-four/step-four.component.html
@@ -17,9 +17,7 @@
 
 				<section class="time-slice-list-of-a-day">
 					<div *ngFor="let timeSlice of dayChoice.timeSlices; index as id" class="time-choice">
-						<label class="pull-left" for="dateChoices_{{ id }}">
-							{{ 'hours.element' | translate }} {{ id + 1 }}
-						</label>
+						<label for="dateChoices_{{ id }}"> {{ 'hours.element' | translate }} {{ id + 1 }} </label>
 
 						<input class="input" type="text" id="dateChoices_{{ id }}" [(ngModel)]="timeSlice.literal" />
 						<button
@@ -36,7 +34,6 @@
 							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"
 							(click)="addChoiceForDay(dayChoice)"
 						>
-							<!--							<img class="icon is-filtered-icon-primary" aria-hidden="true" src="assets/icons/plus-circle.svg" />-->
 							{{ 'hours.add' | translate }}
 						</button>
 					</div>
@@ -110,24 +107,20 @@
 						</div>
 					</div>
 				</section>
-				<div *ngFor="let timeSlice of pollService.timeList; index as id" class="time-choice">
+				<div
+					*ngFor="let timeSlice of pollService.timeList; index as id"
+					class="time-choice time-slice-list-of-a-day"
+				>
 					<label for="timeList_{{ id }}"> {{ 'hours.element' | translate }} {{ id + 1 }} </label>
-
-					<div class="columns">
-						<div class="column">
-							<input
-								class="input is-fullwidth"
-								type="text"
-								id="timeList_{{ id }}"
-								[(ngModel)]="timeSlice.literal"
-							/>
-						</div>
-						<div class="column is-narrow">
-							<button class="button is-block has-no-border" (click)="pollService.timeList.splice(id, 1)">
-								<img src="assets/icons/trash-2.svg" class="icon" />
-							</button>
-						</div>
-					</div>
+					<input class="input" type="text" id="timeList_{{ id }}" [(ngModel)]="timeSlice.literal" />
+					<button
+						[attr.aria-label]="'choices.delete' | translate"
+						class="has-no-border delete-hour"
+						(click)="pollService.timeList.splice(id, 1)"
+					>
+						<!--							{{ '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">
diff --git a/src/app/features/administration/form/steps/step-four/step-four.component.scss b/src/app/features/administration/form/steps/step-four/step-four.component.scss
index ed8ff2cc..b8bfe968 100644
--- a/src/app/features/administration/form/steps/step-four/step-four.component.scss
+++ b/src/app/features/administration/form/steps/step-four/step-four.component.scss
@@ -9,56 +9,56 @@
 		font-weight: 700;
 		margin-bottom: 1rem;
 	}
+}
 
-	.time-slice-list-of-a-day {
-		label {
-			line-height: 2.25rem;
-			margin-bottom: 0;
-		}
+.time-slice-list-of-a-day {
+	label {
+		line-height: 2.25rem;
+		margin-bottom: 0;
+	}
 
-		input {
-			width: calc(100% - 2rem);
-			margin-bottom: 1rem;
-		}
+	input {
+		width: calc(100% - 2rem);
+		margin-bottom: 1rem;
+	}
 
-		.button {
-			color: $primary_color;
+	.button {
+		color: $primary_color;
 
-			.icon {
-				margin-right: 1rem;
-				fill: $primary_color;
-			}
-		}
-
-		#close_dialog {
-			border: 0;
-			color: $primary !important;
-
-			.icon {
-				margin-left: 1rem;
-				height: 1.5em;
-				width: 1.5em;
-			}
-		}
-
-		.add-time-choice {
-			margin-top: 0.5rem;
-
-			.button {
-				justify-content: inherit;
-				background: transparent;
-			}
-		}
-
-		.delete-hour {
-			background: transparent;
-			font-size: 0.8rem;
-			width: 2rem;
-			padding: 0;
-			float: right;
-			margin-top: -3rem;
-			margin-right: 0;
-			margin-bottom: 0;
+		.icon {
+			margin-right: 1rem;
+			fill: $primary_color;
 		}
 	}
+
+	#close_dialog {
+		border: 0;
+		color: $primary !important;
+
+		.icon {
+			margin-left: 1rem;
+			height: 1.5em;
+			width: 1.5em;
+		}
+	}
+
+	.add-time-choice {
+		margin-top: 0.5rem;
+
+		.button {
+			justify-content: inherit;
+			background: transparent;
+		}
+	}
+
+	.delete-hour {
+		background: transparent;
+		font-size: 0.8rem;
+		width: 2rem;
+		padding: 0;
+		float: right;
+		margin-top: -3rem;
+		margin-right: 0;
+		margin-bottom: 0;
+	}
 }
diff --git a/src/app/features/administration/form/steps/step-four/step-four.component.ts b/src/app/features/administration/form/steps/step-four/step-four.component.ts
index d19b361b..dd224236 100644
--- a/src/app/features/administration/form/steps/step-four/step-four.component.ts
+++ b/src/app/features/administration/form/steps/step-four/step-four.component.ts
@@ -22,7 +22,7 @@ export class StepFourComponent implements OnInit {
 	form: any;
 	showSameTimeSlices: boolean = false;
 	timeSlicesProposals: TimeSlices[] = timeSlicesProposals;
-	display_same_hours_dialog: boolean = true;
+	display_same_hours_dialog: boolean = false;
 
 	constructor(
 		private dateUtilitiesService: DateUtilitiesService,
diff --git a/src/styles/dev-utilities/_helpers.scss b/src/styles/dev-utilities/_helpers.scss
index 5fcc7d3f..1289cdc4 100644
--- a/src/styles/dev-utilities/_helpers.scss
+++ b/src/styles/dev-utilities/_helpers.scss
@@ -60,7 +60,7 @@
 	border-radius: 0.25em;
 	background: $d-blue30;
 	padding: 1em;
-	margin-bottom: 0.5em;
+	margin-bottom: 1rem;
 
 	hr {
 		margin: 0.5em -1em;