resolve conflicts

src/components/TopBar.svelte

@@ -6,7 +6,7 @@
 	let { user, isDark } = $props();
 
 	const toggle = () => {
-		document.cookie = cookie.serialize('theme', isDark ? 'light' : 'dark', {
+		document.cookie = cookie.serialize('theme', theme === 'dark' ? 'light' : 'dark', {
 			maxAge: ms('1y') / 1000,
 			path: '/',
 			sameSite: 'lax'
@@ -20,11 +20,7 @@
 		<div>
 			<a href={base + '/settings'} class="flex justify-center md:justify-start">
 				<!-- <img src="/logo.png" class="h-8" alt="Discord Tickets" /> -->
-				<img
-					src="https://static.eartharoid.me/discord-tickets/logo/{isDark ? 'white' : 'dark'}.png"
-					class="h-8"
-					alt="Discord Tickets"
-				/>
+				<img src="/assets/wordmark-{theme}.png" class="h-8" alt="Discord Tickets" />
 			</a>
 		</div>
 		<div>
@@ -44,7 +40,7 @@
 					<span class="ml-3">{user.username}</span>
 				</a>
 				<div class="ml-4">
-					{#if isDark}
+					{#if theme === 'dark'}
 						<i
 							class="fa-solid fa-moon cursor-pointer p-1 text-lg transition duration-300 hover:text-blurple"
 							title="Switch to light mode"

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

@@ -5,42 +5,75 @@
 	const { client, translations, query } = data;
 	const i18n = new I18nLite();
 	const t = i18n.loadParsed(...translations).createTranslator();
+
+	let theme = getContext('theme');
 </script>
 
 <svelte:head>
 	<title>{t('login_title', { username: client.username })}</title>
 	<link rel="icon" href={`${client.avatar}?size=32`} />
 </svelte:head>
 
-<div class="flex flex-col gap-0 lg:flex-row">
-	<div class="bg-dgrey-400 dark:bg-dgrey-950 lg:min-h-screen lg:w-1/2">
-		<div class="flex justify-center p-8 lg:min-h-screen">
-			<div class="flex items-center gap-8">
-				<img src={`${client.avatar}?size=512`} alt="" class="h-24 w-24 rounded-full" />
-				<h1 class="text-2xl font-bold lg:text-4xl">{client.username}</h1>
+<div
+	class="min-h-screen bg-cover bg-no-repeat"
+	style={`background-image: url("/assets/topgg-${theme}.png")`}
+>
+	<div
+		class="min-h-screen bg-gradient-to-bl from-blurple/50 to-white/10 dark:from-blurple/25 dark:to-blurple/5"
+	>
+		<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>
-			<p
-				class="m-0 hidden p-0 text-center text-6xl font-black tracking-wide text-dgrey-100 dark:text-dgrey-800 lg:absolute lg:bottom-10 lg:inline lg:text-left lg:text-8xl"
-			>
-				Portal
-			</p>
-		</div>
-	</div>
-	<div class="lg:w-1/2">
-		<div class="flex items-center justify-stretch p-8 lg:min-h-screen">
-			<div class="flex w-full flex-col items-center gap-4">
-				<div class="text-lg font-semibold">
-					{t('please_login')}
+			<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>
 				</div>
-				<a
-					href={'/auth/login' + query}
-					class="rounded-lg border-2 border-white/50 bg-blurple p-2 px-5 font-semibold text-white ring-blurple transition duration-300 hover:bg-blurple/75 focus:outline-none focus:ring-2 dark:border-white/25"
-				>
-					<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

@@ -7,10 +7,11 @@
 	/** @type {{data: import('./$types').PageData, children?: import('svelte').Snippet}} */
 	let { data, children } = $props();
 
-	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(

src/routes/settings/+layout.svelte

@@ -84,7 +84,7 @@
 				{#if $navigating || !mounted}
 					<Spinner />
 				{:else}
-					<TopBar {user} isDark={theme === 'dark'} />
+					<TopBar {user} {theme} />
 					{@render children?.()}
 					<footer class="my-16 text-center">
 						<div class="mb-6 p-2 text-sm">

src/routes/settings/[guild]/feedback/+page.svelte

@@ -7,7 +7,7 @@
 <div class="mx-auto my-8 max-w-lg text-center">
 	<div class="my-8">
 		<img
-			src={`${base}/img/undraw_reviews.svg`}
+			src={`${base}/assets/undraw_reviews.svg`}
 			alt="Reviews illustration"
 			width="70%"
 			height="auto"