logo alignment fix

This commit is contained in:
RandyJC
2025-12-09 11:54:53 +01:00
parent dba5024207
commit efbea1801c
2 changed files with 23 additions and 25 deletions

View File

@@ -13,34 +13,32 @@ const AuthLayout = ({ children }: PropsWithChildren) => {
} }
}, [connect, isConnected]) }, [connect, isConnected])
if (!isConnected) { const Shell = ({ children: inner }: PropsWithChildren) => (
return ( <section className="relative flex min-h-screen flex-col items-center justify-center gap-6 px-4 text-center">
<section className="relative flex min-h-screen flex-col items-center justify-center"> <div className="pointer-events-none absolute inset-0 overflow-hidden">
<div className="pointer-events-none absolute h-full w-full overflow-hidden"> <div className="bg-primary/15 absolute -top-[15vmin] -left-[15vmin] min-h-[75vmin] min-w-[75vmin] rounded-full" />
<div className="bg-primary/15 absolute -top-[15vmin] -left-[15vmin] min-h-[75vmin] min-w-[75vmin] rounded-full"></div> <div className="bg-primary/15 absolute -right-[15vmin] -bottom-[15vmin] min-h-[75vmin] min-w-[75vmin] rotate-45" />
<div className="bg-primary/15 absolute -right-[15vmin] -bottom-[15vmin] min-h-[75vmin] min-w-[75vmin] rotate-45"></div>
</div> </div>
<BrandHeading className="mb-6" size="lg" /> <BrandHeading size="lg" />
<Loader className="h-23" /> {inner}
<h2 className="mt-2 text-center text-2xl font-bold text-white drop-shadow-lg md:text-3xl"> </section>
Loading... )
</h2>
</section> if (!isConnected) {
return (
<Shell>
<div className="flex flex-col items-center gap-3">
<Loader className="h-23" />
<h2 className="text-2xl font-bold text-white drop-shadow-lg md:text-3xl">
Loading...
</h2>
</div>
</Shell>
) )
} }
return ( return <Shell>{children}</Shell>
<section className="relative flex min-h-screen flex-col items-center justify-center">
<div className="pointer-events-none absolute h-full w-full overflow-hidden">
<div className="bg-primary/15 absolute -top-[15vmin] -left-[15vmin] min-h-[75vmin] min-w-[75vmin] rounded-full"></div>
<div className="bg-primary/15 absolute -right-[15vmin] -bottom-[15vmin] min-h-[75vmin] min-w-[75vmin] rotate-45"></div>
</div>
<BrandHeading className="mb-6" size="lg" />
{children}
</section>
)
} }
export default AuthLayout export default AuthLayout

View File

@@ -14,13 +14,13 @@ const BrandHeading = ({ className, size = "lg" }: Props) => {
const sizeClass = const sizeClass =
size === "lg" size === "lg"
? "text-4xl md:text-5xl" ? "text-4xl md:text-5xl lg:text-6xl"
: "text-2xl md:text-3xl" : "text-2xl md:text-3xl"
return ( return (
<div <div
className={clsx( className={clsx(
"text-center font-black tracking-tight text-[#f7931e] drop-shadow-lg", "text-center font-black tracking-tight text-[#f7931e] drop-shadow-lg leading-tight",
sizeClass, sizeClass,
className, className,
)} )}