From b9c09f58d313867610a0b901de14ac353fdf8c57 Mon Sep 17 00:00:00 2001
From: openhands <openhands@all-hands.dev>
Date: Thu, 23 Jul 2026 18:25:38 +0200
Subject: [PATCH] Use CMS logo in top bar, improve switcher area

- Replace lighthouse.png fallback with cms_logo from site settings
- Add glass-morphism container around Discord/Language/Theme switchers
- Apply to index, register, and login pages
---
 src/app/(site)/login/page.tsx    | 24 ++++++++++++------------
 src/app/(site)/page.tsx          | 28 ++++++++++++++--------------
 src/app/(site)/register/page.tsx | 24 ++++++++++++------------
 3 files changed, 38 insertions(+), 38 deletions(-)

diff --git a/src/app/(site)/login/page.tsx b/src/app/(site)/login/page.tsx
index af098b43..672b8e57 100644
--- a/src/app/(site)/login/page.tsx
+++ b/src/app/(site)/login/page.tsx
@@ -16,7 +16,7 @@ import { Reveal } from "@/components/motion-reveal";
 export default async function LoginPage() {
 	const t = await getTranslations("pages.login");
 	const th = await getTranslations("header");
-	const [hotelName, imagerRaw, cfg, discordUrl] = await Promise.all([
+	const [hotelName, imagerRaw, cfg, discordUrl, logo] = await Promise.all([
 		resolveHotelName(),
 		siteSettings.get(
 			"habbo_imaging_url",
@@ -24,6 +24,7 @@ export default async function LoginPage() {
 		),
 		captchaConfig(),
 		siteSettings.get("radio_social_discord", ""),
+		siteSettings.get("cms_logo", ""),
 	]);
 	const imager = imagerRaw ?? "https://www.habbo.com/habbo-imaging/avatarimage";
 	const nonce = (await headers()).get("x-nonce") ?? undefined;
@@ -59,26 +60,25 @@ export default async function LoginPage() {
 					borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
 				}}>
 					<div className="flex items-center gap-3">
-						<Image
-							src="/assets/images/icons/lighthouse.png"
-							alt={hotelName}
-							width={28}
-							height={28}
-							className="shrink-0"
-							unoptimized
-						/>
+						{logo ? (
+							<Image src={logo} alt={hotelName} width={100} height={28} className="shrink-0 object-contain" unoptimized style={{ maxHeight: 28, width: "auto", height: "auto" }} />
+						) : (
+							<Image src="/assets/images/icons/lighthouse.png" alt={hotelName} width={28} height={28} className="shrink-0" unoptimized />
+						)}
 						<span className="text-sm font-extrabold uppercase tracking-wide" style={{ color: "var(--color-text-readable)" }}>
 							{hotelName}
 						</span>
 					</div>
-					<div className="flex items-center gap-1">
+					<div className="flex items-center gap-1.5 rounded-lg px-2 py-1" style={{
+						background: "color-mix(in srgb, var(--color-text-muted) 4%, transparent)",
+					}}>
 						{discordUrl && (
-							<Link href={discordUrl} target="_blank" rel="noopener noreferrer" className="p-1.5 rounded-lg transition-all duration-200 hover:scale-110" style={{ background: "color-mix(in srgb, #5865F2 12%, transparent)" }}>
+							<Link href={discordUrl} target="_blank" rel="noopener noreferrer" className="p-1.5 rounded-lg transition-all duration-200 hover:scale-110 hover:brightness-125" style={{ background: "color-mix(in srgb, #5865F2 12%, transparent)" }}>
 								<Image src="/assets/images/icons/discord.png" alt="Discord" width={18} height={18} unoptimized />
 							</Link>
 						)}
 						<LanguageSwitcher />
-						<div className="w-px h-5 mx-1" style={{ background: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }} />
+						<div className="w-px h-5" style={{ background: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }} />
 						<ThemeSwitcher />
 					</div>
 				</div>
diff --git a/src/app/(site)/page.tsx b/src/app/(site)/page.tsx
index 198a1657..40b61678 100644
--- a/src/app/(site)/page.tsx
+++ b/src/app/(site)/page.tsx
@@ -19,12 +19,13 @@ import { Reveal } from "@/components/motion-reveal";
 export const revalidate = 120;
 
 async function getHotelData() {
-	const [hotelName, imagerRaw] = await Promise.all([
+	const [hotelName, imagerRaw, logo] = await Promise.all([
 		resolveHotelName(),
 		siteSettings.get(
 			"habbo_imaging_url",
 			"https://www.habbo.com/habbo-imaging/avatarimage",
 		),
+		siteSettings.get("cms_logo", ""),
 	]);
 	const imager = imagerRaw ?? "https://www.habbo.com/habbo-imaging/avatarimage";
 
@@ -59,7 +60,7 @@ async function getHotelData() {
 
 	const discordUrl = await siteSettings.get("radio_social_discord", "");
 
-	return { hotelName, imager, online, users, rooms, articles, recentUsers, recentPhotos, latestUsers, discordUrl };
+	return { hotelName, imager, online, users, rooms, articles, recentUsers, recentPhotos, latestUsers, discordUrl, logo };
 }
 
 export default async function Home() {
@@ -68,7 +69,7 @@ export default async function Home() {
 
 	const tp = await getTranslations("pages.home");
 	const th = await getTranslations("header");
-	const { hotelName, imager, online, users, rooms, articles, recentUsers, recentPhotos, latestUsers, discordUrl } = await getHotelData();
+	const { hotelName, imager, online, users, rooms, articles, recentUsers, recentPhotos, latestUsers, discordUrl, logo } = await getHotelData();
 
 	const captcha = await captchaConfig();
 	const nonce = (await headers()).get("x-nonce") ?? undefined;
@@ -85,26 +86,25 @@ export default async function Home() {
 					borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
 				}}>
 					<div className="flex items-center gap-3">
-						<Image
-							src="/assets/images/icons/lighthouse.png"
-							alt={hotelName}
-							width={28}
-							height={28}
-							className="shrink-0"
-							unoptimized
-						/>
+						{logo ? (
+							<Image src={logo} alt={hotelName} width={100} height={28} className="shrink-0 object-contain" unoptimized style={{ maxHeight: 28, width: "auto", height: "auto" }} />
+						) : (
+							<Image src="/assets/images/icons/lighthouse.png" alt={hotelName} width={28} height={28} className="shrink-0" unoptimized />
+						)}
 						<span className="text-sm font-extrabold uppercase tracking-wide" style={{ color: "var(--color-text-readable)" }}>
 							{hotelName}
 						</span>
 					</div>
-					<div className="flex items-center gap-1">
+					<div className="flex items-center gap-1.5 rounded-lg px-2 py-1" style={{
+						background: "color-mix(in srgb, var(--color-text-muted) 4%, transparent)",
+					}}>
 						{discordUrl && (
-							<Link href={discordUrl} target="_blank" rel="noopener noreferrer" className="p-1.5 rounded-lg transition-all duration-200 hover:scale-110" style={{ background: "color-mix(in srgb, #5865F2 12%, transparent)" }}>
+							<Link href={discordUrl} target="_blank" rel="noopener noreferrer" className="p-1.5 rounded-lg transition-all duration-200 hover:scale-110 hover:brightness-125" style={{ background: "color-mix(in srgb, #5865F2 12%, transparent)" }}>
 								<Image src="/assets/images/icons/discord.png" alt="Discord" width={18} height={18} unoptimized />
 							</Link>
 						)}
 						<LanguageSwitcher />
-						<div className="w-px h-5 mx-1" style={{ background: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }} />
+						<div className="w-px h-5" style={{ background: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }} />
 						<ThemeSwitcher />
 					</div>
 				</div>
diff --git a/src/app/(site)/register/page.tsx b/src/app/(site)/register/page.tsx
index 6daee9b1..3f27165b 100644
--- a/src/app/(site)/register/page.tsx
+++ b/src/app/(site)/register/page.tsx
@@ -16,7 +16,7 @@ import { Reveal } from "@/components/motion-reveal";
 export default async function RegisterPage() {
 	const th = await getTranslations("header");
 	const tpr = await getTranslations("pages.register");
-	const [hotelName, imagerRaw, cfg, discordUrl] = await Promise.all([
+	const [hotelName, imagerRaw, cfg, discordUrl, logo] = await Promise.all([
 		resolveHotelName(),
 		siteSettings.get(
 			"habbo_imaging_url",
@@ -24,6 +24,7 @@ export default async function RegisterPage() {
 		),
 		captchaConfig(),
 		siteSettings.get("radio_social_discord", ""),
+		siteSettings.get("cms_logo", ""),
 	]);
 	const imager = imagerRaw ?? "https://www.habbo.com/habbo-imaging/avatarimage";
 	const nonce = (await headers()).get("x-nonce") ?? undefined;
@@ -59,26 +60,25 @@ export default async function RegisterPage() {
 					borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
 				}}>
 					<div className="flex items-center gap-3">
-						<Image
-							src="/assets/images/icons/lighthouse.png"
-							alt={hotelName}
-							width={28}
-							height={28}
-							className="shrink-0"
-							unoptimized
-						/>
+						{logo ? (
+							<Image src={logo} alt={hotelName} width={100} height={28} className="shrink-0 object-contain" unoptimized style={{ maxHeight: 28, width: "auto", height: "auto" }} />
+						) : (
+							<Image src="/assets/images/icons/lighthouse.png" alt={hotelName} width={28} height={28} className="shrink-0" unoptimized />
+						)}
 						<span className="text-sm font-extrabold uppercase tracking-wide" style={{ color: "var(--color-text-readable)" }}>
 							{hotelName}
 						</span>
 					</div>
-					<div className="flex items-center gap-1">
+					<div className="flex items-center gap-1.5 rounded-lg px-2 py-1" style={{
+						background: "color-mix(in srgb, var(--color-text-muted) 4%, transparent)",
+					}}>
 						{discordUrl && (
-							<Link href={discordUrl} target="_blank" rel="noopener noreferrer" className="p-1.5 rounded-lg transition-all duration-200 hover:scale-110" style={{ background: "color-mix(in srgb, #5865F2 12%, transparent)" }}>
+							<Link href={discordUrl} target="_blank" rel="noopener noreferrer" className="p-1.5 rounded-lg transition-all duration-200 hover:scale-110 hover:brightness-125" style={{ background: "color-mix(in srgb, #5865F2 12%, transparent)" }}>
 								<Image src="/assets/images/icons/discord.png" alt="Discord" width={18} height={18} unoptimized />
 							</Link>
 						)}
 						<LanguageSwitcher />
-						<div className="w-px h-5 mx-1" style={{ background: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }} />
+						<div className="w-px h-5" style={{ background: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }} />
 						<ThemeSwitcher />
 					</div>
 				</div>