remove dom classes in popups

src/app/core/components/header/header.component.scss

@@ -8,6 +8,9 @@
 	width: 100%;
 	background: $white;
 	z-index: 2;
+	.logo-home-link {
+		padding: 0;
+	}
 }
 .app-title {
 	color: $white !important;

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

@@ -3,42 +3,10 @@
 		<div class="landing container content">
 			<div class="columns presentation">
 				<div class="column">
-					<section class="buttons-demo contained-in-main-column">
+					<h1 class="title is-1 has-text-primary marged-v">
-						<h1 class="title is-1">titre h1</h1>
-						<h2 class="title is-2">titre h2</h2>
-						<h3 class="title is-3">titre h3</h3>
-						<button class="is-primary is-disabled">bouton primaire inactif</button>
-						<button class="is-primary">bouton primaire</button>
-						<button class="is-primary is-thin">bouton primaire fin</button>
-						<button class="is-final">bouton succès</button>
-						<button class="is-secondary is-disabled">bouton secondaire inactif</button>
-						<button class="is-secondary">bouton secondaire</button>
-						<button class="is-secondary is-thin">bouton secondaire fin</button>
-						<button class="is-action">bouton action</button>
-						<button class="is-action is-thin">bouton action fin</button>
-					</section>
-					<br />
-					<br />
-					<br />
-					<br />
-					<br />
-					<br />
-					<br />
-					<br />
-					<br />
-					<br />
-					<br />
-					<br />
-					<br />
-					<br />
-					<br />
-					<br />
-					<br />
-					<br />
-					<h2 class="title is-2">
 						{{ 'config.landing_title' | translate }}
-					</h2>
+					</h1>
-					<p class="subtitle">
+					<p class="subtitle marged-v">
 						{{ 'config.landing_subtitle' | translate: { AppTitle: AppTitle } }}
 					</p>
 					<div class="columns">
@@ -68,6 +36,46 @@
 					<!--					<img src="assets/img/icone_home.png" alt="calendrier icone framadate" />-->
 				</div>
 			</div>
+
+			<section class="buttons-demo">
+				<h1 class="title is-1">Titre h1</h1>
+				<h2 class="title is-2">Titre h2</h2>
+				<h3 class="title is-3">Titre h3</h3>
+				<button class="is-primary is-disabled">bouton primaire inactif</button>
+				<button class="is-primary">bouton primaire</button>
+				<button class="is-primary is-thin">bouton primaire fin</button>
+				<button class="is-final">bouton succès</button>
+				<button class="is-secondary is-disabled">bouton secondaire inactif</button>
+				<button class="is-secondary">bouton secondaire</button>
+				<button class="is-secondary is-thin">bouton secondaire fin</button>
+				<button class="is-action">bouton action</button>
+				<button class="is-action is-thin">bouton action fin</button>
+			</section>
+			<section>
+				Autres boutons:
+				<button id="close_dialog_more" class="is-closing-popup">
+					bouton fermeture popin <img class="icon fa" src="assets/icons/x_blue.svg" />
+				</button>
+				<app-language-selector></app-language-selector>
+			</section>
+			<br />
+			<br />
+			<br />
+			<br />
+			<br />
+			<br />
+			<br />
+			<br />
+			<br />
+			<br />
+			<br />
+			<br />
+			<br />
+			<br />
+			<br />
+			<br />
+			<br />
+			<br />
 		</div>
 	</div>
 
@@ -75,8 +83,8 @@
 	<p-dialog
 		[modal]="true"
 		[(visible)]="display_poll_search_dialog"
-		[breakpoints]="{ '960px': '75vw' }"
+		[breakpoints]="{ '600px': '75vw', '400px': '95vw' }"
-		[style]="{ width: '454px' }"
+		[style]="{ width: '486px' }"
 		[draggable]="false"
 		[showHeader]="false"
 		[resizable]="true"
@@ -91,10 +99,10 @@
 					{{ 'SENTENCES.Close' | translate }} <img class="icon fa" src="assets/icons/x_blue.svg" />
 				</button>
 			</div>
-			<div class="column">
+			<div class="">
 				<section class="search">
 					<form (ngSubmit)="searchMyPolls()">
-						<div class="columns">
+						<div class="">
 							<div class="search-others column">
 								<h2 class="title is-2">
 									{{ 'home.search_title' | translate }}

src/app/features/administration/form/option-link/option-link.component.html

@@ -36,8 +36,8 @@
 <p-dialog
 	[modal]="true"
 	[(visible)]="display_option_dialog"
-	[breakpoints]="{ '960px': '75vw' }"
+	[breakpoints]="{ '600px': '75vw', '400px': '95vw' }"
-	[style]="{ width: '454px' }"
+	[style]="{ width: '486px' }"
 	[draggable]="false"
 	[showHeader]="false"
 	[resizable]="true"

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

@@ -73,15 +73,12 @@
 	[modal]="true"
 	[(visible)]="display_same_hours_dialog"
 	[breakpoints]="{ '960px': '454px' }"
-	[style]="{ width: '454px' }"
+	[style]="{ width: '486px' }"
 	[draggable]="false"
 	[showHeader]="false"
 	[resizable]="false"
 >
 	<ng-template pTemplate="titlebar">
-		<div class="columns">
-			<div class="column"></div>
-			<div class="column is-narrow">
 		<button
 			id="close_dialog"
 			class="button cancel-button-reject pull-right has-text-right has-no-border is-closing-popup"
@@ -89,9 +86,7 @@
 		>
 			{{ 'SENTENCES.Close' | translate }} <img class="icon fa" src="assets/icons/x_blue.svg" />
 		</button>
-			</div>
+		<h1 class="title is-1">
-		</div>
-		<h1 class="title">
 			{{ 'hours.modal.title' | translate }}
 		</h1>
 		<section class="same-time-slices">
@@ -144,8 +139,7 @@
 		</section>
 	</ng-template>
 	<ng-template pTemplate="footer">
-		<div class="columns">
+		<div class="has-no-padding time-slice-list-of-a-day">
-			<div class="column has-no-padding time-slice-list-of-a-day">
 			<button
 				class="button is-primary is-fullwidth pull-right has-text-white"
 				(click)="applyTimeSlicesToDateChoices()"
@@ -156,7 +150,6 @@
 				{{ 'SENTENCES.Cancel' | translate }}
 			</button>
 		</div>
-		</div>
 	</ng-template>
 </p-dialog>
 <app-nav-steps

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

@@ -61,7 +61,7 @@
 			</div>
 		</div>
 	</form>
-	<p-confirmDialog #cd [style]="{ width: '454px' }">
+	<p-confirmDialog #cd [style]="{ width: '486px' }">
 		<ng-template pTemplate="header">
 			<h3>{{ 'creation.dialog' | translate }}</h3>
 		</ng-template>

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

@@ -103,15 +103,14 @@
 		id="close_stepper"
 		[modal]="true"
 		[(visible)]="display_cancel_dialog"
-		[breakpoints]="{ '960px': '75vw' }"
+		[breakpoints]="{ '600px': '75vw', '400px': '95vw' }"
-		[style]="{ width: '454px', 'border-radius': '1rem' }"
+		[style]="{ width: '486px', 'border-radius': '1rem' }"
 		[styleClass]="'roundToPercentWidth-borders'"
 		[draggable]="false"
 		[showHeader]="false"
 		[resizable]="false"
 	>
 		<ng-template pTemplate="titlebar">
-			<div class="top">
 			<button
 				id="close_dialog"
 				class="button cancel-button-reject pull-right img-marged-left has-no-border is-closing-popup"
@@ -120,8 +119,7 @@
 				{{ 'SENTENCES.Close' | translate }}
 				<img class="icon" src="assets/icons/x_blue.svg" />
 			</button>
-			</div>
+			<h1 class="title is-1">
-			<h1 class="title">
 				{{ 'popup.cancel.title' | translate }}
 			</h1>
 			<p class="description">
@@ -129,8 +127,8 @@
 			</p>
 		</ng-template>
 		<ng-template pTemplate="footer">
-			<div class="columns">
+			<div class="">
-				<div class="column has-no-padding">
+				<div class="has-no-padding">
 					<button class="button cancel-button-reject-bottom is-secondary" (click)="focusOnCancelButton()">
 						{{ 'popup.cancel.reject' | translate }}
 					</button>

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

@@ -20,7 +20,7 @@
 			[modal]="true"
 			[(visible)]="display_lang_dialog"
 			[breakpoints]="['960px']"
-			[style]="{ width: '454px' }"
+			[style]="{ width: '486px' }"
 			[draggable]="false"
 			[showHeader]="false"
 			[resizable]="true"
@@ -29,8 +29,8 @@
 			id="lang_selector_modale"
 		>
 			<ng-template pTemplate="titlebar">
-				<div class="columns">
+				<div class="">
-					<div class="column">
+					<div class="">
 						<div class="top">
 							<button
 								id="close_dialog{{ idSuffix }}"
@@ -44,7 +44,7 @@
 						</div>
 					</div>
 				</div>
-				<h1 class="title is-2 has-text-left" id="lang_selector_modale_title">
+				<h1 class="title is-1 has-text-left" id="lang_selector_modale_title">
 					{{ 'popup.languages.title' | translate }}
 				</h1>
 

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

@@ -34,10 +34,10 @@
 		float: left;
 		height: auto;
 		min-height: auto;
-		margin: 0.5em;
+		margin-right: 2rem;
+		margin-bottom: 1rem;
 
 		input {
-			//height: 1.5rem;
 			display: none;
 		}
 	}

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

@@ -16,7 +16,7 @@ export class LanguageSelectorComponent implements OnInit {
 	public availableLanguages: any = ['FR', 'EN', 'ES'];
 	language: string;
 	language_to_apply: string;
-	display_lang_dialog: boolean = false;
+	display_lang_dialog: boolean = true;
 	display_dynamic_langs: boolean = false;
 
 	availableLanguagesStatic: any = [

src/styles/libraries/_overrides.scss

@@ -22,31 +22,49 @@ $input-shadow: none;
 }
 
 // modal dialog
-.p-dialog-content {
+
-	border-top-left-radius: 0.5rem;
-	border-top-right-radius: 0.5rem;
-}
-.p-dialog-footer {
-	border-bottom-left-radius: 0.5rem !important;
-	border-bottom-right-radius: 0.5rem !important;
-}
 .p-dialog {
 	background: transparent !important;
 	box-shadow: none;
+	font-family: $title_font !important;
+	max-width: $widescreen-width-main-column;
+	box-sizing: border-box;
+
+	.title {
+		margin-top: 72px;
+		margin-bottom: 1rem;
+		@extend .is-3;
+	}
+
+	.p-dialog-header {
+		color: $primary_color;
+		padding: 1rem;
+	}
+
+	.p-dialog-content {
+		border-top-left-radius: 8px;
+		border-top-right-radius: 8px;
+		padding: 0 1em;
+	}
+
+	.p-dialog-footer {
+		border-bottom-left-radius: 8px !important;
+		border-bottom-right-radius: 8px !important;
+		padding: 1rem;
+
+		button {
+			margin-right: 0;
+			margin-left: 1rem;
+		}
+	}
 }
 
 .cancel-button-reject {
 	background: none;
-	margin-right: -1.55rem;
+	margin-right: -0.5rem;
+	margin-top: 0.5rem;
+	padding: 0.5rem !important;
 	float: right;
-
-	.icon {
-		margin-left: 1rem;
-		height: 1rem;
-		width: 1rem;
-		margin-top: 0.2rem;
-		float: right;
-	}
 }
 
 .round-borders {
@@ -81,5 +99,5 @@ button .icon:first-child:last-child,
 .p-datepicker table td > span:focus,
 .p-datepicker .p-datepicker-header .p-datepicker-prev:focus,
 .p-datepicker .p-datepicker-header .p-datepicker-next:focus {
-	outline: 3px solid $black !important;
+	outline: 3px solid $outline-color !important;
 }

src/styles/partials/_buttons.scss

@@ -108,6 +108,17 @@ a {
 .is-closing-popup {
 	background: #fff;
 	color: #6359cf !important;
+	font-weight: 400;
+	font-size: 16px;
+	line-height: 20px;
+
+	.icon {
+		margin-left: 1rem;
+		height: 14px;
+		width: 14px;
+		margin-top: 0.15rem;
+		float: right;
+	}
 }
 
 .buttons-demo button {

src/styles/partials/_typo.scss

@@ -1,4 +1,5 @@
 body {
+	font-family: $default_font;
 	h1,
 	h2,
 	h3,
@@ -27,8 +28,9 @@ body {
 			color: $d-primary-intense;
 			font-family: $title_font;
 			font-weight: 700;
-			font-size: 20px;
+			font-style: normal;
-			line-height: 23px;
+			font-size: 24px;
+			line-height: 28px;
 			margin-bottom: 1rem;
 		}
 	}
@@ -49,32 +51,12 @@ body {
 		color: $d-primary-intense;
 		font-family: $title_font;
 		font-weight: 700;
-		font-size: 20px;
+		font-style: normal;
-		line-height: 23px;
+		font-size: 24px;
+		line-height: 28px;
 		margin-bottom: 1rem;
 	}
 
-	.p-dialog {
-		font-family: $title_font !important;
-		max-width: $widescreen-width-main-column;
-
-		.p-dialog-header {
-			color: $primary_color !important;
-
-			.p-dialog-title {
-				font-size: 2rem;
-			}
-		}
-
-		.p-dialog-content {
-			padding: 1rem 2rem;
-		}
-
-		.p-dialog-footer {
-			padding: 3rem 2.5rem;
-		}
-	}
-
 	.nobold {
 		font-weight: normal;
 	}