Handle spacing better for cases where there's a back link

Signed-off-by: Émile Ré <emile@getprobo.com>

apps/console/src/pages/iam/auth/AuthLayout.tsx

@@ -6,8 +6,11 @@ import { IAMRelayProvider } from "#/providers/IAMRelayProvider";
 export default function AuthLayout() {
   return (
     <div className="min-h-screen text-txt-primary bg-level-0 flex flex-col items-center justify-center">
-      <Card className="w-full max-w-lg px-12 py-8 flex flex-col items-center justify-center gap-8">
-        <Logo withPicto className="w-[110px]" />
+      <Card className="w-full max-w-lg px-12 py-8 flex flex-col items-center justify-center">
+        <div className="w-full flex flex-col items-center justify-center gap-8">
+          <Logo withPicto className="w-[110px]" />
+          <div className="w-full border-t border-t-border-mid" />
+        </div>
         <IAMRelayProvider>
           <Outlet />
         </IAMRelayProvider>

apps/console/src/pages/iam/auth/ForgotPasswordPage.tsx

@@ -77,7 +77,7 @@ export default function ForgotPasswordPage() {
 
   return instructionsSent
     ? (
-        <div className="space-y-6 w-full max-w-md mx-auto">
+        <div className="space-y-6 w-full max-w-md mx-auto pt-8">
           <div className="space-y-2 text-center">
             <h1 className="text-3xl font-bold">{__("Check your email")}</h1>
             <p className="text-txt-tertiary">

apps/console/src/pages/iam/auth/ResetPasswordPage.tsx

@@ -95,7 +95,7 @@ export default function ResetPasswordPage() {
   });
 
   return (
-    <div className="space-y-6 w-full max-w-md mx-auto">
+    <div className="space-y-6 w-full max-w-md mx-auto pt-8">
       <div className="space-y-2 text-center">
         <h1 className="text-3xl font-bold">{__("Reset password")}</h1>
         <p className="text-txt-tertiary">

apps/console/src/pages/iam/auth/VerifyEmailPage.tsx

@@ -76,7 +76,7 @@ export default function VerifyEmailPage() {
   });
 
   return (
-    <div className="space-y-6 w-full max-w-md mx-auto">
+    <div className="space-y-6 w-full max-w-md mx-auto pt-8">
       <div className="space-y-2 text-center">
         <h1 className="text-3xl font-bold">{__("Email Confirmation")}</h1>
         <p className="text-txt-tertiary">

apps/console/src/pages/iam/auth/sign-in/PasswordSignInPage.tsx

@@ -67,7 +67,7 @@ export default function PasswordSignInPage() {
   };
 
   return (
-    <form className="space-y-6 w-full max-w-md mx-auto" onSubmit={handlePasswordLogin}>
+    <form className="space-y-6 w-full max-w-md mx-auto pt-4" onSubmit={handlePasswordLogin}>
       <Link
         to="/auth/login"
         className="flex items-center gap-2 text-txt-secondary hover:text-txt-primary transition-colors mb-4"

apps/console/src/pages/iam/auth/sign-in/SSOSignInPage.tsx

@@ -37,7 +37,7 @@ export default function SSOSignInPage() {
 
   return (
     <>
-      <form className="space-y-6 w-full max-w-md mx-auto" onSubmit={handleSSOCheck}>
+      <form className="space-y-6 w-full max-w-md mx-auto pt-4" onSubmit={handleSSOCheck}>
         <Link
           to="/auth/login"
           className="flex items-center gap-2 text-txt-secondary hover:text-txt-primary transition-colors mb-4"

apps/console/src/pages/iam/auth/sign-in/SignInPage.tsx

@@ -6,7 +6,7 @@ export default function SignInPage() {
   const { __ } = useTranslate();
 
   return (
-    <div className="space-y-6 w-full max-w-md mx-auto">
+    <div className="space-y-6 w-full max-w-md mx-auto pt-8">
       <h1 className="text-center text-2xl font-bold">
         {__("Login to your account")}
       </h1>
@@ -18,18 +18,13 @@ export default function SignInPage() {
         {__("Login with Email")}
       </Button>
 
-      <div className="relative my-6">
-        <div className="absolute inset-0 flex items-center">
-          <div className="w-full border-t border-border"></div>
-        </div>
-        <div className="relative flex justify-center">
-          <span
-            className="px-4 text-xs uppercase text-txt-secondary"
-            style={{ backgroundColor: "var(--color-level-0)" }}
-          >
-            {__("Or")}
-          </span>
-        </div>
+      <div className="relative my-6 w-full">
+        <div className="w-xs border-t border-border-mid mx-auto" />
+        <span
+          className="px-4 text-xs uppercase text-txt-secondary bg-level-0 absolute top-0 left-1/2 -translate-1/2"
+        >
+          {__("Or")}
+        </span>
       </div>
 
       <Button variant="secondary" className="w-xs h-10 mx-auto" to="/auth/sso-login">

apps/console/src/pages/iam/auth/sign-up/SignUpFromInvitationPage.tsx

@@ -95,7 +95,7 @@ export default function SignUpFromInvitationPage() {
   };
 
   return (
-    <div className="space-y-6 w-full max-w-md mx-auto">
+    <div className="space-y-6 w-full max-w-md mx-auto pt-8">
       <div className="space-y-2 text-center">
         <h1 className="text-3xl font-bold">{__("Create your account")}</h1>
         <p className="text-txt-tertiary">

apps/console/src/pages/iam/auth/sign-up/SignUpPage.tsx

@@ -81,7 +81,7 @@ export default function SignUpPage() {
   };
 
   return (
-    <div className="space-y-6 w-full max-w-md mx-auto">
+    <div className="space-y-6 w-full max-w-md mx-auto pt-8">
       <div className="space-y-2 text-center">
         <h1 className="text-3xl font-bold">{__("Sign up")}</h1>
         <p className="text-txt-tertiary">

apps/trust/src/pages/auth/AuthLayout.tsx

@@ -27,16 +27,20 @@ export function AuthLayout(props: { queryRef: PreloadedQuery<AuthLayoutQuery> })
 
   return (
     <div className="min-h-screen text-txt-primary bg-level-0 flex flex-col items-center justify-center">
-      <Card className="w-full max-w-lg px-12 py-8 flex flex-col items-center justify-center gap-8">
-        {logoFileUrl
-          ? (
-              <img
-                alt=""
-                src={logoFileUrl}
-                className="h-20 rounded-2xl"
-              />
-            )
-          : <Logo withPicto className="w-[440px]" />}
+      <Card className="w-full max-w-lg px-12 py-8 flex flex-col items-center justify-center">
+        <div className="w-full flex flex-col items-center justify-center gap-8">
+          {logoFileUrl
+            ? (
+                <img
+                  alt=""
+                  src={logoFileUrl}
+                  className="h-20 rounded-2xl"
+                />
+              )
+            : <Logo withPicto className="w-[440px]" />}
+          <div className="w-full border-t border-t-border-mid" />
+        </div>
+
         <Outlet />
       </Card>
     </div>

apps/trust/src/pages/auth/ConnectPage.tsx

@@ -125,7 +125,7 @@ export function ConnectPage(props: {
   });
 
   return (
-    <div className="space-y-6 w-full max-w-md mx-auto">
+    <div className="space-y-6 w-full max-w-md mx-auto pt-8">
       <div className="space-y-2 text-center">
         <h1 className="text-3xl font-bold">
           {__(`Connect to ${organization.name}'s Compliance Page`)}

apps/trust/src/pages/auth/VerifyMagicLinkPage.tsx

@@ -86,7 +86,7 @@ export default function VerifyMagicLinkPagePageMutation() {
   });
 
   return (
-    <div className="space-y-6 w-full max-w-md mx-auto">
+    <div className="space-y-6 w-full max-w-md mx-auto pt-8">
       <div className="space-y-2 text-center">
         <h1 className="text-3xl font-bold">{__("Email Confirmation")}</h1>
         <p className="text-txt-tertiary">