From e4ebebf0b629720bc83590a3954667081f0cc9ac Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Thu, 9 Dec 2021 11:48:42 +0100
Subject: [PATCH] remove border for cal, place label for text date input

---
 .../date/list/day/day-list.component.html     |  6 +--
 .../date/list/day/day-list.component.scss     | 14 +++++-
 .../step-three/step-three.component.html      |  6 +--
 src/styles/partials/_datepicker.scss          | 44 +++++++++++++++++--
 src/styles/variables.scss                     |  2 +-
 5 files changed, 57 insertions(+), 15 deletions(-)

diff --git a/src/app/features/administration/form/date/list/day/day-list.component.html b/src/app/features/administration/form/date/list/day/day-list.component.html
index f4c9176b..3a678595 100644
--- a/src/app/features/administration/form/date/list/day/day-list.component.html
+++ b/src/app/features/administration/form/date/list/day/day-list.component.html
@@ -20,12 +20,10 @@
 				<!--				</span>-->
 				<div class="columns">
 					<div class="column">
-						<label for="dateChoices_{{ id }}">
+						<label class="pull-left" for="dateChoices_{{ id }}">
 							Date {{ id + 1 }} - {{ choice.date_object | date: 'E':'Europe/Paris':'fr_FR' }}
 						</label>
-					</div>
-					<div class="column has-text-right">
-						<span class="format-helper">JJ/MM/AAAA</span>
+						<span class="format-helper pull-right">JJ/MM/AAAA</span>
 					</div>
 				</div>
 
diff --git a/src/app/features/administration/form/date/list/day/day-list.component.scss b/src/app/features/administration/form/date/list/day/day-list.component.scss
index f65f5a6b..d8ca87b9 100644
--- a/src/app/features/administration/form/date/list/day/day-list.component.scss
+++ b/src/app/features/administration/form/date/list/day/day-list.component.scss
@@ -63,8 +63,20 @@
 
 .delete-date {
 	color: $secondary_color !important;
-
+	border: 0;
+	background: transparent;
 	.fa {
 		color: $secondary_color !important;
 	}
+	&:hover {
+		color: $white;
+		background-color: $primary_color;
+	}
+}
+
+.format-helper {
+	font-style: normal;
+	font-weight: normal;
+	font-size: 14px;
+	line-height: 16px;
 }
diff --git a/src/app/features/administration/form/steps/step-three/step-three.component.html b/src/app/features/administration/form/steps/step-three/step-three.component.html
index 5d27f19d..589c0525 100644
--- a/src/app/features/administration/form/steps/step-three/step-three.component.html
+++ b/src/app/features/administration/form/steps/step-three/step-three.component.html
@@ -2,11 +2,7 @@
 	<app-stepper [step_current]="3" [step_max]="pollService.step_max"></app-stepper>
 	<app-errors-list [form]="pollService.form"></app-errors-list>
 	<!--	sélecteur d'interface-->
-	<button
-		class="button is-fullwidth date-input-selector is-secondary"
-		(click)="changeDateInputMode()"
-		[ngClass]="{ 'is-primary': !pollService.mode_calendar }"
-	>
+	<button class="button is-fullwidth date-input-selector is-secondary" (click)="changeDateInputMode()">
 		<span *ngIf="pollService.mode_calendar"> <i class="fa fa-pencil"></i> Saisir les dates manuellement </span>
 		<span *ngIf="!pollService.mode_calendar">
 			<i class="fa fa-calendar-o"></i> Saisir les dates dans le calendrier
diff --git a/src/styles/partials/_datepicker.scss b/src/styles/partials/_datepicker.scss
index e05fbef9..41775286 100644
--- a/src/styles/partials/_datepicker.scss
+++ b/src/styles/partials/_datepicker.scss
@@ -3,9 +3,26 @@
 	text-align: center;
 }
 
+p-calendar,
+.p-calendar {
+	display: block !important;
+	width: 100%;
+	max-width: 90vw;
+}
+
 .p-datepicker {
 	padding: 0.5em;
 	margin: 1em auto;
+	border: 0;
+
+	tbody,
+	thead,
+	tfoot tr,
+	td,
+	th {
+		border: 0 !important;
+		text-align: center;
+	}
 
 	.p-datepicker-title,
 	.p-datepicker-calendar thead tr th span {
@@ -17,8 +34,8 @@
 
 	p-button,
 	button {
-		border: solid 1px $primary_color !important;
 		color: $primary_color !important;
+
 		&:hover {
 			color: $white !important;
 			background: $secondary_color !important;
@@ -30,7 +47,7 @@
 		margin-top: 0.5em;
 
 		button {
-			min-width: 15em;
+			min-width: 5em;
 		}
 	}
 
@@ -48,11 +65,20 @@
 		background: $white;
 	}
 
+	$cell-size: 30px;
+
 	.p-datepicker-calendar {
+		td {
+			width: $cell-size;
+			padding: 0.25rem;
+		}
+
 		td span,
 		.p-ripple {
-			padding: 1.5em 0.5em;
-			width: 3.5em;
+			margin: 0;
+			padding: 0.5em;
+			width: $cell-size;
+			height: $cell-size;
 			transition: all ease 0.5s;
 			background: $white;
 			border: solid 1px $primary_color;
@@ -93,3 +119,13 @@
 		}
 	}
 }
+
+.p-datepicker-buttonbar {
+	.p-button {
+		width: 50%;
+	}
+}
+.p-datepicker-header,
+.p-datepicker .p-datepicker-buttonbar {
+	border: 0 !important;
+}
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 1a7ded20..c085e8f7 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -46,7 +46,7 @@ $success_color: $d-success-text;
 $primary_color: $d-primary;
 $primary: $d-primary;
 $secondary_color: $d-primary-intense;
-$bg-grey: $d-grey;
+$bg-grey: $d-blue30;
 $font_color: $black;
 $logo_color: $d-primary;
 $logo_color_2: $d-primary-intense;