mirror of
https://github.com/randyjc/Rahoot.git
synced 2026-03-13 20:15:35 +01:00
logo alignment fix
This commit is contained in:
@@ -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
|
||||||
|
|||||||
@@ -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,
|
||||||
)}
|
)}
|
||||||
|
|||||||
Reference in New Issue
Block a user