From a25dade7ead7bce3a562db5fcf3e8167f5d321e3 Mon Sep 17 00:00:00 2001
From: Luke Vella <me@lukevella.com>
Date: Mon, 31 Mar 2025 10:56:08 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Updated=20auth=20layout=20(#1651?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../(auth)/auth/login/components/login-page.tsx    |  4 ++++
 .../app/[locale]/(auth)/components/auth-page.tsx   | 11 ++++++++++-
 apps/web/src/app/[locale]/(auth)/layout.tsx        | 14 +++++---------
 3 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/apps/web/src/app/[locale]/(auth)/auth/login/components/login-page.tsx b/apps/web/src/app/[locale]/(auth)/auth/login/components/login-page.tsx
index ecf276892..ced99b943 100644
--- a/apps/web/src/app/[locale]/(auth)/auth/login/components/login-page.tsx
+++ b/apps/web/src/app/[locale]/(auth)/auth/login/components/login-page.tsx
@@ -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" />
diff --git a/apps/web/src/app/[locale]/(auth)/components/auth-page.tsx b/apps/web/src/app/[locale]/(auth)/components/auth-page.tsx
index 4c6bc700d..8f54f3294 100644
--- a/apps/web/src/app/[locale]/(auth)/components/auth-page.tsx
+++ b/apps/web/src/app/[locale]/(auth)/components/auth-page.tsx
@@ -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 }) {
diff --git a/apps/web/src/app/[locale]/(auth)/layout.tsx b/apps/web/src/app/[locale]/(auth)/layout.tsx
index bc470f0b2..940d6702d 100644
--- a/apps/web/src/app/[locale]/(auth)/layout.tsx
+++ b/apps/web/src/app/[locale]/(auth)/layout.tsx
@@ -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">