💄 Updated auth layout (#1651)

This commit is contained in:
Luke Vella 2025-03-31 10:56:08 +01:00 committed by GitHub
parent 562ad81591
commit a25dade7ea
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 19 additions and 10 deletions

View file

@ -6,6 +6,7 @@ import { useRouter } from "next/navigation";
import { useSession } from "next-auth/react";
import React from "react";
import { Logo } from "@/components/logo";
import { OptimizedAvatarImage } from "@/components/optimized-avatar-image";
import { Skeleton } from "@/components/skeleton";
import { Trans } from "@/components/trans";
@ -51,6 +52,9 @@ export const LoginPage = ({ magicLink, email }: PageProps) => {
const router = useRouter();
return (
<div className="flex h-full w-full flex-col items-center justify-center">
<div className="mb-12">
<Logo className="mx-auto" />
</div>
<div className="w-48 space-y-8 text-center">
<h1 className="text-xl font-bold">
<Trans i18nKey="continueAs" defaults="Continue as" />

View file

@ -1,5 +1,14 @@
import { Logo } from "@/components/logo";
export function AuthPageContainer({ children }: { children: React.ReactNode }) {
return <div className="space-y-8 lg:space-y-10">{children}</div>;
return (
<div className="space-y-8 lg:space-y-10">
<div className="mb-12">
<Logo className="mx-auto" />
</div>
{children}
</div>
);
}
export function AuthPageHeader({ children }: { children: React.ReactNode }) {

View file

@ -1,7 +1,6 @@
import { cn } from "@rallly/ui";
import { DotPattern } from "@rallly/ui/dot-pattern";
import { Logo } from "@/components/logo";
import {
isQuickCreateEnabled,
QuickCreateButton,
@ -14,14 +13,11 @@ export default async function Layout({
children: React.ReactNode;
}) {
return (
<div className="relative flex h-dvh flex-col items-center justify-center bg-gray-100 p-2 lg:p-4">
<div className="z-10 flex w-full max-w-7xl flex-1 rounded-xl border bg-white shadow-sm lg:max-h-[720px] lg:p-2">
<div className="flex flex-1 flex-col gap-4 p-6 lg:p-16">
<div className="py-8">
<Logo className="mx-auto" />
</div>
<div className="flex h-full w-full flex-1 flex-col items-center justify-center">
<div className="w-full max-w-sm">{children}</div>
<div className="relative flex h-dvh flex-col items-center justify-center bg-gray-100">
<div className="z-10 flex w-full flex-1 bg-white lg:p-4">
<div className="flex flex-1 flex-col gap-4 p-6">
<div className="my-auto">
<div className="mx-auto w-full max-w-sm">{children}</div>
</div>
{isQuickCreateEnabled ? (
<div className="flex justify-center lg:hidden">