new login page design

src/lib/locales/en-GB/_common.json

@@ -1,6 +1,8 @@
 {
-	"title": "{guild} - {client} Portal",
-	"staff_dashboard": "Staff Dashboard",
+	"language": "Language",
+	"logout": "Log out",
 	"settings_panel": "Settings Panel",
-	"logout": "Log out"
+	"staff_dashboard": "Staff Dashboard",
+	"theme": "Theme",
+	"title": "{guild} - {client} Portal"
 }

src/lib/locales/en-GB/misc.json

@@ -1,6 +1,6 @@
 {
 	"login_title": "Log in - {username} Portal",
-	"please_login": "You need to be logged in to view this page",
+	"please_login": "Log in to the Portal to view this page",
 	"select_server": "Select a server",
 	"select_server_title": "{username} Portal",
 	"continue_with_discord": "Continue with Discord"

src/routes/(default)/login/+page.js

@@ -4,7 +4,10 @@ import { importJSON } from '$lib/i18n';
 export async function load({ parent, url }) {
 	const { locale } = await parent();
 	return {
-		translations: importJSON(await import(`../../../lib/locales/${locale}/misc.json`)),
+		translations: importJSON(
+			await import(`../../../lib/locales/${locale}/_common.json`),
+			await import(`../../../lib/locales/${locale}/misc.json`)
+		),
 		query: url.search
 	};
 }

src/routes/(default)/login/+page.svelte

@@ -15,40 +15,65 @@
 	<link rel="icon" href={`${client.avatar}?size=32`} />
 </svelte:head>
 
-<div class="flex flex-col lg:flex-row gap-0">
-	<div class="lg:w-1/2 bg-dgrey-400 dark:bg-dgrey-950 lg:min-h-screen">
-		<div class="flex justify-center lg:min-h-screen p-8">
-			<div class="flex items-center gap-8">
-				<img src={`${client.avatar}?size=512`} alt="" class="rounded-full h-24 w-24" />
-				<h1 class="font-bold text-2xl lg:text-4xl">{client.username}</h1>
-			</div>
-			<!-- <p
-				class="hidden lg:inline text-dgrey-100 dark:text-dgrey-800 font-black text-6xl lg:text-8xl tracking-wide text-center lg:text-left lg:absolute lg:bottom-10 m-0 p-0 select-none"
-			>
-				Portal
-			</p> -->
-		</div>
-	</div>
+<div
+	class="min-h-screen bg-cover bg-no-repeat"
+	style={`background-image: url("/assets/topgg-${theme}.png")`}
+>
 	<div
-		class="lg:w-1/2 bg-cover bg-no-repeat"
-		style={`background-image: url("/assets/topgg-${theme}.png")`}
+		class="min-h-screen bg-gradient-to-bl from-blurple/50 to-white/10 dark:from-blurple/25 dark:to-blurple/5"
 	>
-		<!-- <div class="bg-gradient-to-br from-white/10 to-white/20 dark:from-blurple/20  dark:to-[#090510]/10"> -->
-		<div class="bg-gradient-to-br from-blurple/50 to-blurple/5 dark:from-blurple/20  dark:to-[#090510]/10">
-			<div class="flex items-center justify-stretch lg:min-h-screen p-8 backdrop-blur-sm">
-				<div class="flex flex-col items-center gap-4 w-full text-black dark:text-dgrey-300">
-					<div class="text-lg font-semibold">
-						{t('please_login')}
+		<div class="flex flex-col lg:flex-row gap-0 backdrop-blur-sm">
+			<div class="lg:w-1/2 lg:min-h-screen">
+				<!-- bg-dgrey-400 dark:bg-dgrey-950 -->
+				<div class="flex justify-center lg:min-h-screen p-8">
+					<div class="flex items-center gap-8">
+						<img src={`${client.avatar}?size=512`} alt="" class="rounded-full h-24 w-24" />
+						<h1 class="font-bold text-2xl lg:text-4xl">{client.username}</h1>
+					</div>
+				</div>
+			</div>
+			<div class="lg:w-1/2">
+				<div class="flex items-center justify-center lg:justify-stretch lg:min-h-screen">
+					<div class="bg-dgrey-100 dark:bg-dgrey-900 m-4 rounded-lg shadow-2xl">
+						<div class="flex flex-col items-center gap-6 p-8 sm:p-12">
+							<div class="text-lg font-semibold">
+								{t('please_login')}
+							</div>
+							<a
+								href={'/auth/login' + query}
+								class="bg-blurple hover:bg-blurple/75 text-white p-2 px-5 rounded-lg font-semibold transition duration-300 focus:outline-none border-2 border-white/50 dark:border-white/25 focus:ring-2 ring-blurple"
+							>
+								<span class="flex flex-row items-center gap-2">
+									<i class="fa-brands fa-discord"></i>
+									{t('continue_with_discord')}
+								</span>
+							</a>
+						</div>
+						<div
+							class="bg-dgrey-400 dark:bg-dgrey-950 p-1.5 rounded-b-lg text-xs dark:text-dgrey-400/75"
+						>
+							<div class="flex justify-evenly">
+								<!-- py-1 px-2 text-dgrey-700 bg-dgrey-900/10 hover:bg-dgrey-900/20 dark:bg-dgrey-400/10 dark:hover:bg-dgrey-400/20 dark:text-dgrey-400/75 hover:dark:text-dgrey-400/100 duration-300 rounded-md -->
+								<div
+									class=""
+								>
+									<div class="flex items-center gap-2">
+										<i class="fa-solid fa-globe" />
+										{t('common:language')}
+									</div>
+								</div>
+
+								<div
+									class=""
+								>
+									<div class="flex items-center gap-2">
+										<i class="fa-solid {theme === 'dark' ? 'fa-moon' : 'fa-sun'}" />
+										{t('common:theme')}
+									</div>
+								</div>
+							</div>
+						</div>
 					</div>
-					<a
-						href={'/auth/login' + query}
-						class="bg-blurple hover:bg-blurple/75 text-white p-2 px-5 rounded-lg font-semibold transition duration-300 focus:outline-none border-2 border-white/50 dark:border-white/25 focus:ring-2 ring-blurple"
-					>
-						<span class="flex flex-row items-center gap-2">
-							<i class="fa-brands fa-discord"></i>
-							{t('continue_with_discord')}
-						</span>
-					</a>
 				</div>
 			</div>
 		</div>

src/routes/+layout.svelte

@@ -8,10 +8,11 @@
 	import ms from 'ms';
 	import { onMount, setContext } from 'svelte';
 
-	const { client, user, theme } = data;
+	const { client, user, theme, locale } = data;
 	setContext('client', client);
 	setContext('user', user);
 	setContext('theme', theme);
+	setContext('locale', locale);
 	onMount(() => {
 		if (theme === undefined) {
 			document.cookie = cookie.serialize(