fix(site): satisfy theme-color and avatar contract tests for landing redesign
This commit is contained in:
openhands committed
1 parent
741f01e897
commit
cc58f16230
6 files changed
+117
-44
No files matched your search
@@ -1,4 +1,4 @@
|
||||
import { count, eq } from "drizzle-orm";
|
||||
import { count, desc, eq } from "drizzle-orm";
|
||||
import { headers } from "next/headers";
|
||||
import Image from "next/image";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
@@ -29,7 +29,7 @@ export default async function LoginPage() {
|
||||
]);
|
||||
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, () =>
|
||||
db
|
||||
.select({ total: count() })
|
||||
@@ -49,6 +49,12 @@ export default async function LoginPage() {
|
||||
.where(eq(User.online, "1"))
|
||||
.limit(6)
|
||||
.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();
|
||||
@@ -60,11 +66,11 @@ export default async function LoginPage() {
|
||||
hotelName={hotelName}
|
||||
logo={logo}
|
||||
footer={
|
||||
<p className="m-0 text-sm text-white/60">
|
||||
<p className="m-0 text-sm landing-text-muted">
|
||||
{t("noAccount") ?? "No account?"}{" "}
|
||||
<Link
|
||||
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"}
|
||||
</Link>
|
||||
@@ -73,19 +79,19 @@ export default async function LoginPage() {
|
||||
side={
|
||||
<div className="flex flex-1 flex-col">
|
||||
<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="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>
|
||||
{onlineLabel}
|
||||
</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")}
|
||||
<br />
|
||||
<span className="text-gradient">{hotelName}</span>
|
||||
</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 })}
|
||||
</p>
|
||||
</div>
|
||||
@@ -95,8 +101,10 @@ export default async function LoginPage() {
|
||||
</div>
|
||||
|
||||
<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="text-2xl font-black text-white">{online}</div>
|
||||
<div className="rounded-2xl border border-white/10 landing-chip p-4">
|
||||
<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)]">
|
||||
{onlineLabel}
|
||||
</p>
|
||||
@@ -114,9 +122,9 @@ export default async function LoginPage() {
|
||||
</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">
|
||||
<span className="text-2xl font-black text-white">
|
||||
<span className="landing-text-primary text-2xl font-black">
|
||||
{totalUsers}
|
||||
</span>
|
||||
<Image
|
||||
@@ -128,19 +136,32 @@ export default async function LoginPage() {
|
||||
className="opacity-80"
|
||||
/>
|
||||
</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")}
|
||||
</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 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")}
|
||||
</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>
|
||||
<LoginForm
|
||||
captcha={{
|
||||
|
||||
+15
-15
@@ -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">
|
||||
{/* Left: copy */}
|
||||
<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="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)]" />
|
||||
@@ -185,12 +185,12 @@ export default async function Home() {
|
||||
)}
|
||||
</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()}
|
||||
<TypewriterText text={hotelName} className="text-gradient" />
|
||||
</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")}
|
||||
</p>
|
||||
|
||||
@@ -233,7 +233,7 @@ export default async function Home() {
|
||||
<div className="relative hidden items-center justify-center md:flex">
|
||||
<span className="hero-halo h-80 w-80" />
|
||||
<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={{
|
||||
boxShadow:
|
||||
"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)]"
|
||||
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")}
|
||||
</p>
|
||||
<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
|
||||
className="h-full rounded-full"
|
||||
style={{
|
||||
@@ -268,7 +268,7 @@ export default async function Home() {
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="h-2 rounded-full bg-white/10">
|
||||
<div className="h-2 rounded-full landing-chip-strong">
|
||||
<div
|
||||
className="h-full w-1/2 rounded-full"
|
||||
style={{
|
||||
@@ -281,10 +281,10 @@ export default async function Home() {
|
||||
</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">
|
||||
<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} />
|
||||
</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")}
|
||||
</p>
|
||||
</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"
|
||||
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} />
|
||||
</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")}
|
||||
</p>
|
||||
</div>
|
||||
@@ -309,12 +309,12 @@ export default async function Home() {
|
||||
{stats.map((s) => (
|
||||
<div
|
||||
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">
|
||||
<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 ? (
|
||||
<span className="text-sm font-bold text-white/50">
|
||||
<span className="text-sm font-bold landing-text-faint">
|
||||
{te("unavailable")}
|
||||
</span>
|
||||
) : s.live ? (
|
||||
@@ -332,7 +332,7 @@ export default async function Home() {
|
||||
unoptimized
|
||||
/>
|
||||
</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}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -26,7 +26,7 @@ export default async function RegisterPage() {
|
||||
]);
|
||||
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, () =>
|
||||
db
|
||||
.select({ total: count() })
|
||||
@@ -41,6 +41,12 @@ export default async function RegisterPage() {
|
||||
.orderBy(desc(User.accountCreated))
|
||||
.limit(6),
|
||||
).catch(() => []),
|
||||
db
|
||||
.select({ username: User.username, look: User.look })
|
||||
.from(User)
|
||||
.where(eq(User.online, "1"))
|
||||
.limit(6)
|
||||
.catch(() => []),
|
||||
]);
|
||||
|
||||
const benefits = [
|
||||
@@ -58,28 +64,46 @@ export default async function RegisterPage() {
|
||||
side={
|
||||
<div className="flex flex-1 flex-col">
|
||||
<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="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>
|
||||
{tpr("usersOnline", { count: online })}
|
||||
</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")}
|
||||
<br />
|
||||
<span className="text-gradient">{hotelName}</span>
|
||||
</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")}
|
||||
</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 className="mt-6 hidden grid-cols-1 gap-2.5 sm:grid">
|
||||
{benefits.map((b) => (
|
||||
<div
|
||||
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
|
||||
className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full"
|
||||
@@ -104,10 +128,10 @@ export default async function RegisterPage() {
|
||||
</svg>
|
||||
</span>
|
||||
<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}
|
||||
</p>
|
||||
<p className="m-0 truncate text-xs text-white/55">
|
||||
<p className="m-0 truncate text-xs landing-text-muted">
|
||||
{b.desc}
|
||||
</p>
|
||||
</div>
|
||||
@@ -121,7 +145,7 @@ export default async function RegisterPage() {
|
||||
<div className="mb-1 text-right">
|
||||
{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
|
||||
</p>
|
||||
<div className="mt-2 flex items-center justify-end -space-x-2.5">
|
||||
|
||||
@@ -2097,3 +2097,31 @@ details[open] > summary .details-open\:rotate-180 {
|
||||
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);
|
||||
}
|
||||
@@ -114,7 +114,7 @@ export function RegisterForm({
|
||||
) : null}
|
||||
{/* Header Banner */}
|
||||
<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
|
||||
src="/assets/images/icons/navigation/me.png"
|
||||
alt=""
|
||||
@@ -131,10 +131,10 @@ export function RegisterForm({
|
||||
>
|
||||
{t("accountDetails")}
|
||||
</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")}
|
||||
</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")}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -37,15 +37,15 @@ export function LandingTopBar({
|
||||
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}
|
||||
</span>
|
||||
</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 />
|
||||
<div className="hidden h-5 w-px bg-white/15 sm:block" />
|
||||
<div className="hidden h-5 w-px landing-divider sm:block" />
|
||||
<Clock />
|
||||
<div className="h-5 w-px bg-white/15" />
|
||||
<div className="h-5 w-px landing-divider" />
|
||||
<ThemeSwitcher />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user