placing of elements in popup

src/app/features/administration/stepper/stepper.component.html

@@ -87,6 +87,7 @@
 				<button
 					class="has-no-border nav-button cancel-button"
 					(click)="showCancelDialog()"
+					id="display_cancel_popup_button"
 					aria-haspopup="dialog"
 				>
 					{{ 'nav.leave' | translate }} <i class="fa fa-times"></i>
@@ -108,39 +109,37 @@
 		[resizable]="false"
 	>
 		<ng-template pTemplate="titlebar">
-			<div class="columns">
-				<div class="column">
-					<h1 class="title is-2">
-						{{ 'popup.cancel.title' | translate }}
-					</h1>
-				</div>
-				<div class="column is-narrow">
-					<button
-						id="close_dialog"
-						class="button is-primary is-fullwidth cancel-button-reject"
-						(click)="display_cancel_dialog = false"
-					>
-						Fermer <i class="fa fa-times"></i>
-					</button>
-				</div>
+			<div class="top">
+				<button
+					id="close_dialog"
+					class="button is-primary cancel-button-reject pull-right"
+					(click)="focusOnCancelButton()"
+				>
+					Fermer <i class="fa fa-times"></i>
+				</button>
 			</div>
-
+			<h1 class="title is-2">
+				{{ 'popup.cancel.title' | translate }}
+			</h1>
 			<p>
 				{{ 'popup.cancel.main' | translate }}
 			</p>
 		</ng-template>
 		<ng-template pTemplate="footer">
 			<div class="columns">
-				<div class="column is-half-mobile">
+				<div class="column has-no-padding is-half-mobile">
 					<button
 						class="button is-fullwidth cancel-button-confirm is-outlined"
-						(click)="display_cancel_dialog = false"
+						(click)="focusOnCancelButton()"
 					>
 						Non
 					</button>
 				</div>
-				<div class="column is-half-mobile">
-					<button class="button is-primary is-fullwidth cancel-button-reject" (click)="goToHome()">
+				<div class="column has-no-padding is-half-mobile">
+					<button
+						class="button is-primary is-fullwidth cancel-button-reject-bottom pull-right"
+						(click)="goToHome()"
+					>
 						Oui, annuler sondage
 					</button>
 				</div>

src/app/features/administration/stepper/stepper.component.scss

@@ -66,7 +66,7 @@
 		line-height: $stepper-nav-height;
 		height: $stepper-nav-height;
 		padding: 0 1rem;
-		color: $secondary_color !important;
+		color: $secondary_color;
 
 		&:hover {
 			color: $font_color;
@@ -74,6 +74,10 @@
 			outline-style: solid;
 		}
 	}
+	.cancel-button-reject-bottom {
+		background: $secondary_color;
+		color: $white;
+	}
 
 	.step-info {
 		padding: 0 10px;
@@ -102,6 +106,9 @@
 		font-weight: 600;
 	}
 
+	.cancel-button-reject {
+		background: none;
+	}
 	.cancel-button-reject,
 	.cancel-button-confirm {
 		display: block !important;
@@ -122,3 +129,6 @@
 	width: 3rem;
 	display: inline-block;
 }
+#display_cancel_popup_button {
+	min-width: 7em; // to adapt other lang without making the nav move
+}

src/app/features/administration/stepper/stepper.component.ts

@@ -33,7 +33,7 @@ export class StepperComponent {
 	showCancelDialog() {
 		this.display_cancel_dialog = true;
 		this.cd.detectChanges();
-		let buttonClosepopup = this.document.querySelector('.p-dialog-header-close');
+		let buttonClosepopup = this.document.querySelector('#close_dialog');
 		if (buttonClosepopup) {
 			buttonClosepopup.focus();
 			console.log('button close found');
@@ -41,6 +41,13 @@ export class StepperComponent {
 			console.log('not found');
 		}
 	}
+	focusOnCancelButton() {
+		this.display_cancel_dialog = false;
+		let buttonClose = this.document.querySelector('#display_cancel_popup_button');
+		if (buttonClose) {
+			buttonClose.focus();
+		}
+	}
 
 	goToHome() {
 		this.display_cancel_dialog = false;

src/app/shared/components/selectors/language-selector/language-selector.component.scss

@@ -17,7 +17,10 @@
 	}
 }
 .lang-button {
+	color: $secondary_color;
 	border: none;
 	padding: 0;
-	line-height: $header-nav-inner-height;
+	display: block;
+	line-height: $header-nav-height;
+	height: $header-nav-height;
 }

src/styles/dev-utilities/_helpers.scss

@@ -81,3 +81,6 @@
 .has-no-border {
 	border: none;
 }
+.has-no-padding {
+	padding: 0;
+}

src/styles/partials/_typo.scss

@@ -43,6 +43,15 @@ body {
 				font-size: 2rem;
 			}
 		}
+		.p-dialog-content {
+			padding: 1rem 2rem;
+			.title {
+				color: $secondary_color !important;
+			}
+		}
+		.p-dialog-footer {
+			padding: 3rem 2.5rem;
+		}
 	}
 
 	.nobold {