style in leaving creation popup

src/app/core/components/home/home.component.html

@@ -56,7 +56,7 @@
 					class="button no-outline cancel-button-reject pull-right"
 					(click)="focusOnCancelButton()"
 				>
-					{{ 'SENTENCES.Close' | translate }} <i class="fa fa-times"></i>
+					{{ 'SENTENCES.Close' | translate }} <img class="icon fa" src="assets/icons/x_blue.svg" />
 				</button>
 			</div>
 			<div class="column">

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

@@ -101,7 +101,7 @@
 					class="button cancel-button-reject pull-right has-text-right"
 					(click)="closeModalAndFocusOnOpenModalButton()"
 				>
-					{{ 'SENTENCES.Close' | translate }} <img class="icon" aria-hidden="true" src="assets/icons/x.svg" />
+					{{ 'SENTENCES.Close' | translate }} <img class="icon fa" src="assets/icons/x_blue.svg" />
 				</button>
 			</div>
 		</div>

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

@@ -89,7 +89,7 @@
 			<div class="column has-text-right is-narrow">
 				<app-language-selector class="nav-button"></app-language-selector>
 				<button
-					class="nav-button cancel-button"
+					class="nav-button cancel-button-stepper"
 					(click)="showCancelDialog()"
 					id="display_cancel_popup_button"
 					aria-haspopup="dialog"
@@ -104,10 +104,12 @@
 
 	<!--	modale pour quitter la création-->
 	<p-dialog
+		id="close_stepper"
 		[modal]="true"
 		[(visible)]="display_cancel_dialog"
 		[breakpoints]="{ '960px': '75vw' }"
-		[style]="{ width: '50vw' }"
+		[style]="{ width: '50vw', 'border-radius': '1rem' }"
+		[styleClass]="'round-borders'"
 		[draggable]="false"
 		[showHeader]="false"
 		[resizable]="false"
@@ -119,23 +121,24 @@
 					class="button is-primary cancel-button-reject pull-right"
 					(click)="focusOnCancelButton()"
 				>
-					{{ 'SENTENCES.Close' | translate }} <i class="fa fa-times"></i>
+					{{ 'SENTENCES.Close' | translate }}
+					<img class="icon" src="assets/icons/x_blue.svg" />
 				</button>
 			</div>
 			<h1 class="title">
 				{{ 'popup.cancel.title' | translate }}
 			</h1>
-			<p>
+			<p class="description">
 				{{ 'popup.cancel.main' | translate }}
 			</p>
 		</ng-template>
 		<ng-template pTemplate="footer">
 			<div class="columns">
 				<div class="column has-no-padding">
-					<button class="button cancel-button-confirm is-outlined" (click)="focusOnCancelButton()">
+					<button class="button cancel-button-reject-bottom is-outlined" (click)="focusOnCancelButton()">
 						{{ 'popup.cancel.reject' | translate }}
 					</button>
-					<button class="button is-primary cancel-button-reject-bottom" (click)="goToHome()">
+					<button class="button cancel-button-confirm" (click)="goToHome()">
 						{{ 'popup.cancel.validate' | translate }}
 					</button>
 				</div>

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

@@ -19,8 +19,9 @@
 		width: 40%;
 		float: left;
 	}
+
 	.step-title-poll {
-		max-width: 18ch;
+		max-width: 40ch;
 		text-overflow: ellipsis;
 		display: inline-block !important;
 		overflow: hidden;
@@ -86,24 +87,19 @@
 		}
 	}
 
-	.cancel-button {
+	#close_stepper {
-		line-height: $stepper-nav-height / 2;
+		border-radius: 3em;
-		height: $stepper-nav-height / 2;
+		.title {
-		padding: 0 1rem;
+			margin-top: 2rem;
-		margin-top: 0.75rem;
+			font-size: 24px;
-		color: $primary_color;
+			color: $d-primary-intense;
-		border-color: $primary_color;
-
-		&:hover {
-			color: $white;
-			background: $primary_color;
 		}
-	}
 
-	.cancel-button-reject-bottom {
+		.description {
-		background: $secondary_color;
+			color: $font_color;
-		color: $white;
+			font-size: 1rem;
-		margin-left: 1rem;
+			line-height: 1.25rem;
+		}
 	}
 
 	.step-info {
@@ -145,21 +141,47 @@
 		height: 2rem;
 	}
 
+	.cancel-button-stepper {
+		padding: 0 1rem;
+		height: auto;
+		margin-top: 0.75rem;
+		border-color: $primary_color;
+		color: $primary_color;
+	}
+
+	.cancel-button-confirm {
+		color: $white !important;
+		background: $primary_color;
+		margin-left: 1rem;
+		margin-top: 0.75rem;
+		border-color: $primary_color !important;
+		padding: 10px 30px;
+	}
+
+	.cancel-button-reject-bottom {
+		color: $primary_color !important;
+		border-color: $primary_color !important;
+		margin-top: 0.75rem;
+		padding: 10px 30px;
+
+		&:hover {
+			color: $white;
+			background: $primary_color;
+		}
+	}
 	.cancel-button-reject {
 		background: none;
 		color: $primary_color;
 		margin-right: -1rem;
-
+		float: right;
-		i {
+		.icon {
-			color: $primary_color;
+			margin-left: 1rem;
-			margin-left: 1ch;
+			height: 1rem;
+			width: 1rem;
+			margin-top: 0.15rem;
+			float: right;
 		}
 	}
-
-	.cancel-button-confirm {
-		color: $secondary_color;
-		margin-right: 0;
-	}
 }
 
 .lang-selector-icon {

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

@@ -21,7 +21,7 @@
 					class="button no-outline cancel-button-reject"
 					(click)="focusOnCancelButton()"
 				>
-					{{ 'SENTENCES.Close' | translate }} <i class="fa fa-times"></i>
+					{{ 'SENTENCES.Close' | translate }} <img class="icon fa" src="assets/icons/x_blue.svg" />
 				</button>
 			</div>
 			<h2 class="title is-2 has-text-left">

src/assets/i18n/en.json

@@ -63,9 +63,13 @@
         "description_constraint": "max chars"
     },
     "popup": {
+			"languages": {
+				"title": "Choose your locale",
+				"validate": "Save"
+			},
         "cancel": {
-            "title": "You will cancel your poll creation",
+            "title": "You will leave this poll creation",
-            "main": "Do you really want to leave the poll creation ?",
+            "main": "Do you really want to leave ?",
             "validate": "Yes, cancel poll",
             "reject": "No"
         }

src/assets/i18n/fr.json

@@ -67,10 +67,9 @@
 				"title": "Choisissez votre langue",
 				"validate": "Enregistrer"
 			},
-
         "cancel": {
-            "title": "Vous allez annuler votre sondage",
+            "title": "Vous allez quitter le sondage",
-            "main": "Si vous annulez votre sondage vous perdrez toutes les informations saisies jusqu'à maintenant. Souhaitez-vous vraiment annuler ?",
+            "main": "Toutes les informations seront effacées.\nSouhaitez-vous vraiment quitter ?",
 						"validate": "Oui, quitter",
 						"reject": "Non"
         }

src/assets/icons/x_blue.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.43781 6.99976L13.7178 1.71977C14.0778 1.35977 14.0778 0.639766 13.7178 0.279766C13.3578 -0.0802344 12.6378 -0.0802344 12.2778 0.279766L6.99781 5.55976L1.71781 0.279766C1.35781 -0.0802344 0.637813 -0.0802344 0.277813 0.279766C-0.0821875 0.639766 -0.0821875 1.35977 0.277813 1.71977L5.55781 6.99976L0.277813 12.2798C-0.0821875 12.6398 -0.0821875 13.3598 0.277813 13.7198C0.517813 13.9598 0.757812 13.9598 0.997813 13.9598C1.23781 13.9598 1.47781 13.8398 1.71781 13.7198L6.99781 8.43976L12.2778 13.7198C12.5178 13.9598 12.7578 13.9598 12.9978 13.9598C13.2378 13.9598 13.4778 13.8398 13.7178 13.7198C14.0778 13.3598 14.0778 12.6398 13.7178 12.2798L8.43781 6.99976Z" fill="#6359CF"/>
+</svg>

src/styles/libraries/_overrides.scss

@@ -19,3 +19,25 @@ $input-shadow: none;
 	display: block !important;
 	width: 80%;
 }
+
+// modal dialog
+.p-dialog {
+	background: blue !important;
+}
+.cancel-button-reject {
+	background: none;
+	color: $primary_color;
+	margin-right: -1rem;
+	float: right;
+	.icon {
+		margin-left: 1rem;
+		height: 1rem;
+		width: 1rem;
+		margin-top: 0.15rem;
+		float: right;
+	}
+}
+
+.round-borders {
+	border-radius: 1rem !important;
+}

src/styles/partials/_responsive.scss

@@ -26,6 +26,9 @@
 			margin-top: 0;
 		}
 	}
+	.step-title-poll {
+		max-width: 18ch;
+	}
 }
 @media (min-width: 380px) {
 	.feedback-container {