style: redo login page design

src/components/Login/LoginForm.tsx

@@ -47,7 +47,7 @@ const LoginForm = () => {
   };
 
   return (
-    <form className="form-control w-full space-y-5" onSubmit={handleSubmit(onSubmit)}>
+    <form className="form-control space-y-5" onSubmit={handleSubmit(onSubmit)}>
       <div>
         <FormInfo>
           <FormLabel htmlFor="username">username</FormLabel>

src/components/ui/Navbar.tsx

@@ -1,10 +1,10 @@
 import useMediaQuery from '@/hooks/utilities/useMediaQuery';
 import useNavbar from '@/hooks/utilities/useNavbar';
-import useTheme from '@/hooks/utilities/useTheme';
+// import useTheme from '@/hooks/utilities/useTheme';
 
 import Link from 'next/link';
 import { FC, useRef } from 'react';
-import { MdDarkMode, MdLightMode } from 'react-icons/md';
+// import { MdDarkMode, MdLightMode } from 'react-icons/md';
 
 import { FaBars } from 'react-icons/fa';
 import classNames from 'classnames';
@@ -83,25 +83,30 @@ const MobileLinks: FC = () => {
 const Navbar = () => {
   const isDesktopView = useMediaQuery('(min-width: 1024px)');
 
-  const { theme, setTheme } = useTheme();
   const { currentURL } = useNavbar();
 
+  const backgroundIsTransparent =
+    currentURL === '/' || currentURL === '/login' || currentURL === '/register';
+
+  const isOnHomePage = currentURL === '/';
+
+  // const { theme, setTheme } = useTheme();
   return (
     <div
       className={classNames('navbar fixed top-0 z-20 h-10 min-h-10 text-base-content', {
-        'bg-transparent': currentURL === '/',
-        'bg-base-100': currentURL !== '/',
+        'bg-transparent': backgroundIsTransparent,
+        'bg-base-100': !backgroundIsTransparent,
       })}
     >
       <div className="flex-1">
-        {currentURL === '/' ? null : (
+        {isOnHomePage ? null : (
           <Link className="btn btn-ghost btn-sm" href="/">
             <span className="cursor-pointer text-lg font-bold">The Biergarten App</span>
           </Link>
         )}
       </div>
 
-      <div
+      {/* <div
         className="tooltip tooltip-left"
         data-tip={theme === 'light' ? 'Switch to dark mode' : 'Switch to light mode'}
       >
@@ -126,7 +131,7 @@ const Navbar = () => {
             </button>
           )}
         </div>
-      </div>
+      </div> */}
       <div>{isDesktopView ? <DesktopLinks /> : <MobileLinks />}</div>
     </div>
   );

src/pages/index.tsx

@@ -1,6 +1,6 @@
 import { NextPage } from 'next';
+import { CldImage } from 'next-cloudinary';
 import Head from 'next/head';
-import Image from 'next/image';
 
 const keywords = [
   'beer',
@@ -40,12 +40,12 @@ const Home: NextPage = () => {
         <meta name="description" content={description} />
         <meta name="keywords" content={keywords.join(', ')} />
       </Head>
-      <div className="relative flex h-dvh w-full flex-col items-center justify-center">
-        <Image
-          alt=""
-          src="/background.jpg"
-          height={4015}
-          width={6035}
+      <div className="relative flex 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-9/12 flex-col space-y-3 text-base-content">

src/pages/login/index.tsx

@@ -18,34 +18,32 @@ const LoginPage: NextPage = () => {
         <meta name="description" content="Login to your account" />
       </Head>
 
-      <div className="flex h-screen flex-row">
-        <div className="hidden h-dvh flex-col items-center justify-center bg-base-100 lg:flex lg:w-[55%]">
-          <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="h-full w-full object-cover"
-          />
-        </div>
-        <div className="flex min-h-dvh w-full flex-col items-center justify-center bg-base-100 lg:w-[45%]">
-          <div className="w-10/12 space-y-5 sm:w-9/12">
-            <div className=" flex flex-col items-center space-y-2">
-              <FaUserCircle className="text-3xl" />
-              <h1 className="text-4xl font-bold">Login</h1>
-            </div>
+      <div className="relative flex 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-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">
+            <FaUserCircle className="text-6xl text-primary-content" />
+            <h1 className="text-6xl font-extrabold">Login</h1>
+          </div>
+          <div className="w-full">
             <LoginForm />
-            <div className="mt-3 flex flex-col items-center space-y-1">
-              <Link href="/register" className="text-primary-500 link-hover link italic">
-                Don&apos;t have an account?
-              </Link>
-              <Link
-                href="/users/forgot-password"
-                className="text-primary-500 link-hover link italic"
-              >
-                Forgot password?
-              </Link>
-            </div>
+          </div>
+
+          <div className="mt-5 flex w-full flex-col space-y-1 text-center font-bold italic">
+            <Link className="link-hover link text-lg" href="/register">
+              Don&apos;t have an account?
+            </Link>
+
+            <Link className="link-hover link text-lg" href="/users/forgot-password">
+              Forgot your password?{' '}
+            </Link>
           </div>
         </div>
       </div>