feat: introduced header component and map animation in background of …

…sign in page. Improved the layout of sign in panel. (#2597)

* feat: introduced header component and map animation in background of sign in page. Improved the layout of sign in panel.

* fix: adjust padding in sign in page

.changeset/quick-ducks-dress.md

@@ -0,0 +1,5 @@
+---
+"geohub": minor
+---
+
+feat: introduced header component and map animation in background of sign in page. Improved the layout of sign in panel.

sites/geohub/src/components/header/Header.svelte

@@ -11,6 +11,8 @@
 	let headerHeightStore: HeaderHeightStore = getContext(HEADER_HEIGHT_CONTEXT_KEY);
 
 	export let isPositionFixed = true;
+	export let showSignin = true;
+
 	let showMobileMenu = false;
 
 	let links: HeaderLink[];
@@ -45,7 +47,7 @@
 		bind:showMobileMenu
 	>
 		<div slot="custom-button">
-			{#if browser}
+			{#if browser && showSignin}
 				<UserAccount />
 			{/if}
 		</div>

sites/geohub/src/routes/(auth)/auth/+layout@.svelte

@@ -1,3 +1,12 @@
+<script lang="ts">
+	import Header from '$components/header/Header.svelte';
+	import { HEADER_HEIGHT_CONTEXT_KEY, createHeaderHeightStore } from '$stores';
+	import { setContext } from 'svelte';
+
+	const headerHeightStore = createHeaderHeightStore();
+	setContext(HEADER_HEIGHT_CONTEXT_KEY, headerHeightStore);
+</script>
+
 <svelte:head>
 	<style type="text/css">
 		html {
@@ -6,4 +15,10 @@
 	</style>
 </svelte:head>
 
-<slot />
+<div class="header">
+	<Header showSignin={false} />
+</div>
+
+<div style="margin-top: {$headerHeightStore}px">
+	<slot />
+</div>

sites/geohub/src/routes/(auth)/auth/signIn/+page.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import { afterNavigate } from '$app/navigation';
 	import { page } from '$app/stores';
+	import MapHero from '$components/pages/home/MapHero.svelte';
+	import { MapStyleId } from '$lib/config/AppConfig';
 	import { signIn, signOut } from '@auth/sveltekit/client';
 	import type { PageData } from './$types';
 	export let data: PageData;
@@ -13,41 +15,42 @@
 	});
 </script>
 
-<div class="tile is-12 login-tile m-0 p-0 notification is-light">
-	<div class="is-flex is-flex-direction-column is-justify-content-center logo">
-		<img src="/assets/undp-images/undp-logo-blue.svg" alt="logo" width="64" />
-	</div>
+<div class="map-hero">
+	<MapHero styleId={MapStyleId} interactive={false} />
 
 	<div class="login-container message is-link">
-		<div class="message-header is-flex is-justify-content-center is-size-5">Sign in</div>
-		<div class="message-body">
+		<div
+			class="px-5 py-4 has-background-light has-text-dark has-text-weight-semibold is-uppercase is-size-6"
+		>
+			Sign in
+		</div>
+		<div class="p-5">
 			{#if data.session}
 				<p class="subtitle is-6 has-text-justified has-text-dark">
 					You have already signed in. To sign in by another account, please sign out first.
 				</p>
-				<a class="button is-primary is-normal m-1 is-fullwidth" href="/"> Go to Home </a>
-				<button class="button is-link is-normal m-1 is-fullwidth" on:click={() => signOut()}>
+				<button class="button is-link is-normal is-fullwidth" on:click={() => signOut()}>
 					Sign out
 				</button>
 			{:else}
-				<p class="subtitle is-6 has-text-justified has-text-dark">
-					GeoHub allows you to login with:
-				</p>
-				{#each data.providers as provider}
+				<p class="is-6 has-text-justified has-text-dark pb-4">GeoHub allows you to login with:</p>
+				{#each data.providers as provider, index}
 					<button
-						class="login-button button is-medium is-fullwidth my-2"
+						class="login-button button is-medium is-fullwidth is-link"
 						on:click={() => signIn(provider.id, { callbackUrl: previousPage.href })}
 					>
 						<span class="icon is-small">
 							{#if provider.icon.startsWith('fa')}
 								<i class={provider.icon}></i>
 							{:else}
-								<img src={provider.icon} alt="logo" width="64" class="mr-1" />
+								<img src={provider.icon} alt="logo" width="24" class="mr-1" />
 							{/if}
 						</span>
-						<span>{provider.label}</span>
+						<span class="is-uppercase has-text-weight-semibold is-size-6">{provider.label}</span>
 					</button>
-					<p class="help has-text-grey">{provider.description}</p>
+					<p class="has-text-grey pt-2 {index < data.providers.length - 1 ? 'pb-4' : ''} is-size-7">
+						{provider.description}
+					</p>
 				{/each}
 			{/if}
 		</div>
@@ -57,20 +60,9 @@
 <style lang="scss">
 	$height: calc(100vh);
 
-	.login-tile {
+	.map-hero {
 		position: relative;
 
-		height: $height;
-
-		.logo {
-			position: absolute;
-			top: 10px;
-			left: 50%;
-			transform: translateX(-50%);
-			-webkit-transform: translateX(-50%);
-			-ms-transform: translateX(-50%);
-		}
-
 		.login-container {
 			position: absolute;
 			top: 50%;
@@ -83,14 +75,12 @@
 			width: 360px;
 			background-color: rgba(255, 255, 255, 1);
 
-			border: 1px solid #919191;
-		}
-	}
-
-	.login-button {
-		&:hover {
-			background-color: #006eb5;
-			color: white;
+			.login-button {
+				&:hover {
+					background-color: #005893;
+					color: white;
+				}
+			}
 		}
 	}
 </style>

sites/geohub/src/routes/(auth)/auth/signIn/+page.ts

@@ -10,13 +10,13 @@ export const load: PageLoad = async () => {
 			label: `UN Agencies account`,
 			description:
 				'UNDP and all other UN agencies can be authenticated through UNDP B2C login service',
-			icon: '/assets/Small_Flag_of_the_United_Nations_ZP.svg.png'
+			icon: '/assets/un-logo-white.svg'
 		},
 		{
 			id: 'github',
 			label: 'GitHub account',
-			description: 'GitHub account can also be used to sign in to GeoHub',
-			icon: 'fa-brands fa-github fa-xl'
+			description: 'Sign into GeoHub using your GitHub account',
+			icon: 'fa-brands fa-github fa-lg'
 		}
 	];