From e4c3d4e02280b07e17dbc3df9fc69eb94d001ad4 Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Mon, 13 Dec 2021 18:14:40 +0100
Subject: [PATCH] style for homepage containers, lang selector icon, colors

---
 .../components/footer/footer.component.scss   |  4 --
 .../components/header/header.component.html   | 29 ++++++-----
 .../components/header/header.component.scss   | 50 +++++++++++++++----
 .../core/components/home/home.component.html  | 16 +++---
 .../core/components/home/home.component.scss  | 43 +++++++++-------
 .../navigation/navigation.component.scss      | 12 -----
 src/app/core/models/owner.model.ts            |  4 +-
 .../stepper/stepper.component.html            |  7 ++-
 .../language-selector.component.html          | 11 ++--
 src/environments/environment.prod.ts          |  1 +
 src/environments/environment.ts               |  1 +
 src/styles/partials/_forms.scss               |  2 +-
 src/styles/partials/_responsive.scss          |  2 +-
 src/styles/partials/global.scss               |  7 +++
 src/styles/variables.scss                     |  1 +
 15 files changed, 113 insertions(+), 77 deletions(-)

diff --git a/src/app/core/components/footer/footer.component.scss b/src/app/core/components/footer/footer.component.scss
index f09a6cfd..93202894 100644
--- a/src/app/core/components/footer/footer.component.scss
+++ b/src/app/core/components/footer/footer.component.scss
@@ -1,7 +1,3 @@
-.app-logo {
-	max-width: 5em;
-	max-height: 5em;
-}
 .main-footer {
 	a {
 		color: #fff;
diff --git a/src/app/core/components/header/header.component.html b/src/app/core/components/header/header.component.html
index 9a85ba05..3035ea5b 100644
--- a/src/app/core/components/header/header.component.html
+++ b/src/app/core/components/header/header.component.html
@@ -1,12 +1,12 @@
 <header class="big-header">
-	<div class="container">
+	<div class="stuff">
 		<nav class="navbar" role="navigation" aria-label="main navigation">
 			<div class="navbar-brand">
-				<a class="navbar-item" routerLink="/">
+				<a class="navbar-item title logo-home-link has-text-black" routerLink="/">
 					<img class="app-logo logo" *ngIf="appLogo" src="{{ appLogo }}" alt="{{ appTitle }}" />
-				</a>
-				<a class="navbar-item title is-size-1-fullhd is-size-4-touch has-text-black" routerLink="/">
-					{{ appTitle }}
+					<span class="app-title">
+						{{ appTitle }}
+					</span>
 					<!--					<sub>-->
 					<!--						{{ environment.appVersion }}-->
 					<!--					</sub>-->
@@ -15,6 +15,7 @@
 			<div class="navbar-start">
 				<span class="navbar-item">
 					<a
+						*ngIf="environment.display_header_create_button"
 						class="button is-primary"
 						role="button"
 						routerLink="/administration"
@@ -25,19 +26,19 @@
 							{{ 'creation.init' | translate }}
 						</div>
 					</a>
-					<a href="#">
+					<a href="#" class="navbar-item is-visible-desktop">
 						Explorer le libre
 						<i class="fa fa-chevron-down"></i>
 					</a>
-					<a href="#">
+					<a href="#" class="navbar-item is-visible-desktop">
 						Des outils éthiques
 						<i class="fa fa-chevron-down"></i>
 					</a>
-					<a href="#">
+					<a href="#" class="navbar-item is-visible-desktop">
 						Changer le monde
 						<i class="fa fa-chevron-down"></i>
 					</a>
-					<a href="#">
+					<a href="#" class="navbar-item is-visible-desktop">
 						Entraide
 						<i class="fa fa-chevron-down"></i>
 					</a>
@@ -49,10 +50,12 @@
 				<span class="navbar-item">
 					<app-language-selector></app-language-selector>
 				</span>
-				<a href="#">
-					Faire un don
-					<i class="fa fa-chevron-down"></i>
-				</a>
+				<span class="navbar-item give-to-project">
+					<a href="#" class="button is-outlined">
+						Faire un don
+						<i class="fa fa-chevron-down"></i>
+					</a>
+				</span>
 			</div>
 			<!-- navbar items -->
 			<div class="mobile-menu" *ngIf="mobileMenuVisible">
diff --git a/src/app/core/components/header/header.component.scss b/src/app/core/components/header/header.component.scss
index e8b84af2..9079b9f7 100644
--- a/src/app/core/components/header/header.component.scss
+++ b/src/app/core/components/header/header.component.scss
@@ -1,15 +1,43 @@
-:host {
-	margin: 0;
-	.demo {
-		margin: 1em;
+@import '../../../../styles/variables';
+
+.navbar-item {
+	color: $white;
+	.app-title {
+		color: $white;
 	}
-	.burger-button-menu-custom {
-		width: 4em;
-		text-align: center;
+	a {
+		color: $white;
 	}
-	.navbar-item {
-		.fa {
-			margin-right: 1ch;
-		}
+	.fa {
+		margin: 0 1ch;
+	}
+}
+.app-logo {
+	max-width: $main-column-width-inner;
+	max-height: $main-column-width-inner;
+	height: 3rem;
+	width: 3rem;
+	display: inline-block;
+}
+
+.logo-home-link {
+	margin-top: 0;
+	line-height: $header-nav-inner-height;
+	padding: 1rem !important;
+	font-size: 0.85rem;
+
+	&:hover {
+		color: $font_color;
+	}
+}
+.give-to-project {
+	.button {
+		background: transparent;
+	}
+}
+
+app-language-selector {
+	.fa {
+		color: $white;
 	}
 }
diff --git a/src/app/core/components/home/home.component.html b/src/app/core/components/home/home.component.html
index 91f31a8b..35170936 100644
--- a/src/app/core/components/home/home.component.html
+++ b/src/app/core/components/home/home.component.html
@@ -16,7 +16,7 @@
 							</a>
 						</div>
 						<div class="column">
-							<a role="button" class="button is-fullwidth is-secondary" routerLink="about">
+							<a role="button" class="button is-fullwidth is-secondary is-outlined" routerLink="about">
 								{{ 'config.discover' | translate }}
 							</a>
 						</div>
@@ -37,7 +37,7 @@
 				<form (ngSubmit)="searchMyPolls()">
 					<div class="search-others-box">
 						<div class="columns">
-							<div class="search-others column is-three-fifths-desktop marged-auto">
+							<div class="search-others column contained-in-main-column">
 								<h2 class="title is-2">
 									{{ 'home.search_title' | translate }}
 								</h2>
@@ -64,12 +64,12 @@
 									<i class="fa fa-envelope"></i> C'est envoyé! Vérifiez votre boite email, ainsi que
 									votre dossier de spam.
 								</div>
-								<div
-									class="email_error has-background-warning padded"
-									*ngIf="nonexistent_email === storageService.vote_stack.owner.email"
-								>
-									<i class="fa fa-warning"></i> Aucun sondage enregistré pour cet email.
-								</div>
+								<!--								<div-->
+								<!--									class="email_error has-background-warning padded"-->
+								<!--									*ngIf="nonexistent_email === storageService.vote_stack.owner.email"-->
+								<!--								>-->
+								<!--									<i class="fa fa-warning"></i> Aucun sondage enregistré pour cet email.-->
+								<!--								</div>-->
 								<button
 									type="submit"
 									role="button"
diff --git a/src/app/core/components/home/home.component.scss b/src/app/core/components/home/home.component.scss
index 8b2db1da..109fd66b 100644
--- a/src/app/core/components/home/home.component.scss
+++ b/src/app/core/components/home/home.component.scss
@@ -22,7 +22,6 @@
 		&.is-secondary {
 			color: $white !important;
 			background: $secondary_color !important;
-			border-color: $secondary_color !important;
 		}
 	}
 
@@ -43,24 +42,32 @@
 	.home-content {
 		.title,
 		.subtitle {
-			color: $primary_color;
-		}
-	}
-
-	.search {
-		margin-top: 2em;
-		.search-others {
-			padding: 1em;
-			background: $d-grey;
-			border-radius: 0.25em;
-		}
-		#search_email {
-			background: $white;
-		}
-		.button-submit {
-			background: $d-grey;
 			color: $secondary_color;
-			border-color: $secondary_color;
 		}
 	}
 }
+
+.search {
+	margin-top: 2em;
+	.title {
+		font-size: 1.5rem;
+	}
+	.search-others {
+		padding: 2rem;
+		background: $d-grey;
+		border-radius: 0.5rem;
+	}
+	#search_email {
+		background: $white !important;
+		margin-bottom: 0;
+	}
+	.button-submit {
+		margin-top: 1rem !important;
+		background: $d-grey;
+		color: $secondary_color;
+		border-color: $secondary_color;
+	}
+	.search-description {
+		margin: 2rem 0;
+	}
+}
diff --git a/src/app/core/components/sibebar/navigation/navigation.component.scss b/src/app/core/components/sibebar/navigation/navigation.component.scss
index 49a9bfd3..ed2ebe6d 100644
--- a/src/app/core/components/sibebar/navigation/navigation.component.scss
+++ b/src/app/core/components/sibebar/navigation/navigation.component.scss
@@ -4,15 +4,3 @@ em {
 	margin-left: 1ch;
 	margin-right: 1ch;
 }
-
-.logo-home-link {
-	margin-top: 0;
-	line-height: $header-nav-inner-height;
-	height: $header-nav-inner-height;
-	display: inline-block;
-	padding-left: 1em;
-
-	&:hover {
-		color: $font_color;
-	}
-}
diff --git a/src/app/core/models/owner.model.ts b/src/app/core/models/owner.model.ts
index 580afd49..c6969ebb 100644
--- a/src/app/core/models/owner.model.ts
+++ b/src/app/core/models/owner.model.ts
@@ -3,8 +3,8 @@ import { Poll } from './poll.model';
 
 export class Owner {
 	constructor(
-		public pseudo: string = 'pseudo',
-		public email: string = '_nonexistent_contact@cipherbliss.com',
+		public pseudo: string = '',
+		public email: string = '',
 		public polls: Poll[] = [],
 		public role: UserRole = UserRole.ADMIN,
 		public modifier_token: string = '',
diff --git a/src/app/features/administration/stepper/stepper.component.html b/src/app/features/administration/stepper/stepper.component.html
index 8bd6ea47..e74e3620 100644
--- a/src/app/features/administration/stepper/stepper.component.html
+++ b/src/app/features/administration/stepper/stepper.component.html
@@ -58,7 +58,12 @@
 					[routerLink]="['/']"
 					routerLinkActive="active"
 				>
-					<img src="assets/img/icone_home.png" alt="accueil FramaDate" />
+					<img
+						class="app-logo logo"
+						*ngIf="environment.appLogo"
+						src="{{ environment.appLogo }}"
+						alt="accueil {{ environment.appTitle }}"
+					/>
 				</a>
 				<h2 class="step-title-poll" *ngIf="pollService.step_current == 1">
 					{{ 'creation.title' | translate }}
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 842ed31d..d07ce49d 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
@@ -1,10 +1,9 @@
 <div class="selector">
-	<img
-		class="lang-selector-icon clickable"
-		src="assets/img/icone-langue.svg"
-		alt="sélection de langue"
-		(click)="nextLang()"
-	/>
+	<span class="lang-button" (click)="nextLang()">
+		{{ 'LANGUAGES.' + currentLang | translate }}
+		<i class="fa fa-language lang-selector-icon clickable" title="sélection de langue"></i>
+	</span>
+
 	<div class="buttons has-addons">
 		<label for="lang_selector" class="hidden"
 			>{{ 'selector.lang' | translate }} {{ 'LANGUAGES.' + language | translate }}</label
diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
index 75548c70..6b0ff6fa 100644
--- a/src/environments/environment.prod.ts
+++ b/src/environments/environment.prod.ts
@@ -29,6 +29,7 @@ export const environment = {
 	creation_email_is_required: true,
 	display_menu_creation: false,
 	display_routes: false,
+	display_header_create_button: false,
 	expiresDaysDelay: 60,
 	frontDomain: productionBaseUrl,
 	interval_days_default: 7,
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index 70025ced..e7148fa3 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -28,6 +28,7 @@ export const environment = {
 	creation_display_hour_per_day: false, // display or not the ability to choose time slices different per day
 	creation_display_proposals_time_slices: false,
 	creation_email_is_required: true,
+	display_header_create_button: false,
 	display_menu_creation: false,
 	display_routes: false, // demo paths to test polls
 	expiresDaysDelay: 60,
diff --git a/src/styles/partials/_forms.scss b/src/styles/partials/_forms.scss
index b98e1a02..ed7e331a 100644
--- a/src/styles/partials/_forms.scss
+++ b/src/styles/partials/_forms.scss
@@ -274,7 +274,7 @@ mat-checkbox {
 .step {
 	max-width: $main-column-width;
 	margin: 0 auto;
-	padding: 5rem 1rem;
+	padding: 9rem 1rem;
 	box-sizing: border-box;
 	overflow: auto;
 	@extend .top-padding-nav;
diff --git a/src/styles/partials/_responsive.scss b/src/styles/partials/_responsive.scss
index b578050b..631dd73c 100644
--- a/src/styles/partials/_responsive.scss
+++ b/src/styles/partials/_responsive.scss
@@ -7,7 +7,7 @@
 // wide screen like desktop
 @media (min-width: $widescreen) {
 	.step {
-		padding: 2rem 0;
+		padding: 6rem 0;
 	}
 	.date-choice > input:first-of-type {
 		width: 75%;
diff --git a/src/styles/partials/global.scss b/src/styles/partials/global.scss
index b551de7e..012f6828 100644
--- a/src/styles/partials/global.scss
+++ b/src/styles/partials/global.scss
@@ -101,3 +101,10 @@ main {
 	width: 100%;
 	display: block;
 }
+.contained-desktop,
+.stuff {
+	display: block;
+	width: 100%;
+	max-width: $widescreen-width-main-column;
+	margin: 0 auto;
+}
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 2885585d..e31901ed 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -73,6 +73,7 @@ $main-column-width-inner: 23.75rem;
 $mobile-size: 25rem;
 $header-nav-height: 4.25rem;
 $header-nav-inner-height: 4rem;
+$widescreen-width-main-column: 75rem;
 
 // datepicker
 $cell-size: 30px;