From 8998ee2d9ee1a73a7cf1669745c57295cd08f7c5 Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Thu, 10 Mar 2022 11:06:18 +0100
Subject: [PATCH] uniform titles

---
 .../core/components/home/home.component.html  |   2 +-
 .../core/components/home/home.component.scss  |   4 -
 src/app/core/services/poll.service.ts         |   6 +-
 .../advanced-config.component.html            |  22 +-
 .../advanced-config.component.scss            |   8 +-
 .../date/list/time/time-list.component.ts     |  13 +-
 .../steps/step-five/step-five.component.scss  |   6 -
 .../steps/step-four/step-four.component.html  |   8 +-
 .../steps/step-four/step-four.component.ts    |  13 ++
 .../steps/step-six/step-six.component.html    |   2 +-
 .../step-three/step-three.component.html      |  20 +-
 .../step-three/step-three.component.scss      |  10 -
 .../steps/step-two/step-two.component.scss    |   5 -
 .../stepper/stepper.component.html            |   2 +-
 .../stepper/stepper.component.scss            |   6 -
 .../consultation/consultation.component.scss  |   3 -
 .../ciphering/ciphering.component.scss        |   4 -
 .../page-not-found.component.scss             |   3 -
 .../language-selector.component.html          |   2 +-
 src/environments/environment.ts               |   2 +-
 src/styles/dev-utilities/_helpers.scss        |   3 +
 src/styles/libraries/_frameworks.scss         |   8 +-
 src/styles/partials/_buttons.scss             |  15 +-
 src/styles/partials/_datepicker.scss          |   6 -
 src/styles/partials/_forms.scss               |  19 +-
 src/styles/partials/_tables.scss              |   7 -
 src/styles/partials/_typo.scss                |  69 +++---
 src/styles/themes/_dark.scss                  | 208 +++++++++---------
 src/styles/themes/_high-contrast.scss         |  42 ++--
 src/styles/variables.scss                     |   7 +
 30 files changed, 256 insertions(+), 269 deletions(-)

diff --git a/src/app/core/components/home/home.component.html b/src/app/core/components/home/home.component.html
index a5e79ec7..5264ba4d 100644
--- a/src/app/core/components/home/home.component.html
+++ b/src/app/core/components/home/home.component.html
@@ -85,7 +85,7 @@
 			<div class="top">
 				<button
 					id="close_dialog"
-					class="no-outline cancel-button-reject pull-right has-no-border"
+					class="no-outline cancel-button-reject pull-right has-no-border is-closing-popup"
 					(click)="focusOnCancelButton()"
 				>
 					{{ 'SENTENCES.Close' | translate }} <img class="icon fa" src="assets/icons/x_blue.svg" />
diff --git a/src/app/core/components/home/home.component.scss b/src/app/core/components/home/home.component.scss
index 68c67e86..a72e358b 100644
--- a/src/app/core/components/home/home.component.scss
+++ b/src/app/core/components/home/home.component.scss
@@ -19,10 +19,6 @@
 		padding: 6em 0;
 		color: $primary_color;
 		min-height: 80vh;
-
-		.title {
-			color: $primary_color !important;
-		}
 	}
 
 	a .fa {
diff --git a/src/app/core/services/poll.service.ts b/src/app/core/services/poll.service.ts
index 7ba4dc77..f09a6eb1 100644
--- a/src/app/core/services/poll.service.ts
+++ b/src/app/core/services/poll.service.ts
@@ -197,8 +197,8 @@ export class PollService implements Resolve<Poll> {
 			isMaybeAnswerAvailable: [true, [Validators.required]],
 			isNoAnswerAvailable: [true, [Validators.required]],
 			allowComments: [true, [Validators.required]],
-			maxCountOfAnswers: [300, []],
-			hasMaxCountOfAnswers: [300, [Validators.required]],
+			maxCountOfAnswers: [1, []],
+			hasMaxCountOfAnswers: ['', [Validators.required]],
 			useVoterUniqueLink: [false, [Validators.required]],
 			voterEmailList: ['', []],
 			hasSeveralHours: [true, []],
@@ -226,7 +226,7 @@ export class PollService implements Resolve<Poll> {
 			richTextMode: false,
 			areResultsPublic: true,
 			expiresDaysDelay: environment.expiresDaysDelay,
-			maxCountOfAnswers: 300,
+			maxCountOfAnswers: 1000,
 			voterEmailList: '',
 			password: '',
 		});
diff --git a/src/app/features/administration/form/advanced-config/advanced-config.component.html b/src/app/features/administration/form/advanced-config/advanced-config.component.html
index 873fc292..15b1b5d8 100644
--- a/src/app/features/administration/form/advanced-config/advanced-config.component.html
+++ b/src/app/features/administration/form/advanced-config/advanced-config.component.html
@@ -1,6 +1,6 @@
 <form [formGroup]="form" class="form-advanced-config">
 	<div class="rounded-block max_count_of_answers">
-		<h2 class="title-advanced">
+		<h2 class="title is-3">
 			{{ 'advanced.limit_title' | translate }}
 		</h2>
 		<div *ngIf="form.value.hasMaxCountOfAnswers">
@@ -17,7 +17,7 @@
 		</div>
 	</div>
 	<div class="rounded-block">
-		<h2 class="title-advanced">
+		<h2 class="title is-3">
 			{{ 'advanced.custom_link' | translate }}
 		</h2>
 		<label for="custom_url">
@@ -39,7 +39,7 @@
 		</button>
 	</div>
 	<div class="rounded-block">
-		<h2 class="title-advanced">
+		<h2 class="title is-3">
 			{{ 'advanced.password_title' | translate }}
 		</h2>
 
@@ -103,7 +103,7 @@
 		</div>
 	</div>
 	<div class="rounded-block permissions-modification">
-		<h2 class="title-advanced">
+		<h2 class="title is-3">
 			{{ 'advanced.allowances_title' | translate }}
 		</h2>
 		<div class="choice">
@@ -151,7 +151,7 @@
 		</div>
 	</div>
 	<div class="rounded-block notifications">
-		<h2 class="title-advanced">
+		<h2 class="title is-3">
 			{{ 'advanced.notifications_title' | translate }}
 		</h2>
 		<p>
@@ -200,7 +200,7 @@
 			</div>
 			<div class="rounded-box"></div>
 			<div class="rounded-box">
-				<h2 class="title-advanced">
+				<h2 class="title is-3">
 					{{ 'advanced.password_title' | translate }}
 				</h2>
 
@@ -209,7 +209,7 @@
 				</mat-checkbox>
 			</div>
 
-			<h2 class="title-advanced">
+			<h2 class="title is-3">
 				<i class="fa fa-envelope-open"></i>
 				Notifications
 			</h2>
@@ -220,7 +220,7 @@
 				Vous recevrez un mail à chaque nouveau commentaire
 			</mat-checkbox>
 			<div class="proposed-answers">
-				<h2 class="title-advanced">
+				<h2 class="title is-3">
 					<i class="fa fa-check-square"></i>
 					Réponses proposées
 				</h2>
@@ -238,7 +238,7 @@
 					<img class="image is-24x24 pull-right" src="assets/img/icon_voter_NO.svg" />
 				</mat-checkbox>
 			</div>
-			<h2 class="title-advanced">
+			<h2 class="title is-3">
 				<i class="fa fa-user-secret"></i>
 				Restrictions visiteurs
 			</h2>
@@ -256,7 +256,7 @@
 			</p>
 		</div>
 
-		<h2 class="title is-2">
+		<h2 class="title is-3">
 			<i class="fa fa-wikidata"></i>
 			Fonctionnalités pas encore disponibles:
 		</h2>
@@ -292,7 +292,7 @@
 		</p>
 	</fieldset>
 	<div class="rounded-block propose_expire_input" *ngIf="environment.propose_expire_input">
-		<h2 class="title-advanced">
+		<h2 class="title is-3">
 			Saisissez la date de fin de votre sondage
 		</h2>
 		<p>
diff --git a/src/app/features/administration/form/advanced-config/advanced-config.component.scss b/src/app/features/administration/form/advanced-config/advanced-config.component.scss
index 119db52b..f4bb2616 100644
--- a/src/app/features/administration/form/advanced-config/advanced-config.component.scss
+++ b/src/app/features/administration/form/advanced-config/advanced-config.component.scss
@@ -49,19 +49,13 @@
 		background: #fff;
 		margin: 0;
 		float: left;
-		width: 59%;
+		width: 55%;
 		line-height: 1.5rem;
 		overflow: hidden;
 		text-overflow: ellipsis;
 		border: 0 !important;
 	}
 
-	.title-advanced {
-		font-size: 20px !important;
-		line-height: 23px !important;
-		color: $secondary_color;
-		margin-bottom: 1rem;
-	}
 	.password-box {
 		label {
 			margin-left: 0;
diff --git a/src/app/features/administration/form/date/list/time/time-list.component.ts b/src/app/features/administration/form/date/list/time/time-list.component.ts
index 5a8f589a..59e143ae 100644
--- a/src/app/features/administration/form/date/list/time/time-list.component.ts
+++ b/src/app/features/administration/form/date/list/time/time-list.component.ts
@@ -3,6 +3,8 @@ import { ChangeDetectorRef, Component, Inject, Input, OnInit } from '@angular/co
 import { moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
 import { DOCUMENT } from '@angular/common';
 import { TimeSlices } from '../../../../../../core/models/dateChoice.model';
+import { ToastService } from '../../../../../../core/services/toast.service';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
 	selector: 'app-time-list',
@@ -15,7 +17,12 @@ export class TimeListComponent implements OnInit {
 	@Input()
 	public prefix_choice_id = '';
 
-	constructor(@Inject(DOCUMENT) private document: any, private cd: ChangeDetectorRef) {}
+	constructor(
+		@Inject(DOCUMENT) private document: any,
+		private cd: ChangeDetectorRef,
+		private toastService: ToastService,
+		private translate: TranslateService
+	) {}
 
 	ngOnInit(): void {}
 
@@ -36,6 +43,10 @@ export class TimeListComponent implements OnInit {
 	removeTime(id: number) {
 		this.timeSlices.splice(id, 1);
 		this.focusOnLastField();
+		this.translate.get('success.deleted_option').subscribe((resp) => {
+			console.log('resp', resp);
+			this.toastService.display(`${resp}`);
+		});
 	}
 
 	focusOnFieldNumber(fieldId: number) {
diff --git a/src/app/features/administration/form/steps/step-five/step-five.component.scss b/src/app/features/administration/form/steps/step-five/step-five.component.scss
index 49e139dc..e04eca8b 100644
--- a/src/app/features/administration/form/steps/step-five/step-five.component.scss
+++ b/src/app/features/administration/form/steps/step-five/step-five.component.scss
@@ -1,12 +1,6 @@
 @import '../../../../../../styles/variables';
 
 .step-five {
-	.title-step {
-		font-weight: bold;
-		font-size: 32px;
-		line-height: 37px;
-		margin-bottom: 1rem !important;
-	}
 	.decription {
 		margin-bottom: 2rem;
 	}
diff --git a/src/app/features/administration/form/steps/step-four/step-four.component.html b/src/app/features/administration/form/steps/step-four/step-four.component.html
index 9c4b881e..d0d56495 100644
--- a/src/app/features/administration/form/steps/step-four/step-four.component.html
+++ b/src/app/features/administration/form/steps/step-four/step-four.component.html
@@ -4,7 +4,7 @@
 		<app-errors-list [form]="pollService.form"></app-errors-list>
 
 		<div class="custom-day-time-slices" *ngIf="1">
-			<h1 class="title is-2">
+			<h1 class="title is-1">
 				{{ 'hours.title' | translate }}
 			</h1>
 			<div
@@ -23,7 +23,7 @@
 						<button
 							[attr.aria-label]="'choices.delete' | translate"
 							class="has-no-border delete-hour"
-							(click)="dayChoice.timeSlices.splice(id, 1)"
+							(click)="removeHour(dayChoice.timeSlices, id)"
 						>
 							<!--							{{ 'choices.delete' | translate }}-->
 							<img src="assets/icons/trash-2.svg" class="icon is-filtered-icon-primary" />
@@ -64,7 +64,7 @@
 			</div>
 		</div>
 	</div>
-	<button id="apply_same_hour" class="has-text-primary button is-fullwidth" (click)="openModal()">
+	<button id="apply_same_hour" class="is-secondary is-thin button is-fullwidth" (click)="openModal()">
 		{{ 'hours.apply_same' | translate }}
 	</button>
 </div>
@@ -84,7 +84,7 @@
 			<div class="column is-narrow">
 				<button
 					id="close_dialog"
-					class="button cancel-button-reject pull-right has-text-right has-no-border"
+					class="button cancel-button-reject pull-right has-text-right has-no-border is-closing-popup"
 					(click)="closeModalAndFocusOnOpenModalButton()"
 				>
 					{{ 'SENTENCES.Close' | translate }} <img class="icon fa" src="assets/icons/x_blue.svg" />
diff --git a/src/app/features/administration/form/steps/step-four/step-four.component.ts b/src/app/features/administration/form/steps/step-four/step-four.component.ts
index dd224236..4f047bbe 100644
--- a/src/app/features/administration/form/steps/step-four/step-four.component.ts
+++ b/src/app/features/administration/form/steps/step-four/step-four.component.ts
@@ -7,6 +7,7 @@ import { DOCUMENT } from '@angular/common';
 import { StorageService } from '../../../../../core/services/storage.service';
 import { DateChoice, TimeSlices, timeSlicesProposals } from '../../../../../core/models/dateChoice.model';
 import { ToastService } from '../../../../../core/services/toast.service';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
 	selector: 'app-step-four',
@@ -28,6 +29,7 @@ export class StepFourComponent implements OnInit {
 		private dateUtilitiesService: DateUtilitiesService,
 		private router: Router,
 		private toastService: ToastService,
+		private translate: TranslateService,
 		private cd: ChangeDetectorRef,
 		@Inject(DOCUMENT) private document: any,
 		private storageService: StorageService,
@@ -120,4 +122,15 @@ export class StepFourComponent implements OnInit {
 			buttonClose.focus();
 		}
 	}
+
+	removeHour(dayChoice, id: number) {
+		dayChoice.splice(id, 1);
+		this.cd.detectChanges();
+		this.focusOnChoice(id - 1 < 0 ? 0 : id - 1);
+
+		this.translate.get('success.deleted_option').subscribe((resp) => {
+			console.log('resp', resp);
+			this.toastService.display(`${resp}`);
+		});
+	}
 }
diff --git a/src/app/features/administration/form/steps/step-six/step-six.component.html b/src/app/features/administration/form/steps/step-six/step-six.component.html
index 742c1966..55db7c61 100644
--- a/src/app/features/administration/form/steps/step-six/step-six.component.html
+++ b/src/app/features/administration/form/steps/step-six/step-six.component.html
@@ -2,7 +2,7 @@
 <div class="step min-height">
 	<div class="min-height">
 		<form action="#" [formGroup]="pollService.form">
-			<h1 class="title is-2">
+			<h1 class="title is-1">
 				{{ 'owner.title' | translate }}
 			</h1>
 			<label for="name">
diff --git a/src/app/features/administration/form/steps/step-three/step-three.component.html b/src/app/features/administration/form/steps/step-three/step-three.component.html
index 1c983c11..fed3870c 100644
--- a/src/app/features/administration/form/steps/step-three/step-three.component.html
+++ b/src/app/features/administration/form/steps/step-three/step-three.component.html
@@ -10,13 +10,19 @@
 			{{ 'dates.title' | translate }}
 		</h1>
 		<!--	sélecteur d'interface-->
-		<button class="button is-fullwidth date-input-selector is-secondary" (click)="changeDateInputMode()">
-			<span *ngIf="pollService.mode_calendar">
-				{{ 'dates.manual_input' | translate }}
-			</span>
-			<span *ngIf="!pollService.mode_calendar">
-				{{ 'dates.datepicker_input' | translate }}
-			</span>
+		<button
+			*ngIf="pollService.mode_calendar"
+			class="button is-fullwidth date-input-selector is-secondary is-thin text-center"
+			(click)="changeDateInputMode()"
+		>
+			{{ 'dates.manual_input' | translate }}
+		</button>
+		<button
+			*ngIf="!pollService.mode_calendar"
+			class="button is-fullwidth date-input-selector is-secondary is-thin"
+			(click)="changeDateInputMode()"
+		>
+			{{ 'dates.datepicker_input' | translate }}
 		</button>
 
 		<!--			choix spécialement pour les dates-->
diff --git a/src/app/features/administration/form/steps/step-three/step-three.component.scss b/src/app/features/administration/form/steps/step-three/step-three.component.scss
index 189dd1c1..04e9acb0 100644
--- a/src/app/features/administration/form/steps/step-three/step-three.component.scss
+++ b/src/app/features/administration/form/steps/step-three/step-three.component.scss
@@ -13,16 +13,6 @@
 	margin-top: 1em;
 }
 
-.is-secondary {
-	border-color: $primary-color;
-	color: $primary-color;
-
-	&:hover {
-		background: $primary_color;
-		color: $white;
-	}
-}
-
 .date-input-selector {
 	padding: 0.25rem 1rem;
 }
diff --git a/src/app/features/administration/form/steps/step-two/step-two.component.scss b/src/app/features/administration/form/steps/step-two/step-two.component.scss
index 4305fe11..23c08cdc 100644
--- a/src/app/features/administration/form/steps/step-two/step-two.component.scss
+++ b/src/app/features/administration/form/steps/step-two/step-two.component.scss
@@ -1,10 +1,5 @@
 @import '../../../../../../styles/variables';
 .poll-kind {
-	.title {
-		margin-bottom: 32px;
-		font-size: 32px;
-		line-height: 36.8px;
-	}
 }
 .kind-of-poll {
 	min-height: 30vh;
diff --git a/src/app/features/administration/stepper/stepper.component.html b/src/app/features/administration/stepper/stepper.component.html
index 401f3316..e995b6f9 100644
--- a/src/app/features/administration/stepper/stepper.component.html
+++ b/src/app/features/administration/stepper/stepper.component.html
@@ -114,7 +114,7 @@
 			<div class="top">
 				<button
 					id="close_dialog"
-					class="button cancel-button-reject pull-right img-marged-left has-no-border"
+					class="button cancel-button-reject pull-right img-marged-left has-no-border is-closing-popup"
 					(click)="focusOnCancelButton()"
 				>
 					{{ 'SENTENCES.Close' | translate }}
diff --git a/src/app/features/administration/stepper/stepper.component.scss b/src/app/features/administration/stepper/stepper.component.scss
index ad942f47..6e060609 100644
--- a/src/app/features/administration/stepper/stepper.component.scss
+++ b/src/app/features/administration/stepper/stepper.component.scss
@@ -99,12 +99,6 @@
 	#close_stepper {
 		border-radius: 3em;
 
-		.title {
-			margin-top: 2rem;
-			font-size: 24px;
-			color: $d-primary-intense;
-		}
-
 		.description {
 			color: $font_color;
 			font-size: 1rem;
diff --git a/src/app/features/consultation/consultation.component.scss b/src/app/features/consultation/consultation.component.scss
index b7b7f16b..80f7d287 100644
--- a/src/app/features/consultation/consultation.component.scss
+++ b/src/app/features/consultation/consultation.component.scss
@@ -6,9 +6,6 @@
 }
 
 .poll_loaded {
-	.title {
-		margin-bottom: 0;
-	}
 	.description {
 		min-height: 2rem;
 	}
diff --git a/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.scss b/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.scss
index 92c07aa0..777db38d 100644
--- a/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.scss
+++ b/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.scss
@@ -22,10 +22,6 @@
 	}
 }
 
-.title {
-	margin-top: 1em;
-}
-
 table {
 	width: 100%;
 	display: block;
diff --git a/src/app/shared/components/page-not-found/page-not-found.component.scss b/src/app/shared/components/page-not-found/page-not-found.component.scss
index 1b97c1f9..a9a6d14b 100644
--- a/src/app/shared/components/page-not-found/page-not-found.component.scss
+++ b/src/app/shared/components/page-not-found/page-not-found.component.scss
@@ -1,7 +1,4 @@
 .hero-body {
 	padding-top: 5rem;
 	min-height: 50vh;
-	.title {
-		color: #222;
-	}
 }
diff --git a/src/app/shared/components/selectors/language-selector/language-selector.component.html b/src/app/shared/components/selectors/language-selector/language-selector.component.html
index c65a8f68..aee696f6 100644
--- a/src/app/shared/components/selectors/language-selector/language-selector.component.html
+++ b/src/app/shared/components/selectors/language-selector/language-selector.component.html
@@ -34,7 +34,7 @@
 						<div class="top">
 							<button
 								id="close_dialog{{ idSuffix }}"
-								class="button cancel-button-reject pull-right img-marged-left has-no-border"
+								class="button cancel-button-reject pull-right img-marged-left has-no-border is-closing-popup"
 								lang="{{ currentLang }}"
 								(click)="closeModalAndFocusOnButtonToOpen()"
 							>
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index d2fd9f27..dc878993 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -42,7 +42,7 @@ export const environment = {
 	frontDomain: 'http://127.0.0.1:4200',
 	interval_days_default: 7,
 	description_max_chars: 900,
-	maxCountOfAnswers: 300,
+	maxCountOfAnswers: '',
 	production: false,
 	showDemoWarning: false,
 	showStepperShortcuts: false,
diff --git a/src/styles/dev-utilities/_helpers.scss b/src/styles/dev-utilities/_helpers.scss
index b1673bc1..b299c258 100644
--- a/src/styles/dev-utilities/_helpers.scss
+++ b/src/styles/dev-utilities/_helpers.scss
@@ -108,3 +108,6 @@
 	background: url('/assets/icons/plus-circle.svg') no-repeat left center;
 	//background: $d-blue30 url('/assets/img/kind_classic.svg') no-repeat 19px center;
 }
+.is-block {
+	display: block;
+}
diff --git a/src/styles/libraries/_frameworks.scss b/src/styles/libraries/_frameworks.scss
index 2cf7c062..5dcd532a 100644
--- a/src/styles/libraries/_frameworks.scss
+++ b/src/styles/libraries/_frameworks.scss
@@ -1,11 +1,11 @@
 @import '../../../node_modules/bulma/bulma.sass';
 // Import only what you need from Bulma
 @import '../../../node_modules/bulma/sass/utilities/_all.sass';
-//@import '../../../node_modules/bulma/sass/base/_all.sass';
+@import '../../../node_modules/bulma/sass/base/_all.sass';
 //@import '../../../node_modules/bulma/sass/elements/button.sass';
 @import '../../../node_modules/bulma/sass/elements/container.sass';
 //@import '../../../node_modules/bulma/sass/elements/title.sass';
 //@import '../../../node_modules/bulma/sass/form/_all.sass';
-@import '../../../node_modules/bulma/sass/components/navbar.sass';
-@import '../../../node_modules/bulma/sass/layout/hero.sass';
-@import '../../../node_modules/bulma/sass/layout/section.sass';
+//@import '../../../node_modules/bulma/sass/components/navbar.sass';
+//@import '../../../node_modules/bulma/sass/layout/hero.sass';
+//@import '../../../node_modules/bulma/sass/layout/section.sass';
diff --git a/src/styles/partials/_buttons.scss b/src/styles/partials/_buttons.scss
index 7d068dff..c45e9aa4 100644
--- a/src/styles/partials/_buttons.scss
+++ b/src/styles/partials/_buttons.scss
@@ -24,6 +24,10 @@ a {
 	box-sizing: border-box;
 	border-radius: 4px;
 	cursor: pointer;
+	&.is-fullwidth {
+		display: block;
+		text-align: center;
+	}
 }
 
 .is-white {
@@ -101,6 +105,10 @@ a {
 		color: #3e3882;
 	}
 }
+.is-closing-popup {
+	background: #fff;
+	color: #6359cf !important;
+}
 
 .buttons-demo button {
 	float: left;
@@ -115,11 +123,16 @@ a {
 .is-warning {
 	@extend .is-warning;
 }
-
+.is-info {
+	background-color: #94bae2;
+}
 .btn--info {
 	@extend .is-info;
 }
 
+.is-danger {
+	background-color: #e08181;
+}
 .btn--danger {
 	@extend .is-danger;
 }
diff --git a/src/styles/partials/_datepicker.scss b/src/styles/partials/_datepicker.scss
index b3941efe..978a7137 100644
--- a/src/styles/partials/_datepicker.scss
+++ b/src/styles/partials/_datepicker.scss
@@ -10,12 +10,6 @@ p-calendar,
 	max-width: 90vw;
 }
 
-.p-dialog {
-	.title {
-		color: $primary_color;
-	}
-}
-
 .p-datepicker {
 	padding: 0 !important;
 	margin: 1em auto;
diff --git a/src/styles/partials/_forms.scss b/src/styles/partials/_forms.scss
index 792dbfab..620352bd 100644
--- a/src/styles/partials/_forms.scss
+++ b/src/styles/partials/_forms.scss
@@ -19,7 +19,7 @@ input,
 select,
 textarea {
 	display: inline-block;
-	padding: 1rem;
+	padding: 0.85rem;
 	margin-right: 2px;
 	margin-bottom: 1em;
 
@@ -44,7 +44,7 @@ input,
 select,
 .select {
 	font-size: 1rem !important;
-	line-height: 40px;
+	line-height: 28px;
 	border: solid 1px $font-color !important;
 	border-radius: 4px;
 	font-family: $default_font;
@@ -294,13 +294,6 @@ mat-checkbox {
 	box-sizing: border-box;
 	@extend .top-padding-nav;
 
-	.title {
-		color: $d-primary-intense;
-		margin-bottom: 36px;
-		font-size: 28px;
-		line-height: 32px;
-	}
-
 	.columns {
 		margin: 0;
 		.column {
@@ -338,14 +331,6 @@ mat-checkbox {
 		margin-left: -1em;
 		margin-right: -1em;
 	}
-	.content {
-		.title {
-			&.is-2,
-			&.is-3 {
-				color: $secondary_color;
-			}
-		}
-	}
 
 	.list-datechoices {
 		ul {
diff --git a/src/styles/partials/_tables.scss b/src/styles/partials/_tables.scss
index 495a1294..e69de29b 100644
--- a/src/styles/partials/_tables.scss
+++ b/src/styles/partials/_tables.scss
@@ -1,7 +0,0 @@
-table {
-	@extend .table, .is-striped, .is-hoverable;
-}
-
-framadate-voting-summary {
-	@extend .table-container;
-}
diff --git a/src/styles/partials/_typo.scss b/src/styles/partials/_typo.scss
index 0e8bb0c9..99d73978 100644
--- a/src/styles/partials/_typo.scss
+++ b/src/styles/partials/_typo.scss
@@ -6,34 +6,52 @@ body {
 	h5,
 	h6 {
 		font-family: $title_font;
-		color: $primary_color;
+		color: $d-primary-intense;
 	}
 
-	h1 {
-		font-family: $title_font;
-
-		&::after {
-			background-color: $primary_color;
-			height: 2px;
+	.title {
+		&.is-1 {
+			color: $d-primary-intense;
+			font-weight: 700;
+			font-size: 32px;
+			line-height: 37px;
+			margin-bottom: 1rem;
+		}
+		&.is-2 {
+			color: $d-primary-intense;
+			font-size: 20px;
+			line-height: 23px;
+			margin-bottom: 1rem;
+		}
+		&.is-3 {
+			color: $d-primary-intense;
+			font-family: $title_font;
+			font-weight: 700;
+			font-size: 20px;
+			line-height: 23px;
+			margin-bottom: 1rem;
 		}
 	}
-
-	h2 {
-		font-family: $title_font;
-		font-size: 1.75rem;
-		font-weight: 600;
-		line-height: 2rem;
-		margin-bottom: 2rem;
-	}
-
-	h3 {
-		font-family: $title_font;
+	.is-1 {
+		color: $d-primary-intense;
+		font-weight: 700;
 		font-size: 32px;
-		line-height: 36.8px;
+		line-height: 37px;
+		margin-bottom: 1rem;
 	}
-
-	h4 {
+	.is-2 {
+		color: $d-primary-intense;
+		font-size: 20px;
+		line-height: 23px;
+		margin-bottom: 1rem;
+	}
+	.is-3 {
+		color: $d-primary-intense;
 		font-family: $title_font;
+		font-weight: 700;
+		font-size: 20px;
+		line-height: 23px;
+		margin-bottom: 1rem;
 	}
 
 	.p-dialog {
@@ -50,10 +68,6 @@ body {
 
 		.p-dialog-content {
 			padding: 1rem 2rem;
-
-			.title {
-				color: $secondary_color !important;
-			}
 		}
 
 		.p-dialog-footer {
@@ -73,11 +87,6 @@ body {
 		text-align: center;
 	}
 
-	.title {
-		&.is-success {
-			color: $success_color;
-		}
-	}
 	.icon-success {
 		fill: $success_color;
 	}
diff --git a/src/styles/themes/_dark.scss b/src/styles/themes/_dark.scss
index 98c88e0f..8b31ebbd 100644
--- a/src/styles/themes/_dark.scss
+++ b/src/styles/themes/_dark.scss
@@ -1,104 +1,104 @@
-$theme-color-primary: #1b6d85;
-$theme-color-secondary: #1b6d85;
-$theme-color-tertiary: #ccc;
-#big_container {
-	&.theme-dark-crystal {
-		background: #222;
-		color: $theme-color-tertiary;
-
-		main,
-		.big-header,
-		.navbar,
-		footer {
-			background: #444;
-		}
-		.big-header {
-			color: $white;
-			a {
-				color: $white;
-			}
-		}
-		input {
-			background: #222;
-			color: $white;
-		}
-
-		h1::after {
-			background-color: $theme-color-primary;
-		}
-
-		.btn--primary:focus,
-		.btn--primary:hover,
-		.btn--primary:active,
-		.btn--primary {
-			background-color: $theme-color-secondary;
-		}
-
-		.btn--warning:focus,
-		.btn--warning:hover,
-		.btn--warning:active,
-		.btn--warning {
-			background-color: $theme-color-secondary;
-		}
-
-		select {
-			background: $theme-color-tertiary;
-			border-color: $theme-color-secondary;
-
-			&:hover {
-				color: $theme-color-tertiary;
-			}
-		}
-
-		.title {
-			color: $theme-color-tertiary;
-		}
-
-		.lang_icon,
-		.menu_icon {
-			fill: $theme-color-secondary !important;
-			color: $theme-color-secondary !important;
-		}
-
-		label {
-			color: $theme-color-tertiary;
-		}
-
-		// bulma override
-		.button.is-primary,
-		.button.btn--primary,
-		button.is-primary,
-		button.btn--primary,
-		.is-primary.btn,
-		.btn.btn--primary,
-		.is-primary.back,
-		.back.btn--primary {
-			background-color: $theme-color-primary !important;
-			color: $theme-color-tertiary !important;
-		}
-		.navbar-dropdown a.navbar-item {
-			color: #444;
-		}
-		// material override
-		.navbar-dropdown a.navbar-item.is-active,
-		body .ui-steps .ui-steps-item.ui-state-highlight .ui-steps-number,
-		a.navbar-item:focus,
-		a.navbar-item:focus-within,
-		a.navbar-item:hover,
-		a.navbar-item.is-active,
-		.navbar-link:focus,
-		.navbar-link:focus-within,
-		.navbar-link:hover,
-		.navbar-link.is-active {
-			color: $theme-color-primary !important;
-		}
-
-		.navbar-link:not(.is-arrowless)::after {
-			border-color: $theme-color-primary;
-		}
-
-		body .ui-inputswitch.ui-inputswitch-checked:not(.ui-state-disabled) .ui-inputswitch-slider {
-			background-color: $theme-color-primary;
-		}
-	}
-}
+//$theme-color-primary: #1b6d85;
+//$theme-color-secondary: #1b6d85;
+//$theme-color-tertiary: #ccc;
+//#big_container {
+//	&.theme-dark-crystal {
+//		background: #222;
+//		color: $theme-color-tertiary;
+//
+//		main,
+//		.big-header,
+//		.navbar,
+//		footer {
+//			background: #444;
+//		}
+//		.big-header {
+//			color: $white;
+//			a {
+//				color: $white;
+//			}
+//		}
+//		input {
+//			background: #222;
+//			color: $white;
+//		}
+//
+//		h1::after {
+//			background-color: $theme-color-primary;
+//		}
+//
+//		.btn--primary:focus,
+//		.btn--primary:hover,
+//		.btn--primary:active,
+//		.btn--primary {
+//			background-color: $theme-color-secondary;
+//		}
+//
+//		.btn--warning:focus,
+//		.btn--warning:hover,
+//		.btn--warning:active,
+//		.btn--warning {
+//			background-color: $theme-color-secondary;
+//		}
+//
+//		select {
+//			background: $theme-color-tertiary;
+//			border-color: $theme-color-secondary;
+//
+//			&:hover {
+//				color: $theme-color-tertiary;
+//			}
+//		}
+//
+//		.title {
+//			color: $theme-color-tertiary;
+//		}
+//
+//		.lang_icon,
+//		.menu_icon {
+//			fill: $theme-color-secondary !important;
+//			color: $theme-color-secondary !important;
+//		}
+//
+//		label {
+//			color: $theme-color-tertiary;
+//		}
+//
+//		// bulma override
+//		.button.is-primary,
+//		.button.btn--primary,
+//		button.is-primary,
+//		button.btn--primary,
+//		.is-primary.btn,
+//		.btn.btn--primary,
+//		.is-primary.back,
+//		.back.btn--primary {
+//			background-color: $theme-color-primary !important;
+//			color: $theme-color-tertiary !important;
+//		}
+//		.navbar-dropdown a.navbar-item {
+//			color: #444;
+//		}
+//		// material override
+//		.navbar-dropdown a.navbar-item.is-active,
+//		body .ui-steps .ui-steps-item.ui-state-highlight .ui-steps-number,
+//		a.navbar-item:focus,
+//		a.navbar-item:focus-within,
+//		a.navbar-item:hover,
+//		a.navbar-item.is-active,
+//		.navbar-link:focus,
+//		.navbar-link:focus-within,
+//		.navbar-link:hover,
+//		.navbar-link.is-active {
+//			color: $theme-color-primary !important;
+//		}
+//
+//		.navbar-link:not(.is-arrowless)::after {
+//			border-color: $theme-color-primary;
+//		}
+//
+//		body .ui-inputswitch.ui-inputswitch-checked:not(.ui-state-disabled) .ui-inputswitch-slider {
+//			background-color: $theme-color-primary;
+//		}
+//	}
+//}
diff --git a/src/styles/themes/_high-contrast.scss b/src/styles/themes/_high-contrast.scss
index ffbf963c..6a3ecd69 100644
--- a/src/styles/themes/_high-contrast.scss
+++ b/src/styles/themes/_high-contrast.scss
@@ -1,21 +1,21 @@
-/**
-aimed for visual impaired people
- */
-$main-theme-color: #00003b;
-#big_container {
-	&.theme-high-contrast {
-		background: #465f66;
-		color: $main-theme-color;
-
-		h1::after {
-			background-color: $main-theme-color;
-		}
-
-		.btn--primary:focus,
-		.btn--primary:hover,
-		.btn--primary:active,
-		.btn--primary {
-			background-color: $main-theme-color !important;
-		}
-	}
-}
+///**
+//aimed for visual impaired people
+// */
+//$main-theme-color: #00003b;
+//#big_container {
+//	&.theme-high-contrast {
+//		background: #465f66;
+//		color: $main-theme-color;
+//
+//		h1::after {
+//			background-color: $main-theme-color;
+//		}
+//
+//		.btn--primary:focus,
+//		.btn--primary:hover,
+//		.btn--primary:active,
+//		.btn--primary {
+//			background-color: $main-theme-color !important;
+//		}
+//	}
+//}
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 2d0755c2..5b6444bd 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -49,6 +49,7 @@ $d-error-text: #d51b38;
 $outline-color: $intense-blue; // #0a76f6
 $success_color: $d-success-text;
 $primary_color: $d-primary;
+$primary-light: mix($d-primary, $white);
 $primary: $d-primary;
 $secondary_color: $d-primary-intense;
 $bg-grey: $d-blue30;
@@ -64,11 +65,14 @@ $hover-color: $d-neutral;
 $rules: $d-rule;
 $border-color: $d-neutral;
 $input-border-color: $d-border;
+$dark: $d-border;
+$grey: $font_color_light;
 $grey-dark: $d-primary;
 $grey-lighter: $beige-light;
 $clicked-color: $d-primary;
 $mini-button-color: $d-primary-intense;
 $warning: $d-warning;
+$warning-dark: mix($d-warning, $dark);
 $danger: $d-error;
 $success: $d-success;
 
@@ -88,6 +92,9 @@ $stepper-nav-height: 2rem;
 $stepper-progress-bar-height: 5px;
 $home-nav-height: 2rem;
 $home-nav-height-small: 3.5rem;
+
+//$widescreen: 60em;
+
 // datepicker
 $cell-size-datepicker-small: 30px;
 $cell-size-datepicker-desktop: 42px;