🎨 ⚡ step 7 style and email template

Signed-off-by: tykayn <15d65f2f-0b14-4f70-bf34-e130180ed62b@users.tedomum.net>

src/app/features/administration/form/steps/step-seven/step-seven.component.html

@@ -7,14 +7,14 @@
 		{{ 'resume.description' | translate }}
 	</p>
 	<div class="resume">
-		<h2 class="title is-3">{{ 'resume.general' | translate }}</h2>
+		<h2 class="title is-5">{{ 'resume.general' | translate }}</h2>
 		<div class="block-resume">
-			<h3 class="title is-4">
+			<p class="block-label">
 				{{ pollService.form.value.title }}
-				<i *ngIf="!pollService.form.value.title">
+			</p>
+			<p class="no-description" *ngIf="!pollService.form.value.title">
 				(pas de titre)
-				</i>
+			</p>
-			</h3>
 			<p class="description">
 				{{ pollService.form.value.description }}
 				<i *ngIf="!pollService.form.value.description">
@@ -22,21 +22,28 @@
 				</i>
 			</p>
 			<hr />
-			<div class="go-to-step" [routerLink]="['/administration/step/1']">
+			<div
-				<img class="icon" src="assets/icons/edit.svg" alt="icone crayon" />
+				class="go-to-step has-background-icon-left is-filtered-icon-primary has-background-edit"
+				[routerLink]="['/administration/step/1']"
+			>
 				{{ 'resume.edit' | translate }}
 			</div>
 		</div>
-		<h2 class="title is-3">{{ 'resume.kind' | translate }}</h2>
+		<h2 class="title is-5">{{ 'resume.kind' | translate }}</h2>
 		<div class="block-resume">
 			{{ pollService.form.value.isAboutDate ? 'Date' : 'Propositions' }}
 			<hr />
-			<div class="go-to-step" [routerLink]="['/administration/step/2']">
+			<div
-				<img class="icon" aria-hidden="true" src="assets/icons/edit.svg" />
+				class="go-to-step has-background-icon-left is-filtered-icon-primary has-background-edit"
+				[routerLink]="['/administration/step/2']"
+			>
 				{{ 'resume.edit' | translate }}
 			</div>
 		</div>
-		<h2 class="title is-3">{{ 'resume.dates_and_hours' | translate }}</h2>
+		<h2 class="title is-5" *ngIf="pollService.form.value.isAboutDate">
+			{{ 'resume.dates_and_hours' | translate }}
+		</h2>
+		<h2 class="title is-5" *ngIf="!pollService.form.value.isAboutDate">{{ 'SENTENCES.Choice' | translate }}</h2>
 		<div class="block-resume">
 			<div class="list-datechoices" *ngIf="pollService.form.value.isAboutDate">
 				<ul *ngFor="let choice of pollService.dateChoiceList">
@@ -53,28 +60,52 @@
 				</ul>
 			</div>
 			<div class="list-texts" *ngIf="!pollService.form.value.isAboutDate">
-				<ul *ngFor="let choice of pollService.choices">
+				<ul *ngFor="let choice of StorageService.choicesText">
 					<li>
-						{{ choice }}
+						{{ choice.name }}
 					</li>
 				</ul>
 			</div>
 			<hr />
-			<div class="go-to-step" [routerLink]="['/administration/step/3']">
+			<div
-				<img class="icon" aria-hidden="true" src="assets/icons/edit.svg" />
+				class="go-to-step has-background-icon-left is-filtered-icon-primary has-background-edit"
+				[routerLink]="['/administration/step/3']"
+			>
 				{{ 'resume.edit' | translate }}
 			</div>
 		</div>
-		<h2 class="title is-3">{{ 'resume.params_notifs' | translate }}</h2>
+		<h2 class="title is-5">{{ 'resume.params_notifs' | translate }}</h2>
 		<div class="block-resume">
-			<div class="password">Protégé par mot de passe: {{ pollService.form.value.password ? 'oui' : 'non' }}</div>
+			<p class="password" *ngIf="pollService.form.value.password.length">
+				{{ 'SENTENCES.password-protected' | translate }}
+			</p>
+			<div class="notifs">
+				<!--				who modifies answers:-->
+				<!--				{{pollService.form.value.whoModifiesAnswers }}-->
+				<p class="block-label" *ngIf="pollService.form.value.whoModifiesAnswers === 'self'">
+					{{ 'SENTENCES.voters-can-modify-their-own-vote-themselves' | translate }}
+				</p>
+				<!--				{{"SENTENCES.all-voters-can-modify-any-vote" |translate}}-->
+				<!--				{{"SENTENCES.votes-cannot-be-modified" |translate}}-->
+				<p class="block-label">
+					email on comment:
+					{{ pollService.form.value.isOwnerNotifiedByEmailOnNewComment ? 'oui' : 'non' }}
+				</p>
+				<p class="block-label">
+					email on vote:
+					{{ pollService.form.value.isOwnerNotifiedByEmailOnNewVote ? 'oui' : 'non' }}
+				</p>
+			</div>
+
 			<hr />
-			<div class="go-to-step clickable" [routerLink]="['/administration/step/5']">
+			<div
-				<img class="icon" aria-hidden="true" src="assets/icons/edit.svg" />
+				class="go-to-step has-background-icon-left is-filtered-icon-primary has-background-edit"
+				[routerLink]="['/administration/step/5']"
+			>
 				{{ 'resume.edit' | translate }}
 			</div>
 		</div>
-		<h2 class="title is-3">{{ 'resume.owner' | translate }}</h2>
+		<h2 class="title is-5">{{ 'resume.owner' | translate }}</h2>
 		<div class="block-resume">
 			<div class="name">
 				<strong>
@@ -89,8 +120,10 @@
 				{{ pollService.form.value.creatorEmail }}
 			</div>
 			<hr />
-			<div class="go-to-step" [routerLink]="['/administration/step/6']">
+			<div
-				<img class="icon" aria-hidden="true" src="assets/icons/edit.svg" />
+				class="go-to-step has-background-icon-left is-filtered-icon-primary has-background-edit"
+				[routerLink]="['/administration/step/6']"
+			>
 				{{ 'resume.edit' | translate }}
 			</div>
 		</div>

src/app/features/administration/form/steps/step-seven/step-seven.component.scss

@@ -0,0 +1,26 @@
+.step-resume {
+	.description {
+		font-weight: 400;
+		font-size: 16px;
+		line-height: 20px;
+	}
+	.title {
+		margin-top: 2rem;
+	}
+	.block-label {
+		font-weight: 700;
+		font-size: 16px;
+		line-height: 20px;
+		margin-bottom: 1rem;
+		.rounded-block > & {
+			margin-top: 0;
+		}
+	}
+	.go-to-step {
+		margin-left: -1rem;
+		margin-right: -1rem;
+		&:hover {
+			color: #000;
+		}
+	}
+}

src/app/features/administration/form/steps/step-seven/step-seven.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { PollService } from '../../../../../core/services/poll.service';
+import { StorageService } from '../../../../../core/services/storage.service';
 
 @Component({
 	selector: 'app-step-seven',
@@ -8,7 +9,7 @@ import { PollService } from '../../../../../core/services/poll.service';
 	styleUrls: ['./step-seven.component.scss'],
 })
 export class StepSevenComponent implements OnInit {
-	constructor(private router: Router, public pollService: PollService) {
+	constructor(private router: Router, public StorageService: StorageService, public pollService: PollService) {
 		this.pollService.step_current = 7;
 	}
 

src/styles/dev-utilities/_helpers.scss

@@ -57,7 +57,7 @@
 }
 
 .rounded-block {
-	border-radius: 0.25em;
+	border-radius: 8px;
 	background: $d-blue30;
 	padding: 1em;
 	margin-bottom: 1rem;

src/styles/partials/_forms.scss

@@ -326,10 +326,11 @@ mat-checkbox {
 		padding-bottom: 0;
 	}
 	.go-to-step {
-		padding: 1rem 0.75rem;
+		color: $primary;
-		padding-left: 1rem;
+		padding: 1rem 0.5rem;
-		margin-left: -1em;
+		padding-left: 44px;
-		margin-right: -1em;
+		//margin-left: -1em;
+		//margin-right: -1em;
 	}
 
 	.list-datechoices {