feat: match the login page to the Keycloak theme

import type { ReactNode } from 'react';

import { Link } from 'react-router-dom';

import { LogoIcon } from '@/lib/icons';

import { ROUTES } from '@/app/config/route';

import { ThemeToggle } from '@/components/common/theme-toggle';

import authBackground from '@/assets/auth-background.webp';

import openopLogo from '@/assets/openop-logo.png';

import openopLogoDark from '@/assets/openop-logo-dark.png';

// Same layout as the Keycloak login theme (helm: charts/keycloak/themes/oop), so moving

// between the Portal and Keycloak does not change the page.

export function AuthLayout({ children }: { children: ReactNode }) {

  return (

    <div className="relative flex min-h-screen items-center justify-center bg-muted/30 px-4">

    <div className="grid min-h-screen bg-muted/30 lg:grid-cols-[minmax(0,1.2fr)_minmax(32rem,1fr)]">

      <div

        aria-hidden="true"

        className="hidden bg-cover bg-center lg:block"

        style={{ backgroundImage: `url(${authBackground})` }}

      />

      <div className="relative flex items-center justify-center px-4 py-8">

        <div className="absolute top-4 right-4">

          <ThemeToggle />

        </div>

        <div className="w-full max-w-md">

          <div className="mb-6 flex justify-center">

            <Link to={ROUTES.HOME}>

            <LogoIcon className="h-12 w-auto" />

              <img

                src={openopLogo}

                alt="OpenOP"

                className="h-16 w-auto dark:hidden"

              />

              <img

                src={openopLogoDark}

                alt="OpenOP"

                className="hidden h-16 w-auto dark:block"

              />

            </Link>

          </div>

          </div>

        </div>

      </div>

    </div>

  );

}