From 0c8cb9248ed29abdf6aac9be36a815001cef2797 Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Tue, 1 Mar 2022 11:49:42 +0100
Subject: [PATCH] style on hours main

---
 .../steps/step-four/step-four.component.html  |  17 +--
 .../steps/step-four/step-four.component.scss  | 102 ++++++++++--------
 .../steps/step-four/step-four.component.ts    |   2 +-
 src/styles/dev-utilities/_helpers.scss        |  23 ++++
 4 files changed, 92 insertions(+), 52 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 685b3554..d31cfca2 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
@@ -3,7 +3,7 @@
 	<div class="min-height">
 		<app-errors-list [form]="pollService.form"></app-errors-list>
 
-		<div class="custom-day-time-slices" *ngIf="environment.creation_display_hour_per_day">
+		<div class="custom-day-time-slices" *ngIf="1">
 			<h1 class="title is-2">
 				{{ 'hours.title' | translate }}
 			</h1>
@@ -20,22 +20,23 @@
 						<label class="pull-left" for="dateChoices_{{ id }}">
 							{{ 'hours.element' | translate }} {{ id + 1 }}
 						</label>
+
+						<input class="input" type="text" id="dateChoices_{{ id }}" [(ngModel)]="timeSlice.literal" />
 						<button
 							[attr.aria-label]="'choices.delete' | translate"
-							class="button is-full has-no-border delete-hour pull-right"
+							class="has-no-border delete-hour"
 							(click)="dayChoice.timeSlices.splice(id, 1)"
 						>
-							{{ 'choices.delete' | translate }}
-							<img src="assets/icons/trash-2.svg" class="icon" />
+							<!--							{{ 'choices.delete' | translate }}-->
+							<img src="assets/icons/trash-2.svg" class="icon is-filtered-icon-primary" />
 						</button>
-						<input class="input" type="text" id="dateChoices_{{ id }}" [(ngModel)]="timeSlice.literal" />
 					</div>
 					<div class="add-time-choice">
 						<button
-							class="has-text-primary button has-no-border is-fullwidth has-text-left"
+							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" aria-hidden="true" src="assets/icons/plus-circle.svg" />
+							<!--							<img class="icon is-filtered-icon-primary" aria-hidden="true" src="assets/icons/plus-circle.svg" />-->
 							{{ 'hours.add' | translate }}
 						</button>
 					</div>
@@ -150,7 +151,7 @@
 	</ng-template>
 	<ng-template pTemplate="footer">
 		<div class="columns">
-			<div class="column has-no-padding">
+			<div class="column has-no-padding time-slice-list-of-a-day">
 				<button
 					class="button is-primary is-fullwidth pull-right has-text-white"
 					(click)="applyTimeSlicesToDateChoices()"
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 1eab7ce3..ed8ff2cc 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,48 +1,64 @@
 @import '../../../../../../styles/variables';
 @import '../../../../../../styles/dev-utilities/helpers';
 
-.time-slice-list-of-a-day {
-	label {
-		line-height: 2.25rem;
+.custom-day-time-slices {
+	.heading-day-choice {
+		font-size: 1.25rem;
+		line-height: 1.25rem;
+		color: $d-black;
+		font-weight: 700;
+		margin-bottom: 1rem;
+	}
+
+	.time-slice-list-of-a-day {
+		label {
+			line-height: 2.25rem;
+			margin-bottom: 0;
+		}
+
+		input {
+			width: calc(100% - 2rem);
+			margin-bottom: 1rem;
+		}
+
+		.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;
+		}
 	}
 }
-
-.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;
-	}
-}
-
-.heading-day-choice {
-	font-size: 1.25rem;
-	line-height: 1.25rem;
-	color: $d-black;
-	font-weight: 700;
-	margin-bottom: 1rem;
-}
-
-.add-time-choice {
-	margin-top: 0.5rem;
-
-	.button {
-		justify-content: inherit;
-		background: transparent;
-	}
-}
-.delete-hour {
-	background: transparent;
-}
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 dd224236..d19b361b 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 = false;
+	display_same_hours_dialog: boolean = true;
 
 	constructor(
 		private dateUtilitiesService: DateUtilitiesService,
diff --git a/src/styles/dev-utilities/_helpers.scss b/src/styles/dev-utilities/_helpers.scss
index 2a812097..5fcc7d3f 100644
--- a/src/styles/dev-utilities/_helpers.scss
+++ b/src/styles/dev-utilities/_helpers.scss
@@ -91,3 +91,26 @@
 .has-no-padding {
 	padding: 0;
 }
+
+.is-filtered-icon-primary {
+	filter: invert(48%) sepia(68%) saturate(6489%) hue-rotate(233deg) brightness(89%) contrast(81%);
+}
+.is-large-button {
+	width: 100%;
+	display: block;
+}
+
+.has-no-padd-left {
+	padding-left: 0;
+}
+.has-background-icon-left {
+	padding-left: 33px;
+}
+// icone bg
+.has-background-transparent {
+	background-color: transparent;
+}
+.has-background-plus {
+	background: url('/assets/icons/plus-circle.svg') no-repeat left center;
+	//background: $d-blue30 url('/assets/img/kind_classic.svg') no-repeat 19px center;
+}