From e99a86bb4b9cab2ca33a5f0b0eab699ece514a18 Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Tue, 16 Nov 2021 16:35:27 +0100
Subject: [PATCH] style for kind of poll button

---
 .../steps/step-two/step-two.component.html    | 42 ++++++++++---------
 .../steps/step-two/step-two.component.scss    | 10 +++++
 .../stepper/stepper.component.html            | 31 +++++++-------
 src/assets/i18n/FR.json                       |  6 +--
 4 files changed, 49 insertions(+), 40 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 92d2289d..5cfbfba4 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
@@ -5,26 +5,28 @@
 		<h2 class="title is-2">
 			{{ 'creation.want' | translate }}
 		</h2>
-		<div class="kind-of-poll columns">
-			<div class="column">
-				<button
-					class="button is-fullwidth"
-					[ngClass]="{ 'is-selected is-primary': pollService.form.controls.isAboutDate.value }"
-					(click)="pollService.form.controls.isAboutDate.setValue(true)"
-				>
-					<i class="fa fa-calendar"></i>
-					{{ 'creation.kind.date' | translate }}
-				</button>
-			</div>
-			<div class="column">
-				<button
-					class="button is-fullwidth"
-					[ngClass]="{ 'is-selected is-primary': !pollService.form.controls.isAboutDate.value }"
-					(click)="pollService.form.controls.isAboutDate.setValue(false)"
-				>
-					<i class="fa fa-list-ul"></i>
-					{{ 'creation.kind.classic' | translate }}
-				</button>
+		<div class="container">
+			<div class="kind-of-poll columns">
+				<div class="column">
+					<button
+						class="button is-fullwidth"
+						[ngClass]="{ 'is-selected is-primary': pollService.form.controls.isAboutDate.value }"
+						(click)="pollService.form.controls.isAboutDate.setValue(true)"
+					>
+						<i class="fa fa-calendar"></i>
+						{{ 'creation.kind.date' | translate }}
+					</button>
+				</div>
+				<div class="column">
+					<button
+						class="button is-fullwidth"
+						[ngClass]="{ 'is-selected is-primary': !pollService.form.controls.isAboutDate.value }"
+						(click)="pollService.form.controls.isAboutDate.setValue(false)"
+					>
+						<i class="fa fa-list-ul"></i>
+						{{ 'creation.kind.classic' | translate }}
+					</button>
+				</div>
 			</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 dea15f78..ff4d18c0 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,6 +1,16 @@
+@import '../../../../../../styles/variables';
+
 .kind-of-poll {
 	margin-top: 5em;
 	.fa {
 		margin-right: 1em;
 	}
+	.button {
+		background: $d-grey;
+		border: solid white 1px;
+		&.is-selected {
+			border: solid $primary-color 1px;
+			color: $font_color;
+		}
+	}
 }
diff --git a/src/app/features/administration/stepper/stepper.component.html b/src/app/features/administration/stepper/stepper.component.html
index 4c9b5a9f..697b6b74 100644
--- a/src/app/features/administration/stepper/stepper.component.html
+++ b/src/app/features/administration/stepper/stepper.component.html
@@ -1,21 +1,4 @@
 <section class="creation-stepper">
-	<div class="step-info">
-		<h2 classs="title is-2" *ngIf="pollService.step_current == 1">
-			{{ 'creation.title' | translate }}
-		</h2>
-		<h2 class="title is-3" *ngIf="pollService.step_current > 1">
-			<span class="poll-title">
-				{{ pollService.form.value.title }}
-			</span>
-		</h2>
-		<h3 class="title is-2">
-			Étape {{ step_current }} /
-			{{ step_max }}
-		</h3>
-	</div>
-	<div class="step-bar-container" style="width: 100%;">
-		<div class="step-bar-progress" [ngStyle]="{ width: (step_current / step_max) * 100 + '%' }"></div>
-	</div>
 	<div class="shortcuts">
 		<a
 			class="shortcut"
@@ -55,4 +38,18 @@
 		<!--		<a class="shortcut" href="#" [routerLink]="['/administration/step/6']" [ngClass]="{'is-active':pollService.step_current == 6}">6</a>-->
 		<!--		<a class="shortcut" href="#" [routerLink]="['/administration/step/7']" [ngClass]="{'is-active':pollService.step_current == 7}">7</a>-->
 	</div>
+	<div class="step-info">
+		<h2 classs="title is-2" *ngIf="pollService.step_current == 1">
+			{{ 'creation.title' | translate }}
+		</h2>
+		<h2 class="title is-3" *ngIf="pollService.step_current > 1">
+			<span class="poll-title">
+				{{ pollService.form.value.title }}
+			</span>
+		</h2>
+		<h3 class="title is-2">Étape {{ step_current }} sur {{ step_max }}</h3>
+	</div>
+	<div class="step-bar-container" style="width: 100%;">
+		<div class="step-bar-progress" [ngStyle]="{ width: (step_current / step_max) * 100 + '%' }"></div>
+	</div>
 </section>
diff --git a/src/assets/i18n/FR.json b/src/assets/i18n/FR.json
index 7fa7b650..76a46dc5 100644
--- a/src/assets/i18n/FR.json
+++ b/src/assets/i18n/FR.json
@@ -28,11 +28,11 @@
 	},
 	"creation": {
 		"title": "Créer un sondage",
-		"want": "Je veux créer un sondage",
+		"want": "Choisissez le type de sondage",
 		"advanced": "Options avancées",
 		"kind": {
-			"classic": "classique",
-			"date": "spécial dates"
+			"classic": "Propositions",
+			"date": "Date"
 		},
 		"choose_title": "Renseignez un nom pour votre sondage",
 		"choose_title_label": "Nom de votre sondage (obligatoire)",