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
This commit is contained in:
openhands committed
1 parent
83356b9a9c
commit
b9c09f58d3
3 files changed
+38
-38
No files matched your search
@@ -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>
|
||||
|
||||
+14
-14
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in new issue
Block a user