Refactor login and register page designs

This commit is contained in:
Aaron William Po
2024-04-07 15:51:25 -04:00
parent ac89833a5d
commit b299ed946b
4 changed files with 55 additions and 44 deletions

View File

@@ -49,8 +49,8 @@ const Home: NextPage = () => {
className="pointer-events-none absolute h-full w-full object-cover mix-blend-overlay"
/>
<div className="relative flex w-9/12 flex-col space-y-3 text-base-content">
<h1 className="text-8xl font-extrabold">The Biergarten App</h1>
<p className="text-3xl font-bold">{description}</p>
<h1 className="text-5xl font-extrabold lg:text-8xl">The Biergarten App</h1>
<p className="font-bold lg:text-3xl">{description}</p>
</div>
</div>
</>

View File

@@ -28,7 +28,7 @@ const LoginPage: NextPage = () => {
/>
<div className="relative flex w-9/12 flex-col items-center text-center text-base-content lg:w-6/12">
<div className="flex w-full flex-col items-center space-y-2 text-center">
<div className="mb-8 flex w-full flex-col items-center space-y-2 text-center">
<FaUserCircle className="text-6xl text-primary-content" />
<h1 className="text-6xl font-extrabold">Login</h1>
</div>

View File

@@ -1,10 +1,11 @@
import RegisterUserForm from '@/components/RegisterUserForm';
import FormPageLayout from '@/components/ui/forms/FormPageLayout';
import useRedirectWhenLoggedIn from '@/hooks/auth/useRedirectIfLoggedIn';
import { NextPage } from 'next';
import { CldImage } from 'next-cloudinary';
import Head from 'next/head';
import { BiUser } from 'react-icons/bi';
import { FaUserCircle } from 'react-icons/fa';
const RegisterUserPage: NextPage = () => {
useRedirectWhenLoggedIn();
@@ -15,14 +16,26 @@ const RegisterUserPage: NextPage = () => {
<title>Register User</title>
<meta name="description" content="Register a new user" />
</Head>
<FormPageLayout
headingText="Register User"
headingIcon={BiUser}
backLink="/"
backLinkText="Back to home"
>
<RegisterUserForm />
</FormPageLayout>
<div className="relative flex min-h-dvh w-full flex-col items-center justify-center bg-base-300">
<CldImage
src="https://res.cloudinary.com/dxie9b7na/image/upload/v1701056793/cloudinary-images/pexels-elevate-1267700_jrno3s.jpg"
alt="Login Image"
width={5000}
height={5000}
className="pointer-events-none absolute h-full w-full object-cover mix-blend-overlay"
/>
<div className="relative flex w-10/12 flex-col items-center pb-20 text-center text-base-content lg:w-6/12">
<div className="mb-8 mt-20 flex w-full flex-col items-center space-y-2 text-center">
<FaUserCircle className="text-6xl text-primary-content" />
<h1 className="text-6xl font-extrabold">Register</h1>
</div>
<div className="w-full">
<RegisterUserForm />
</div>
</div>
</div>
</>
);
};