From c4dee3eaad1e0ff3d06b5ee322747515a5f9317e Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Wed, 2 Feb 2022 16:28:52 +0100
Subject: [PATCH] center column, step 2 buttons and text

---
 .../steps/step-two/step-two.component.html    | 62 +++++++++----------
 .../steps/step-two/step-two.component.scss    | 54 +++++++++++-----
 .../nav-steps/nav-steps.component.html        |  2 +-
 .../nav-steps/nav-steps.component.scss        |  8 +++
 src/assets/i18n/EN.json                       | 10 ++-
 src/assets/i18n/FR.json                       |  4 +-
 src/styles/partials/_forms.scss               |  6 +-
 src/styles/partials/_typo.scss                |  2 +
 src/styles/partials/global.scss               |  6 +-
 src/styles/variables.scss                     |  5 +-
 10 files changed, 94 insertions(+), 65 deletions(-)

diff --git a/src/app/features/administration/form/steps/step-two/step-two.component.html b/src/app/features/administration/form/steps/step-two/step-two.component.html
index 9798052a..91770748 100644
--- a/src/app/features/administration/form/steps/step-two/step-two.component.html
+++ b/src/app/features/administration/form/steps/step-two/step-two.component.html
@@ -3,40 +3,38 @@
 	<form action="#" [formGroup]="pollService.form">
 		<div class="min-height">
 			<app-errors-list [form]="pollService.form"></app-errors-list>
-			<h2 class="title is-2">
+			<h3 class="title is-3">
 				{{ 'creation.want' | translate }}
-			</h2>
-			<div class="container">
-				<div class="kind-of-poll columns">
-					<div class="column">
-						<div
-							class="button input-radio is-fullwidth"
-							[ngClass]="{
-								'is-selected': pollService.form.value.isAboutDate != false
-							}"
-							(click)="pollService.form.controls.isAboutDate.setValue(true)"
-						>
-							<i class="fa fa-calendar"></i>
-							<label for="isAboutDate_true">
-								{{ 'creation.kind.date' | translate }}
-							</label>
-							<input type="radio" formControlName="isAboutDate" [value]="true" id="isAboutDate_true" />
-						</div>
+			</h3>
+			<div class=" ">
+				<div class="kind-of-poll">
+					<div
+						class="button input-radio is-fullwidth"
+						[ngClass]="{
+							'is-selected': pollService.form.value.isAboutDate != false
+						}"
+						(click)="pollService.form.controls.isAboutDate.setValue(true)"
+					>
+						<img class="icon" src="assets/icons/calendar.svg" alt="icone cal" />
+						<label for="isAboutDate_true">
+							{{ 'creation.kind.date' | translate }}
+						</label>
+						<input type="radio" formControlName="isAboutDate" [value]="true" id="isAboutDate_true" />
 					</div>
-					<div class="column">
-						<div
-							class="button input-radio is-fullwidth"
-							[ngClass]="{
-								'is-selected': !pollService.form.controls.isAboutDate.value != false
-							}"
-							(click)="pollService.form.controls.isAboutDate.setValue(false)"
-						>
-							<i class="fa fa-list-ul"></i>
-							<label for="isAboutDate_false">
-								{{ 'creation.kind.classic' | translate }}
-							</label>
-							<input type="radio" formControlName="isAboutDate" [value]="false" id="isAboutDate_false" />
-						</div>
+
+					<div
+						class="button input-radio is-fullwidth"
+						[ngClass]="{
+							'is-selected': !pollService.form.controls.isAboutDate.value != false
+						}"
+						(click)="pollService.form.controls.isAboutDate.setValue(false)"
+					>
+						<img class="icon" src="assets/icons/bar-chart-2.svg" alt="icone chart" />
+
+						<label for="isAboutDate_false">
+							{{ 'creation.kind.classic' | translate }}
+						</label>
+						<input type="radio" formControlName="isAboutDate" [value]="false" id="isAboutDate_false" />
 					</div>
 				</div>
 			</div>
diff --git a/src/app/features/administration/form/steps/step-two/step-two.component.scss b/src/app/features/administration/form/steps/step-two/step-two.component.scss
index 96441fbb..bdcfddf9 100644
--- a/src/app/features/administration/form/steps/step-two/step-two.component.scss
+++ b/src/app/features/administration/form/steps/step-two/step-two.component.scss
@@ -1,31 +1,53 @@
 @import '../../../../../../styles/variables';
-
+.poll-kind {
+	.title {
+		margin-bottom: 32px;
+		font-size: 32px;
+		line-height: 36.8px;
+	}
+}
 .kind-of-poll {
-	margin-top: 5em;
 	min-height: 30vh;
+
 	.fa {
 		margin-right: 1em;
 	}
+
 	.button {
-		background: $d-grey;
+		background: $d-blue30;
 		border: solid white 1px;
+		border-radius: 8px;
 		transition: background-color ease 1.5s;
 		color: $font-color;
-		&.is-selected {
-			background: $secondary_color;
-			border: solid $primary-color 1px;
-			color: $white;
-			label {
-				color: $white;
-			}
-			.fa {
-				color: $white;
-			}
+		margin-bottom: 0.85rem;
+		padding: 1rem;
+
+		label {
+			font-weight: 700;
+			font-size: 14px;
+			line-height: 16px;
 		}
-		&:hover {
-			background: $secondary_color;
+
+		img {
+			margin-right: 11px;
+			margin-left: 0;
+			margin-top: -2px;
+			height: 18px;
+			width: 18px;
+			line-height: 18px;
+		}
+
+		input[type='radio'] {
+			width: 24px;
+			height: 24px;
+		}
+
+		&.is-selected {
+			border: solid $primary-color 1px;
+		}
+
+		&:hover {
 			border: solid $primary-color 1px;
-			color: $white;
 			transition: background-color ease 0.25s;
 		}
 	}
diff --git a/src/app/features/administration/nav-steps/nav-steps.component.html b/src/app/features/administration/nav-steps/nav-steps.component.html
index d6b66a5e..9e75bd78 100644
--- a/src/app/features/administration/nav-steps/nav-steps.component.html
+++ b/src/app/features/administration/nav-steps/nav-steps.component.html
@@ -2,7 +2,7 @@
 	<div class="contained-in-main-column">
 		<button
 			*ngIf="display_previous_button"
-			class="button-previous is-secondary pull-left"
+			class="button-previous is-secondary"
 			[routerLink]="['/administration/step/' + previous_step_number]"
 		>
 			{{ 'nav.previous' | translate }}
diff --git a/src/app/features/administration/nav-steps/nav-steps.component.scss b/src/app/features/administration/nav-steps/nav-steps.component.scss
index 45a533cd..1afc1907 100644
--- a/src/app/features/administration/nav-steps/nav-steps.component.scss
+++ b/src/app/features/administration/nav-steps/nav-steps.component.scss
@@ -1 +1,9 @@
 @import '../../../../styles/variables';
+
+.bottom-step-buttons {
+	width: 100vw;
+
+	.button-previous {
+		margin-left: 0;
+	}
+}
diff --git a/src/assets/i18n/EN.json b/src/assets/i18n/EN.json
index f9657ec5..7d9d2d20 100644
--- a/src/assets/i18n/EN.json
+++ b/src/assets/i18n/EN.json
@@ -37,8 +37,8 @@
 		"want": "I want to create a poll",
 		"advanced": "More options",
 		"kind": {
-			"classic": "classic",
-			"date": "special dates"
+			"classic": "Classic poll",
+			"date": "Date poll"
 		},
 		"choose_title": "Provide a name for your poll",
 		"choose_title_placeholder": "title",
@@ -48,6 +48,12 @@
 		"description_placeholder": "description",
 		"description_constraint": "max chars"
 	},
+	"popup": {
+		"cancel": {
+			"title": "Vous allez annuler votre sondage",
+			"main": "Si vous annulez votre sondage vous perdrez toutes les informations saisies jusqu'à maintenant.\nSouhaitez-vous vraiment annuler?"
+		}
+	},
 	"dates": {
 		"title": "Config especially for the dates",
 		"hours_different": "I want to put",
diff --git a/src/assets/i18n/FR.json b/src/assets/i18n/FR.json
index e65b3519..db7b902c 100644
--- a/src/assets/i18n/FR.json
+++ b/src/assets/i18n/FR.json
@@ -44,8 +44,8 @@
 		"dialog_content": "Souhaitez-vous vraiment quitter le sondage ? Toutes les informations seront effacées.",
 		"advanced": "Options avancées",
 		"kind": {
-			"classic": "Propositions",
-			"date": "Date"
+			"classic": "Sondage classique",
+			"date": "Sondage date"
 		},
 		"choose_title": "Renseignez un nom pour votre sondage",
 		"choose_title_label": "Nom de votre sondage (obligatoire)",
diff --git a/src/styles/partials/_forms.scss b/src/styles/partials/_forms.scss
index a7bec772..c7379064 100644
--- a/src/styles/partials/_forms.scss
+++ b/src/styles/partials/_forms.scss
@@ -290,7 +290,7 @@ mat-checkbox {
 .step {
 	max-width: $main-column-width;
 	margin: 0 auto;
-	padding: 9rem 0;
+	padding: 7rem 0;
 	box-sizing: border-box;
 	overflow: auto;
 	@extend .top-padding-nav;
@@ -307,10 +307,6 @@ mat-checkbox {
 		font-size: 1rem;
 		line-height: 1.25rem;
 	}
-	p,
-	* {
-		max-width: $main-column-width-inner;
-	}
 	.icon {
 		width: 1rem;
 	}
diff --git a/src/styles/partials/_typo.scss b/src/styles/partials/_typo.scss
index 50339269..a9b1e128 100644
--- a/src/styles/partials/_typo.scss
+++ b/src/styles/partials/_typo.scss
@@ -28,6 +28,8 @@ body {
 
 	h3 {
 		font-family: $title_font;
+		font-size: 32px;
+		line-height: 36.8px;
 	}
 
 	h4 {
diff --git a/src/styles/partials/global.scss b/src/styles/partials/global.scss
index c1979c61..9e20c2f3 100644
--- a/src/styles/partials/global.scss
+++ b/src/styles/partials/global.scss
@@ -98,12 +98,8 @@ main {
 .contained-in-main-column {
 	max-width: $main-column-width;
 	margin: 0 auto;
-	width: 100%;
+	width: 100vw;
 	display: block;
-	.bottom-step-buttons & {
-		max-width: $main-column-width-inner;
-		height: 1rem;
-	}
 }
 .contained-desktop,
 .stuff {
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index f425b4f1..ee9d7e1f 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -27,10 +27,11 @@ $d-primary-intense: #3e3882; // bleu 800
 $d-blue-700: #4f47af; // bleu 700
 $d-primary: #6359cf; // bleu 600
 $d-grey: #e3e3ea;
-$d-blue30: #d6d2e0; // bleu 300
+$d-blue30: #f6f5fd; // bleu 300
 $d-rule: #e2e0fa; // bleu 100
 $d-neutral: #b5b5c6;
 $d-border: #4e4c59;
+$d-black: #383838;
 $d-alt: #a9607f;
 
 $d-info: #ecf4ff;
@@ -48,7 +49,7 @@ $primary_color: $d-primary;
 $primary: $d-primary;
 $secondary_color: $d-primary-intense;
 $bg-grey: $d-blue30;
-$font_color: $black;
+$font_color: $d-black;
 $logo_color: $d-primary;
 $logo_color_2: $d-primary-intense;
 $legend_color: $d-info-text;