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..f072b977f 100644 --- a/app/(pages)/(hackers)/_components/AuthFormBackground/AuthFormBackground.tsx +++ b/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 ( -
-
-
- hackdavis logo -
- Angel Cow -
-

{title}

-

{subtitle}

-
-
+
+
+
+ Angel Cow +

+ {title} +

+

+ {subtitle} +

-
{children}
+
{children}
- -
+
+ {/* DESKTOP ONLY */} + background clouds and music notes grass asset + mascots peeping + {/* MOBILE ONLY */} + mobile mascots - {mascotsVisibility && ( - mascots - )}
); diff --git a/app/(pages)/(hackers)/_components/AuthForms/LoginForm.tsx b/app/(pages)/(hackers)/_components/AuthForms/LoginForm.tsx index 75b0ee726..06302ac54 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, }, @@ -37,7 +37,7 @@ export default function LoginForm() { diff --git a/app/(pages)/_components/AuthForm/AuthForm.tsx b/app/(pages)/_components/AuthForm/AuthForm.tsx index 491f3f79d..45be525d1 100644 --- a/app/(pages)/_components/AuthForm/AuthForm.tsx +++ b/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({
-

{errors.submit}

{fields.map((field) => (
@@ -91,13 +89,12 @@ export default function AuthForm({
))} + {linkText && ( + + {linkText} + + )}
- - {linkText && ( - - {linkText} - - )}
@@ -129,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 6aff3e7e1..f904b94f7 100644 --- a/app/(pages)/_components/AuthForm/HackerAuthForm.module.scss +++ b/app/(pages)/_components/AuthForm/HackerAuthForm.module.scss @@ -3,35 +3,20 @@ .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 { display: flex; flex-direction: column; - gap: 40px; - - @include tablet-s { - gap: 20px; - } + gap: 12px; div { display: flex; @@ -45,30 +30,18 @@ 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; padding: 12px; - font-size: 18px; + font-size: 1rem; //16px font-weight: 400; - color: #005271; - - @include tablet-s { - border-radius: var(--b-radius-med); - } + color: #3F3F3F; } } } @@ -76,28 +49,24 @@ .bottom { display: flex; flex-direction: row; - justify-content: space-between; } .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; - margin-left: 12px; + color: #3F3F3F; - @include tablet-s { - font-size: 0.75rem; - letter-spacing: 0.24px; - margin-left: 8px; + @include tablet-l { //tailwind md + font-size: 0.875rem; //14px } } .submit_button { padding: 12px 24px; - font-size: 1.125rem; + font-size: 1rem; //16px font-weight: 600; line-height: normal; font-style: normal; @@ -110,13 +79,7 @@ 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; - } + width: 100%; } .valid { @@ -127,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 @@ + + + + + + + + + + + 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 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +