From 1a1136678db991ba0ca94401ba4da3132ce93085 Mon Sep 17 00:00:00 2001 From: michelleyeoh Date: Wed, 25 Feb 2026 13:15:01 -0800 Subject: [PATCH 1/5] janky login desktop --- .../AuthFormBackground.module.scss | 116 ------------------ .../AuthFormBackground/AuthFormBackground.tsx | 43 +++---- app/(pages)/(hackers)/login/page.tsx | 4 +- .../AuthForm/HackerAuthForm.module.scss | 7 +- public/hackers/login/login_mascots_mobile.svg | 101 +++++++++++++++ 5 files changed, 122 insertions(+), 149 deletions(-) delete mode 100644 app/(pages)/(hackers)/_components/AuthFormBackground/AuthFormBackground.module.scss create mode 100644 public/hackers/login/login_mascots_mobile.svg diff --git a/app/(pages)/(hackers)/_components/AuthFormBackground/AuthFormBackground.module.scss b/app/(pages)/(hackers)/_components/AuthFormBackground/AuthFormBackground.module.scss deleted file mode 100644 index 97dcdb47e..000000000 --- a/app/(pages)/(hackers)/_components/AuthFormBackground/AuthFormBackground.module.scss +++ /dev/null @@ -1,116 +0,0 @@ -@import 'app/(pages)/_globals/mixins'; - -.container { - background-image: - url('/hackers/mvp/Clouds.svg'), - 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%); - - background-repeat: no-repeat, no-repeat; - background-position: top center, center; - background-size: 100%; - - @include tablet-l { - background-position-y: 30px, 0; - background-position-x: -50px, 0; - background-size: 125%, 100%; - } - - min-height: 100vh; - position: relative; - overflow: hidden; - - display: flex; - flex-direction: column; - justify-content: space-between; - - .content { - z-index: 1; - - .header_container { - display: flex; - flex-direction: column; - } - - .header { - display: flex; - flex-direction: row; - gap: 26px; - margin-left: 5%; - margin-right: 5%; - margin-top: max(114px, 6%); - - .header_text { - display: flex; - flex-direction: column; - gap: 16px; - - h1 { - font-size: 1.75rem; - font-style: normal; - font-weight: 600; - line-height: normal; - letter-spacing: 0.56px; - - @include tablet-s { - font-size: 1.25rem; - } - } - - p { - font-size: 1.125rem; - font-style: normal; - font-weight: 400; - line-height: 145%; - letter-spacing: 0.36px; - - @include tablet-s { - font-size: 0.875rem; - } - } - } - } - } - - .logo { - position: absolute; - margin-left: 5%; - margin-top: 2%; - - img { - width: 32px; - } - } - - .grass_asset { - position: relative; - width: 100%; - bottom: -5px; - - .grass { - width: 100%; - - @include tablet-l { - position: absolute; - bottom: 0; - } - } - - .mascots { - position: absolute; - right: 0; - bottom: 0; - height: 65vh; - width: auto; - - @include desktop-s { - height: 50vh; - } - @include tablet-l { - position: relative; - height: 30vh; - margin-right: 0; - margin-left: auto; - } - } - } -} \ No newline at end of file diff --git a/app/(pages)/(hackers)/_components/AuthFormBackground/AuthFormBackground.tsx b/app/(pages)/(hackers)/_components/AuthFormBackground/AuthFormBackground.tsx index 60bcf273b..17a69de6d 100644 --- a/app/(pages)/(hackers)/_components/AuthFormBackground/AuthFormBackground.tsx +++ b/app/(pages)/(hackers)/_components/AuthFormBackground/AuthFormBackground.tsx @@ -4,11 +4,10 @@ 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 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'; export default function AuthFormBackground({ title, @@ -31,37 +30,31 @@ export default function AuthFormBackground({ }, [pathname]); return ( -
-
-
- hackdavis logo -
- Angel Cow -
-

{title}

-

{subtitle}

-
-
+
+
+
+ Angel Cow +

{title}

+

+ {subtitle} +

-
{children}
+
{children}
- -
+
+ {mascotsVisibility && ( + mascots peeping + )} grass asset - {mascotsVisibility && ( - mascots - )}
); diff --git a/app/(pages)/(hackers)/login/page.tsx b/app/(pages)/(hackers)/login/page.tsx index 1cc4c0ea5..d5edffa55 100644 --- a/app/(pages)/(hackers)/login/page.tsx +++ b/app/(pages)/(hackers)/login/page.tsx @@ -12,8 +12,8 @@ export default async function LoginPage() { return ( diff --git a/app/(pages)/_components/AuthForm/HackerAuthForm.module.scss b/app/(pages)/_components/AuthForm/HackerAuthForm.module.scss index 6aff3e7e1..a894c4014 100644 --- a/app/(pages)/_components/AuthForm/HackerAuthForm.module.scss +++ b/app/(pages)/_components/AuthForm/HackerAuthForm.module.scss @@ -45,19 +45,17 @@ line-height: 145%; letter-spacing: 0.36px; margin-bottom: 4px; - margin-left: 12px; @include tablet-s { font-size: 0.75rem; letter-spacing: 0.24px; margin-bottom: 2px; - margin-left: 8px; } } input { border-radius: var(--b-radius-large); - background: rgba(255, 255, 255, 0.70); + background: #FAFAFF; backdrop-filter: blur(30px); border: none; outline: none; @@ -76,7 +74,6 @@ .bottom { display: flex; flex-direction: row; - justify-content: space-between; } .forgot { @@ -86,12 +83,10 @@ line-height: 145%; letter-spacing: 0.36px; margin-top: 4px; - margin-left: 12px; @include tablet-s { font-size: 0.75rem; letter-spacing: 0.24px; - margin-left: 8px; } } diff --git a/public/hackers/login/login_mascots_mobile.svg b/public/hackers/login/login_mascots_mobile.svg new file mode 100644 index 000000000..ec0a4850e --- /dev/null +++ b/public/hackers/login/login_mascots_mobile.svg @@ -0,0 +1,101 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From e39a375e431e1e1924c50783f97d2fbf011a65de Mon Sep 17 00:00:00 2001 From: michelleyeoh Date: Wed, 25 Feb 2026 13:47:15 -0800 Subject: [PATCH 2/5] desktop and mobile fixes --- .../AuthFormBackground/AuthFormBackground.tsx | 23 ++++++++--- .../AuthForm/HackerAuthForm.module.scss | 39 +------------------ 2 files changed, 18 insertions(+), 44 deletions(-) diff --git a/app/(pages)/(hackers)/_components/AuthFormBackground/AuthFormBackground.tsx b/app/(pages)/(hackers)/_components/AuthFormBackground/AuthFormBackground.tsx index 17a69de6d..d9a0511e9 100644 --- a/app/(pages)/(hackers)/_components/AuthFormBackground/AuthFormBackground.tsx +++ b/app/(pages)/(hackers)/_components/AuthFormBackground/AuthFormBackground.tsx @@ -30,9 +30,9 @@ export default function AuthFormBackground({ }, [pathname]); return ( -
-
-
+
+
+
Angel Cow

{title}

@@ -40,21 +40,32 @@ export default function AuthFormBackground({

-
{children}
+
{children}
-
+
+ {/* DESKTOP ONLY */} {mascotsVisibility && ( mascots peeping )} grass asset + {/* MOBILE ONLY */} + {mascotsVisibility && ( + mobile mascots + )}
); diff --git a/app/(pages)/_components/AuthForm/HackerAuthForm.module.scss b/app/(pages)/_components/AuthForm/HackerAuthForm.module.scss index a894c4014..6016c0b71 100644 --- a/app/(pages)/_components/AuthForm/HackerAuthForm.module.scss +++ b/app/(pages)/_components/AuthForm/HackerAuthForm.module.scss @@ -3,25 +3,14 @@ .container { display: flex; flex-direction: column; - - @include tablet-s { - justify-content: center; - align-items: center; - gap: 20px; - margin: 72px 32px 0px 32px; - } } .form { display: flex; flex-direction: column; align-self: center; - width: 471px; + width: 100%; margin-top: 5%; - - @include tablet-s { - width: 100%; - } } .fields { @@ -29,10 +18,6 @@ flex-direction: column; gap: 40px; - @include tablet-s { - gap: 20px; - } - div { display: flex; flex-direction: column; @@ -45,12 +30,6 @@ line-height: 145%; letter-spacing: 0.36px; margin-bottom: 4px; - - @include tablet-s { - font-size: 0.75rem; - letter-spacing: 0.24px; - margin-bottom: 2px; - } } input { @@ -63,10 +42,6 @@ font-size: 18px; font-weight: 400; color: #005271; - - @include tablet-s { - border-radius: var(--b-radius-med); - } } } } @@ -83,11 +58,6 @@ line-height: 145%; letter-spacing: 0.36px; margin-top: 4px; - - @include tablet-s { - font-size: 0.75rem; - letter-spacing: 0.24px; - } } .submit_button { @@ -105,13 +75,6 @@ border-radius: 20px; opacity: 0.3; margin-top: 40px; - - @include tablet-s { - padding: 8px 16px; - font-size: 0.75rem; - letter-spacing: 0.24px; - margin-top: 20px; - } } .valid { From 6881378406f0c43d7da801828118c4898538cd77 Mon Sep 17 00:00:00 2001 From: michelleyeoh Date: Wed, 25 Feb 2026 13:57:37 -0800 Subject: [PATCH 3/5] cleaned up views --- .../AuthFormBackground/AuthFormBackground.tsx | 7 +++++-- .../(hackers)/_components/AuthForms/LoginForm.tsx | 4 ++-- app/(pages)/_components/AuthForm/AuthForm.tsx | 11 +++++------ .../_components/AuthForm/HackerAuthForm.module.scss | 9 ++++++--- 4 files changed, 18 insertions(+), 13 deletions(-) diff --git a/app/(pages)/(hackers)/_components/AuthFormBackground/AuthFormBackground.tsx b/app/(pages)/(hackers)/_components/AuthFormBackground/AuthFormBackground.tsx index d9a0511e9..5ad01271b 100644 --- a/app/(pages)/(hackers)/_components/AuthFormBackground/AuthFormBackground.tsx +++ b/app/(pages)/(hackers)/_components/AuthFormBackground/AuthFormBackground.tsx @@ -34,8 +34,11 @@ export default function AuthFormBackground({
Angel Cow -

{title}

-

+

{title}

+

{subtitle}

diff --git a/app/(pages)/(hackers)/_components/AuthForms/LoginForm.tsx b/app/(pages)/(hackers)/_components/AuthForms/LoginForm.tsx index 75b0ee726..244e5f77b 100644 --- a/app/(pages)/(hackers)/_components/AuthForms/LoginForm.tsx +++ b/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, }, diff --git a/app/(pages)/_components/AuthForm/AuthForm.tsx b/app/(pages)/_components/AuthForm/AuthForm.tsx index 491f3f79d..a6cc8de53 100644 --- a/app/(pages)/_components/AuthForm/AuthForm.tsx +++ b/app/(pages)/_components/AuthForm/AuthForm.tsx @@ -91,13 +91,12 @@ export default function AuthForm({
))} + {linkText && ( + + {linkText} + + )}
- - {linkText && ( - - {linkText} - - )}
diff --git a/app/(pages)/_components/AuthForm/HackerAuthForm.module.scss b/app/(pages)/_components/AuthForm/HackerAuthForm.module.scss index 6016c0b71..67bc7f03a 100644 --- a/app/(pages)/_components/AuthForm/HackerAuthForm.module.scss +++ b/app/(pages)/_components/AuthForm/HackerAuthForm.module.scss @@ -16,7 +16,7 @@ .fields { display: flex; flex-direction: column; - gap: 40px; + gap: 12px; div { display: flex; @@ -52,12 +52,15 @@ } .forgot { - font-size: 1.125rem; + font-size: 1rem; //16px font-style: normal; font-weight: 400; line-height: 145%; letter-spacing: 0.36px; - margin-top: 4px; + + @include tablet-l { //tailwind md + font-size: 0.875rem; //14px + } } .submit_button { From a2b0e82571019e92f65cd371bd535cdb72bdc5db Mon Sep 17 00:00:00 2001 From: michelleyeoh Date: Wed, 25 Feb 2026 14:36:11 -0800 Subject: [PATCH 4/5] done, minus hover state --- .../AuthFormBackground/AuthFormBackground.tsx | 49 ++++++++++--------- .../_components/AuthForms/LoginForm.tsx | 2 +- app/(pages)/_components/AuthForm/AuthForm.tsx | 7 +-- .../AuthForm/HackerAuthForm.module.scss | 10 ++-- public/hackers/login/clouds_and_music.svg | 31 ++++++++++++ public/hackers/login/grass_bottom.svg | 11 +++++ 6 files changed, 79 insertions(+), 31 deletions(-) create mode 100644 public/hackers/login/clouds_and_music.svg create mode 100644 public/hackers/login/grass_bottom.svg diff --git a/app/(pages)/(hackers)/_components/AuthFormBackground/AuthFormBackground.tsx b/app/(pages)/(hackers)/_components/AuthFormBackground/AuthFormBackground.tsx index 5ad01271b..fe2e36ee8 100644 --- a/app/(pages)/(hackers)/_components/AuthFormBackground/AuthFormBackground.tsx +++ b/app/(pages)/(hackers)/_components/AuthFormBackground/AuthFormBackground.tsx @@ -4,10 +4,11 @@ import { useEffect, useState } from 'react'; import Image from 'next/image'; import { usePathname } from 'next/navigation'; -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 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, @@ -21,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,12 +33,14 @@ export default function AuthFormBackground({ return (
-
+
Angel Cow -

{title}

+

+ {title} +

{subtitle} @@ -45,30 +49,31 @@ export default function AuthFormBackground({

{children}
-
+
{/* DESKTOP ONLY */} - {mascotsVisibility && ( - mascots peeping - )} background clouds and music notes + grass asset + mascots peeping {/* MOBILE ONLY */} - {mascotsVisibility && ( - mobile mascots - )} + mobile mascots
); diff --git a/app/(pages)/(hackers)/_components/AuthForms/LoginForm.tsx b/app/(pages)/(hackers)/_components/AuthForms/LoginForm.tsx index 244e5f77b..06302ac54 100644 --- a/app/(pages)/(hackers)/_components/AuthForms/LoginForm.tsx +++ b/app/(pages)/(hackers)/_components/AuthForms/LoginForm.tsx @@ -37,7 +37,7 @@ export default function LoginForm() {
-

{errors.submit}

{fields.map((field) => (
@@ -128,13 +126,12 @@ export default function AuthForm({ valid ? styles.valid : null }`} > - {buttonText} + {loading ? 'Checking...' : buttonText}
+

{errors.submit}

- - {loading && }
); } diff --git a/app/(pages)/_components/AuthForm/HackerAuthForm.module.scss b/app/(pages)/_components/AuthForm/HackerAuthForm.module.scss index 67bc7f03a..f904b94f7 100644 --- a/app/(pages)/_components/AuthForm/HackerAuthForm.module.scss +++ b/app/(pages)/_components/AuthForm/HackerAuthForm.module.scss @@ -39,9 +39,9 @@ border: none; outline: none; padding: 12px; - font-size: 18px; + font-size: 1rem; //16px font-weight: 400; - color: #005271; + color: #3F3F3F; } } } @@ -57,6 +57,7 @@ font-weight: 400; line-height: 145%; letter-spacing: 0.36px; + color: #3F3F3F; @include tablet-l { //tailwind md font-size: 0.875rem; //14px @@ -65,7 +66,7 @@ .submit_button { padding: 12px 24px; - font-size: 1.125rem; + font-size: 1rem; //16px font-weight: 600; line-height: normal; font-style: normal; @@ -78,6 +79,7 @@ border-radius: 20px; opacity: 0.3; margin-top: 40px; + width: 100%; } .valid { @@ -88,4 +90,6 @@ .error_msg { color: var(--text-error); font-size: 0.75rem; + text-align: end; + margin-top: 4px; } diff --git a/public/hackers/login/clouds_and_music.svg b/public/hackers/login/clouds_and_music.svg new file mode 100644 index 000000000..5686ec860 --- /dev/null +++ b/public/hackers/login/clouds_and_music.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/hackers/login/grass_bottom.svg b/public/hackers/login/grass_bottom.svg new file mode 100644 index 000000000..c48f56913 --- /dev/null +++ b/public/hackers/login/grass_bottom.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + From 00c2c8b8f6dfd9fcf24b21dce4f1c0872bcea6fa Mon Sep 17 00:00:00 2001 From: michelleyeoh Date: Wed, 25 Feb 2026 14:38:56 -0800 Subject: [PATCH 5/5] asset order --- .../AuthFormBackground/AuthFormBackground.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/app/(pages)/(hackers)/_components/AuthFormBackground/AuthFormBackground.tsx b/app/(pages)/(hackers)/_components/AuthFormBackground/AuthFormBackground.tsx index fe2e36ee8..f072b977f 100644 --- a/app/(pages)/(hackers)/_components/AuthFormBackground/AuthFormBackground.tsx +++ b/app/(pages)/(hackers)/_components/AuthFormBackground/AuthFormBackground.tsx @@ -54,18 +54,19 @@ export default function AuthFormBackground({ background clouds and music notes grass asset mascots peeping {/* MOBILE ONLY */}