From df059961a68d382826d23d7c99892a1ab1c96bc3 Mon Sep 17 00:00:00 2001
From: Afifah Hadi <hadiafifah@gmail.com>
Date: Thu, 12 Mar 2026 14:29:57 -0700
Subject: [PATCH 1/3] implemented styling changes for judge login

---
 app/(pages)/_components/AuthForm/AuthForm.tsx |  46 ++++---
 .../AuthForm/JudgeAuthForm.module.scss        | 114 ++++++++++++------
 .../AuthFormBackground.module.scss            |  85 ++++++++++++-
 .../AuthFormBackground/AuthFormBackground.tsx |  12 +-
 .../AuthForms/ForgotPasswordForm.tsx          |   2 +-
 .../_components/AuthForms/LoginForm.tsx       |   4 +-
 public/judges/login/pink_cloud.svg            |   3 +
 7 files changed, 194 insertions(+), 72 deletions(-)
 create mode 100644 public/judges/login/pink_cloud.svg

diff --git a/app/(pages)/_components/AuthForm/AuthForm.tsx b/app/(pages)/_components/AuthForm/AuthForm.tsx
index defba9205..e9cba2f91 100644
--- a/app/(pages)/_components/AuthForm/AuthForm.tsx
+++ b/app/(pages)/_components/AuthForm/AuthForm.tsx
@@ -4,8 +4,7 @@ import Link from 'next/link';
 import Image from 'next/image';
 
 import useAuthForm from '@hooks/useAuthForm';
-import Froggy from 'public/judges/login/LogIn_Froggy.svg';
-import Drumstick from 'public/judges/login/LogIn_DrumStick.svg';
+import arrowRight from '@public/icons/arrow-right.svg';
 import hackerStyles from './HackerAuthForm.module.scss';
 import judgeStyles from './JudgeAuthForm.module.scss';
 
@@ -55,6 +54,14 @@ export default function AuthForm({
     onSuccess,
   });
 
+  const hasTypedInput = fields.some((field) => {
+    if (field.type === 'checkbox') {
+      return false;
+    }
+    const value = formValues[field.name];
+    return String(value ?? '').trim().length > 0;
+  });
+
   return (
     <div className={styles.container}>
       <form onSubmit={handleSubmit} className={styles.form}>
@@ -98,35 +105,26 @@ export default function AuthForm({
         </div>
 
         <div className={styles.bottom_container}>
-          {role === 'judge' && (
-            <div className={styles.froggy_container}>
-              <Image
-                src={Drumstick}
-                alt="froggy_drumstick"
-                width={10}
-                height={10}
-                className={styles.drumstick}
-              />
-              <Image
-                src={Froggy}
-                alt="froggy"
-                width={50}
-                height={50}
-                className={styles.froggy}
-              />
-            </div>
-          )}
-
           <div className={styles.bottom}>
             <div />
             <button
               type="submit"
               disabled={loading || !valid}
               className={`${styles.submit_button} ${
-                valid ? styles.valid : null
-              }`}
+                role === 'judge' && hasTypedInput ? styles.filled : null
+              } ${valid ? styles.valid : null}`}
             >
-              {loading ? 'Checking...' : buttonText}
+              <span className={styles.submit_content}>
+                {loading ? 'Checking...' : buttonText}
+                {role === 'judge' ? (
+                  <Image
+                    src={arrowRight}
+                    alt=""
+                    aria-hidden="true"
+                    className={styles.submit_arrow}
+                  />
+                ) : null}
+              </span>
             </button>
           </div>
           <p className={styles.error_msg}>{errors.submit}</p>
diff --git a/app/(pages)/_components/AuthForm/JudgeAuthForm.module.scss b/app/(pages)/_components/AuthForm/JudgeAuthForm.module.scss
index f704d13f1..e99564237 100644
--- a/app/(pages)/_components/AuthForm/JudgeAuthForm.module.scss
+++ b/app/(pages)/_components/AuthForm/JudgeAuthForm.module.scss
@@ -1,14 +1,19 @@
 .container {
   width: 100%;
-  height: 60vh;
-  border-radius: var(--b-radius);
+  display: flex;
+  height: 100%;
+  min-height: 100%;
+  border-radius: 28px;
+  color: #000;
 }
 
 .form {
   display: flex;
   flex-direction: column;
-  align-items: space-between;
+  justify-content: flex-start;
   height: 100%;
+  width: 100%;
+  color: #000;
 
   .input_container {
     position: relative;
@@ -39,16 +44,22 @@
   }
 
   input {
-    padding-top: var(--small-medium-spacer);
-    padding-left: var(--small-spacer);
+    height: 76px;
+    border: 1.5px solid #5e5e65;
+    border-radius: 16px;
+    background: #fff;
+    padding: 30px 16px 10px 16px;
     width: 100%;
+    font-size: 1.75rem;
+    color: #000;
   }
 
   label {
     position: absolute;
-    margin-top: var(--tiny-spacer);
-    left: var(--small-spacer);
-    font-size: 0.9rem;
+    top: 10px;
+    left: 16px;
+    font-size: 0.95rem;
+    color: #8b8b8b;
     pointer-events: none;
   }
 }
@@ -63,7 +74,14 @@
 .fields {
   display: flex;
   flex-direction: column;
-  gap: var(--small-spacer);
+  gap: 20px;
+}
+
+.top_container {
+  color: #000;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
 }
 
 .error {
@@ -72,49 +90,73 @@
 
 .bottom_container {
   display: flex;
-  justify-content: center;
+  justify-content: flex-end;
   margin-top: auto;
   flex-direction: column;
+  padding-top: 24px;
+}
+
+.bottom {
+  width: 100%;
 }
 
 .submit_button {
-  padding: 15px 18px;
-  font-size: 1.125rem;
+  padding: 12px 24px;
+  font-size: 1.5rem;
   font-weight: 700;
   line-height: normal;
-  color: var(--text-light);
-  border: none;
-  border-radius: var(--b-radius);
-  background-color: var(--background-secondary-light);
+  color: #000;
+  border: 1px solid #e6e6ef;
+  border-radius: 9999px;
+  background-color: #fff;
   cursor: not-allowed;
   width: 100%;
-  opacity: 0.7;
+  opacity: 1;
 }
 
-.valid {
-  background-color: var(--background-secondary);
-  opacity: 1;
-  cursor: pointer;
+.submit_content {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
 }
 
-.froggy_container {
-  // display: flex;
-  justify-content: flex-end;
-  position: relative;
+.submit_arrow {
+  width: 22px;
+  height: 22px;
+  filter: brightness(0);
+}
 
-  img {
-    position: absolute;
-  }
+.filled {
+  background-color: #000;
+  color: #fff;
+  border-color: #000;
 
-  .froggy {
-    z-index: 1;
-    left: 280px;
-    top: -59px;
+  .submit_arrow {
+    filter: brightness(0) invert(1);
   }
+}
+
+.valid {
+  background-color: #000;
+  color: #fff;
+  border-color: #000;
+  opacity: 1;
+  cursor: pointer;
 
-  .drumstick {
-    z-index: 2;
-    left: 277px;
-    top: -47px;
+  .submit_arrow {
+    filter: brightness(0) invert(1);
   }
 }
+
+.froggy_container {
+  display: none;
+}
+
+.forgot {
+  color: #000;
+  text-align: center;
+  text-decoration: none;
+  font-size: 1rem;
+  margin-top: 8px;
+}
diff --git a/app/(pages)/judges/_components/AuthFormBackground/AuthFormBackground.module.scss b/app/(pages)/judges/_components/AuthFormBackground/AuthFormBackground.module.scss
index 0bc86a9d9..dad8d2087 100644
--- a/app/(pages)/judges/_components/AuthFormBackground/AuthFormBackground.module.scss
+++ b/app/(pages)/judges/_components/AuthFormBackground/AuthFormBackground.module.scss
@@ -1,10 +1,85 @@
 .container {
+  min-height: 100vh;
+  display: flex;
   flex-direction: column;
-  padding: var(--spacer) var(--small-spacer);
-  align-content: space-around;
-  height: 100vh;
+  justify-content: center;
+  align-items: center;
+  padding: 32px 24px 48px;
+  background: #fafaff;
+  color: #000;
 }
 
 .section {
-  margin-bottom: var(--spacer);
-}
\ No newline at end of file
+  width: min(100%, 560px);
+}
+
+.logo_section {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 40px;
+}
+
+.logo_container {
+  position: relative;
+  width: 128px;
+  height: 128px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.logo_container::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: url('/judges/login/pink_cloud.svg') center/contain no-repeat;
+  animation: spin_cloud 12s linear infinite;
+}
+
+.logo_container :global(img) {
+  width: 74px;
+  height: 74px;
+  position: relative;
+  z-index: 1;
+  filter: brightness(0) invert(1);
+}
+
+.title_section {
+  text-align: center;
+  margin-bottom: 28px;
+}
+
+.title_section h3 {
+  font-size: clamp(2rem, 5vw, 3.5rem);
+  line-height: 1.05;
+  margin: 0 0 12px;
+  color: #000;
+}
+
+.title_section p {
+  margin: 0;
+  font-size: clamp(1rem, 2.6vw, 1.75rem);
+  color: #4e4e54;
+}
+
+.form_section {
+  width: min(100%, 560px);
+  height: 48vh;
+  display: flex;
+  justify-content: space-between;
+}
+
+.form_section > div {
+  width: 100%;
+  height: 100%;
+}
+
+@keyframes spin_cloud {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
diff --git a/app/(pages)/judges/_components/AuthFormBackground/AuthFormBackground.tsx b/app/(pages)/judges/_components/AuthFormBackground/AuthFormBackground.tsx
index 3d087e017..61a8bc26e 100644
--- a/app/(pages)/judges/_components/AuthFormBackground/AuthFormBackground.tsx
+++ b/app/(pages)/judges/_components/AuthFormBackground/AuthFormBackground.tsx
@@ -14,18 +14,22 @@ export default async function AuthFormBackground({
 }) {
   return (
     <div className={styles.container}>
-      <div className={styles.section}>
-        <Image src={hd_logo} alt="hd_logo" height={50} width={50} />
+      <div className={`${styles.section} ${styles.logo_section}`}>
+        <div className={styles.logo_container}>
+          <Image src={hd_logo} alt="hd_logo" height={74} width={74} />
+        </div>
       </div>
 
-      <div className={styles.section}>
+      <div className={`${styles.section} ${styles.title_section}`}>
         <h3>
           <b>{title}</b>
         </h3>
         <p style={{ whiteSpace: 'pre-line' }}>{subtitle}</p>
       </div>
 
-      <div className={styles.section}>{children}</div>
+      <div className={`${styles.section} ${styles.form_section}`}>
+        {children}
+      </div>
     </div>
   );
 }
diff --git a/app/(pages)/judges/_components/AuthForms/ForgotPasswordForm.tsx b/app/(pages)/judges/_components/AuthForms/ForgotPasswordForm.tsx
index d276f9d9b..ed68bc037 100644
--- a/app/(pages)/judges/_components/AuthForms/ForgotPasswordForm.tsx
+++ b/app/(pages)/judges/_components/AuthForms/ForgotPasswordForm.tsx
@@ -32,7 +32,7 @@ export default function ForgotPasswordForm() {
     <AuthForm
       role="judge"
       fields={formFields}
-      buttonText="Send Email →"
+      buttonText="Send Email"
       initialValues={{
         email: '',
       }}
diff --git a/app/(pages)/judges/_components/AuthForms/LoginForm.tsx b/app/(pages)/judges/_components/AuthForms/LoginForm.tsx
index cdef401ec..75662b1d3 100644
--- a/app/(pages)/judges/_components/AuthForms/LoginForm.tsx
+++ b/app/(pages)/judges/_components/AuthForms/LoginForm.tsx
@@ -20,7 +20,7 @@ export default function LoginForm() {
     {
       name: 'email' as const,
       type: 'email',
-      label: 'Email',
+      label: 'Username',
       placeholder: '',
       readOnly: false,
     },
@@ -37,7 +37,7 @@ export default function LoginForm() {
     <AuthForm
       role="judge"
       fields={formFields}
-      buttonText="Log in →"
+      buttonText="Log in"
       linkText="Forgot Password?"
       linkHref="/judges/login/forgot-password"
       initialValues={{
diff --git a/public/judges/login/pink_cloud.svg b/public/judges/login/pink_cloud.svg
new file mode 100644
index 000000000..5807ab139
--- /dev/null
+++ b/public/judges/login/pink_cloud.svg
@@ -0,0 +1,3 @@
+<svg width="109" height="109" viewBox="0 0 109 109" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M54.5 0.5C62.1378 0.5 68.864 4.39518 72.8066 10.3037C79.7722 8.91326 87.2824 10.9155 92.6836 16.3164C98.0841 21.7172 100.085 29.2269 98.6953 36.1924C104.605 40.1346 108.5 46.8614 108.5 54.5C108.5 62.1382 104.604 68.8641 98.6953 72.8066C100.086 79.7723 98.0843 87.2823 92.6836 92.6836C87.2823 98.0843 79.7723 100.086 72.8066 98.6953C68.8641 104.604 62.1382 108.5 54.5 108.5C46.8614 108.5 40.1347 104.605 36.1924 98.6953C29.2269 100.085 21.7172 98.0841 16.3164 92.6836C10.9155 87.2824 8.91326 79.7722 10.3037 72.8066C4.39518 68.864 0.499999 62.1378 0.5 54.5C0.500001 46.8618 4.39488 40.1347 10.3037 36.1924C8.91368 29.227 10.9157 21.7171 16.3164 16.3164C21.7171 10.9157 29.227 8.91373 36.1924 10.3037C40.1347 4.3949 46.8618 0.500001 54.5 0.5Z" fill="#FCBAC1" stroke="#005271"/>
+</svg>

From b51a88c907993b1b4a85c09a4d06f1abde7c388b Mon Sep 17 00:00:00 2001
From: michelleyeoh <michellew.yeoh@gmail.com>
Date: Tue, 24 Mar 2026 13:40:19 -0700
Subject: [PATCH 2/3] fixed login

---
 app/(pages)/_components/AuthForm/AuthForm.tsx | 12 ++-----
 .../AuthForm/JudgeAuthForm.module.scss        | 33 ++++++++-----------
 .../AuthFormBackground.module.scss            | 15 ++++-----
 3 files changed, 22 insertions(+), 38 deletions(-)

diff --git a/app/(pages)/_components/AuthForm/AuthForm.tsx b/app/(pages)/_components/AuthForm/AuthForm.tsx
index e9cba2f91..9e25b9708 100644
--- a/app/(pages)/_components/AuthForm/AuthForm.tsx
+++ b/app/(pages)/_components/AuthForm/AuthForm.tsx
@@ -54,14 +54,6 @@ export default function AuthForm({
     onSuccess,
   });
 
-  const hasTypedInput = fields.some((field) => {
-    if (field.type === 'checkbox') {
-      return false;
-    }
-    const value = formValues[field.name];
-    return String(value ?? '').trim().length > 0;
-  });
-
   return (
     <div className={styles.container}>
       <form onSubmit={handleSubmit} className={styles.form}>
@@ -111,8 +103,8 @@ export default function AuthForm({
               type="submit"
               disabled={loading || !valid}
               className={`${styles.submit_button} ${
-                role === 'judge' && hasTypedInput ? styles.filled : null
-              } ${valid ? styles.valid : null}`}
+                valid ? styles.valid : null
+              }`}
             >
               <span className={styles.submit_content}>
                 {loading ? 'Checking...' : buttonText}
diff --git a/app/(pages)/_components/AuthForm/JudgeAuthForm.module.scss b/app/(pages)/_components/AuthForm/JudgeAuthForm.module.scss
index e99564237..3fdb00dc7 100644
--- a/app/(pages)/_components/AuthForm/JudgeAuthForm.module.scss
+++ b/app/(pages)/_components/AuthForm/JudgeAuthForm.module.scss
@@ -44,21 +44,20 @@
   }
 
   input {
-    height: 76px;
+    height: 64px;
     border: 1.5px solid #5e5e65;
-    border-radius: 16px;
+    border-radius: 8px;
     background: #fff;
-    padding: 30px 16px 10px 16px;
+    padding: 30px 12px 10px 12px;
     width: 100%;
-    font-size: 1.75rem;
     color: #000;
   }
 
   label {
     position: absolute;
-    top: 10px;
-    left: 16px;
-    font-size: 0.95rem;
+    top: 7px;
+    left: 12px;
+    font-size: 14px;
     color: #8b8b8b;
     pointer-events: none;
   }
@@ -66,15 +65,16 @@
 
 .error_msg {
   color: var(--text-error);
-  font-size: 0.875rem;
-  font-weight: 500;
-  margin-bottom: 4px;
+  font-size: 0.75rem;
+  line-height: 1.5;
+  text-align: end;
+  margin-top: 4px;
+  min-height: calc(0.75rem * 1.5 + 4px); // calcs space taken up by error message
 }
 
 .fields {
   display: flex;
   flex-direction: column;
-  gap: 20px;
 }
 
 .top_container {
@@ -101,12 +101,11 @@
 }
 
 .submit_button {
-  padding: 12px 24px;
-  font-size: 1.5rem;
+  padding: 15px 32px;
+  font-size: 18px;
   font-weight: 700;
   line-height: normal;
   color: #000;
-  border: 1px solid #e6e6ef;
   border-radius: 9999px;
   background-color: #fff;
   cursor: not-allowed;
@@ -149,14 +148,10 @@
   }
 }
 
-.froggy_container {
-  display: none;
-}
-
 .forgot {
   color: #000;
   text-align: center;
   text-decoration: none;
   font-size: 1rem;
-  margin-top: 8px;
+  font-size: 14px;
 }
diff --git a/app/(pages)/judges/_components/AuthFormBackground/AuthFormBackground.module.scss b/app/(pages)/judges/_components/AuthFormBackground/AuthFormBackground.module.scss
index dad8d2087..3ada759af 100644
--- a/app/(pages)/judges/_components/AuthFormBackground/AuthFormBackground.module.scss
+++ b/app/(pages)/judges/_components/AuthFormBackground/AuthFormBackground.module.scss
@@ -2,9 +2,9 @@
   min-height: 100vh;
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  justify-content: flex-end;
   align-items: center;
-  padding: 32px 24px 48px;
+  padding: 66px 32px;
   background: #fafaff;
   color: #000;
 }
@@ -16,7 +16,7 @@
 .logo_section {
   display: flex;
   justify-content: center;
-  margin-bottom: 40px;
+  margin-bottom: 36px;
 }
 
 .logo_container {
@@ -50,16 +50,13 @@
 }
 
 .title_section h3 {
-  font-size: clamp(2rem, 5vw, 3.5rem);
-  line-height: 1.05;
-  margin: 0 0 12px;
+  font-size: 32px;
   color: #000;
 }
 
 .title_section p {
-  margin: 0;
-  font-size: clamp(1rem, 2.6vw, 1.75rem);
-  color: #4e4e54;
+  font-size: 16px;
+  color: #444;
 }
 
 .form_section {

From 4b2cbbe86c3bd6d912d1eafda8c160c000bcccde Mon Sep 17 00:00:00 2001
From: michelleyeoh <michellew.yeoh@gmail.com>
Date: Tue, 24 Mar 2026 13:46:53 -0700
Subject: [PATCH 3/3] change reset password text

---
 .../judges/_components/AuthForms/ForgotPasswordForm.tsx       | 2 +-
 app/(pages)/judges/login/forgot-password/page.tsx             | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/(pages)/judges/_components/AuthForms/ForgotPasswordForm.tsx b/app/(pages)/judges/_components/AuthForms/ForgotPasswordForm.tsx
index ed68bc037..8953a7e0d 100644
--- a/app/(pages)/judges/_components/AuthForms/ForgotPasswordForm.tsx
+++ b/app/(pages)/judges/_components/AuthForms/ForgotPasswordForm.tsx
@@ -32,7 +32,7 @@ export default function ForgotPasswordForm() {
     <AuthForm
       role="judge"
       fields={formFields}
-      buttonText="Send Email"
+      buttonText="Reset Password"
       initialValues={{
         email: '',
       }}
diff --git a/app/(pages)/judges/login/forgot-password/page.tsx b/app/(pages)/judges/login/forgot-password/page.tsx
index 35e8ae312..82727a26b 100644
--- a/app/(pages)/judges/login/forgot-password/page.tsx
+++ b/app/(pages)/judges/login/forgot-password/page.tsx
@@ -12,8 +12,8 @@ export default async function ForgotPasswordPage() {
 
   return (
     <AuthFormBackground
-      title="Hello!"
-      subtitle="Please enter your email below to receive a reset password email."
+      title="Hello Judge!"
+      subtitle="Please enter your email below."
     >
       <ForgotPasswordForm />
     </AuthFormBackground>