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-transparent': backgroundIsTransparent,
-        'bg-base-100': currentURL !== '/',
+        '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">
+      <div className="relative flex h-dvh w-full flex-col items-center justify-center bg-base-300">
-        <Image
+        <CldImage
-          alt=""
+          src="https://res.cloudinary.com/dxie9b7na/image/upload/v1701056793/cloudinary-images/pexels-elevate-1267700_jrno3s.jpg"
-          src="/background.jpg"
+          alt="Login Image"
-          height={4015}
+          width={5000}
-          width={6035}
+          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,37 +18,35 @@ const LoginPage: NextPage = () => {
         <meta name="description" content="Login to your account" />
       </Head>
 
-      <div className="flex h-screen flex-row">
+      <div className="relative flex h-dvh w-full flex-col items-center justify-center bg-base-300">
-        <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"
+          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="flex min-h-dvh w-full flex-col items-center justify-center bg-base-100 lg:w-[45%]">
+          <div className="w-full">
-          <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>
             <LoginForm />
-            <div className="mt-3 flex flex-col items-center space-y-1">
+          </div>
-              <Link href="/register" className="text-primary-500 link-hover link italic">
+
+          <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
+
-                href="/users/forgot-password"
+            <Link className="link-hover link text-lg" href="/users/forgot-password">
-                className="text-primary-500 link-hover link italic"
+              Forgot your password?{' '}
-              >
-                Forgot password?
             </Link>
           </div>
         </div>
       </div>
-      </div>
     </>
   );
 };

tailwind.config.js

@@ -2,7 +2,7 @@
 
 const myThemes = {
   dark: {
-    primary: 'hsl(227, 25%, 25%)',
+    primary: 'hsl(227, 10%, 25%)',
     secondary: 'hsl(255, 9%, 69%)',
     error: 'hsl(9, 52%, 57%)',
     accent: 'hsl(316, 96%, 60%)',
@@ -12,24 +12,10 @@ const myThemes = {
     warning: 'hsl(50, 98%, 50%)',
     'primary-content': 'hsl(0, 0%, 98%)',
     'error-content': 'hsl(0, 0%, 98%)',
-    'base-100': 'hsl(227, 20%, 20%)',
+    'base-content': 'hsl(227, 0%, 60%)',
-    'base-200': 'hsl(227, 20%, 13%)',
+    'base-100': 'hsl(227, 10%, 20%)',
-    'base-300': 'hsl(227, 20%, 10%)',
+    'base-200': 'hsl(227, 10%, 10%)',
-  },
+    'base-300': 'hsl(227, 10%, 8%)',
-  light: {
-    primary: 'hsl(180, 20%, 70%)',
-    secondary: 'hsl(120, 10%, 70%)',
-    error: 'hsl(4, 87%, 74%)',
-    accent: 'hsl(93, 27%, 73%)',
-    neutral: 'hsl(38, 31%, 91%)',
-    info: 'hsl(163, 40%, 79%)',
-    success: 'hsl(93, 27%, 73%)',
-    warning: 'hsl(40, 76%, 73%)',
-    'primary-content': 'hsl(0, 0%, 0%)',
-    'error-content': 'hsl(0, 0%, 0%)',
-    'base-300': 'hsl(180, 10%, 70%)',
-    'base-200': 'hsl(180, 10%, 75%)',
-    'base-100': 'hsl(180, 10%, 80%)',
   },
 };