From 61c5d2ca9a8860b81a55d5503efe72c4ade1ee2c Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Fri, 4 Feb 2022 14:55:20 +0100
Subject: [PATCH] :art: style on step 4

---
 .../steps/step-four/step-four.component.html  | 28 +++++++++++++------
 .../steps/step-four/step-four.component.scss  | 12 ++++++++
 2 files changed, 31 insertions(+), 9 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 d7d68ee5..037b8352 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
@@ -18,15 +18,25 @@
 				<section class="time-slice-list-of-a-day">
 					<div *ngFor="let timeSlice of dayChoice.timeSlices; index as id" class="time-choice padded">
 						<label for="dateChoices_{{ id }}"> {{ 'hours.element' | translate }} {{ id + 1 }} </label>
-						<input
-							class="input is-fullwidth"
-							type="text"
-							id="dateChoices_{{ id }}"
-							[(ngModel)]="timeSlice.literal"
-						/>
-						<button class="button input is-full" (click)="pollService.timeList.splice(id, 1)">
-							<i class="fa fa-trash"></i> {{ 'choices.delete' | translate }}
-						</button>
+						<div class="columns">
+							<div class="column">
+								<input
+									class="input is-fullwidth"
+									type="text"
+									id="dateChoices_{{ id }}"
+									[(ngModel)]="timeSlice.literal"
+								/>
+							</div>
+							<div class="column is-narrow">
+								<button
+									class="button is-full has-no-border delete-hour"
+									(click)="pollService.timeList.splice(id, 1)"
+								>
+									<i class="fa fa-trash"></i>
+									<!--							{{ 'choices.delete' | translate }}-->
+								</button>
+							</div>
+						</div>
 					</div>
 					<div class="add-time-choice">
 						<button
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 820e77fd..69dc1670 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
@@ -1,6 +1,13 @@
 @import '../../../../../../styles/variables';
 @import '../../../../../../styles/dev-utilities/helpers';
 
+.time-slice-list-of-a-day {
+	.column {
+		min-height: 2rem;
+		max-height: 3rem;
+	}
+}
+
 .button {
 	color: $primary_color;
 
@@ -30,8 +37,13 @@
 }
 
 .add-time-choice {
+	margin-top: 0.5rem;
+
 	.button {
 		justify-content: inherit;
 		background: transparent;
 	}
 }
+.delete-hour {
+	background: transparent;
+}