From a3db9b7cd52693d92640f9350c71ea6b2282611e Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Tue, 16 Nov 2021 16:23:32 +0100
Subject: [PATCH] highlight current step in stepper

---
 .../stepper/stepper.component.html            | 42 ++++++++++++++++---
 .../stepper/stepper.component.scss            |  8 +++-
 src/styles/variables.scss                     |  4 +-
 3 files changed, 46 insertions(+), 8 deletions(-)

diff --git a/src/app/features/administration/stepper/stepper.component.html b/src/app/features/administration/stepper/stepper.component.html
index 499ce974..4c9b5a9f 100644
--- a/src/app/features/administration/stepper/stepper.component.html
+++ b/src/app/features/administration/stepper/stepper.component.html
@@ -17,10 +17,42 @@
 		<div class="step-bar-progress" [ngStyle]="{ width: (step_current / step_max) * 100 + '%' }"></div>
 	</div>
 	<div class="shortcuts">
-		<a class="shortcut" href="#" [routerLink]="['/administration/step/1']">1</a>
-		<a class="shortcut" href="#" [routerLink]="['/administration/step/2']">2</a>
-		<a class="shortcut" href="#" [routerLink]="['/administration/step/3']">3</a>
-		<a class="shortcut" href="#" [routerLink]="['/administration/step/4']">4</a>
-		<a class="shortcut" href="#" [routerLink]="['/administration/step/5']">5</a>
+		<a
+			class="shortcut"
+			href="#"
+			[routerLink]="['/administration/step/1']"
+			[ngClass]="{ 'is-active': pollService.step_current == 1 }"
+			>1</a
+		>
+		<a
+			class="shortcut"
+			href="#"
+			[routerLink]="['/administration/step/2']"
+			[ngClass]="{ 'is-active': pollService.step_current == 2 }"
+			>2</a
+		>
+		<a
+			class="shortcut"
+			href="#"
+			[routerLink]="['/administration/step/3']"
+			[ngClass]="{ 'is-active': pollService.step_current == 3 }"
+			>3</a
+		>
+		<a
+			class="shortcut"
+			href="#"
+			[routerLink]="['/administration/step/4']"
+			[ngClass]="{ 'is-active': pollService.step_current == 4 }"
+			>4</a
+		>
+		<a
+			class="shortcut"
+			href="#"
+			[routerLink]="['/administration/step/5']"
+			[ngClass]="{ 'is-active': pollService.step_current == 5 }"
+			>5</a
+		>
+		<!--		<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>
 </section>
diff --git a/src/app/features/administration/stepper/stepper.component.scss b/src/app/features/administration/stepper/stepper.component.scss
index 8f135753..0ced13f4 100644
--- a/src/app/features/administration/stepper/stepper.component.scss
+++ b/src/app/features/administration/stepper/stepper.component.scss
@@ -18,7 +18,7 @@
 	background: $primary_color;
 }
 .shortcut {
-	background: $secondary_color;
+	background: $dark-lavender;
 	color: white;
 	padding: 1em;
 	margin: 1em;
@@ -26,4 +26,10 @@
 	border-radius: 100%;
 	text-align: center;
 	width: 4em;
+	&.is-active {
+		background: $font_color;
+	}
+}
+.poll-title {
+	color: $d-neutral;
 }
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 0b0e3f4b..1be3515e 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -25,8 +25,8 @@ $beige-lighter: #eff0eb;
 
 $d-primary: #3e3882; // bleu 800
 $d-primary-intense: #6359cf; // bleu 600
-$d-grey: #f6f5fd; // bleu 30
-$d-neutral: #767486; // bleu 30
+$d-grey: #f6f5fd;
+$d-neutral: #767486;
 $d-alt: #a9607f;
 
 $d-info: #ecf4ff;