399 log in

app/(pages)/(hackers)/_components/AuthFormBackground/AuthFormBackground.tsx

@@ -4,11 +4,11 @@ import { useEffect, useState } from 'react';
 import Image from 'next/image';
 import { usePathname } from 'next/navigation';
 
-import Logo from 'public/hackers/mvp/HDLogo.svg';
-import grassAsset from '@public/hackers/mvp/grass_asset.svg';
+import grass_bottom from '@public/hackers/login/grass_bottom.svg';
 import mascots from '@public/hackers/mvp/peeking_around_wall.svg';
 import VocalAngelCow from 'public/hackers/mvp/vocal_angel_cow.svg';
-import styles from './AuthFormBackground.module.scss';
+import login_mascots_mobile from '@public/hackers/login/login_mascots_mobile.svg';
+import clouds_and_music from '@public/hackers/login/clouds_and_music.svg';
 
 export default function AuthFormBackground({
   title,
@@ -22,6 +22,7 @@ export default function AuthFormBackground({
   const [mascotsVisibility, setMascotsVisibility] = useState(true);
   const pathname = usePathname();
 
+  // Hide mascots on register details page - mobile ONLY
   useEffect(() => {
     if (pathname === '/register/details') {
       setMascotsVisibility(false);
@@ -31,37 +32,49 @@ export default function AuthFormBackground({
   }, [pathname]);
 
   return (
-    <div className={styles.container}>
-      <div className={styles.content}>
-        <div className={styles.header_container}>
-          <Image src={Logo} alt="hackdavis logo" className={styles.logo} />
-          <div className={styles.header}>
-            <Image
-              src={VocalAngelCow}
-              alt="Angel Cow"
-              height={100}
-              width={100}
-            />
-            <div className={styles.header_text}>
-              <h1>{title}</h1>
-              <p style={{ whiteSpace: 'pre-line' }}>{subtitle}</p>
-            </div>
-          </div>
+    <div className="flex flex-col md:flex-row w-full h-screen">
+      <div className="flex flex-[1_0_auto] md:flex-1 flex-col justify-end md:justify-center items-center w-full">
+        <div className="flex flex-col items-start w-full px-6 md:px-[82px]">
+          <Image src={VocalAngelCow} alt="Angel Cow" height={100} width={100} />
+          <h1 className="text-[20px] md:text-[22px] font-semibold text-[#3F3F3F]">
+            {title}
+          </h1>
+          <p
+            className="text-[14px] md:text-[16px] text-[#5E5E65]"
+            style={{ whiteSpace: 'pre-line' }}
+          >
+            {subtitle}
+          </p>
         </div>
 
-        <div className={styles.overlayContent}>{children}</div>
+        <div className="w-full px-6 md:px-[82px]">{children}</div>
       </div>
-
-      <div className={styles.grass_asset}>
+      <div className="flex flex-1 flex-col justify-end relative md:bg-[linear-gradient(284deg,rgba(213,252,209,0.60)_9.72%,rgba(178,231,221,0.60)_44.61%,rgba(118,214,230,0.60)_79.5%)]">
+        {/* DESKTOP ONLY */}
+        <Image
+          src={clouds_and_music}
+          alt="background clouds and music notes"
+          style={{ position: 'absolute', top: 0, right: 0, zIndex: 1 }}
+          className="hidden md:block w-full"
+        />
         <Image
-          src={grassAsset}
+          src={grass_bottom}
           alt="grass asset"
-          className={styles.grass}
-          style={mascotsVisibility ? {} : { position: 'relative' }}
+          style={{ position: 'relative', zIndex: 3 }}
+          className="hidden md:block w-full"
+        />
+        <Image
+          src={mascots}
+          alt="mascots peeping"
+          style={{ position: 'absolute', right: 0, bottom: 0, zIndex: 5 }}
+          className="hidden md:block"
+        />
+        {/* MOBILE ONLY */}
+        <Image
+          src={login_mascots_mobile}
+          alt="mobile mascots"
+          className={`md:hidden w-full ${!mascotsVisibility ? 'hidden' : ''}`}
         />
-        {mascotsVisibility && (
-          <Image src={mascots} alt="mascots" className={styles.mascots} />
-        )}
       </div>
     </div>
   );

app/(pages)/(hackers)/_components/AuthForms/LoginForm.tsx

@@ -20,14 +20,14 @@ export default function LoginForm() {
     {
       name: 'email' as const,
       type: 'email',
-      label: 'EMAIL',
+      label: '', //2026 design removed labels, so leaving blank
       placeholder: 'Email',
       readOnly: false,
     },
     {
       name: 'password' as const,
       type: 'password',
-      label: 'PASSWORD',
+      label: '', //2026 design removed labels, so leaving blank
       placeholder: 'Password',
       readOnly: false,
     },
@@ -37,7 +37,7 @@ export default function LoginForm() {
     <AuthForm
       role="hacker"
       fields={formFields}
-      buttonText="Log in →"
+      buttonText="Next →"
       linkText="Forgot Password?"
       linkHref="/login/forgot-password"
       initialValues={{

app/(pages)/(hackers)/login/page.tsx

@@ -12,8 +12,8 @@ export default async function LoginPage() {
 
   return (
     <AuthFormBackground
-      title="Hi Hacker!"
-      subtitle="Welcome to the HackerHub! The HackDavis team made this for all your hacking needs <3"
+      title="Welcome back to the HackerHub"
+      subtitle="We’ve missed you, log back in quickly to see what’s happening."
     >
       <LoginForm />
     </AuthFormBackground>

app/(pages)/_components/AuthForm/AuthForm.tsx

@@ -4,7 +4,6 @@ import Link from 'next/link';
 import Image from 'next/image';
 
 import useAuthForm from '@hooks/useAuthForm';
-import Loader from '@components/Loader/Loader';
 import Froggy from 'public/login/LogIn_Froggy.svg';
 import Drumstick from 'public/login/LogIn_DrumStick.svg';
 import hackerStyles from './HackerAuthForm.module.scss';
@@ -60,7 +59,6 @@ export default function AuthForm({
     <div className={styles.container}>
       <form onSubmit={handleSubmit} className={styles.form}>
         <div className={styles.top_container}>
-          <p className={styles.error_msg}>{errors.submit}</p>
           <div className={styles.fields}>
             {fields.map((field) => (
               <div key={field.name}>
@@ -91,13 +89,12 @@ export default function AuthForm({
                 </div>
               </div>
             ))}
+            {linkText && (
+              <Link href={linkHref ?? '/'} className={styles.forgot}>
+                {linkText}
+              </Link>
+            )}
           </div>
-
-          {linkText && (
-            <Link href={linkHref ?? '/'} className={styles.forgot}>
-              {linkText}
-            </Link>
-          )}
         </div>
 
         <div className={styles.bottom_container}>
@@ -129,13 +126,12 @@ export default function AuthForm({
                 valid ? styles.valid : null
               }`}
             >
-              {buttonText}
+              {loading ? 'Checking...' : buttonText}
             </button>
           </div>
+          <p className={styles.error_msg}>{errors.submit}</p>
         </div>
       </form>
-
-      {loading && <Loader />}
     </div>
   );
 }