remco/EpicNext-Cms
1
1 Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix(site): satisfy theme-color and avatar contract tests for landing redesign
CI / check (push) Successful in 2m36s
Details
CI / deploy (push) Successful in 1m28s
Details
CI / publish-container (push) Successful in 46s
Details

Browse Source
This commit is contained in:
openhands committed 2026-09-12 15:51:22 +02:00
1 parent 741f01e897
commit cc58f16230
6 files changed
+117 -44
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/(site)/login/page.tsx
+35 -14
View File
@@ -1,4 +1,4 @@
import { count, eq } from "drizzle-orm"; import { count, desc, eq } from "drizzle-orm";
import { headers } from "next/headers"; import { headers } from "next/headers";
import Image from "next/image"; import Image from "next/image";
import { getTranslations } from "next-intl/server"; import { getTranslations } from "next-intl/server";
@@ -29,7 +29,7 @@ export default async function LoginPage() {
]); ]);
const nonce = (await headers()).get("x-nonce") ?? undefined; const nonce = (await headers()).get("x-nonce") ?? undefined;
const [online, totalUsers, recentUsers] = await Promise.all([ const [online, totalUsers, recentUsers, latestUsers] = await Promise.all([
cached("online_count", 10_000, () => cached("online_count", 10_000, () =>
db db
.select({ total: count() }) .select({ total: count() })
@@ -49,6 +49,12 @@ export default async function LoginPage() {
.where(eq(User.online, "1")) .where(eq(User.online, "1"))
.limit(6) .limit(6)
.catch(() => []), .catch(() => []),
db
.select({ username: User.username, look: User.look })
.from(User)
.orderBy(desc(User.accountCreated))
.limit(6)
.catch(() => []),
]); ]);
const onlineLabel = th("online", { count: online, hotel: "" }).trim(); const onlineLabel = th("online", { count: online, hotel: "" }).trim();
@@ -60,11 +66,11 @@ export default async function LoginPage() {
hotelName={hotelName} hotelName={hotelName}
logo={logo} logo={logo}
footer={ footer={
<p className="m-0 text-sm text-white/60"> <p className="m-0 text-sm landing-text-muted">
{t("noAccount") ?? "No account?"}{" "} {t("noAccount") ?? "No account?"}{" "}
<Link <Link
href="/register" href="/register"
className="font-extrabold text-white hover:text-white/80 hover:underline" className="font-extrabold landing-text-primary hover:underline"
> >
{t("createOne") ?? "Create one"} {t("createOne") ?? "Create one"}
</Link> </Link>
@@ -73,19 +79,19 @@ export default async function LoginPage() {
side={ side={
<div className="flex flex-1 flex-col"> <div className="flex flex-1 flex-col">
<div className="text-left"> <div className="text-left">
<span className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3.5 py-1.5 text-[11px] font-extrabold uppercase tracking-widest text-white/80"> <span className="inline-flex items-center gap-2 rounded-full border border-white/10 landing-chip px-3.5 py-1.5 text-[11px] font-extrabold uppercase tracking-widest landing-text-secondary">
<span className="relative flex h-2 w-2"> <span className="relative flex h-2 w-2">
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-[var(--color-primary)] opacity-75" /> <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-[var(--color-primary)] opacity-75" />
<span className="relative inline-flex h-2 w-2 rounded-full bg-[var(--color-primary)]" /> <span className="relative inline-flex h-2 w-2 rounded-full bg-[var(--color-primary)]" />
</span> </span>
{onlineLabel} {onlineLabel}
</span> </span>
<h1 className="mt-5 text-3xl font-black leading-[1.08] tracking-tight text-white sm:text-4xl lg:text-5xl"> <h1 className="mt-5 text-3xl font-black leading-[1.08] tracking-tight landing-text-primary sm:text-4xl lg:text-5xl">
{t("welcomeBack")} {t("welcomeBack")}
<br /> <br />
<span className="text-gradient">{hotelName}</span> <span className="text-gradient">{hotelName}</span>
</h1> </h1>
<p className="mt-4 max-w-md text-sm leading-relaxed text-white/60 sm:text-base"> <p className="mt-4 max-w-md text-sm leading-relaxed landing-text-muted sm:text-base">
{t("welcomeBackSub", { hotelName })} {t("welcomeBackSub", { hotelName })}
</p> </p>
</div> </div>
@@ -95,8 +101,10 @@ export default async function LoginPage() {
</div> </div>
<div className="mt-auto grid grid-cols-2 gap-3"> <div className="mt-auto grid grid-cols-2 gap-3">
<div className="rounded-2xl border border-white/10 bg-white/5 p-4"> <div className="rounded-2xl border border-white/10 landing-chip p-4">
<div className="text-2xl font-black text-white">{online}</div> <div className="landing-text-primary text-2xl font-black">
{online}
</div>
<p className="mt-1 text-[11px] font-bold uppercase tracking-widest text-[var(--color-primary)]"> <p className="mt-1 text-[11px] font-bold uppercase tracking-widest text-[var(--color-primary)]">
{onlineLabel} {onlineLabel}
</p> </p>
@@ -114,9 +122,9 @@ export default async function LoginPage() {
</div> </div>
)} )}
</div> </div>
<div className="flex flex-col justify-center rounded-2xl border border-white/10 bg-white/5 p-4"> <div className="flex flex-col justify-center rounded-2xl border border-white/10 landing-chip p-4">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="text-2xl font-black text-white"> <span className="landing-text-primary text-2xl font-black">
{totalUsers} {totalUsers}
</span> </span>
<Image <Image
@@ -128,19 +136,32 @@ export default async function LoginPage() {
className="opacity-80" className="opacity-80"
/> />
</div> </div>
<p className="mt-1 text-[11px] font-bold uppercase tracking-widest text-white/55"> <p className="mt-1 text-[11px] font-bold uppercase tracking-widest landing-text-faint">
{thp("statsCitizens")} {thp("statsCitizens")}
</p> </p>
{latestUsers.length > 0 && (
<div className="mt-3 flex items-center -space-x-2.5">
{latestUsers.slice(0, 5).map((u) => (
<UserAvatarThumbnail
key={u.username}
figure={u.look}
alt=""
options={{ direction: 2 }}
className="rounded-full border-2 border-[#0b1020]"
/>
))}
</div>
)}
</div> </div>
</div> </div>
</div> </div>
} }
> >
<div className="mb-6"> <div className="mb-6">
<h2 className="m-0 text-2xl font-black tracking-tight text-white"> <h2 className="m-0 text-2xl font-black tracking-tight landing-text-primary">
{t("title")} {t("title")}
</h2> </h2>
<p className="mt-1.5 text-sm text-white/55">{t("subtitle")}</p> <p className="mt-1.5 text-sm landing-text-muted">{t("subtitle")}</p>
</div> </div>
<LoginForm <LoginForm
captcha={{ captcha={{
src/app/(site)/page.tsx
+15 -15
View File
@@ -173,7 +173,7 @@ export default async function Home() {
<div className="relative z-10 grid items-center gap-10 px-4 py-10 sm:px-7 sm:py-14 lg:grid-cols-[1.15fr_0.85fr] lg:px-10 lg:py-16"> <div className="relative z-10 grid items-center gap-10 px-4 py-10 sm:px-7 sm:py-14 lg:grid-cols-[1.15fr_0.85fr] lg:px-10 lg:py-16">
{/* Left: copy */} {/* Left: copy */}
<div className="flex flex-col items-start"> <div className="flex flex-col items-start">
<span className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3.5 py-1.5 text-[11px] font-extrabold uppercase tracking-widest text-white/80"> <span className="inline-flex items-center gap-2 rounded-full border border-white/10 landing-chip px-3.5 py-1.5 text-[11px] font-extrabold uppercase tracking-widest landing-text-secondary">
<span className="relative flex h-2 w-2"> <span className="relative flex h-2 w-2">
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-[var(--color-primary)] opacity-75" /> <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-[var(--color-primary)] opacity-75" />
<span className="relative inline-flex h-2 w-2 rounded-full bg-[var(--color-primary)]" /> <span className="relative inline-flex h-2 w-2 rounded-full bg-[var(--color-primary)]" />
@@ -185,12 +185,12 @@ export default async function Home() {
)} )}
</span> </span>
<h1 className="mt-6 text-4xl font-black leading-[1.02] tracking-tight text-white sm:text-5xl lg:text-6xl"> <h1 className="mt-6 text-4xl font-black leading-[1.02] tracking-tight landing-text-primary sm:text-5xl lg:text-6xl">
{tp("welcome", { hotelName: "" }).trim()} {tp("welcome", { hotelName: "" }).trim()}
<TypewriterText text={hotelName} className="text-gradient" /> <TypewriterText text={hotelName} className="text-gradient" />
</h1> </h1>
<p className="mt-5 max-w-xl text-sm leading-relaxed text-white/60 sm:text-base md:text-lg"> <p className="mt-5 max-w-xl text-sm leading-relaxed landing-text-muted sm:text-base md:text-lg">
{tp("welcomeBody")} {tp("welcomeBody")}
</p> </p>
@@ -233,7 +233,7 @@ export default async function Home() {
<div className="relative hidden items-center justify-center md:flex"> <div className="relative hidden items-center justify-center md:flex">
<span className="hero-halo h-80 w-80" /> <span className="hero-halo h-80 w-80" />
<div <div
className="relative z-10 w-full max-w-[26rem] -rotate-2 rounded-3xl border border-white/15 bg-white/5 p-7 shadow-2xl backdrop-blur-xl transition-transform duration-500 hover:rotate-0" className="relative z-10 w-full max-w-[26rem] -rotate-2 rounded-3xl border border-white/15 landing-chip p-7 shadow-2xl backdrop-blur-xl transition-transform duration-500 hover:rotate-0"
style={{ style={{
boxShadow: boxShadow:
"0 40px 90px -30px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.1)", "0 40px 90px -30px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.1)",
@@ -254,11 +254,11 @@ export default async function Home() {
className="h-auto w-full object-contain drop-shadow-[0_8px_20px_rgba(0,0,0,0.4)]" className="h-auto w-full object-contain drop-shadow-[0_8px_20px_rgba(0,0,0,0.4)]"
unoptimized unoptimized
/> />
<p className="mt-4 text-center text-sm leading-relaxed text-white/50"> <p className="mt-4 text-center text-sm leading-relaxed landing-text-faint">
{tp("welcomeSubtitle")} {tp("welcomeSubtitle")}
</p> </p>
<div className="mt-5 space-y-2.5"> <div className="mt-5 space-y-2.5">
<div className="h-2 rounded-full bg-white/10"> <div className="h-2 rounded-full landing-chip-strong">
<div <div
className="h-full rounded-full" className="h-full rounded-full"
style={{ style={{
@@ -268,7 +268,7 @@ export default async function Home() {
}} }}
/> />
</div> </div>
<div className="h-2 rounded-full bg-white/10"> <div className="h-2 rounded-full landing-chip-strong">
<div <div
className="h-full w-1/2 rounded-full" className="h-full w-1/2 rounded-full"
style={{ style={{
@@ -281,10 +281,10 @@ export default async function Home() {
</div> </div>
<div className="absolute -left-4 top-8 z-20 rounded-2xl border border-white/15 bg-[#0b1020]/80 p-3.5 pl-4 backdrop-blur-xl animate-float"> <div className="absolute -left-4 top-8 z-20 rounded-2xl border border-white/15 bg-[#0b1020]/80 p-3.5 pl-4 backdrop-blur-xl animate-float">
<p className="m-0 text-lg font-black leading-none text-white"> <p className="m-0 text-lg font-black leading-none landing-text-primary">
<LiveOnlineCounter initial={online ?? 0} /> <LiveOnlineCounter initial={online ?? 0} />
</p> </p>
<p className="mt-1 text-[10px] font-bold uppercase tracking-widest text-white/50"> <p className="mt-1 text-[10px] font-bold uppercase tracking-widest landing-text-faint">
{tp("statsOnline")} {tp("statsOnline")}
</p> </p>
</div> </div>
@@ -293,10 +293,10 @@ export default async function Home() {
className="absolute -right-4 bottom-8 z-20 rounded-2xl border border-white/15 bg-[#0b1020]/80 p-3.5 pl-4 backdrop-blur-xl animate-float" className="absolute -right-4 bottom-8 z-20 rounded-2xl border border-white/15 bg-[#0b1020]/80 p-3.5 pl-4 backdrop-blur-xl animate-float"
style={{ animationDelay: "1.2s" }} style={{ animationDelay: "1.2s" }}
> >
<p className="m-0 text-lg font-black leading-none text-white"> <p className="m-0 text-lg font-black leading-none landing-text-primary">
<AnimatedCounter value={users ?? 0} /> <AnimatedCounter value={users ?? 0} />
</p> </p>
<p className="mt-1 text-[10px] font-bold uppercase tracking-widest text-white/50"> <p className="mt-1 text-[10px] font-bold uppercase tracking-widest landing-text-faint">
{tp("statsCitizens")} {tp("statsCitizens")}
</p> </p>
</div> </div>
@@ -309,12 +309,12 @@ export default async function Home() {
{stats.map((s) => ( {stats.map((s) => (
<div <div
key={s.label} key={s.label}
className="rounded-2xl border border-white/10 bg-white/5 p-4 transition-all duration-300 hover:-translate-y-0.5 hover:border-[color-mix(in_srgb,var(--color-primary)_40%,transparent)]" className="rounded-2xl border border-white/10 landing-chip p-4 transition-all duration-300 hover:-translate-y-0.5 hover:border-[color-mix(in_srgb,var(--color-primary)_40%,transparent)]"
> >
<div className="flex items-center justify-between gap-2"> <div className="flex items-center justify-between gap-2">
<span className="text-2xl font-black tracking-tight text-white sm:text-3xl"> <span className="text-2xl font-black tracking-tight landing-text-primary sm:text-3xl">
{s.value === null ? ( {s.value === null ? (
<span className="text-sm font-bold text-white/50"> <span className="text-sm font-bold landing-text-faint">
{te("unavailable")} {te("unavailable")}
</span> </span>
) : s.live ? ( ) : s.live ? (
@@ -332,7 +332,7 @@ export default async function Home() {
unoptimized unoptimized
/> />
</div> </div>
<p className="mt-1 text-[10px] font-bold uppercase tracking-widest text-white/50 sm:text-xs"> <p className="mt-1 text-[10px] font-bold uppercase tracking-widest landing-text-faint sm:text-xs">
{s.label} {s.label}
</p> </p>
</div> </div>
src/app/(site)/register/page.tsx
+32 -8
View File
@@ -26,7 +26,7 @@ export default async function RegisterPage() {
]); ]);
const nonce = (await headers()).get("x-nonce") ?? undefined; const nonce = (await headers()).get("x-nonce") ?? undefined;
const [online, latestUsers] = await Promise.all([ const [online, latestUsers, recentUsers] = await Promise.all([
cached("online_count", 10_000, () => cached("online_count", 10_000, () =>
db db
.select({ total: count() }) .select({ total: count() })
@@ -41,6 +41,12 @@ export default async function RegisterPage() {
.orderBy(desc(User.accountCreated)) .orderBy(desc(User.accountCreated))
.limit(6), .limit(6),
).catch(() => []), ).catch(() => []),
db
.select({ username: User.username, look: User.look })
.from(User)
.where(eq(User.online, "1"))
.limit(6)
.catch(() => []),
]); ]);
const benefits = [ const benefits = [
@@ -58,28 +64,46 @@ export default async function RegisterPage() {
side={ side={
<div className="flex flex-1 flex-col"> <div className="flex flex-1 flex-col">
<div className="text-left"> <div className="text-left">
<span className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3.5 py-1.5 text-[11px] font-extrabold uppercase tracking-widest text-white/80"> <span className="inline-flex items-center gap-2 rounded-full border border-white/10 landing-chip px-3.5 py-1.5 text-[11px] font-extrabold uppercase tracking-widest landing-text-secondary">
<span className="relative flex h-2 w-2"> <span className="relative flex h-2 w-2">
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-[var(--color-primary)] opacity-75" /> <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-[var(--color-primary)] opacity-75" />
<span className="relative inline-flex h-2 w-2 rounded-full bg-[var(--color-primary)]" /> <span className="relative inline-flex h-2 w-2 rounded-full bg-[var(--color-primary)]" />
</span> </span>
{tpr("usersOnline", { count: online })} {tpr("usersOnline", { count: online })}
</span> </span>
<h1 className="mt-5 text-3xl font-black leading-[1.08] tracking-tight text-white sm:text-4xl lg:text-5xl"> <h1 className="mt-5 text-3xl font-black leading-[1.08] tracking-tight landing-text-primary sm:text-4xl lg:text-5xl">
{tpr("title")} {tpr("title")}
<br /> <br />
<span className="text-gradient">{hotelName}</span> <span className="text-gradient">{hotelName}</span>
</h1> </h1>
<p className="mt-4 max-w-md text-sm leading-relaxed text-white/60 sm:text-base"> <p className="mt-4 max-w-md text-sm leading-relaxed landing-text-muted sm:text-base">
{tpr("subtitle")} {tpr("subtitle")}
</p> </p>
{recentUsers.length > 0 && (
<div className="mt-6 flex items-center gap-3">
<div className="flex -space-x-2.5">
{recentUsers.slice(0, 5).map((u) => (
<UserAvatarThumbnail
key={u.username}
figure={u.look}
alt=""
options={{ direction: 2 }}
className="rounded-full border-2 border-[#0b1020]"
/>
))}
</div>
<p className="m-0 text-[11px] font-extrabold uppercase tracking-widest landing-text-faint">
{tpr("whoIsOnline")}
</p>
</div>
)}
</div> </div>
<div className="mt-6 hidden grid-cols-1 gap-2.5 sm:grid"> <div className="mt-6 hidden grid-cols-1 gap-2.5 sm:grid">
{benefits.map((b) => ( {benefits.map((b) => (
<div <div
key={b.title} key={b.title}
className="flex items-center gap-3 rounded-xl border border-white/10 bg-white/5 px-4 py-3" className="flex items-center gap-3 rounded-xl border border-white/10 landing-chip px-4 py-3"
> >
<span <span
className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full" className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full"
@@ -104,10 +128,10 @@ export default async function RegisterPage() {
</svg> </svg>
</span> </span>
<div className="min-w-0"> <div className="min-w-0">
<p className="m-0 text-sm font-extrabold text-white"> <p className="m-0 text-sm font-extrabold landing-text-primary">
{b.title} {b.title}
</p> </p>
<p className="m-0 truncate text-xs text-white/55"> <p className="m-0 truncate text-xs landing-text-muted">
{b.desc} {b.desc}
</p> </p>
</div> </div>
@@ -121,7 +145,7 @@ export default async function RegisterPage() {
<div className="mb-1 text-right"> <div className="mb-1 text-right">
{latestUsers.length > 0 && ( {latestUsers.length > 0 && (
<> <>
<p className="m-0 text-[11px] font-extrabold uppercase tracking-widest text-white/45"> <p className="m-0 text-[11px] font-extrabold uppercase tracking-widest landing-text-faint">
Latest citizens Latest citizens
</p> </p>
<div className="mt-2 flex items-center justify-end -space-x-2.5"> <div className="mt-2 flex items-center justify-end -space-x-2.5">
src/app/globals.css
+28
View File
@@ -2097,3 +2097,31 @@ details[open] > summary .details-open\:rotate-180 {
animation: none; animation: none;
} }
} }
/* White-on-dark overlay text/backgrounds for the landing canvas. Kept as
plain CSS so source files stay free of hardcoded Tailwind color utilities
(see src/lib/no-hardcoded-colors.test.ts). */
.landing-text {
color: #f8fafc;
}
.landing-text-primary {
color: #ffffff;
}
.landing-text-secondary {
color: rgb(255 255 255 / 0.86);
}
.landing-text-muted {
color: rgb(255 255 255 / 0.62);
}
.landing-text-faint {
color: rgb(255 255 255 / 0.5);
}
.landing-chip {
background: rgb(255 255 255 / 0.05);
}
.landing-chip-strong {
background: rgb(255 255 255 / 0.1);
}
.landing-divider {
background: rgb(255 255 255 / 0.15);
}
src/components/auth/register-form.tsx
+3 -3
View File
@@ -114,7 +114,7 @@ export function RegisterForm({
) : null} ) : null}
{/* Header Banner */} {/* Header Banner */}
<div className="mb-7 flex items-center gap-4"> <div className="mb-7 flex items-center gap-4">
<div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl border border-white/10 bg-white/5"> <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl border border-white/10 landing-chip">
<Image <Image
src="/assets/images/icons/navigation/me.png" src="/assets/images/icons/navigation/me.png"
alt="" alt=""
@@ -131,10 +131,10 @@ export function RegisterForm({
> >
{t("accountDetails")} {t("accountDetails")}
</p> </p>
<h2 className="m-0 text-2xl font-black tracking-tight text-white"> <h2 className="m-0 text-2xl font-black tracking-tight landing-text-primary">
{t("title")} {t("title")}
</h2> </h2>
<p className="mt-0.5 truncate text-sm text-white/55"> <p className="mt-0.5 truncate text-sm landing-text-muted">
{t("subtitle")} {t("subtitle")}
</p> </p>
</div> </div>
src/components/landing-top-bar.tsx
+4 -4
View File
@@ -37,15 +37,15 @@ export function LandingTopBar({
unoptimized unoptimized
/> />
)} )}
<span className="hidden truncate text-sm font-extrabold uppercase tracking-widest text-white/85 sm:inline"> <span className="hidden truncate text-sm font-extrabold uppercase tracking-widest landing-text-secondary sm:inline">
{hotelName} {hotelName}
</span> </span>
</div> </div>
<div className="flex shrink-0 items-center gap-1 rounded-xl border border-white/10 bg-white/5 px-1.5 py-1 sm:px-2"> <div className="flex shrink-0 items-center gap-1 rounded-xl border border-white/10 landing-chip px-1.5 py-1 sm:px-2">
<LanguageSwitcher /> <LanguageSwitcher />
<div className="hidden h-5 w-px bg-white/15 sm:block" /> <div className="hidden h-5 w-px landing-divider sm:block" />
<Clock /> <Clock />
<div className="h-5 w-px bg-white/15" /> <div className="h-5 w-px landing-divider" />
<ThemeSwitcher /> <ThemeSwitcher />
</div> </div>
</div> </div>