Update auth layout on console and compliance page to remove right panel

Signed-off-by: Émile Ré <emile@getprobo.com>
2026-02-04 16:12:54 +04:00
parent 9f7c643085
commit d137e61ff0
12 changed files with 56 additions and 66 deletions
--- a/apps/console/src/pages/iam/auth/AuthLayout.tsx
+++ b/apps/console/src/pages/iam/auth/AuthLayout.tsx
@@ -1,23 +1,17 @@
-import { Logo } from "@probo/ui";
+import { Card, Logo } from "@probo/ui";
 import { Outlet } from "react-router";

 import { IAMRelayProvider } from "#/providers/IAMRelayProvider";

 export default function AuthLayout() {
  return (
-    <div className="grid grid-cols-1 lg:grid-cols-2 min-h-screen text-txt-primary">
-      <div className="bg-level-0 flex flex-col items-center justify-center">
-        <div className="w-full max-w-md px-6">
-          <IAMRelayProvider>
-            <Outlet />
-          </IAMRelayProvider>
-        </div>
-      </div>
-      <div className="hidden lg:flex bg-dialog font-bold flex-col items-center justify-center p-8 text-txt-primary lg:p-10">
-        <div className="flex flex-col items-center justify-center gap-4">
-          <Logo withPicto className="w-[440px]" />
-        </div>
-      </div>
+    <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]" />
+        <IAMRelayProvider>
+          <Outlet />
+        </IAMRelayProvider>
+      </Card>
    </div>
  );
 }
--- a/apps/console/src/pages/iam/auth/ForgotPasswordPage.tsx
+++ b/apps/console/src/pages/iam/auth/ForgotPasswordPage.tsx
@@ -135,7 +135,7 @@ export default function ForgotPasswordPage() {

            <Button
              type="submit"
-              className="w-full"
+              className="w-xs h-10 mx-auto mt-6"
              disabled={formState.isSubmitting}
            >
              {formState.isSubmitting
--- a/apps/console/src/pages/iam/auth/ResetPasswordPage.tsx
+++ b/apps/console/src/pages/iam/auth/ResetPasswordPage.tsx
@@ -122,7 +122,7 @@ export default function ResetPasswordPage() {
          error={formState.errors.confirmPassword?.message}
        />

-        <Button type="submit" className="w-full" disabled={formState.isLoading}>
+        <Button type="submit" className="w-xs h-10 mx-auto mt-6" disabled={formState.isLoading}>
          {formState.isLoading
            ? __("Resetting password...")
            : __("Reset password")}
--- a/apps/console/src/pages/iam/auth/VerifyEmailPage.tsx
+++ b/apps/console/src/pages/iam/auth/VerifyEmailPage.tsx
@@ -111,7 +111,7 @@ export default function VerifyEmailPage() {

              <Button
                type="submit"
-                className="w-full"
+                className="w-xs h-10 mx-auto mt-6"
                disabled={form.formState.isSubmitting}
              >
                {form.formState.isSubmitting
--- a/apps/console/src/pages/iam/auth/sign-in/PasswordSignInPage.tsx
+++ b/apps/console/src/pages/iam/auth/sign-in/PasswordSignInPage.tsx
@@ -67,7 +67,7 @@ export default function PasswordSignInPage() {
  };

  return (
-    <form className="space-y-4" onSubmit={handlePasswordLogin}>
+    <form className="space-y-6 w-full max-w-md mx-auto" onSubmit={handlePasswordLogin}>
      <Link
        to="/auth/login"
        className="flex items-center gap-2 text-txt-secondary hover:text-txt-primary transition-colors mb-4"
@@ -83,24 +83,26 @@ export default function PasswordSignInPage() {
        {__("Enter your email and password")}
      </p>

-      <Field
-        required
-        placeholder={__("Email")}
-        name="email"
-        type="email"
-        label={__("Email")}
-        autoFocus
-      />
+      <div className="space-y-4">
+        <Field
+          required
+          placeholder={__("Email")}
+          name="email"
+          type="email"
+          label={__("Email")}
+          autoFocus
+        />

-      <Field
-        required
-        placeholder={__("Password")}
-        name="password"
-        type="password"
-        label={__("Password")}
-      />
+        <Field
+          required
+          placeholder={__("Password")}
+          name="password"
+          type="password"
+          label={__("Password")}
+        />
+      </div>

-      <Button className="w-full" disabled={isSigningIn}>
+      <Button className="w-xs h-10 mx-auto mt-6" disabled={isSigningIn}>
        {isSigningIn ? __("Logging in...") : __("Login")}
      </Button>

--- a/apps/console/src/pages/iam/auth/sign-in/SSOSignInPage.tsx
+++ b/apps/console/src/pages/iam/auth/sign-in/SSOSignInPage.tsx
@@ -37,7 +37,7 @@ export default function SSOSignInPage() {

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

-        <Button className="w-full" disabled={checking}>
+        <Button className="w-xs h-10 mx-auto mt-6" disabled={checking}>
          {checking ? __("Checking...") : __("Continue with SSO")}
        </Button>

--- a/apps/console/src/pages/iam/auth/sign-in/SignInPage.tsx
+++ b/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-4">
+    <div className="space-y-6 w-full max-w-md mx-auto">
      <h1 className="text-center text-2xl font-bold">
        {__("Login to your account")}
      </h1>
@@ -14,7 +14,7 @@ export default function SignInPage() {
        {__("Choose your login method")}
      </p>

-      <Button className="w-full" to="/auth/password-login">
+      <Button className="w-xs h-10 mx-auto" to="/auth/password-login">
        {__("Login with Email")}
      </Button>

@@ -32,7 +32,7 @@ export default function SignInPage() {
        </div>
      </div>

-      <Button variant="secondary" className="w-full" to="/auth/sso-login">
+      <Button variant="secondary" className="w-xs h-10 mx-auto" to="/auth/sso-login">
        {__("Login with SSO")}
      </Button>

--- a/apps/console/src/pages/iam/auth/sign-up/SignUpFromInvitationPage.tsx
+++ b/apps/console/src/pages/iam/auth/sign-up/SignUpFromInvitationPage.tsx
@@ -122,7 +122,7 @@ export default function SignUpFromInvitationPage() {
          error={formState.errors.password?.message}
        />

-        <Button type="submit" className="w-full" disabled={formState.isLoading}>
+        <Button type="submit" className="w-xs h-10 mx-auto mt-6" disabled={formState.isLoading}>
          {formState.isLoading
            ? __("Creating account...")
            : __("Create account")}
--- a/apps/console/src/pages/iam/auth/sign-up/SignUpPage.tsx
+++ b/apps/console/src/pages/iam/auth/sign-up/SignUpPage.tsx
@@ -117,7 +117,7 @@ export default function SignUpPage() {
          error={formState.errors.password?.message}
        />

-        <Button type="submit" className="w-full" disabled={formState.isLoading}>
+        <Button type="submit" className="w-xs h-10 mx-auto mt-6" disabled={formState.isLoading}>
          {formState.isLoading
            ? __("Creating account...")
            : __("Sign up with email")}
--- a/apps/trust/src/pages/auth/AuthLayout.tsx
+++ b/apps/trust/src/pages/auth/AuthLayout.tsx
@@ -1,5 +1,5 @@
 import { useSystemTheme } from "@probo/hooks";
-import { Logo } from "@probo/ui";
+import { Card, Logo } from "@probo/ui";
 import { type PreloadedQuery, usePreloadedQuery } from "react-relay";
 import { Outlet } from "react-router";
 import { graphql } from "relay-runtime";
@@ -26,25 +26,19 @@ export function AuthLayout(props: { queryRef: PreloadedQuery<AuthLayoutQuery> })
    : compliancePage.logoFileUrl;

  return (
-    <div className="grid grid-cols-1 lg:grid-cols-2 min-h-screen text-txt-primary">
-      <div className="bg-level-0 flex flex-col items-center justify-center">
-        <div className="w-full max-w-md px-6">
-          <Outlet />
-        </div>
-      </div>
-      <div className="hidden lg:flex bg-dialog font-bold flex-col items-center justify-center p-8 text-txt-primary lg:p-10">
-        <div className="flex flex-col items-center justify-center gap-4">
-          {logoFileUrl
-            ? (
-                <img
-                  alt=""
-                  src={logoFileUrl}
-                  className="size-[440px] rounded-2xl"
-                />
-              )
-            : <Logo withPicto className="w-[440px]" />}
-        </div>
-      </div>
+    <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]" />}
+        <Outlet />
+      </Card>
    </div>
  );
 }
--- a/apps/trust/src/pages/auth/ConnectPage.tsx
+++ b/apps/trust/src/pages/auth/ConnectPage.tsx
@@ -128,7 +128,7 @@ export function ConnectPage(props: {
    <div className="space-y-6 w-full max-w-md mx-auto">
      <div className="space-y-2 text-center">
        <h1 className="text-3xl font-bold">
-          {__(`Connect to ${organization.name}'s compliance page`)}
+          {__("Connect to Compliance Page")}
        </h1>
        <p className="text-txt-tertiary">
          {__(
@@ -137,7 +137,7 @@ export function ConnectPage(props: {
        </p>
      </div>

-      <form onSubmit={e => void handleSubmit(e)} className="space-y-4">
+      <form onSubmit={e => void handleSubmit(e)} className="space-y-6">
        <Field
          label={__("Email")}
          placeholder="john.doe@acme.com"
@@ -156,7 +156,7 @@ export function ConnectPage(props: {

        <Button
          type="submit"
-          className="w-full"
+          className="w-xs h-10 mx-auto"
          disabled={formState.isSubmitting || (magicLinkSent && timer !== 0)}
        >
          {magicLinkSent
--- a/apps/trust/src/pages/auth/VerifyMagicLinkPage.tsx
+++ b/apps/trust/src/pages/auth/VerifyMagicLinkPage.tsx
@@ -94,7 +94,7 @@ export default function VerifyMagicLinkPagePageMutation() {
        </p>
      </div>

-      <form onSubmit={e => void handleSubmit(e)} className="space-y-4">
+      <form onSubmit={e => void handleSubmit(e)} className="space-y-6">
        <Field
          label={__("Confirmation Token")}
          type="text"
@@ -109,7 +109,7 @@ export default function VerifyMagicLinkPagePageMutation() {

        <Button
          type="submit"
-          className="w-full"
+          className="w-xs h-10 mx-auto"
          disabled={form.formState.isSubmitting}
        >
          {form.formState.isSubmitting